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

cria banner principal

Browse Source
This commit is contained in:
Ueber James Santos 2022-10-08 16:21:00 -03:00
parent e631748e30
commit b6633cb18b
4 changed files with 42 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
index.html
View File

@ -9,13 +9,20 @@
</head> </head>
<body> <body>
<header class="page-header"> <header class="page-header">
<figure class="figure-logo"> <figure >
<a href="/" <a href="/"
><img src="./src/img/Logo-M3Academy 1.svg" alt="Logo M3Academy" ><img src="./src/img/Logo-M3Academy 1.svg" alt="Logo M3Academy"
/></a> /></a>
</figure> </figure>
</header> </header>
<main>
<div class="banner-principal-container">
<figure>
<img class="descktop-banner" src="/src/img/main-banner-descktop.png" alt="">
<img class="mobile-banner" src="/src/img/main-banner-mobile.png" alt="">
</figure>
</div>
</main>
</body> </body>
</html> </html>

0
src/img/Rectangle 9.png → src/img/main-banner-descktop.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

BIN
src/img/main-banner-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

34
src/style/style.css
View File

@ -3,15 +3,43 @@
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
} }
/* header-logo */
.page-header { .page-header {
display: flex; display: flex;
justify-content: center; justify-content: center;
justify-items: center;
padding: 29px 0; padding: 29px 0;
background: #000000; background: #000000;
} }
.figure-logo { /* */
display: block; /* Banner-principal */
.banner-principal-container,
.mobile-banner img,
.descktop-banner img,
.descktop-banner,
.mobile-banner {
width: 100%;
}
@media screen and (max-width: 1024px) {
.descktop-banner {
display: none;
}
}
@media screen and (min-width: 1025px) {
.mobile-banner {
display: none;
}
} }