Design comparison
Solution retrospective
Constructive Criticism wanted! Totally new to coding, any help is always appreciated.
Community feedback
- @elaineleungPosted over 2 years ago
Hi Jessie, well done on this second challenge! You got a lot of good feedback already, so I'll just keep this short; it looks like the font family is not showing up at all and the browser had to use its default style. You firstly need to go to the Google Font page for the design's font, and then select the font faces you need; a link should pop up in the sidebar, and you can paste that inside your
<head>
tag before yourlink
tag forstyle.css
. After that, you can use the font by adding it to the font family property. I see you addedfont-family: Outfit
but because you don't have the link in thehead
yet, it's not working as it should.Also, you got some accessibility issues in your report; all you need is to add a
main
tag (say, right under thebody
) and you should be good to go!Great job, and keep going!
0 - @VCaramesPosted over 2 years ago
Good job on this project!
To center your content add
height: 100vh
to yourbody
.Wrap both your eth and days classes into one container.
In that container add the following:
display: flex;
justify-content: space-between;
align-items: center;
Remove from your eth container the
padding-right: 110px
As for adding the overlay to you image, I'm attaching a link that will explain how to do it. https://www.w3schools.com/howto/howto_css_image_overlay.asp
Keep up the good work.
0 - @DavidMorgadePosted over 2 years ago
Hello Jessie, welcome to coding and welcome to the community!
You did a pretty good job for a first starting challenge, you even used flex to center the component of the screen!, the only issue is that the
body
doesn't have theheight
of the current viewport to center your component vertically, try adding to your body aheight: 100vh
, with this, your component will be fully centered.Good job and keep going!, hope my feedback helped you!
0
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