Skip to content
Submitted almost 2 years ago

Profile Card Component

Ar•420
@abdmud
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

I found combining and rotating the background images quite difficult - I am aware that I had to use transform to achieve this but couldn't manage to replicate the design. Any suggestions are welcome!

Community feedback

  • elidrc•80
    @elidrcPosted almost 2 years ago

    Hi @abdmud,

    Good solution, here you have some feedback:

    • Try to use the background css properties instead of img tag.

    • Use main tag to contain the card component.

    • Try to use the follow structure for the card component:

    <article class="card"> 
      <div class="card-header">
      </div> 
      <div class="card-body">
      </div>
      <div class="card-footer">
      </div>
</article>
    • Try to use rem unit measure instead px here you can find a good explanation of why use the rem unit.

    I hope this help you to improve your code. Happy codding.

    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