Blog Preview Card with Vanilla HTML & CSS

Hey Rowan! this looks really good 😎

I just have some suggestions:

• I recommend doing a small reset to the styles that come by default in the browsers. To do this, you can apply a couple of properties to the universal selector *, with this you will make your site look the same in all browsers:

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

• I leave you the task of researching the reset CSS and the box-sizing: border-box
• Do not use height: 100vh instead use min-height: 100vh this will prevent the content from being cut off on certain occasions
• To center the content you can apply flexbox to the body:

body {
    min-height: 100vh;
    background-color: hsl(47, 88%, 63%);
    font-family: 'Figtree', sans-serif;
    font-size: 16px;
    line-height: 150%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

• With these changes your div with class main-container will no longer be necessary, you can delete it and leave the div with class preview-card

Hi. Your solution look great.

However i have point out that in design when the card is in active or hover state the drop-shadow increases to 16px from 8px in both x and y directions which looks like the card pops up. Also on hover the heading color change to yellow color. Also check the color and font weight of published date with design.

Apart from this your solution is awesome.