EleonoraOtz/challenge-landing-page-eleonora-otz
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/images/bottom-infocard-image.png → assets/images/bottom-infocard-image-desktop.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 362 KiB

After

Width:  |  Height:  |  Size: 362 KiB

BIN
assets/images/bottom-infocard-image-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

99
assets/styles/main.css
View File

@ -144,8 +144,8 @@ body {
gap: 16px;
justify-content: center;
align-items: center;
margin: auto auto 80px;
width: 100%;
margin: auto auto 108px;
width: 88%;
}
.bottom-card {
@ -158,13 +158,16 @@ body {
min-height: 287px;
gap: 25px;
height: auto;
width: 22%;
}
.bottom-card-image {
display: block;
max-width: 102px;
/*max-width: 102px;*/
width: 29%;
}
.bottom-card-description {
max-width: 367px;
font-size: 16px;
@ -172,6 +175,49 @@ body {
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*/
@media screen and (max-width: 320px) {
@ -233,13 +279,17 @@ body {
max-width: 102px;
}
.gallery-area {
padding: 0;
}
.gallery-wrapper {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 89%;
gap: 23px 14px;
transform: translateY(32px);
margin-bottom: 80px;
margin-bottom: 98px;
}
.gallery-area-images-01 {
@ -258,12 +308,10 @@ body {
.bottom-cards {
flex-direction: column;
margin-bottom: 131px;
}
.bottom-card {
width: 88%;
max-height: 332px;
}
.bottom-card-image {
@ -273,11 +321,45 @@ body {
.bottom-card-description {
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*/
/*rever as fontes, precisam estar no dobro do tamanho do desktop*/
@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;
@ -296,10 +378,9 @@ body {
font-size: 21px;
line-height: 31px;
padding: 0 0 36px;
}
.top-infocard-image {
width: 20%;
}
}
}

30
index.html
View File

@ -73,7 +73,7 @@
</figcaption>
</figure>
</section>
<!-- Área da galeria-->
<div class="gallery-area">
@ -96,7 +96,7 @@
<section class="bottom-cards">
<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">
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 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">
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 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">
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 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">
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>
</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>
</body>
</html>