Finished this challenge

Community feedback

• 

  Kristoffer•220

  @KristofferLePosted 2 months ago

  Hi,

  Great work on the card, it looks good, but with some minor changes I think it could look even better.

  Start off: In the body tag, put an

  body {
   display: flex; // insert these
   align-items: center; // insert these
   justify-content: center; //insert these
  }
  

  This will make sure that the card will be centered in the window. ( In this case you can even put an flex-direction: column; in the main tag ) so that your name will appear underneath instead of to the left.

  For the card itself, you should put an min-width so it that the content doesnt stretch out to much so that the content spills outside. And also play around with the gaps a little more til you get the to same spacing as in the design. Instead of a gap of 5px, I would say go for around 16px - 20px.

  And what can be good to start with is rem / em units that are much more responsive.

  Also an quick and easy reset rule can be this

  * {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  

  Last but not least, dont forget the alt for the img tags, and aria-label for links. Great work!

  0