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: create top information section and responsive

Browse Source
This commit is contained in:
Henrique Santos Santana 2022-10-08 08:01:22 -03:00
parent 6f1306df5d
commit 7ddb6c2bcc
2 changed files with 60 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
assets/css/styles.css
View File

@ -10,6 +10,27 @@
display: block;
}
.information {
max-width: 1215px;
margin: 0 auto;
padding: 5.25rem 1.625rem 5.875rem 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.information {
--grid-space: 5.4375rem 7.75rem;
}
.information-subtitle {
font-weight: 400;
}
.information-title {
font-weight: 500;
margin-bottom: 19px;
}
/*= =*\
= UTILS =
@ -21,6 +42,7 @@
.center {
align-items: center;
justify-content: center;
gap: var(--grid-space);
}
.text-upper {
@ -39,6 +61,27 @@
background-color: var(--gradient-blue-180);
}
@media screen and (max-width:768px) {
.sm-wrapper {
flex-direction: column;
}
}
@media screen and (min-width: 769px) {
.information {
padding: 5rem 0 5.875px 0;
}
.information-title {
font-size: 3rem;
}
.information-subtitle {
font-size: 2rem;
}
}
@media screen and (max-width: 414px) {
.hero-image-desktop {
display: none;

18
index.html
View File

@ -14,7 +14,7 @@
<title>M3 Amazing Landing page</title>
</head>
<body>
<header class="page-header bg-black text-center">
<header class="page-header bg-black">
<img class="header-logo" src="./assets/images/logo.svg" alt="" />
</header>
@ -23,6 +23,22 @@
<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>
<section class="information">
<div class="information-container sm-wrapper center">
<div class="information-content">
<h3 class="information-subtitle text-upper">Lorem Ipsum</h3>
<h2 class="information-title text-upper">Dolor Sit Amet</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui
fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet
velit. Nulla suscipit magna dui.
</p>
</div>
<img class="information-image" src="./assets/images/feature-1.png" alt="" />
</div>
</section>
</main>
</body>
</html>