Cria cards do topo desktop e mobile

This commit is contained in:
Vitor Soares 2022-10-09 15:15:38 -03:00
parent c4260ccbb3
commit 183ac11346
5 changed files with 73 additions and 2 deletions

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

View File

@ -40,7 +40,7 @@ body {
} }
} }
/* Cria top infocard */ /* Cria top infocard desktop e mobile */
.top-infocard { .top-infocard {
display: flex; display: flex;
align-items: center; align-items: center;
@ -102,3 +102,47 @@ body {
margin-right: 70px; margin-right: 70px;
} }
} }
/* Cria cards topo desktop e mobile*/
.top-cards {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
padding: 74px 0;
background-color: #f0f0f0;
}
.top-card {
display: flex;
flex-direction: column;
align-items: center;
padding: 26px 26px 34px;
background-color: #fff;
box-shadow: 8px 4px 20px rgba(0, 0, 0, 0.23);
}
.top-card-image {
display: block;
margin-bottom: 26px;
}
.top-card-description {
max-width: 300px;
font-size: 16px;
line-height: 24px;
text-align: center;
}
@media screen and (max-width: 768px) {
.top-cards {
grid-template-columns: 1fr;
padding: 36px 26px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards {
grid-template-columns: repeat(2, max-content);
}
}

View File

@ -28,7 +28,7 @@
</figure> </figure>
</div> </div>
<!--Cria top infocard--> <!--Cria top infocard desktop e mobile-->
<section class="top-infocard"> <section class="top-infocard">
<div class="top-infocard-text"> <div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <h2 class="top-infocard-subtitle">Lorem ipsum</h2>
@ -41,6 +41,33 @@
<img class="top-infocard-image" src="assets/imagens/top-infocard-image.png" alt="Banner do Infocard do Topo" /> <img class="top-infocard-image" src="assets/imagens/top-infocard-image.png" alt="Banner do Infocard do Topo" />
</section> </section>
<!--Cria cards topo desktop e mobile-->
<section class="top-cards">
<div class="top-card">
<img class="top-card-image" src="assets/imagens/top-infocard-image1.png" alt="Imagem do Primeiro Card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<img class="top-card-image" src="assets/imagens/top-infocard-image2.png" alt="Imagem do Segundo Card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card">
<img class="top-card-image" src="assets/imagens/top-infocard-image3.png" alt="Imagem do Terceiro Card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
</main> </main>
</body> </body>
</html> </html>