@KristofferLe
Posted
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!
