Design comparison
Solution retrospective
Hey, Can anyone tell me, if I did it right or wrong?
Community feedback
- @correlucasPosted about 2 years ago
๐พHello again Osama , congratulations for your new solution!
๐ฏ Your solution its almost done and Iโve some tips to help you to improve it:
Hey Osama, I've fixed the background svg images, all I have do was do to a new import for the images and add
min-height: 100vh
to make the body have 100% of the screen height, see the code changed below:body { background-repeat: no-repeat; font-family: 'League Spartan', sans-serif; font-size: 15px; min-height: 100vh; background-image: url(../images/bg-pattern-top-desktop.svg), url(../images/bg-pattern-bottom-desktop.svg); background-position: left -185px top -236px, right 10px bottom -300px; background-repeat: no-repeat, no-repeat; background-attachment: fixed, fixed; background-size: contain, contain; }
You did a really good work here putting everything together, something you can improve its your code html markup and semantics. 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!
Marked as helpful1 - @hyrongennikePosted about 2 years ago
Hi @osamanazakat,
Good job on the challenge just a few small things set a
max-width: 1440px
to prevent the content from getting to wide on large screens.Add the following rule to center the content on the page:
body { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
you can also use this on the other challenges to center elements like cards. Increase the font size of the .testimonials-header h1 and set
flex: 1;
on both the .testimonials-header and .ratings-container. Also addalign-items: center;
on the .ratings-header to center the content vertically. These are all for desktop.Hope these are helpful.
1@osamanazakatPosted about 2 years ago@hyrongennike Thanks Bro, I have a little problem with min and max width. I can't understand these properties. Can you explain little bit, how these properties work?
0@hyrongennikePosted about 2 years ago@osamanazakat Hi below is link to a post with examples.
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