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 dos top card e adição das fotos dp meio

Browse Source
This commit is contained in:
Matheus Mariosa 2022-10-12 19:46:18 -03:00
parent d2e4fd9757
commit a9d0e33de6
2 changed files with 74 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
assents/style/estilo.css
View File

@ -8,7 +8,6 @@ body {
font-family: 'Inter', sans-serif;
}
/*Logo da M3 Academy*/
.page-header {
display: flex;
@ -26,7 +25,7 @@ body {
}
/*Banner do top*/
.banner-principal {
max-width: 100%;
width: 100%;
min-height: 19%;
}
@ -43,7 +42,11 @@ body {
height: 11%;
}
/*Imagem */
.theree-computer {
margin-bottom: 179px;
}
/*texto inicial*/
.text {
@ -78,8 +81,39 @@ body {
width: 45%;
}
/*Cards do topo*/
@media screen and (max-width: 1024px) {
.cards-top {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 26px 27px ;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.card-foto {
display: block;
margin-bottom: 27px;
width: 35%;
height: 46%;
}
.text-card {
font-size: 16px;
line-height: 24px;
max-width: 300px;
text-align: center;
}
@media screen and (max-width: 1023px) {
.banner-big {
display: none;
}
@ -90,12 +124,21 @@ body {
.text-description {
text-align: center;
margin: 0;
margin: 0 0 79px;
width: 100%;
}
.text-card {
max-width: max-content;
}
.theree-computer {
width: 239px;
height: 239px;
}
.cards-top {
grid-template-columns: 1fr;
margin: 0 32px;
}
}

35
index.html
View File

@ -37,20 +37,39 @@
<img class="theree-computer" src="./assents/imagens/three-computers.png" alt="três computadores">
</section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
<section class="cards-top">
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-shop.png" alt="Foto da loja"/>
<figcaption class="text-card"> 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.
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-shopping-bag.png" alt="Foto de bolsa da loja"/>
<figcaption class="text-card"> 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.
<figure class="card">
<img class="card-foto" src="./assents/imagens/card-top-coin.png" alt="Foto de uma moeda"/>
<figcaption class="text-card"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</figcaption>
</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>
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.
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. 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.
Lorem ipsum dolor sit amet