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 |
@ -132,4 +132,39 @@ body{
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
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.
|
||||
</p>
|
||||
</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>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user