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 {

50
index.html
View File

@ -54,28 +54,48 @@
</figure>
</section>
<div>
<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 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>
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.
<section class="amiga">
<div class="card-total-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.
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.
<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>
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.
<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>