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

develop/landingPage #9

Merged
ThiagoDutraSampaioLeite merged 2 commits from develop/landingPage into main 2022-10-12 00:01:58 +00:00
Conversation 0 Commits 2 Files Changed 4 +95
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> </figure>
</div> </div>
</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> </main>
<body> <body>

74
style/main.css
View File

@ -117,6 +117,50 @@
padding-bottom: 17px; 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*/ /* Banner-desktop / Banner-mobile*/
@ -229,3 +273,33 @@
padding: 0 23px; 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;
}
}