Adiciona first-content e todos os seus aspectos

This commit is contained in:
SamuelCondack 2022-10-11 16:36:52 -03:00
parent 577f7cc0e1
commit 1bd9dbbfa2
2 changed files with 44 additions and 0 deletions

View File

@ -17,6 +17,13 @@
<source media="(min-width: 415px)" srcset="assets/images/desktop-banner.png"> <source media="(min-width: 415px)" srcset="assets/images/desktop-banner.png">
<img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner"> <img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner">
</picture> </picture>
<section class="first-content">
<div class="first-content-text">
<h1 class="first-content-h2">Lorem Ipsum</h1>
<h2 class="first-content-h1">Dolor Sit Amet</h2>
<p class="first-content-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>
</section>
</main> </main>
</body> </body>
</html> </html>

View File

@ -1,7 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
* { * {
margin: 0; margin: 0;
padding: 0; padding: 0;
box-sizing: border-box; box-sizing: border-box;
font-family: 'Inter', sans-serif;
color: #000000;
} }
.page-header { .page-header {
@ -18,3 +22,36 @@
.main-banner { .main-banner {
width: 100%; width: 100%;
} }
.first-content {
padding-top: 73px;
display: flex;
align-items: center;
justify-content: center;
}
.first-content-text {
max-width: 766px;
}
.first-content-h2 {
text-transform: uppercase;
font-weight: 400;
font-size: 32px;
line-height: 39px;
text-align: center;
}
.first-content-h1 {
font-weight: 500;
font-size: 40px;
line-height: 58px;
text-transform: uppercase;
text-align: center;
}
.first-content-p {
font-weight: 400;
font-size: 16px;
padding-top: 28px;
}