Skip to content
Submitted over 4 years ago

Profile card using HTML, CSS, Bootstrap rows and columns, card

Monica•100
@monicamclaughlan
A solution to the Profile card component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

This is my second attempt after some feedback from my first attempt. Still very early stages in learning, so all feedback is welcome.

Code

Please log in to post a comment

Log in

Community feedback

  • ApplePieGiraffe•30,525
    @ApplePieGiraffe

    Hey, Monica! 👋

    Great to hear you've completed your second challenge! Good effort on this one! 👏

    I suggest using CSS background images to add and position the background SVGs to your page. Doing so is easier and more intuitive and will keep your HTML cleaner. It should also get rid of the current overflow issue of the bottom-right background SVG, which is creating a horizontal scroll bar along the bottom of the page. Here's a helpful article that can help you get started with that (scroll down to the backgrounds sections).

    I also suggest using only one or two media queries for this challenge since nothing much (besides the position of the background SVGs, perhaps) changes from the desktop to mobile layouts.

    I think you can use flexbox to center the card component in the viewport (it's often easier and more foolproof). 😉

    Keep coding (and happy coding, too)! 😁

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord