feat: Adiciona as imagens da galeria
This commit is contained in:
parent
a80e43c164
commit
5c5e9c17c8
|
Before Width: | Height: | Size: 234 KiB After Width: | Height: | Size: 234 KiB |
|
Before Width: | Height: | Size: 215 KiB After Width: | Height: | Size: 215 KiB |
|
Before Width: | Height: | Size: 318 KiB After Width: | Height: | Size: 318 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 2.9 KiB |
@ -2,6 +2,7 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Inter' , sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
@ -71,14 +72,13 @@ body {
|
||||
}
|
||||
|
||||
.top-infocard-image {
|
||||
width: 16%;
|
||||
width: 17%;
|
||||
}
|
||||
|
||||
/*Cards do Topo*/
|
||||
|
||||
.top-cards {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
display: flex;
|
||||
background: #FFFFFF;
|
||||
gap: 21px;
|
||||
justify-content: center;
|
||||
@ -91,13 +91,18 @@ body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 47px 25px 27px 26px;
|
||||
justify-content: center;
|
||||
padding: 35px 26px 27px 26px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.23);
|
||||
min-height: 287px;
|
||||
width: 18%;
|
||||
gap: 27px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.top-card-image {
|
||||
display: block;
|
||||
margin-bottom: 22px;
|
||||
width: 34%;
|
||||
}
|
||||
|
||||
.top-card-description {
|
||||
@ -107,11 +112,36 @@ body {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.gallery-area {
|
||||
background: #E0E0E0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.gallery-wrapper {
|
||||
position: relative;
|
||||
transform: translateY(4rem);
|
||||
display: flex;
|
||||
gap: 39px;
|
||||
justify-content: center;
|
||||
width: 88%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.gallery-area-images {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.gallery-area-image {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
/*Versão mobile*/
|
||||
|
||||
@media screen and (max-width: 320px) {
|
||||
.header-logo {
|
||||
width: 180px
|
||||
|
||||
/*Apresentar padding lateral para espaçar melhor as informações*/
|
||||
}
|
||||
}
|
||||
|
||||
@ -126,7 +156,7 @@ body {
|
||||
}
|
||||
|
||||
.top-infocard {
|
||||
margin: 73px 0 90px;
|
||||
margin: 73px 28px 91px;
|
||||
}
|
||||
|
||||
.top-infocard-text {
|
||||
@ -152,27 +182,49 @@ body {
|
||||
|
||||
.top-infocard-image {
|
||||
width: 58%;
|
||||
|
||||
}
|
||||
|
||||
.top-cards {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 36px 26px;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/*Versão telas de 1025px até 1200px*/
|
||||
.top-card {
|
||||
width: 84%;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) and (max-width: 1200px) {
|
||||
.top-cards {
|
||||
grid-template-columns: repeat(2, max-content);
|
||||
padding: 36px 26px;
|
||||
.top-card-image {
|
||||
max-width: 102px;
|
||||
}
|
||||
|
||||
.gallery-wrapper {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
width: 89%;
|
||||
gap: 23px 14px;
|
||||
transform: translateY(32px);
|
||||
}
|
||||
|
||||
.gallery-area-images {
|
||||
}
|
||||
|
||||
.gallery-area-images-01 {
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.gallery-area-images-02 {
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.gallery-area-images-03 {
|
||||
grid-column: 1/2 span;
|
||||
order: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/*Versão telas 4k*/
|
||||
|
||||
@media screen and (min-width: 2500px) {
|
||||
/*rever as fontes, precisam estar no dobro do tamanho do desktop*/
|
||||
.top-infocard-text {
|
||||
width: 52%;
|
||||
margin: 95px 0 95px;
|
||||
|
||||
54
index.html
54
index.html
@ -49,36 +49,46 @@
|
||||
<!-- Cards do topo -->
|
||||
|
||||
<section class="top-cards">
|
||||
<div class="top-card">
|
||||
<figure class="top-card-image">
|
||||
<img src="./assets/images/top-card-image-01.png" alt="Imagem do card do topo: Loja" />
|
||||
<figure class="top-card">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-01.png" alt="Imagem do card do topo: Loja" />
|
||||
|
||||
<figcaption class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
<figure class="top-card">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-02.png" alt="Imagem do card do topo: Bolsa de compras" />
|
||||
|
||||
<div class="top-card">
|
||||
<figure class="top-card-image">
|
||||
<img src="./assets/images/top-card-image-02.png" alt="Imagem do card do topo: Bolsa de compras" />
|
||||
<figcaption class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
<figure class="top-card">
|
||||
<img class="top-card-image" src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo: Moeda" />
|
||||
|
||||
<div class="top-card">
|
||||
<figure class="top-card-image">
|
||||
<img src="./assets/images/top-card-image-03.png" alt="Imagem do card do topo: Moeda" />
|
||||
<figcaption class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
|
||||
<p class="top-card-description">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="gallery-area">
|
||||
<div class="gallery-wrapper">
|
||||
<figure class="gallery-area-images gallery-area-images-01">
|
||||
<img class="gallery-area-image" src="./assets/images/gallery-area-image-01.png" alt="Imagem da galeria: Computador 1" />
|
||||
</figure>
|
||||
|
||||
<figure class="gallery-area-images gallery-area-images-02">
|
||||
<img class="gallery-area-image" src="./assets/images/gallery-area-image-02.png" alt="Imagem da galeria: Computador 2" />
|
||||
</figure>
|
||||
|
||||
<figure class="gallery-area-images gallery-area-images-03">
|
||||
<img class="gallery-area-image" src="./assets/images/gallery-area-image-03.png" alt="Imagem da galeria: Computador 3" />
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user