Design comparison
Solution retrospective
I ran into a roadblock with my CSS, I couldn't find a way to move the text over the image border to get that final look. I tried my best though
Community feedback
- @MuyiwaSakaPosted almost 2 years ago
Hello asublime.
You can make use of CSS Grid or Flexbox to lay out your html in the manner you want. See the links below for more detail: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Grids https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
For instance, I would have centered the page by setting the body element's display as grid and then set the place-content tag to have a value of center. It is a good place to start before moving on to the rest of the page.
Also, please read the style.md file in your download and then visit Google fonts to identify the specified fonts and how to copy them into your page.
A suggestion might be to store the specified fonts and colors as CSS variable at the top of your page.
In general, just take each little effect you want to implement separately and work at it till done. Don't get too discouraged if one works and the others don't immediately do.
Hope this was useful. Cheers.
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