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 Bottom Infocard Responsive Mobile

Browse Source
This commit is contained in:
danielmoliaribarbosa 2022-10-12 17:00:33 -03:00
parent 6966156524
commit 58de6536da
3 changed files with 26 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/Banner-Bottom-Mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

24
assets/styles/main.css
View File

@ -184,12 +184,12 @@ body{
display: flex; display: flex;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
margin-bottom: 6.1%;
} }
.bottom-infocard-image{ .bottom-infocard-image-desktop{
width: 75%; width: 75%;
display: block; display: block;
margin-bottom: 6.1%;
} }
.page-footer{ .page-footer{
@ -300,6 +300,7 @@ body{
.bottom-cards{ .bottom-cards{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 14%;
} }
.bottom-card{ .bottom-card{
width: 84.6%; width: 84.6%;
@ -309,6 +310,7 @@ body{
padding-bottom: 3.5%; padding-bottom: 3.5%;
} }
.bottom-card-image{ .bottom-card-image{
display: block;
width: 100%; width: 100%;
padding-top: 29%; padding-top: 29%;
} }
@ -318,12 +320,30 @@ body{
margin: 0 0 14%; margin: 0 0 14%;
padding: 0 1%; padding: 0 1%;
} }
.bottom-infocard-image-desktop{
display: none;
}
.bottom-infocard-text{
display: flex;
flex-direction: column;
align-items: center;
width: 85%;
margin: 12% 0 19.8%;
}
.bottom-infocard-title{
font-size: 24px;
line-height: 29px;
margin-bottom: 2.2%;
}
} }
@media screen and (min-width: 1025px){ @media screen and (min-width: 1025px){
.main-banner-mobile{ .main-banner-mobile{
display: none; display: none;
} }
.bottom-infocard-image-mobile{
display: none;
}
} }
@media screen and (min-width: 2500px){ @media screen and (min-width: 2500px){

5
index.html
View File

@ -122,6 +122,9 @@
</section> </section>
<section class="bottom-infocard"> <section class="bottom-infocard">
<figure class="bottom-infocard-images">
<img class="bottom-infocard-image-mobile" src="/assets/images/Banner-Bottom-Mobile.png" alt="Banner do Infocard de Baixo Mobile">
</figure>
<div class="bottom-infocard-text"> <div class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2> <h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. <p class="bottom-infocard-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
@ -129,7 +132,7 @@
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p> Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div> </div>
<figure class="bottom-infocard-images"> <figure class="bottom-infocard-images">
<img class="bottom-infocard-image" src="/assets/images/Banner-Bottom-Desktop.png" alt="Banner do Infocard de Baixo"> <img class="bottom-infocard-image-desktop" src="/assets/images/Banner-Bottom-Desktop.png" alt="Banner do Infocard de Baixo Desktop">
</figure> </figure>
</section> </section>