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

criação do card bottom e ajustes

Browse Source
This commit is contained in:
Matheus Mariosa 2022-10-13 00:08:41 -03:00
parent a9d0e33de6
commit db981564fd
2 changed files with 68 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
assents/style/estilo.css
View File

@ -112,6 +112,39 @@ body {
max-width: 300px;
text-align: center;
}
/*Card de baixo */
.amiga {
display: flex;
align-items: center;
justify-content: center;
padding: 0 4.5rem;
}
.card-total-bottom {
display: flex;
align-items: center;
justify-content: center;
padding-bottom: 6rem;
gap: 16px;
width: 100%;
margin: 0;
}
.card-foto-bottom {
display: block;
margin-bottom: 15px;
width: 28%;
height: 47%;
}
.text-card-bottom {
font-size: 16px;
line-height: 24px;
max-width: 367px;
text-align: center;
}
@media screen and (max-width: 1023px) {
.banner-big {

36
index.html
View File

@ -54,28 +54,48 @@
</figure>
</section>
<div>
<div class="gallery-box">
<div class="gallery">
<img src="./assents/imagens/card-middle-1.png" alt="computador quase completamente fechado">
<img src="./assents/imagens/card-middle-2.png" alt="computador meio completamente fechado">
<img src="./assents/imagens/card-middle-3.png" alt="computador quase completamente fechado de lado">
</div>
</div>
<section class="amiga">
<div class="card-total-bottom">
<figure class="card card-bottom">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-money.png" alt="foto de dinheiro">
<figcaptionet class="text-card-bottom">
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>
<figure class="card card-bottom">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-coin.png" alt=" foto de moeda">
<figcaption class="text-card-bottom">
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>
<figure class="card card-bottom">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-laptop.png" alt="foto de um laptop">
<figcaption class="text-card-bottom">
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>
<figure class="card card-bottom">
<img class="card-foto-bottom" src="./assents/imagens/card-bottom-group.png" alt="foto de um celular">
<figcaption class="text-card-bottom">
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>
</div>
</section>
Lorem ipsum dolor sit amet
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.
</main>
</body>