Skip to content
Submitted over 2 years ago

profile card component main | css and media-queries

Francisco Prado•80
@franciscoprado4
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

Another challenge for this awesome page, any suggestion is welcomed.

Regards to Y'all.

Francisco.

Community feedback

  • notabhishekrai•180
    @notabhishekraiPosted over 2 years ago

    pretty good job

    however, the background image is messed up in large screen view and mobile view.

    few suggestion:

    1. use mobile first approach and work your way up
    2. your card is the <main> and your <body> is container in this case, so you don't need that extra div wrapper.
    3. use body{ display: grid; place-content: center; } that will center the card for you.
    4. use ::before and ::after in body to add those bubbles (pseudo classes), you can get rid of two more divs that way.
    5. its good practice to not give height to the elements but in this case it won't do harm so just keep this in mind.

    other than that good job. keep stylin !

    P.S you can use my solution as reference, its not perfect but i hope you can learn new things;

    0
    Francisco Prado•80
    @franciscoprado4Posted over 2 years ago

    @notabhishekrai Thanks for your suggestions.

    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