Lucas 👾• 104,420
@correlucas
Posted
👾Hello Cristina, congratulations for your new solution!
I've check your code and I've some tips for you:
The background should go inside the body and not the container, this way you've it display full width/height.
body {
background-color: #d6e2f0;
font-family: "Outfit", sans-serif;
}
.main {
/* background-color: #d6e2f0; */
margin-top: 80px;
width: 90%;
padding: 10px 0 100px 0;
/* box-shadow: 0 20px 20px 5px rgb(0 0 0 / 5%); */
border-radius: 10px;
}
.container {
box-shadow: 0 20px 20px 5px rgb(0 0 0 / 5%);
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 230px;
background-color: #fff;
text-align: center;
border-radius: 10px;
margin-top: 100px;
box-shadow: 0 20px 20px 5px rgb(0 0 0 / 5%);
}
You can build this with a simple approach, without using unnecessary divs, all you need is a single <main> or <div> to keep all the content inside, and nothing more. The ideal structure is the div and only the image, heading and paragraph.
See the structure below:
<body>
<main>
<img>
<h1></h1>
<p></p>
</main>
</body>
👋 I hope this helps you and happy coding!
Marked as helpful
0
