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

criando o banner mobile e editando banner

Browse Source
This commit is contained in:
Matheus Mariosa 2022-10-12 12:28:14 -03:00
parent 5895414b29
commit 57126365de
2 changed files with 29 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
assents/style/estilo.css
View File

@ -1,8 +1,11 @@
/*configurações globais*/
* { * {
margin: 0; margin: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/*Logo da M3 Academy*/
.page-header { .page-header {
display: flex; display: flex;
justify-content: center; justify-content: center;
@ -14,10 +17,10 @@
.logo-m3 { .logo-m3 {
width: 12%; width: 12%;
height: 42%; height: 42%;
min-height: 43px; min-height: 23px;
min-width: 226px; min-width: 110px;
} }
/*Banner do top*/
.banner-principal { .banner-principal {
max-width: 100%; max-width: 100%;
min-height: 19%; min-height: 19%;
@ -31,4 +34,22 @@
.banner-big-mobile { .banner-big-mobile {
display: none; display: none;
width: 100%;
max-height: 11%;
min-height: 598px;
}
@media screen and (max-width: 1023px) {
.banner-big {
display: none;
}
.banner-big-mobile {
display: block;
}
.banner-principal {
min-height: 11%;
}
} }

9
index.html
View File

@ -15,10 +15,11 @@
<img src="./assents/imagens/Logo-M3Academy 1.svg" alt="logo da M3 Academy" class="logo-m3"/> <img src="./assents/imagens/Logo-M3Academy 1.svg" alt="logo da M3 Academy" class="logo-m3"/>
</header> </header>
<main> <main>
<div class="banner-principal"> <section class="banner-principal">
<img src="./assents/imagens/big-banner.png" alt="Banner principal" class="banner-big"/> <img class="banner-big" src="./assents/imagens/big-banner.png" alt="Banner principal"/>
<img src="./assents/imagens/big-banner-mobile.png" alt="Banner principal" class="banner-big-mobile"> <img class="banner-big-mobile" src="./assents/imagens/big-banner-mobile.png" alt="Banner principal">
</div> </section>
<h2>Lorem ipsum</h2> <h2>Lorem ipsum</h2>
<h1>dolor sit amet</h1> <h1>dolor sit amet</h1>