feat: Adiciona o texto do infocard de baixo desktop e mobile

This commit is contained in:
Eleonora Otz de Mendonça Soares 2022-10-13 10:50:02 -03:00
parent c5dafe1e13
commit 463c42c62d
4 changed files with 114 additions and 15 deletions

View File

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 362 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 247 KiB

View File

@ -144,8 +144,8 @@ body {
gap: 16px; gap: 16px;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: auto auto 80px; margin: auto auto 108px;
width: 100%; width: 88%;
} }
.bottom-card { .bottom-card {
@ -158,13 +158,16 @@ body {
min-height: 287px; min-height: 287px;
gap: 25px; gap: 25px;
height: auto; height: auto;
width: 22%;
} }
.bottom-card-image { .bottom-card-image {
display: block; display: block;
max-width: 102px; /*max-width: 102px;*/
width: 29%;
} }
.bottom-card-description { .bottom-card-description {
max-width: 367px; max-width: 367px;
font-size: 16px; font-size: 16px;
@ -172,6 +175,49 @@ body {
text-align: center; text-align: center;
} }
/*Infocard de baixo*/
.bottom-infocard {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin: 0 0 178px;
width: 100%;
padding: 0 72px;
}
.bottom-infocard-text {
text-align: center;
margin-bottom: 50px;
width: 29%;
}
.bottom-infocard-title {
font-size: 32px;
font-weight: 600;
line-height: 39px;
}
.bottom-infocard-description {
font-size: 16px;
line-height: 24px;
}
.bottom-infocard-image {
display: block;
width: 100%;
}
.bottom-infocard-image-desktop {
width: 71%;
}
.bottom-infocard-image-mobile {
display: none;
}
/*Versão mobile*/ /*Versão mobile*/
@media screen and (max-width: 320px) { @media screen and (max-width: 320px) {
@ -233,13 +279,17 @@ body {
max-width: 102px; max-width: 102px;
} }
.gallery-area {
padding: 0;
}
.gallery-wrapper { .gallery-wrapper {
display: grid; display: grid;
grid-template-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr);
width: 89%; width: 89%;
gap: 23px 14px; gap: 23px 14px;
transform: translateY(32px); transform: translateY(32px);
margin-bottom: 80px; margin-bottom: 98px;
} }
.gallery-area-images-01 { .gallery-area-images-01 {
@ -258,12 +308,10 @@ body {
.bottom-cards { .bottom-cards {
flex-direction: column; flex-direction: column;
margin-bottom: 131px; margin-bottom: 131px;
} }
.bottom-card { .bottom-card {
width: 88%; width: 88%;
max-height: 332px;
} }
.bottom-card-image { .bottom-card-image {
@ -273,11 +321,45 @@ body {
.bottom-card-description { .bottom-card-description {
font-size: 14px; font-size: 14px;
} }
.bottom-infocard {
margin: 0;
padding: 0;
} }
.bottom-infocard-text {
margin-bottom: 50px;
gap: 10px;
width: 84%;
align-items: center;
}
.bottom-infocard-title {
font-size: 24px;
line-height: 29px;
}
.bottom-infocard-description {
font-size: 16px;
line-height: 24px;
}
.bottom-infocard-image-desktop {
display: none;
}
.bottom-infocard-image-mobile {
display: flex;
width: 100%;
margin-bottom: 50px;
}
}
/*Versão telas 4k*/ /*Versão telas 4k*/
/*rever as fontes, precisam estar no dobro do tamanho do desktop*/
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
/*rever as fontes, precisam estar no dobro do tamanho do desktop*/
.top-infocard-text { .top-infocard-text {
width: 52%; width: 52%;
margin: 95px 0 95px; margin: 95px 0 95px;
@ -296,7 +378,6 @@ body {
font-size: 21px; font-size: 21px;
line-height: 31px; line-height: 31px;
padding: 0 0 36px; padding: 0 0 36px;
} }
.top-infocard-image { .top-infocard-image {

View File

@ -96,7 +96,7 @@
<section class="bottom-cards"> <section class="bottom-cards">
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-image-01.png" alt="Imagem do card de baixo: " /> <img class="bottom-card-image bottom-card-image-01" src="./assets/images/bottom-card-image-01.png" alt="Imagem do card de baixo: Nota dinheiro" />
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -104,7 +104,7 @@
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-image-02.png" alt="Imagem do card de baixo: " /> <img class="bottom-card-image bottom-card-image-02" src="./assets/images/bottom-card-image-02.png" alt="Imagem do card de baixo: Moeda" />
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -112,7 +112,7 @@
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-image-03.png" alt="Imagem do card de baixo: " /> <img class="bottom-card-image bottom-card-image-03" src="./assets/images/bottom-card-image-03.png" alt="Imagem do card de baixo: Computador" />
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
@ -120,13 +120,31 @@
</figure> </figure>
<figure class="bottom-card"> <figure class="bottom-card">
<img class="bottom-card-image" src="./assets/images/bottom-card-image-04.png" alt="Imagem do card de baixo: " /> <img class="bottom-card-image bottom-card-image-04" src="./assets/images/bottom-card-image-04.png" alt="Imagem do card de baixo: Celular" />
<figcaption class="bottom-card-description"> <figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption> </figcaption>
</figure> </figure>
</section> </section>
<!--Infocard de baixo-->
<div class="bottom-infocard">
<article class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</article>
<figure class="bottom-infocard-image">
<img class="bottom-infocard-image-desktop" src="./assets/images/bottom-infocard-image-desktop.png" alt="Imagem do infocard de baixo" />
<img class="bottom-infocard-image-mobile" src="./assets/images/bottom-infocard-image-mobile.png" alt="Imagem do infocard de baixo" />
</figure>
</div>
</main> </main>
</body> </body>
</html> </html>