Skip to content
Submitted about 1 year ago

basic css with nesting

SHANbic•100
@SHANbic
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

despite my pretty good skills in frontend development and css, i couldnt find a way to perfectly place the two background circles at their respective places

Community feedback

  • hitmorecode•6,250
    @hitmorecodePosted about 1 year ago

    Nice good effort, but there are a few things that you can fix

    • The banner in the card is not filling the card in the width, you can fix this by changing the width of the card to 350px
    • <div class="city">London</div> you should place the text inside a p tag.
    • The user's name should be bold, place the user's name inside a span tag and make it bold.
    • User name and age should be on the same line, use flexbox to do so.
    .user-infos div:nth-child(1) {
  display: flex;
  justify-content: center;
}
    • The city should also be in the middle of the card

    When setting up your html make it good practice to set the structure up like this

    <body>
	<main>
	 /* everything goes in here */
	</main>	
</body>

    As for the background circles, you can do it with position and transform

    1
    SHANbic•100
    @SHANbicPosted about 1 year ago

    hey @hitmorecode i guess you took a look at the design comparison provided by frontend mentor. For some reason it is not showing my real work, you can take a look at the real preview site.

    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