Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello Alana Caporale, Congratulations on completing this challenge!
Amazing solution! I’ve just opened the solution’s live site and I liked the job you’ve done a lot. I’ve some suggestions for you:
Align also the mobile version using
min-height: 100vh
andflexbox
body { min-height: 100vh; background: no-repeat url(./images/bg-pattern-top-mobile.svg), no-repeat bottom right url(./images/bg-pattern-bottom-mobile.svg); font-family: 'League Spartan', sans-serif; font-size: 1rem; width: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
The html markup for this solution its built entirely with
<div>
and you can improve it using semantics tags to describe what its inside each block of content. You can replace the<div>
that wraps each card with<article>
you can wrap the paragraph with the quote with the tag<blockquote>
this way you'll wrap each block of element with the best tag in this situation. Pay attention that<div>
is only a block element without meaning.✌️ I hope this helps you and happy coding!
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