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."
class="container-midle-img" />
<!-- CONTAINER CARD -->
<!-- CONTAINER CARD TRIPLO-->
<div class="container-cards">
<div class="card-1">
<figure>
@ -85,20 +85,53 @@
<div class="mosaic-img2">
<figure>
<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>"
</figure>
alt="Notebook, posicionado de frente, imagem feita de cima para baixo. Aberto em cerca de 60 graus">
</figure>
</div>
<div class="mosaic-img3">
<figure>
<img class="mosaic-wrapper-img img3" src="assets/img/computer-img-3.png"
alt="Notebook, posicionado de angulo lateal. Aberto em 60">
</figure>
</div>
</figure>
</div>
</section>
</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>
</main>
</body>

33
style/style.css
View File

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