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

<feat>[adição dos main banners]:< nas versão mobile e desktop>

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-10-10 21:12:03 -03:00
parent f4843c9a71
commit b8469c4436
2 changed files with 48 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
assets/styles/main.css
View File

@ -82,18 +82,21 @@ body{
line-height: 24px;
text-align: center;
}
.Banners-middle{
display: grid;
grid-area: 1fr 1fr 1fr;
.banners-middle{
display: flex;
justify-content: center;
gap: 36px;
gap: 39px;
background: #E0E0E0
}
.middle-banner{
display: block;
width: 29%;
}
.middle-banner-image{
width: 100%;
}
@media screen and (min-width: 2500px) {
.page-header{
padding: 58px
@ -101,7 +104,7 @@ body{
}
@media screen and (max-width: 1025px) {
@media screen and (max-width: 1024px) {
.main-banner-desktop{
display: none;
}
@ -124,15 +127,29 @@ body{
.top-cards{
padding: 90px 7%;
}
}
@media screen and (max-width: 992px){
.top-infocard-image{
width: 34%;
}
/* top-cards */
.top-cards{
grid-template-columns: repeat(2, 1fr);
.banners-middle{
display: grid;
grid-template-areas:
"b1 b2"
"b3 b3";
justify-items: center;
padding: 32px 23px;
gap: 14px;
bottom: 60px;
}
.middle-banner{
width: 100%;
}
.Banner1{
grid-area: b1;
}
.Banner2{
grid-area: b2;
} .Banner3{
grid-area: b3;
}
}

27
index.html
View File

@ -45,7 +45,7 @@
<img class="top-infocard-image" src="./assets/imagens/top-infocard-image.png" alt="Imagem-do-infocard-do-topo"/>
</section>
<section class="top-cards">
<div class="top-cards">
<figure class="top-card card-1">
<img class="top-card-image" src="./assets/imagens/top-card-image-1.svg" alt="Primeira-card-do-topo"/>
<figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
@ -58,13 +58,26 @@
<img class="top-card-image" src="./assets/imagens/top-card image-3.svg" alt="Terceiro-card-do-topo"/>
<figcaption class="top-card-description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
</section>
</div>
<div class="banners-middle">
<figure class="middle-banner Banner1">
<img class="middle-banner-image" src="./assets/imagens/middle-banner-1.png" alt="Segunda-imagem-do-meio"/>
</figure>
<figure class="middle-banner Banner2">
<img class="middle-banner-image" src="./assets/imagens/middle-banner-2.png" alt="Segunda-imagem-do-meio"/>
</figure>
<figure class="middle-banner Banner3">
<img class="middle-banner-image " src="./assets/imagens/middle-banner-3.png" alt="Segunda-imagem-do-meio"/>
</figure>
</div>
<div>
</div>
<figure class="Banners-middle">
<img class="middle-banner" src="./assets/imagens/middle-banner-1.png" alt="Primeira-imagem-do-meio"/>
<img class="middle-banner" src="./assets/imagens/middle-banner-2.png" alt="Segunda-imagem-do-meio"/>
<img class="middle-banner" src="./assets/imagens/middle-banner-3.png" alt="Terceira-imagem-do-meio"/>
</figure>
</main>
</body>
</html>