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

Adiciona baners mobile e faz correções

Browse Source
This commit is contained in:
Yan Pecanha Garriga 2022-10-13 00:56:43 -03:00
parent 5ac925dfcf
commit e23b24462d
2 changed files with 158 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
assets/styles.css/main.css
View File

@ -14,7 +14,7 @@ body {
display: flex;
justify-content: center;
background: #000000;
padding: 1.51vw 0;
padding: 29px 0;
}
.main-banner-row {
@ -64,6 +64,8 @@ body {
.top-infocard-image {
padding: 3.80vw 0 4.63vw 0;
width: 16.4vw;
align-items: center;
}
.top-card-image {
@ -116,7 +118,6 @@ body {
.middle-banner-item {
width: 100%;
/* max-width: 566px */
}
.middle-banner-image {
@ -125,7 +126,7 @@ body {
.bottom-card {
background: #FFFFFF;
grid-template-columns: repeat(4, 1fr);
grid-template-columns: repeat(4, 4fr);
display: grid;
gap: 0.83vw;
justify-content: center;
@ -141,7 +142,6 @@ body {
display: flex;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
max-width: 22.5vw;
justify-items: center;
}
@ -152,8 +152,8 @@ body {
.bottom-card-text {
font-size: 16px;
line-height: 24px;
width: 15.572vw;
padding: 0 0 3.38vw;
width: 19vw;
padding: 0 0 65px;
}
.bottom-infocard {
@ -164,14 +164,14 @@ body {
}
.bottom-infocard-group {
max-width: 28.645vw;
width: 29%;
}
.bottom-infocard-tittle {
font-weight: 600;
font-size: 32px;
line-height: 39px;
margin-bottom: 1.979vw;
margin-bottom: 2%;
}
.bottom-infocard-paragraph {
@ -211,11 +211,39 @@ body {
text-align: center;
}
@media screen and (max-width: 414px) {
.mobile {
display: none;
}
.bottom-banner-image-mobile {
display: none;
}
.bottom-infocard-mobile {
display: none;
}
@media screen and (max-width: 1025px) {
.desktop {
display: none;
}
.mobile {
display: flex;
}
.main-banner-desktop {
display: none;
}
.bottom-infocard-paragraph {
display: none;
}
.bottom-infocard {
display: none;
}
.top-infocard-text {
max-width: 357px;
margin: auto;
@ -239,24 +267,95 @@ body {
}
.top-infocard-image {
max-width: 239px;
padding: 64px 0 90px 0;
width: 239px;
}
.top-cards {
grid-template-columns: 1fr;
padding: 36px 26px;
gap: 5.79vw;
}
.top-card-image {
padding-bottom: 6.52vw;
}
.top-card-description {
max-width: 299px;
}
.middle-banner-group {
grid-template-columns: repeat(2, 1fr);
align-items: center;
top: 32px;
gap: 3.38vw;
padding: 32px 0 0;
position: static;
margin-bottom: 0;
max-width: 88%;
width: 100%;
}
.middle-banner {
padding: 32px 0 0;
/* height: 138.647vw; */
flex-direction: column;
align-items: center;
height: fit-content;
padding-bottom: 82.125vw;
}
.middle-banner-image {
width: 100%;
}
.middle-banner-item {
width: 38%;
width: 100%;
margin: auto;
padding-bottom: 23px;
}
.img-full {
max-width: 88%;
position: absolute;
bottom: -32px;
}
.middle-banner-item:last-child img {
width: 100%;
}
.bottom-infocard-tittle {
font-size: 24px;
}
.bottom-card-group {
grid-template-columns: 1fr;
gap: 15px;
}
.bottom-card {
display: flex;
flex-direction: column;
margin-top: 19%;
}
.bottom-card-text {
width: 302px;
font-size: 14px;
padding: 0 0 16%;
}
.bottom-infocard-group {
width: 84%;
}
.bottom-banner-image-desktop {
display: none;
}
.bottom-banner-image-mobile {
padding: 0;
margin: 24% 0 12%;
}
}

51
index.html
View File

@ -26,9 +26,9 @@
<main>
<section class="main-banner-row">
<img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png"
alt="Banner principal desktop">
alt="Banner principal desktop" />
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
alt="Banner principal mobile">
alt="Banner principal mobile" />
</section>
<section class="top-infocard">
@ -79,7 +79,7 @@
</div>
</section>
<section class="middle-banner">
<section class="middle-banner desktop">
<div class="middle-banner-group">
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
@ -98,6 +98,25 @@
</div>
</section>
<section class="middle-banner mobile">
<div class="middle-banner-group">
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
alt="Primeiro banner do Meio" />
</div>
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-02.png"
alt="Segundo banner do meio" />
</div>
</div>
<div class="middle-banner-item img-full">
<img class="middle-banner-image" src="./assets/images/middle-banner-03.png"
alt="Terceiro banner do meio" />
</div>
</section>
<section class="bottom-card">
<div class="bottom-card-group">
<img class=" bottom-card-image" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" />
@ -155,9 +174,27 @@
</div>
</section>
<section class="bottom-banner-row">
<div class="bottom-banner">
<img class="bottom-banner-image" src="./assets/images/bottom-banner-desktop.png" alt="banner de baixo" />
<img class="bottom-banner-image bottom-banner-image-desktop" src="./assets/images/bottom-banner-desktop.png" alt="banner de baixo" />
<img class="bottom-banner-image bottom-banner-image-mobile" src="./assets/images/bottom-banner-mobile.png" alt="banner de baixo mobile"/>
</div>
</section>
<section class="bottom-infocard-mobile">
<div class="bottom-infocard-group">
<h3 class="bottom-infocard-tittle ">Lorem ipsum dolor sit amet</h3>
<p class="bottom-infocard-paragraph-bottom-mobile">
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>
</section>
</main>
@ -165,19 +202,19 @@
<ul class="footer-icons">
<li class="footer-icon">
<a href="/">
<img src="./assets/images/logo1.png" alt="logo-footer1">
<img src="./assets/images/logo1.png" alt="logo-footer1" />
</a>
</li>
<li class="footer-icon">
<a href="/">
<img src="./assets/images/logo2.png" alt="logo-footer2">
<img src="./assets/images/logo2.png" alt="logo-footer2" />
</a>
</li>
<li class="footer-icon">
<a href="/">
<img src="./assets/images/logo3.png" alt="logo-footer3">
<img src="./assets/images/logo3.png" alt="logo-footer3" />
</a>
</li>
</ul>