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

<fix>[middle-banner]:ajustei a faixa atras das imagens e desloquei as fotos de posição, mobile e desktop

Browse Source
This commit is contained in:
Gabriel Ferraz Nogueira 2022-10-10 22:25:24 -03:00
parent b8469c4436
commit 2680d8fd83
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
assets/styles/main.css
View File

@ -61,7 +61,7 @@ body{
grid-template-columns: repeat(3, 1fr);
gap: 21px;
justify-content: center;
padding: 178px 20% 80px;
padding: 178px 20% 50px;
}
.top-card{
display: flex;
@ -74,7 +74,7 @@ body{
.top-card-image{
display: block;
min-width: 5vw;
margin-bottom: 30px;
margin-bottom: 80px;
}
.top-card-description{
font-weight: 400;
@ -82,21 +82,24 @@ body{
line-height: 24px;
text-align: center;
}
.middle-banner-wrapper{
background: #E0E0E0
}
.banners-middle{
display: flex;
justify-content: center;
gap: 39px;
background: #E0E0E0
position: relative;
bottom: -62px;
}
.middle-banner{
display: block;
width: 29%;
}
.middle-banner-image{
display: block;
width: 100%;
}
@media screen and (min-width: 2500px) {
.page-header{
padding: 58px
@ -136,9 +139,9 @@ body{
"b1 b2"
"b3 b3";
justify-items: center;
padding: 32px 23px;
padding: 0px 23px 0px;
gap: 14px;
bottom: 60px;
top: 32px;
}
.middle-banner{
width: 100%;

27
index.html
View File

@ -60,24 +60,23 @@
</figure>
</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 class="middle-banner-wrapper">
<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>
</div>
</main>
</body>
</html>