ThiagoDutraSampaioLeite/challenge-landing-page-thiago-dutra
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Cria imagem bottom

Browse Source
This commit is contained in:
ThiagoDuutra 2022-10-11 20:37:13 -03:00
parent 9fee68768e
commit 6fc0054b71
4 changed files with 95 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/imgs/bottom-infocard-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB

BIN
assets/imgs/bottom-inforcard-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

21
index.html
View File

@ -106,6 +106,27 @@
</figure>
</div>
</div>
<section class="bottom-infocards">
<div class="bottom-infocard-text">
<h2 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h2>
<p class="bottom-infocard-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="container-infocard-img">
<img class="bottom-infocard-img bottom-infocard-img-desktop" src="assets/imgs/bottom-infocard-desktop.png"
alt="Banner inforcard desktop">
<img class="bottom-infocard-img bottom-infocard-img-mobile" src="assets/imgs/bottom-inforcard-mobile.png"
alt="Banner infocard mobile">
</figure>
</section>
</main>
<body>

74
style/main.css
View File

@ -117,6 +117,50 @@
padding-bottom: 17px;
}
.main .bottom-infocards {
display: flex;
flex-direction: column;
justify-content: center;
margin-top: 108px;
max-width: 100%;
}
.main .bottom-infocard-title {
text-align: center;
font-size: 32px;
font-weight: 600;
max-width: 100%;
}
.main .bottom-infocard-text {
align-self: center;
text-align: center;
width: 40%;
}
.main .bottom-infocard-description {
font-size: 16px;
line-height: 24px;
margin-bottom: 32px;
}
.main .container-infocard-img {
display: flex;
justify-content: center;
max-width: 100%;
}
.main .bottom-infocard-img {
display: block;
align-self: center;
margin-bottom: 116px;
width: 70%;
}
.main .bottom-infocard-img-mobile {
display: none;
}
/* --------------------------------------- */
/* Banner-desktop / Banner-mobile*/
@ -229,3 +273,33 @@
padding: 0 23px;
}
}
/*Bottom infocards*/
@media (max-width: 1024px) {
.main .bottom-infocards {
flex-direction: column-reverse;
}
.main .bottom-infocard-img {
width: 100%;
margin-bottom: 50px;
}
.main .bottom-infocard-text {
width: 80%;
}
.main .bottom-infocard-title {
font-size: 24px;
margin-bottom: 9px;
}
.main .bottom-infocard-img-desktop {
display: none;
}
.main .bottom-infocard-img-mobile {
display: block;
}
}