Design comparison
Solution retrospective
responsiveness
What challenges did you encounter, and how did you overcome them?positioning
What specific areas of your project would you like help with?position colors and fonts
Community feedback
- @Grego14Posted 7 months ago
Hello! congratulations on completing the challenge.
My recommendations are the following:
Don't skip the headings, instead of using an h3 to make the title use an h1.
Also avoid making these types of margins, as it can be difficult to read and maintain:
h3{ margin: 1rem 2rem 1rem 1rem; } p { margin: 0rem 1rem 2rem 1rem; }
You can directly add a padding the .container element like this:
.container{ padding: 1.5rem; }
And since your .container element is a flex container you can use the gap property to separate all its child elements, the final styles would be these:
.container{ padding: 1.5rem; gap: 1rem; }
Now speaking of the fonts, I recommend that you download them yourself and add them to the styles using the @font-face at-rule
It would be something like this:
(styles.css file)
@font-face{ font-family: 'font name'; src: url('./path/to/font') format('font format'); font-weight: ...; font-display: ...; }
If you don't know some of those properties like font-display, You can read about them in mdn.
0@Grego14Posted 7 months agoI forgot to talk about colors.
You can create them using variables like this:
:root{ --my-color: #FFFFFF }
Then to use them you use the var() function like this:
p{ color: var(--my-color) }
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