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; line-height: 24px;
text-align: center; text-align: center;
} }
.Banners-middle{ .banners-middle{
display: grid; display: flex;
grid-area: 1fr 1fr 1fr;
justify-content: center; justify-content: center;
gap: 36px; gap: 39px;
background: #E0E0E0 background: #E0E0E0
} }
.middle-banner{ .middle-banner{
display: block; display: block;
width: 29%;
}
.middle-banner-image{
width: 100%; width: 100%;
} }
@media screen and (min-width: 2500px) { @media screen and (min-width: 2500px) {
.page-header{ .page-header{
padding: 58px padding: 58px
@ -101,7 +104,7 @@ body{
} }
@media screen and (max-width: 1025px) { @media screen and (max-width: 1024px) {
.main-banner-desktop{ .main-banner-desktop{
display: none; display: none;
} }
@ -124,15 +127,29 @@ body{
.top-cards{ .top-cards{
padding: 90px 7%; padding: 90px 7%;
} }
}
@media screen and (max-width: 992px){
.top-infocard-image{ .top-infocard-image{
width: 34%; width: 34%;
} }
/* top-cards */ .banners-middle{
.top-cards{ display: grid;
grid-template-columns: repeat(2, 1fr); 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;
} }
} }

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