forked from M3-Academy/challenge-landing-page
Merge pull request 'feat: create information section and responsive' (#4) from feature/information into develop
Reviewed-on: #4
This commit is contained in:
commit
f12f366dd6
@ -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);
|
||||||
}
|
}
|
||||||
|
16
index.html
16
index.html
@ -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 ===============-->
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user