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

Feature: added banner-bottom desktop/mobile

Browse Source
This commit is contained in:
Thaís Ferreira Caetano de Jesus 2022-10-13 13:21:43 -03:00
parent 5fb1ac62fb
commit dd8538af48
2 changed files with 30 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
Styles/index.css
View File

@ -20,7 +20,8 @@ body{
} }
.banner-principal-mobile, .banner-principal-mobile,
.infocard-image-mobile{ .infocard-image-mobile,
.banner-bottom-mobile{
display: none; display: none;
} }
@ -139,14 +140,20 @@ body{
align-items: center; align-items: center;
text-align: center; text-align: center;
width: 80%; width: 80%;
padding: 0 0 50px;
} }
.text-bottom-infocard-title{ .bottom-infocard-title{
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
} }
.bottom-infocard img{
justify-content: center;
width: 70%;
}
@media screen and (max-width: 414px){ @media screen and (max-width: 414px){
.banner-principal-desktop, .banner-principal-desktop,
.infocard-image-desktop{ .infocard-image-desktop{
@ -159,6 +166,9 @@ body{
.text-bottom-infocard{ .text-bottom-infocard{
width: 100%; width: 100%;
} }
.bottom-infocard img{
width: 100%;
}
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
@ -187,10 +197,23 @@ body{
.bottom-card{ .bottom-card{
max-width: 350px; max-width: 350px;
} }
.bottom-infocard{
flex-direction: column-reverse;
}
.text-bottom-infocard{
padding: 50px 0 87px;
}
.banner-bottom-desktop{
display: none;
}
.banner-bottom-mobile{
display: unset;
}
} }
@media screen and (min-width: 2000px){ @media screen and (min-width: 2000px){
.infocard-subtitle{ .infocard-subtitle,
.bottom-infocard-title{
font-size: 40px; font-size: 40px;
} }
.infocard-title{ .infocard-title{

5
index.html
View File

@ -133,8 +133,11 @@
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p> </p>
</div> </div>
<img class="banner-bottom-desktop" src="./Assets/Images/Bannner-bottom-desktop.png" alt="Bannner bottom desktop"/>
<img class="banner-bottom-mobile" src="./Assets/Images/Banner-bottom-mobile.png" alt="Banner bottom mobile"/>
</section> </section>
</main> </main>