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

feat: cria container compospoto por quatro infocard

Browse Source
This commit is contained in:
Emmanuel Vitor Pereira de Jesus 2022-10-13 07:11:50 -03:00
parent ca81dc340b
commit 4ee0eb4f7a
2 changed files with 67 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
index.html
View File

@ -45,7 +45,7 @@
alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas." alt="Computadores alinhados. Um em cuma e dois embaixo, ligados por setas."
class="container-midle-img" /> class="container-midle-img" />
<!-- CONTAINER CARD --> <!-- CONTAINER CARD TRIPLO-->
<div class="container-cards"> <div class="container-cards">
<div class="card-1"> <div class="card-1">
<figure> <figure>
@ -85,20 +85,53 @@
<div class="mosaic-img2"> <div class="mosaic-img2">
<figure> <figure>
<img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png" <img class="mosaic-wrapper-img img2" src="assets/img/computer-img-2.png"
alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus>" alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus">
</figure> </figure>
</div> </div>
<div class="mosaic-img3"> <div class="mosaic-img3">
<figure> <figure>
<img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png" <img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png"
alt="Notebook, posicionado de angulo lateal. Aberto em 60"> alt="Notebook, posicionado de angulo lateal. Aberto em 60">
</figure>
</div> </div>
</figure>
</div> </div>
</section> </section>
</div> </div>
<div style="width: 100%; height: 300px; "> <!-- REGIAO ABAIXO DO BANNER MOSAICO -->
<!-- CONTAINER CARD QUADRUPLO-->
<div class="container-cards container-infocard">
<div class="card-1">
<figure>
<img class="icon-card" src="assets/svg/money-icon.svg" alt="Icone de cédulas.">
<figcaption class="subtitle-card">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>
<div class="card-2">
<figure>
<img class="icon-card" src="assets/svg/coin-icon.svg" alt="icone de mão segurando uma moeda">
<figcaption class="subtitle-card">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>
<div class="card-3">
<figure>
<img class="icon-card" src="assets/svg/laptop-icon.svg" alt="icone de laptop aberto.">
<figcaption class="subtitle-card">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>
<div class="card-4">
<figure>
<img class="icon-card" src="assets/svg/phone-icon.svg" alt="icone de um smartphone">
<figcaption class="subtitle-card">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>
</div> </div>
</main> </main>
</body> </body>

33
style/style.css
View File

@ -94,12 +94,19 @@ header {
gap: 0px 22px; gap: 0px 22px;
grid-auto-flow: row; grid-auto-flow: row;
grid-template-areas: grid-template-areas:
"card-1 card-2 card-3"; "card-1 card-2 card-3 card-4";
justify-content: center; justify-content: center;
width: 100%; width: 100%;
padding: 10% 22% 4%; padding: 10% 22% 4%;
} }
.container-infocard {
grid-template-columns: repeat(4, 1fr);
grid-template-areas:
"card-1 card-2 card-3 card-4";
padding: 130px 72px;
}
.card-1 { .card-1 {
grid-area: card-1; grid-area: card-1;
} }
@ -112,9 +119,14 @@ header {
grid-area: card-3; grid-area: card-3;
} }
.card-4 {
grid-area: card-4;
}
.card-1, .card-1,
.card-2, .card-2,
.card-3 { .card-3,
.card-4 {
background: var(--white); background: var(--white);
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
display: flex; display: flex;
@ -180,14 +192,16 @@ header {
display: block; display: block;
} }
/* Medias Queries*/ /* Medias Queries*/
@media screen and (min-width:2500px) { @media screen and (min-width:2500px) {
.container-cards { .container-cards {
padding: 6% 30% 4%; padding: 6% 30% 4%;
} }
.container-infocard {
padding: 130px 72px;
}
} }
@media screen and (max-width:1024px) { @media screen and (max-width:1024px) {
@ -256,6 +270,15 @@ header {
padding: 90px 32px 80px; padding: 90px 32px 80px;
} }
.container-infocard {
grid-template-rows: repeat(4, 1fr);
grid-template-areas:
"card-1"
"card-2"
"card-3"
"card-4";
}
.subtitle-card { .subtitle-card {
max-width: 72%; max-width: 72%;
margin: 0 auto; margin: 0 auto;