@Ao-chi
Posted
Hi! For the google fonts, I think you did it right, it's just that Fraunces font is nowhere to be found in google fonts (at least on my end).
As for centering the div there are several ways and this is one of it. I checked your code in chrome dev tools and found some improvements to make.
First, you can add a height: 100% to both your <html> and <body> elements.
Then you could get rid of the margins on your container class <div> like this:
.container {
grid-template-rows: 0;
grid-template-columns: repeat(2, 1fr);
width: 600px;
height: 450px;
}
After that you can add this to your body styling:
body {
background-color: hsl(30, 38%, 92%);
margin: 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 10px;
}
This is one way you could do it.
Also I found that you nested an <a> element in your button. you can get rid of the <a> also for it is not a valid markup as per HTML5 Spec Document from W3C.
For the <img> you should add an alt attribute like this
<img class="cart" src="images/icon-cart.svg" alt="cart icon">
Hope this helps! Have a nice day~
Marked as helpful
