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

5
index.html
View File

@ -60,24 +60,23 @@
</figure> </figure>
</div> </div>
<div class="middle-banner-wrapper">
<div class="banners-middle"> <div class="banners-middle">
<figure class="middle-banner Banner1"> <figure class="middle-banner Banner1">
<img class="middle-banner-image" src="./assets/imagens/middle-banner-1.png" alt="Segunda-imagem-do-meio"/> <img class="middle-banner-image" src="./assets/imagens/middle-banner-1.png" alt="Segunda-imagem-do-meio"/>
</figure> </figure>
<figure class="middle-banner Banner2"> <figure class="middle-banner Banner2">
<img class="middle-banner-image" src="./assets/imagens/middle-banner-2.png" alt="Segunda-imagem-do-meio"/> <img class="middle-banner-image" src="./assets/imagens/middle-banner-2.png" alt="Segunda-imagem-do-meio"/>
</figure> </figure>
<figure class="middle-banner Banner3"> <figure class="middle-banner Banner3">
<img class="middle-banner-image " src="./assets/imagens/middle-banner-3.png" alt="Segunda-imagem-do-meio"/> <img class="middle-banner-image " src="./assets/imagens/middle-banner-3.png" alt="Segunda-imagem-do-meio"/>
</figure> </figure>
</div> </div>
</div>
<div> <div>
</div> </div>
</main> </main>
</body> </body>
</html> </html>