forked from M3-Academy/challenge-landing-page
Adiciona Middle Images Responsive Mobile
This commit is contained in:
parent
b55242aa4d
commit
c3795954ae
@ -97,30 +97,34 @@ body{
|
||||
padding: 0 7.4%;
|
||||
}
|
||||
|
||||
.middle-images-section{
|
||||
.middle-images-section-desktop{
|
||||
width: 100%;
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.middle-images-wrapper{
|
||||
.middle-images-wrapper-desktop{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
bottom: -62px;
|
||||
}
|
||||
|
||||
.middle-images{
|
||||
.middle-images-desktop{
|
||||
display: flex;
|
||||
width: 90%;
|
||||
justify-content: center;
|
||||
gap: 2%;
|
||||
}
|
||||
|
||||
.middle-image{
|
||||
.middle-image-desktop{
|
||||
width: 33.3%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.middle-images-section-mobile{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bottom-cards{
|
||||
padding: 10.1% 0 5.7% 0;
|
||||
display: flex;
|
||||
@ -262,6 +266,58 @@ body{
|
||||
width: 85.5%;
|
||||
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){
|
||||
|
22
index.html
22
index.html
@ -66,12 +66,22 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="middle-images-section">
|
||||
<div class="middle-images-wrapper">
|
||||
<div class="middle-images">
|
||||
<img class="middle-image" 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" src="/assets/images/Middle-Image-03.png" alt="Terceira Imagem Middle">
|
||||
<section class="middle-images-section-desktop">
|
||||
<div class="middle-images-wrapper-desktop">
|
||||
<div class="middle-images-desktop">
|
||||
<img class="middle-image-desktop" src="/assets/images/Middle-Image-01.png" alt="Primeira Imagem Middle">
|
||||
<img class="middle-image-desktop" src="/assets/images/Middle-Image-02.png" alt="Segunda 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>
|
||||
</section>
|
||||
|
Loading…
Reference in New Issue
Block a user