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

feat: texto e imagem e footer mobile desktop

Browse Source
This commit is contained in:
Patrick Reis Santos 2022-10-13 21:35:43 -03:00
parent fda166c91a
commit 46044a946f
3 changed files with 154 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
assets/Images/banner-baixo-desktop.png → assets/Images/banner-baixo-mobile.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 246 KiB

After

Width:  |  Height:  |  Size: 246 KiB

94
assets/Styles/main.css
View File

@ -89,8 +89,8 @@ body {
font-size: 16px;
line-height: 24px;
}
.img-baixo {
height: 530px;
background: #e0e0e0;
}
.wrapper {
@ -113,8 +113,7 @@ body {
}
.infocard-baixo {
background: white;
padding: 191px 72px;
margin: 191px 0px;
display: grid;
grid-template-columns: 432px 432px 432px 432px;
gap: 16px;
@ -140,7 +139,7 @@ body {
line-height: 24px;
}
.very-low-titulo-h1 {
.very-low-titulo {
text-align: center;
font-weight: 600;
font-size: 32px;
@ -157,14 +156,18 @@ body {
}
.very-low-infocard {
background: white;
padding: 0 32px;
width: 100%;
display: flex;
align-items: center;
flex-direction: column;
}
.very-low-img {
padding: 50px 280px 116px;
height: auto;
width: 100%;
max-width: 1360px;
padding: 50px 0 116px;
}
.page-footer {
@ -183,6 +186,7 @@ body {
}
.footer-icons-ul {
align-items: center;
display: flex;
list-style: none;
margin-bottom: 16px;
@ -191,6 +195,20 @@ body {
margin: 0 21px;
}
.very-low-img-mobile {
display: none;
}
.banner-principal-mobile {
display: none;
}
@media (max-width: 1900px) {
.infocard-baixo {
grid-template-columns: 432px 432px;
}
}
@media screen and (max-width: 1180px) {
.top-titulo-h2 {
font-size: 20px;
@ -225,6 +243,46 @@ body {
}
}
@media (max-width: 1024px) {
.infocard-baixo {
grid-template-columns: 432px;
}
.very-low-img {
display: none;
}
.very-low-img-mobile {
width: 100%;
max-width: 414px;
height: auto;
display: block;
}
.very-low-paragrafo {
margin: 0 0 32px;
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: #000000;
}
.very-low-titulo {
margin: 50px 0 9px;
font-weight: 600;
font-size: 24px;
line-height: 29px;
text-align: center;
color: #000000;
}
.very-low-infocard {
padding: 0;
}
.very-low-div {
max-width: 350px;
}
}
@media screen and (max-width: 700px) {
.notebook-esquerda-mobile {
width: 177px;
@ -258,11 +316,27 @@ body {
}
}
@media (max-width: 480px) {
.infocard-baixo {
grid-template-columns: 100%;
justify-items: center;
padding: 0 16px;
}
.card-baixo {
max-width: 350px;
width: 100%;
padding: 35px 26px 27px;
height: 287px;
}
}
@media screen and (max-width: 414px) {
.banner-principal-mobile {
display: block;
}
.banner-principal-desktop {
display: none;
}
.notebook-esquerda-mobile {
width: 100%;
grid-area: header;
@ -276,9 +350,3 @@ body {
grid-area: main;
}
}
@media screen and (min-width: 415px) {
.banner-principal-mobile {
display: none;
}
}

34
index.html
View File

@ -106,6 +106,7 @@
alt="Imagem de um notebook 3"
/>
</div>
</section>
<section class="infocard-baixo">
<div class="card-baixo">
<img
@ -115,9 +116,7 @@
/>
<p class="paragrafos-baixo">
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.
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card-baixo">
@ -128,9 +127,7 @@
/>
<p class="paragrafos-baixo">
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.
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card-baixo">
@ -141,9 +138,7 @@
/>
<p class="paragrafos-baixo">
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.
euismod enim non dui fringilla interdum.
</p>
</div>
<div class="card-baixo">
@ -154,15 +149,18 @@
/>
<p class="paragrafos-baixo">
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.
euismod enim non dui fringilla interdum.
</p>
</div>
</section>
<section class="very-low-infocard">
<img
class="very-low-img-mobile"
src="./assets/Images/banner-baixo-mobile.png"
alt="Banner de baixo mobile"
/>
<div class="very-low-div">
<h1 class="very-low-titulo-h1">Lorem ipsum dolor sit amet</h1>
<h2 class="very-low-titulo">Lorem ipsum dolor sit amet</h2>
<p class="very-low-paragrafo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
vulputate sapien non libero faucibus interdum. In eget tincidunt
@ -178,25 +176,27 @@
alt="Banner de baixo"
/>
</section>
</section>
</main>
<footer class="page-footer">
<ul class="footer-icons-ul">
<li class="footer-icon">
<a
href="https://www.instagram.com/patrckreis/?hl=pt-br"
href="https://www.instagram.com/m3.ecommerce/?hl=pt-br"
target="_blank"
>
<img src="./assets/Images/insta-icon.png" alt="Ícone instagram" />
</a>
</li>
<li class="footer-icon">
<a href="" target="_blank">
<a href="https://www.facebook.com/digitalm3" target="_blank">
<img src="./assets/Images/face-icon.png" alt="Ícone facebook" />
</a>
</li>
<li class="footer-icon">
<a href="" target="_blank">
<a
href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA"
target="_blank"
>
<img src="./assets/Images/yt-icon.png" alt="Ícone youtube" />
</a>
</li>