feat: create information section and responsive #4

Merged
HenriqueSantosSantana merged 1 commits from feature/information into develop 2022-10-09 10:31:18 +00:00
2 changed files with 83 additions and 0 deletions

View File

@ -26,11 +26,78 @@
height: auto; height: auto;
} }
/*-------------*\
= INFORMATION =
\*-------------*/
.information {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 64px;
padding: 74px 1.875rem 90px;
}
.information-texts {
text-align: center;
}
.information-subtitle {
font-weight: 400;
line-height: 24px;
}
.information-title {
font-weight: 500;
line-height: 48px;
}
.information-description {
line-height: 24px;
}
@media screen and (min-width:1025px) {
.information {
padding: 74px 0 157px;
gap: 74px;
}
.information-texts {
width: 40%;
margin: 0 auto;
text-align: initial;
}
.information-title,
.information-subtitle {
text-align: center;
}
.information-title {
font-size: 200%;
margin-bottom: 28px;
}
.information-subtitle {
line-height: 32px;
}
.information-image {
width: 16%;
height: auto;
}
}
/*CUBE CSS styles*/ /*CUBE CSS styles*/
/*-------*\ /*-------*\
= UTILS = = UTILS =
\*-------*/ \*-------*/
.text-upper {
text-transform: uppercase;
}
.bg-clr-black { .bg-clr-black {
background-color: var(--bg-clr-black); background-color: var(--bg-clr-black);
} }

View File

@ -55,6 +55,22 @@
</figure> </figure>
<!--=============== Information ===============--> <!--=============== Information ===============-->
<section class="information">
<div class="information-texts">
<h2 class="information-subtitle text-upper">Lorem ipusm</h2>
<h1 class="information-title text-upper">Dolor sit amet</h1>
<p class="information-description">
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
src="./assets/images/information-image.png"
alt="três computadores juntos conectados por setas"
class="information-image"
/>
</section>
<!--=============== Services ===============--> <!--=============== Services ===============-->