forked from M3-Academy/challenge-landing-page
feat: create information section and responsive #4
@ -26,11 +26,78 @@
|
||||
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*/
|
||||
|
||||
/*-------*\
|
||||
= UTILS =
|
||||
\*-------*/
|
||||
.text-upper {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.bg-clr-black {
|
||||
background-color: var(--bg-clr-black);
|
||||
}
|
||||
|
16
index.html
16
index.html
@ -55,6 +55,22 @@
|
||||
</figure>
|
||||
|
||||
<!--=============== 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 ===============-->
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user