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

flex/grid approach

Jurjen 90

@snhmibby

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


Couldn't get the city name right without fucking up the html code to have it outside the 'name-age-city'-section. Would appreciate hints to get it working and have the city paragraph inside this section!!

Community feedback

Martha 510

@Mtc-21

Posted

Hello, your design is fine, I would only add the background images with a background-image:url() to the body, with background-position: place one to the left and the other to the right, with the following link you can support Link, with the positioning, I recommend you to work with vw so that they remain in the same place.

  • for your card to be centered you must set the html tag and the body in min-height:100vh, if you set only the body in height:100%, it will not work, as far as possible avoid using % or absolute units such as px, it is recommended to use rem or in some examples of use

  • there should be only one h1 tag in the document, normally inside the main, outside tags like div, section, article, etc, tags like section and article should have some descriptive title tag, between h2 and h6, I recommend you to read some html semantics, here some support links Link 1 Link 2

  • additionally it would be ideal that you see in the section of report the problems of accessibility or html that presents the site that you created, always they provide you a link of reference to correct the error.

Excellent work 👍

Marked as helpful

1

Jurjen 90

@snhmibby

Posted

@Mtc-21 Thanks for the ideas & references that's super helpful! :)

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