naianfelix/challenge-landing-page-naian-felix
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: adiciona bottom infocard mobile e desktop

Browse Source
This commit is contained in:
Naian Felix dos Santos 2022-10-11 13:35:06 -03:00
parent d99152851b
commit e2c4d7ed48
4 changed files with 109 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

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

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 358 KiB

100
assets/styles/main.css
View File

@ -111,7 +111,7 @@ body {
gap: 40px;
justify-content: center;
position: relative;
bottom: -62px;
top: 32px;
}
@ -150,18 +150,45 @@ body {
padding: 28px 26px 28px 26px;
max-width: 300px;
}
@media screen and (max-width: 414px) {
.main-banner {
content: url('../image/main-banner-mobile.png');
.bottom-infocard {
margin-top: 108px;
padding: 32px;
}
.header-logo {
padding: 24px 0 33px;
.bottom-infocard-title {
font-weight: 600;
font-size: 32px;
line-height: 39px;
text-align: center;
}
.bottom-infocard-description {
font-weight: 400;
font-size: 16px;
line-height: 24px;
max-width: 550px;
text-align: center;
margin: 0 auto;
padding-bottom: 50px;
}
.bottom-infocard-image {
display: flex;
justify-content: center;
width: 100%;
margin-bottom: 116px;
}
.bottom-infocard-image img {
max-width: 1360px;
width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards,.bottom-cards {
grid-template-columns: repeat(2, max-content);
}
}
@media screen and (max-width: 768px) {
@ -192,7 +219,6 @@ body {
.middle-banner {
padding: 0 23px;
}
.middle-banner-image-wrapper {
display: grid;
grid-area: auto;
@ -203,6 +229,8 @@ body {
"c c";
column-gap: 14px;
row-gap: 24px;
width: 90%;
margin: 0 32px;
}
.middle-banner-image img {
@ -213,39 +241,71 @@ body {
.middle-banner-image.a {
grid-area: a;
width: 100%;
}
.middle-banner-image.b {
grid-area: b;
width: 100%;
}
.middle-banner-image.c {
grid-area: c;
width: 100%;
}
.bottom-cards {
grid-template-columns: 1fr;
padding: 0 32px;
margin-top: 190px;
}
.bottom-infocard-text {
padding: 0 32px;
}
.bottom-infocard-title {
font-size: 24px;
}
.bottom-image {
content: url('../image/bottom-banner-mobile.png');
width: 100%;
}
.bottom-infocard {
display: flex;
flex-direction: column-reverse;
padding: 0;
}
.bottom-infocard-image {
margin-bottom: 50px;
}
}
@media screen and (max-width: 414px) {
.main-banner {
content: url('../image/main-banner-mobile.png');
}
.header-logo {
padding: 24px 0 33px;
}
}
@media screen and (max-width: 290px) {
.top-infocard-title {
font-size: 26px;
}
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
.top-cards {
grid-template-columns: repeat(2, max-content);
}
.bottom-cards {
grid-template-columns: repeat(2, max-content);
}
}

21
index.html
View File

@ -81,32 +81,45 @@
<div class="bottom-cards">
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image1.svg" alt="Figura representando ">
<img class="bottom-card-image" src="assets/image/bottom-card-image1.svg" alt="Figura representando uma nota">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image2.svg" alt="Figura representando uma sacola de compras">
<img class="bottom-card-image" src="assets/image/bottom-card-image2.svg" alt="Figura representando uma mão com uma moeda acima">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image3.svg" alt="Figura representando uma mão com uma moeda acima">
<img class="bottom-card-image" src="assets/image/bottom-card-image3.svg" alt="Figura representando um notebook">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
<figure class="bottom-card">
<img class="bottom-card-image" src="assets/image/bottom-card-image4.svg" alt="Figura representando uma mão com uma moeda acima">
<img class="bottom-card-image" src="assets/image/bottom-card-image4.svg" alt="Figura representando um celular">
<figcaption class="bottom-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<section class="bottom-infocard">
<section class="bottom-infocard-text">
<h1 class="bottom-infocard-title">Lorem ipsum dolor sit amet</h1>
<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>
</section>
<div class="bottom-infocard-image">
<img class="bottom-image" src="assets/image/bottom-banner.png" alt="Imagem com telas com códigos de programação">
</div>
</section>
</main>
</body>
</html>