forked from M3-Academy/practice-time-landing-page
Adiciona banners principais desktop e mobile
This commit is contained in:
parent
09c085e566
commit
20616652c2
Before Width: | Height: | Size: 37 KiB After Width: | Height: | Size: 37 KiB |
BIN
assets/imagens/main-banner-desktop.png
Normal file
BIN
assets/imagens/main-banner-desktop.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 1.4 MiB |
BIN
assets/imagens/main-banner-mobile.png
Normal file
BIN
assets/imagens/main-banner-mobile.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 331 KiB |
@ -4,6 +4,7 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Cria header desktop e mobile */
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
@ -14,3 +15,20 @@
|
||||
.header-logo {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* Cria banner princial */
|
||||
.main-banner {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
.main-banner-desktop {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 414px) {
|
||||
.main-banner-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
13
index.html
13
index.html
@ -12,10 +12,21 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!--Cria header desktop e mobile-->
|
||||
<header class="page-header">
|
||||
<a href="/">
|
||||
<img class="header-logo" src="./assets/imagens/Logo M3 [branco].svg" alt="Logo M3" />
|
||||
<img class="header-logo" src="assets/imagens/logo-m3.svg" alt="Logo M3" />
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
<!--Cria banner principal-->
|
||||
<div>
|
||||
<figure>
|
||||
<img class="main-banner main-banner-desktop" src="assets/imagens/main-banner-desktop.png" alt="Banner Principal Desktop" />
|
||||
<img class="main-banner main-banner-mobile" src="assets/imagens/main-banner-mobile.png" alt="Banner Principal Mobile" />
|
||||
</figure>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in New Issue
Block a user