Kristoffer

Latest comments

• 

  Tahsin YT•270

  @Randomgituser69

  Submitted 10 months ago

  What are you most proud of, and what would you do differently next time?

  Not sure

  What challenges did you encounter, and how did you overcome them?

  I was struggling with picture and background color on hover. When i added pseudo classes before after, setted the position to absolute, button position relative, aria label, the image inside the button and more. It fixed the problem. For more details you can check out my repository in github. Also was struggling with icon svgs. After putting the icon svg images inside the and setting the display to inline block. It fixed the problem.

  

  Finished this challenge

  1

  20
  

  Kristoffer•240

  @KristofferLe

  Posted 10 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

  Marked as helpful