@joekotvas
@Randomgituser69
Submitted
What are you most proud of, and what would you do differently next time?
Lazy
What challenges did you encounter, and how did you overcome them?
Lazy
What specific areas of your project would you like help with?
Lazy
@joekotvas
Posted
Good work! There are a couple of ways you can vertically center your card on the page, bringing it closer to the original design concept.
You already have most of the code in place to do it using display: grid; on the body. Just add min-height: 100vh; and it should be good to go!
@ridoankhan
Submitted
@joekotvas
Posted
Great work on this component!
A few quick notes:
Hover state for article title
Don't forget about the yellow link hover state! The article title could also stand to be a heaver font-weight.
Sizing The way you specified the component width is interesting, but you will have better results if you specify border-box sizing for all elements:
* {
box-sizing: border-box;
}
And then remove the width: 50%; declaration on .card and declare max-width: 24rem; instead.
Also, if you make your Github repo public, people can view and interact with your code.
Marked as helpful
@Alijebbouri
Submitted
if u have any feedback tell me please
@joekotvas
Posted
Great job!
A few things you can do to tighten up the design are to set the image to max-width: 100%;, be a little more generous with padding, and use line-height: 1.5; on the article description. Pay close attention to padding and margin overall, as that will help your design breathe better.
It's also a great idea to center vertically as well as horizontally. You can do so by wrapping all your page content in a container and setting the following on the body tag:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}