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

14
styles/main.css
View File

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