@Grego14
Posted
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.
@Grego14
Posted
I 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)
}
