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

Adiciona Middle Images Responsive Mobile

Browse Source
This commit is contained in:
danielmoliaribarbosa 2022-10-12 16:15:47 -03:00
parent b55242aa4d
commit c3795954ae
2 changed files with 76 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

64
assets/styles/main.css
View File

@ -97,30 +97,34 @@ body{
padding: 0 7.4%; padding: 0 7.4%;
} }
.middle-images-section{ .middle-images-section-desktop{
width: 100%; width: 100%;
background: #E0E0E0; background: #E0E0E0;
} }
.middle-images-wrapper{ .middle-images-wrapper-desktop{
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
bottom: -62px; bottom: -62px;
} }
.middle-images{ .middle-images-desktop{
display: flex; display: flex;
width: 90%; width: 90%;
justify-content: center; justify-content: center;
gap: 2%; gap: 2%;
} }
.middle-image{ .middle-image-desktop{
width: 33.3%; width: 33.3%;
display: block; display: block;
} }
.middle-images-section-mobile{
display: none;
}
.bottom-cards{ .bottom-cards{
padding: 10.1% 0 5.7% 0; padding: 10.1% 0 5.7% 0;
display: flex; display: flex;
@ -262,6 +266,58 @@ body{
width: 85.5%; width: 85.5%;
margin-bottom: 7.7%; margin-bottom: 7.7%;
} }
.middle-image-desktop{
display: none;
}
.middle-images-section-mobile{
display: flex;
margin-bottom: 16.9%;
padding-bottom: 10.9%;
width: 100%;
background: #E0E0E0;
}
.middle-images-wrapper-mobile{
display: flex;
justify-content: center;
position: relative;
bottom: -32px;
}
.middle-images-mobile{
display: flex;
justify-content: center;
gap: 3.5%;
flex-wrap: wrap;
}
.middle-image-mobile{
width: 42.76%;
height: 32.8%;
}
.middle-image-mobile2{
margin-top: 1%;
width: 89%;
height: 71.6%;
}
.bottom-cards{
flex-direction: column;
align-items: center;
}
.bottom-card{
width: 84.6%;
margin-bottom: 3.8%;
}
.bottom-card-images{
padding-bottom: 3.5%;
}
.bottom-card-image{
width: 100%;
padding-top: 29%;
}
.bottom-card-description{
font-size: 14px;
width: 86.2%;
margin: 0 0 14%;
padding: 0 12px;
}
} }
@media screen and (min-width: 1025px){ @media screen and (min-width: 1025px){

22
index.html
View File

@ -66,12 +66,22 @@
</div> </div>
</section> </section>
<section class="middle-images-section"> <section class="middle-images-section-desktop">
<div class="middle-images-wrapper"> <div class="middle-images-wrapper-desktop">
<div class="middle-images"> <div class="middle-images-desktop">
<img class="middle-image" src="/assets/images/Middle-Image-01.png" alt="Primeira Imagem Middle"> <img class="middle-image-desktop" src="/assets/images/Middle-Image-01.png" alt="Primeira Imagem Middle">
<img class="middle-image" src="/assets/images/Middle-Image-02.png" alt="Segunda Imagem Middle"> <img class="middle-image-desktop" src="/assets/images/Middle-Image-02.png" alt="Segunda Imagem Middle">
<img class="middle-image" src="/assets/images/Middle-Image-03.png" alt="Terceira Imagem Middle"> <img class="middle-image-desktop" src="/assets/images/Middle-Image-03.png" alt="Terceira Imagem Middle">
</div>
</div>
</section>
<section class="middle-images-section-mobile">
<div class="middle-images-wrapper-mobile">
<div class="middle-images-mobile">
<img class="middle-image-mobile" src="/assets/images/Middle-Image-02.png" alt="Segunda Imagem Middle">
<img class="middle-image-mobile" src="/assets/images/Middle-Image-01.png" alt="Primeira Imagem Middle">
<img class="middle-image-mobile2" src="/assets/images/Middle-Image-03.png" alt="Terceira Imagem Middle">
</div> </div>
</div> </div>
</section> </section>