nicolasrosadeoliveira/challenge-landing-page-nicolas-rosa-de-oliveira
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Adiciona imagem do banner e texto de baixo

Browse Source
This commit is contained in:
Nicolas Oliveira 2022-10-11 11:43:37 -03:00
parent 46e7ccae50
commit 30b2a7757f
4 changed files with 103 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
assets/images/bottom-banner-desktop.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 360 KiB

BIN
assets/images/bottom-banner-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

108
assets/styles.css
View File

@ -1,3 +1,5 @@
/* ---------- INITIAL ---------- */
* {
margin: 0;
padding: 0;
@ -14,7 +16,7 @@ body {
font-family: 'Inter', sans-serif;
}
/* HEADER E BANNER */
/* ---------- HEADER E MAIN BANNER ---------- */
.page__header {
display: flex;
@ -37,7 +39,7 @@ body {
}
/* TOP TEXTS */
/* ---------- TOP TEXTS ---------- */
.top__text {
display: flex;
@ -78,7 +80,7 @@ body {
}
/* TOP CARDS */
/* ---------- TOP CARDS ---------- */
.top__cards {
display: grid;
@ -109,7 +111,7 @@ body {
}
/* BOTTOM CARDS */
/* ---------- BOTTOM CARDS ---------- */
.bottom__cards {
background: #E0E0E0;
@ -139,12 +141,12 @@ body {
display: block;
}
.bottom__card-image-3 {
.bottom__card-3 {
grid-column: initial;
}
/* BOTTOM INFOCARDS */
/* ---------- BOTTOM INFOCARDS ---------- */
.bottom__infocards {
display: grid;
@ -175,13 +177,46 @@ body {
}
/* ---------- BOTTOM BANNER CONTAINER ---------- */
/* MEDIAS QUERIES */
.bottom__banner-container {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.bottom__banner-desktop {
width: 100%;
padding: 0 280px 116px;
margin-top: 50px;
}
.bottom__banner-mobile {
display: none;
}
.bottom__title {
font-weight: 600;
font-size: 32px;
}
.bottom__text {
max-width: 550px;
}
.bottom__description {
font-size: 16px;
line-height: 24px;
}
/* ---------- MEDIAS QUERIES ---------- */
@media screen and (max-width: 1024px) {
/* MAIN BANNER */
/* ---------- MAIN BANNER ---------- */
.main__banner-desktop {
display: none;
}
@ -191,8 +226,16 @@ body {
width: 100%;
}
/* TOP CARDS */
.bottom__banner-desktop {
display: none;
}
.bottom__banner-mobile {
display: block;
}
/* ---------- TOP TEXTS ---------- */
.top__text {
flex-direction: column;
padding: 88px 32px 90px;
@ -222,12 +265,12 @@ body {
text-align: center;
}
/* ---------- TOP CARDS ---------- */
.top__cards {
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
padding: 0 0;
}
.top__card {
@ -237,8 +280,8 @@ body {
padding: 26px 26px 34px;
}
/* BOTTOM CARDS */
/* ---------- BOTTOM CARDS ---------- */
.bottom__cards {
padding: 0 24px;
margin-bottom: 112px;
@ -258,6 +301,12 @@ body {
grid-column: 1/3;
}
.bottom__card-2 {
grid-row: 1;
}
/* ---------- BOTTOM INFOCARDS ---------- */
.bottom__infocards {
display: grid;
grid-template-columns: repeat(3, max-content);
@ -273,6 +322,31 @@ body {
padding: 26px 26px 34px;
}
/* ---------- BOTTOM BANNER CONTAINER ---------- */
.bottom__banner-container {
display: flex;
flex-direction: column-reverse;
}
.bottom__title {
font-size: 24px;
}
.bottom__text {
padding: 0 32px 87px;
}
.bottom__banner-desktop {
display: none;
}
.bottom__banner-mobile {
width: 100%;
display: block;
margin-bottom: 50px;
}
}
@ -290,17 +364,13 @@ body {
@media screen and (max-width: 1200px) {
.top__cards {
grid-template-columns: 1fr;
padding: 0 24px;
padding: 0 32px;
}
.bottom__infocards {
grid-template-columns: 1fr;
padding: 0 24px;
padding: 0 24px 98px;
}
}

13
index.html
View File

@ -81,9 +81,20 @@
<img class="bottom__infocard-image" src="./assets/images/smartphone-icon.png" alt="Icone de um celulara do quarto card de baixo">
<p class="bottom__infocard-description">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>
</div>
</section>
<section class="bottom__banner-container">
<div class="bottom__text">
<h2 class="bottom__title">Lorem ipsum dolor sit amet</h2>
<p class="bottom__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>
</div>
<figure>
<img class="bottom__banner-desktop" src="./assets/images/bottom-banner-desktop.png" alt="Banner do infocard de baixo">
<img class="bottom__banner-mobile" src="./assets/images/bottom-banner-mobile.png" alt="">
</figure>
</section>
</main>