Design comparison
Solution retrospective
Font weight was not working for the variable font, I should've specified a range then used font-variation-settings(not mandatory). like this
@font-face {
font-family: 'Inter';
font-weight: 100 900;
src: url(Inter-VariableFont_slnt\wght.ttf) format("truetype"))
}
h1{
font-family: 'Inter';
font-variation-settings: 'wght' 500; /*can get away with font-weight:500; */
}
What challenges did you encounter, and how did you overcome them?
Was my first time using @font-face rule to load up custom fonts.I'm still not a hundred percent sure if this is the right way to do it.
I always struggle with giving height to my body and container.Last time, when I used min-height on the body and had a height of 100% set on the container.The container wasn't filling up the whole page.So when I have a container and I want that container to take up the full page, is this the correct way?
body {
/*last time i used min-height here container wasn't taking up the full page */
height: 100vh;
}
.container{
height:100%;
}
So far i haven't had any issue with this
What specific areas of your project would you like help with?Not sure but I'm always surprised at how different the web pages looks when I submit the solution, like padding/margin and width/height looks completely different.
Community feedback
- @TheCookieNoidPosted 3 months ago
Great work mate, could be improved using padding to push the attribution section a little below and using font size for header tags to find a better size, all around it was great tho!
1
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord