Skip to content
Submitted about 3 years ago

flexbox, html, css

Nicole•10
@Nicoleyvette
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Profile card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  1. I had a hard time designing the circles as displayed in the example. I would love for someone to assist with the solution

  2. I choose the mobile version however I feel the sizing reflected that of the desktop version. Please provide feedback.

I am in the baby stages of learning HTML and CSS. I decided to try this project as I feel the best way for me to learn is to be hands on. The project is not perfect but its done. On to the next newbie challenge :)

Community feedback

  • jjjayed•270
    @Jane72-boopPosted about 3 years ago

    Hey there! Congrats on your first project. Just a couple of things to address.

    1. A lot of the issues you have right now is because of the lack of responsiveness, that's why the design is strictly for mobile. I highly recommend reading up on responsive web design and using @media queries.

    2. I also noticed that your fonts aren't working because you need to put font-family: Kumbh Sans The plus sign is not needed for the CSS part.

    3. Lastly, a cool trick. Surround the "26" text with a span tag, while still being inside the h1 tag. You can then select that span tag in the CSS and change its font weight to 400.

    Hope this helps.

    0

Please log in to post a comment

Log in with GitHub

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