Design comparison
Community feedback
- @beowulf1958Posted 5 months ago
Congratulations on completing the challenge. Your page looks good so far. Your html is very clean and readable, and your css very organized. That said, I have a few suggestions.
First, your "container" class has both flex-direction: column and flex-direction: row. You should remove the first and keep the second.
Next, it is good practice to keep the css DRY (don't repeat yourself). If you move font-family: Montserrat; font-weight: 500; to the body element, you can remove the other references to Montserrat. Similarly, since .productBrand and .price share common styles, you could combine the common styles and then style the differences:
.productBrand, .price{ font-size: 27px; font-weight: 700; font-family: Fraunces, sans-serif; } .productBrand{ margin-left: 20px; line-height: 1; margin-bottom: 10px; } .price{ color: var(--Dark_cyan); margin-left: 20px; }
Lastly (this is being picky, but...) the line breaks in the h1 are awkward. "Eau De Parfum" is one word in french. Eau should be behind the last <br /> next to De Parfum.
The next step is to make the page responsive. You will need to research ways of centering your content without using position: absolute. One way is to use flexbox, the other is to use grid. Check out other people's solution to this challenge to see what I mean.
Hope this helps, and keep on coding.
Marked as helpful1@manarboooPosted 5 months agoI appreciate your encouragement and feedback I'll definitely consider your instructions , Thanks @beowulf1958
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