ManuelaLuanaSchumackerTavares/challenge-landing-page-manuela-luana-schumacker-tavares
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(home): Adiciona banner principal mobile

Browse Source
This commit is contained in:
Manuela Luana Schumacker Tavares 2022-10-10 14:07:24 -03:00
parent 758a7af924
commit b9f1bfcc59
4 changed files with 23 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/images/banner-principal.png → assets/images/banner-principal-desktop.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
assets/images/banner-principal-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

20
assets/styles/styles.css
View File

@ -5,11 +5,12 @@
box-sizing: border-box;
}
/*Definindo escopos*/
.page-banner-principal-mobile,
.page-logo,
.page-banner-principal{
.page-banner-principal-desktop{
width: 100%;
}
/* Estilo menu/header*/
/*Estilo menu/header*/
.page-logo{
display: flex;
align-items: center;
@ -22,4 +23,19 @@
display: block;
}
/*Banner mobile*/
.page-banner-principal-mobile{
display: none;
}
@media screen and (max-width: 1024px){
.page-banner-principal-mobile{
display: block;
}
.page-banner-principal-desktop{
display: none;
}
}

7
index.html
View File

@ -17,9 +17,12 @@
<a href="/"><img class="logo-m3academy" src="./assets/svgs/logo-m3academy.svg" alt="Logo M3 Academy"></a>
</nav>
</header>
<!--Banner Principal-->
<!--Banner Principal desktop e mobile-->
<div>
<figure><img class="page-banner-principal" src="./assets/images/banner-principal.png" alt="Banner Principal"></figure>
<figure>
<img class="page-banner-principal-desktop" src="./assets/images/banner-principal-desktop.png" alt="Banner Principal Desktop">
<img class="page-banner-principal-mobile" src="./assets/images/banner-principal-mobile.png" alt="Banner Principal Mobile">
</figure>
</div>
</body>