Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

basic css with nesting

SHANbic 100

@SHANbic

Desktop design screenshot for the Profile card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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,230

@hitmorecode

Posted

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

@SHANbic

Posted

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
Discord logo

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