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;
justify-content: center;
width: 100%;
margin-bottom: 6.1%;
}
.bottom-infocard-image{
.bottom-infocard-image-desktop{
width: 75%;
display: block;
margin-bottom: 6.1%;
}
.page-footer{
@ -300,6 +300,7 @@ body{
.bottom-cards{
flex-direction: column;
align-items: center;
margin-bottom: 14%;
}
.bottom-card{
width: 84.6%;
@ -309,6 +310,7 @@ body{
padding-bottom: 3.5%;
}
.bottom-card-image{
display: block;
width: 100%;
padding-top: 29%;
}
@ -318,12 +320,30 @@ body{
margin: 0 0 14%;
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){
.main-banner-mobile{
display: none;
}
.bottom-infocard-image-mobile{
display: none;
}
}
@media screen and (min-width: 2500px){

5
index.html
View File

@ -122,6 +122,9 @@
</section>
<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">
<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.
@ -129,7 +132,7 @@
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
</div>
<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>
</section>