Feat(main): Cria bottom Text-image #8
BIN
assets/images/bottom-image-desktop.png
Normal file
BIN
assets/images/bottom-image-desktop.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 358 KiB |
BIN
assets/images/bottom-image-mobile.png
Normal file
BIN
assets/images/bottom-image-mobile.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 246 KiB |
@ -133,3 +133,38 @@ body{
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 16px 32px 66px;
|
padding: 16px 32px 66px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bottom-section{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section-text{
|
||||||
|
width: 29%;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section-text-title{
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 39px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section-text-description{
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section-image{
|
||||||
|
padding: 0 0 116px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-section-image-desktop{
|
||||||
|
width: 71%;
|
||||||
|
}
|
||||||
|
|
||||||
|
16
index.html
16
index.html
@ -114,6 +114,22 @@
|
|||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="bottom-section">
|
||||||
|
|
||||||
|
<div class="bottom-section-text">
|
||||||
|
|
||||||
|
<h2 class="bottom-section-text-title">Lorem ipsum dolor sit amet</h2>
|
||||||
|
<p class="bottom-section-text-description">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis. Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<figure class="bottom-section-image">
|
||||||
|
<img class="bottom-section-image-desktop" src="./assets/images/bottom-image-desktop.png" alt="Imagem" />
|
||||||
|
|
||||||
|
</figure>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user