HenriqueSantosSantana/challenge-landing-page-henrique-santos-santana
0
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: create main banner and responsive

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-10-09 04:57:33 -03:00
parent 0fd88497be
commit 0bef7b966b
3 changed files with 40 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
assets/css/main.css
View File

@ -18,6 +18,14 @@
display: flex;
}
/*-------------*\
= MAIN BANNER =
\*-------------*/
.main-banner-image {
width: 100%;
height: auto;
}
/*CUBE CSS styles*/
/*-------*\
@ -26,3 +34,23 @@
.bg-clr-black {
background-color: var(--bg-clr-black);
}
@media only screen and (max-width: 1024px) {
.image-mobile {
display: flex;
}
.image-desktop {
display: none;
}
}
@media only screen and (min-width: 1025px) {
.image-mobile {
display: none;
}
.image-desktop {
display: flex;
}
}

BIN
assets/images/main-banner-mobile.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 230 KiB

12
index.html
View File

@ -29,6 +29,18 @@
</header>
<!--=============== Main Banner ===============-->
<figure class="main-banner">
<img
class="main-banner-image image-desktop"
src="./assets/images/main-banner-desktop.jpg"
alt="Um desktop aberto em um software de ambiente de desenvolvimento"
/>
<img
class="main-banner-image image-mobile"
src="./assets/images/main-banner-mobile.jpg"
alt="Um desktop aberto em um software de ambiente de desenvolvimento"
/>
</figure>
<!--=============== Information ===============-->