@Rhinozer0s
Posted
Hi coder, 👾
your solution is great! You have a good eye for the details. I have some recommondation for you.
Grid & Gap
Remove the margin of your <p>
elemets.
It is a popular technic to remove the margin of all elements before you start styling.
To create the distances you could use the gap
property in combination with display: flex;
or display: grid;
This could look like this:
*{
margin: 0;
padding: 0;
}
.modal{
display: flex;
flex-direction: column;
align-content: center;
row-gap: 1rem;
}
Semantic HTML
Also you sould use semantic html tags like <main>
for your modal or <h1>
for your headline. Here you can read more about that: https://www.w3schools.com/html/html5_semantic_elements.asp
I hope you find this helpful 🤝😉