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

perf: Altera a forma de renderizar os banners superiores e inferiores da pagina

Browse Source
This commit is contained in:
Saulo Klein Nery 2022-10-24 14:47:28 -03:00
parent 95673508c8
commit 1ec6893de9
2 changed files with 12 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@ -26,10 +26,11 @@
<main> <main>
<div> <div>
<figure> <picture>
<img class="main-banner main-banner-desktop" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal Desktop"> <source media="(max-width: 1024px)" srcset="./assets/imgs/main-banner-mobile.png">
<img class="main-banner main-banner-mobile" src="./assets/imgs/main-banner-mobile.png" alt="Banner Principal Mobile"> <source media="(min-width: 1025px)" srcset="./assets/imgs/main-banner-desktop.png">
</figure> <img class="main-banner" src="./assets/imgs/main-banner-desktop.png" alt="Banner Principal">
</picture>
</div> </div>
<section class="top-infocard"> <section class="top-infocard">
@ -160,10 +161,11 @@
</p> </p>
</div> </div>
<figure class="bottom-article-figure"> <picture class="bottom-article-picture">
<img class="bottom-banner bottom-banner-desktop" src="./assets/imgs/bottom-banner-desktop.png" alt="Banner Inferior Desktop"> <source media="(max-width: 1024px)" srcset="./assets/imgs/bottom-banner-mobile.png">
<img class="bottom-banner bottom-banner-mobile" src="./assets/imgs/bottom-banner-mobile.png" alt="Banner Inferior Mobile"> <source media="(min-width: 1025px)" srcset="./assets/imgs/bottom-banner-desktop.png">
</figure> <img class="bottom-banner" src="./assets/imgs/bottom-banner-desktop.png" alt="Banner Inferior">
</picture>
</article> </article>
</main> </main>

14
styles/main.css
View File

@ -154,7 +154,7 @@ body{
max-width: 29%; max-width: 29%;
} }
.bottom-article-figure{ .bottom-article-picture{
width: 71%; width: 71%;
} }
@ -195,11 +195,6 @@ body{
} }
@media screen and (max-width: 1024px){ @media screen and (max-width: 1024px){
.main-banner-desktop,
.bottom-banner-desktop{
display: none;
}
.top-infocard{ .top-infocard{
margin-bottom: 90px; margin-bottom: 90px;
} }
@ -293,7 +288,7 @@ body{
line-height: 29px; line-height: 29px;
} }
.bottom-article-figure{ .bottom-article-picture{
width: 100%; width: 100%;
} }
@ -308,11 +303,6 @@ body{
} }
@media screen and (min-width: 1025px){ @media screen and (min-width: 1025px){
.main-banner-mobile,
.bottom-banner-mobile{
display: none;
}
.top-infocard-description{ .top-infocard-description{
text-align: left; text-align: left;
} }