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

feat: added home section and responsive banner

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-10-07 19:47:27 -03:00
parent 7345dea1ae
commit 6f1306df5d
3 changed files with 81 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/css/reset.css
View File

@ -2,4 +2,10 @@
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
}
img {
max-width: 100%;
display: block;
height: auto;
} }

61
assets/css/styles.css
View File

@ -0,0 +1,61 @@
.page-header {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
padding: 28px 0 29px 0;
}
.header-logo {
display: block;
}
/*= =*\
= UTILS =
\*= =*/
.sm-wrapper {
display: flex;
}
.center {
align-items: center;
justify-content: center;
}
.text-upper {
text-transform: uppercase;
}
.text-center {
text-align: center;
}
.bg-black {
background-color: var(--bg-clr-black);
}
.bg-blue-gradient-180 {
background-color: var(--gradient-blue-180);
}
@media screen and (max-width: 414px) {
.hero-image-desktop {
display: none;
}
.hero-image-mobile {
display: flex;
}
}
@media screen and (min-width: 415px) {
.hero-image-desktop {
display: flex;
}
.hero-image-mobile {
display: none;
}
}

15
index.html
View File

@ -9,7 +9,20 @@
<link rel="stylesheet" href="./assets/css/config.css" /> <link rel="stylesheet" href="./assets/css/config.css" />
<link rel="stylesheet" href="./assets/css/styles.css" /> <link rel="stylesheet" href="./assets/css/styles.css" />
<link rel="shortcut icon" href="./assets/images/logo.svg" type="image/x-icon" />
<title>M3 Amazing Landing page</title> <title>M3 Amazing Landing page</title>
</head> </head>
<body></body> <body>
<header class="page-header bg-black text-center">
<img class="header-logo" src="./assets/images/logo.svg" alt="" />
</header>
<main class="main-content" id="main">
<section class="hero" id="hero">
<img class="hero-image hero-image-desktop" src="./assets/images/hero-desktop.jpg" alt="" />
<img class="hero-image hero-image-mobile" src="./assets/images/hero-mobile.jpg" alt="" />
</section>
</main>
</body>
</html> </html>