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">
<img src="assets/images/desktop-banner.png" alt="laptop image banner" class="main-banner">
</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>
</body>
</html>

View File

@ -1,7 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Inter', sans-serif;
color: #000000;
}
.page-header {
@ -18,3 +22,36 @@
.main-banner {
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;
}