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

Feature: adjustment banner-midle, font-size mobile/desktop

Browse Source
This commit is contained in:
Thaís Ferreira Caetano de Jesus 2022-10-13 16:50:17 -03:00
parent 57392507f7
commit 85121413d0
3 changed files with 152 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
Assets/Images/Banner-midle-mobile.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 171 KiB

149
Styles/index.css
View File

@ -25,6 +25,7 @@ body{
display: none; display: none;
} }
.text-infocard{ .text-infocard{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -32,14 +33,12 @@ body{
align-items: center; align-items: center;
text-align: center; text-align: center;
} }
.infocard-subtitle{ .infocard-subtitle{
font-weight: 400; font-weight: 400;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
text-transform: uppercase; text-transform: uppercase;
} }
.infocard-title{ .infocard-title{
font-weight: 500; font-weight: 500;
font-size: 48px; font-size: 48px;
@ -47,27 +46,25 @@ body{
margin-bottom: 20px; margin-bottom: 20px;
text-transform: uppercase; text-transform: uppercase;
} }
.infocard-description{ .infocard-description{
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;
width: 38%; width: 38%;
} }
.infocard-image{ .infocard-image{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.top-cards{ .top-cards{
display: flex; display: flex;
justify-content: center; justify-content: center;
padding: 178px 150px 80px; padding: 178px 150px 80px;
gap: 26px; gap: 26px;
} }
.top-card{ .top-card{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -80,34 +77,31 @@ body{
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23); box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
} }
.card-icon{
width: 100%;
height: 100%;
max-width: 103px;
max-height: 104px;
}
.banner-midle-back{
background: #E0E0E0;
padding: 0 72px;
}
.banners-midle{ .banners-midle{
display: flex; display: flex;
gap: 39px; padding: 0 72px;
gap: 4.3%;
justify-content: center;
background: #E0E0E0;
} }
.banners-midle img{ .banners-midle img{
position: relative; position: relative;
top: 62px; top: 35px;
gap: 20px;
} }
.banner-midle{ .banner-midle{
display: flex; display: flex;
gap: 39px; gap: 3.4%;
} }
.banner-midle img{
max-width: 50%;
}
.banner-midle-third{
gap: 39px;
width: 32%;
}
.bottom-cards{ .bottom-cards{
display: flex; display: flex;
@ -115,7 +109,6 @@ body{
padding: 178px 30px 108px; padding: 178px 30px 108px;
gap: 16px; gap: 16px;
} }
.bottom-card{ .bottom-card{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -128,12 +121,12 @@ body{
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15); box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
} }
.bottom-infocard{ .bottom-infocard{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} }
.text-bottom-infocard { .text-bottom-infocard {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -142,19 +135,18 @@ body{
width: 80%; width: 80%;
padding: 0 0 50px; padding: 0 0 50px;
} }
.bottom-infocard-title{ .bottom-infocard-title{
font-weight: 600; font-weight: 600;
font-size: 32px; font-size: 32px;
line-height: 39px; line-height: 39px;
} }
.bottom-infocard img{ .bottom-infocard img{
justify-content: center; justify-content: center;
width: 70%; width: 70%;
padding: 0 0 116px; padding: 0 0 116px;
} }
.page-footer{ .page-footer{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -164,7 +156,6 @@ body{
gap: 16px; gap: 16px;
background-color: #000000; background-color: #000000;
} }
.page-footer p{ .page-footer p{
font-weight: 400; font-weight: 400;
font-size: 10px; font-size: 10px;
@ -175,6 +166,7 @@ body{
color: #BDBDBD; color: #BDBDBD;
} }
@media screen and (max-width: 414px){ @media screen and (max-width: 414px){
.banner-principal-desktop, .banner-principal-desktop,
.infocard-image-desktop{ .infocard-image-desktop{
@ -184,6 +176,8 @@ body{
.infocard-image-mobile{ .infocard-image-mobile{
display: unset; display: unset;
} }
.text-bottom-infocard{ .text-bottom-infocard{
width: 100%; width: 100%;
} }
@ -193,6 +187,11 @@ body{
.bottom-infocard img{ .bottom-infocard img{
width: 100%; width: 100%;
} }
.page-footer p{
width: 100%;
}
} }
@media screen and (max-width: 768px){ @media screen and (max-width: 768px){
@ -208,11 +207,40 @@ body{
width: 100%; width: 100%;
padding: 0 40px; padding: 0 40px;
} }
.top-cards{ .top-cards{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
padding: 90px 32px 80px; padding: 90px 32px 80px;
} }
.banners-midle{
display: flex;
flex-direction: column;
padding: 0 23px;
gap: 24px;
}
.banners-midle img{
position: relative;
top: 32px;
}
.banner-midle{
display: flex;
flex-direction: row-reverse;
gap: 14px;
justify-content: center;
}
.banner-midle img{
width: 48%;
}
.banner-midle-third{
gap: 24px;
width: 100%;
}
.bottom-cards{ .bottom-cards{
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
@ -221,21 +249,25 @@ body{
.bottom-card{ .bottom-card{
max-width: 350px; max-width: 350px;
} }
.bottom-infocard{ .bottom-infocard{
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.bottom-infocard img{
padding: unset;
}
.text-bottom-infocard{ .text-bottom-infocard{
padding: 50px 0 87px; padding: 50px 0 87px;
} }
.banner-bottom-desktop{ .banner-bottom-desktop{
display: none; display: none;
} }
.banner-bottom-mobile{ .banner-bottom-mobile{
display: unset; display: unset;
} }
.bottom-infocard img{
padding: unset;
}
} }
@media screen and (min-width: 2000px){ @media screen and (min-width: 2000px){
@ -250,6 +282,8 @@ body{
.card-description{ .card-description{
font-size: 25px; font-size: 25px;
} }
.top-infocard{ .top-infocard{
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -260,6 +294,8 @@ body{
max-width: 400px; max-width: 400px;
align-items: unset; align-items: unset;
} }
.top-cards{ .top-cards{
padding: 200px 250px 80px; padding: 200px 250px 80px;
} }
@ -269,12 +305,63 @@ body{
padding: 40px; padding: 40px;
gap: 40px; gap: 40px;
} }
.bottom-cards{ .bottom-cards{
padding: 178px 72px 80px; padding: 178px 72px 80px;
} }
.bottom-card{ .bottom-card{
padding: 40px; padding: 40px;
gap: 40px; gap: 40px;
}
.banner-midle{
gap: 50px;
}
.banners-midle{
gap: 50px;
}
.banners-midle img{
max-width: 566px;
}
.page-footer p{
font-size: 15px;
}
}
@media screen and (min-width: 3000px){
.infocard-subtitle,
.bottom-infocard-title{
font-size: 55px;
}
.infocard-title{
font-size: 67px;
}
.infocard-description,
.card-description{
font-size: 36px;
}
.infocard-description,
.infocard-subtitle{
line-height: 50px;
}
.top-card{
max-width: 20%;
height: 500px;
padding: 60px;
gap: 90px;
}
.bottom-card{
max-width: 100%;
height: 580px;
padding: 60px;
gap: 50px;
} }
} }

52
index.html
View File

@ -16,6 +16,7 @@
</head> </head>
<body> <body>
<header class="page-header"> <header class="page-header">
<a href="/"> <a href="/">
@ -32,6 +33,7 @@
</div> </div>
<section class="top-infocard"> <section class="top-infocard">
<div class="text-infocard"> <div class="text-infocard">
<h2 class="infocard-subtitle"> Lorem ipsum </h2> <h2 class="infocard-subtitle"> Lorem ipsum </h2>
<h1 class="infocard-title"> dolor sit amet </h1> <h1 class="infocard-title"> dolor sit amet </h1>
@ -43,14 +45,16 @@
</div> </div>
<div class="infocard-image"> <div class="infocard-image">
<img class="infocard-image-desktop" src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop"> <img class="infocard-image-desktop" src="./Assets/SVG/Computer-image-desktop.svg" alt="infocard image desktop"/>
<img class="infocard-image-mobile" src="./Assets/SVG/Computer-image-mobile.svg" alt="infocard image mobile"> <img class="infocard-image-mobile" src="./Assets/SVG/Computer-image-mobile.svg" alt="infocard image mobile"/>
</div> </div>
</section> </section>
<div class="top-cards"> <div class="top-cards">
<div class="top-card"> <div class="top-card">
<img class="card-icon" src="./Assets/SVG/Store-icon.svg" alt="Store icon"/> <img src="./Assets/SVG/Store-icon.svg" alt="Store icon"/>
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. Cras euismod enim non dui fringilla interdum.
@ -58,7 +62,7 @@
</div> </div>
<div class="top-card"> <div class="top-card">
<img class="card-icon" src="./Assets/SVG/shopping-bag.svg" alt="Shopping-bag icon"/> <img src="./Assets/SVG/shopping-bag.svg" alt="Shopping-bag icon"/>
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. Cras euismod enim non dui fringilla interdum.
@ -66,7 +70,7 @@
</div> </div>
<div class="top-card"> <div class="top-card">
<img class="card-icon" src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/> <img src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/>
<p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="card-description">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum. Cras euismod enim non dui fringilla interdum.
@ -75,20 +79,20 @@
</div> </div>
<!--<div class="banner-midle-back">
<div class="banners-midle"> <div class="banners-midle">
<div class="banner-midle"> <div class="banner-midle">
<img src="./Assets/Images/Banner-midle-first.png" alt="Banner midle first"> <img src="./Assets/Images/Banner-midle-first.png" alt="Banner midle first">
<img src="./Assets/Images/Banner-midle-second.png" alt="Banner midle second"> <img src="./Assets/Images/Banner-midle-second.png" alt="Banner midle second">
</div> </div>
<img src="./Assets/Images/Banner-midle-third.png" alt="Banner-midle-third">
</div>
</div>--> <img class="banner-midle-third" src="./Assets/Images/Banner-midle-third.png" alt="Banner-midle-third">
</div>
<div class="bottom-cards"> <div class="bottom-cards">
<div class="bottom-card"> <div class="bottom-card">
<img src="./Assets/SVG/Money-icon.svg" alt="Money icon"> <img src="./Assets/SVG/Money-icon.svg" alt="Money icon"/>
<p class="card-description"> <p class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@ -97,7 +101,7 @@
</div> </div>
<div class="bottom-card"> <div class="bottom-card">
<img src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"> <img src="./Assets/SVG/Coin-icon.svg" alt="Coin icon"/>
<p class="card-description"> <p class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@ -106,7 +110,7 @@
</div> </div>
<div class="bottom-card"> <div class="bottom-card">
<img src="./Assets/SVG/Laptop-icon.svg" alt="Laptop icon"> <img src="./Assets/SVG/Laptop-icon.svg" alt="Laptop icon"/>
<p class="card-description"> <p class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@ -115,20 +119,23 @@
</div> </div>
<div class="bottom-card"> <div class="bottom-card">
<img src="./Assets/SVG/Cellphone-icon.svg" alt="Cellphone icon"> <img src="./Assets/SVG/Cellphone-icon.svg" alt="Cellphone icon"/>
<p class="card-description"> <p class="card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 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. Cras euismod enim non dui fringilla interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p> </p>
</div> </div>
</div> </div>
<section class="bottom-infocard"> <section class="bottom-infocard">
<div class="text-bottom-infocard"> <div class="text-bottom-infocard">
<h2 class="bottom-infocard-title"> <h2 class="bottom-infocard-title">
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
</h2> </h2>
<p class="infocard-description"> <p class="infocard-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vulputate sapien non libero faucibus interdum. In eget tincidunt ipsum. 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. Quisque a tellus at lectus blandit tempor. Ut tristique auctor mi eget hendrerit. Curabitur venenatis felis vitae sagittis venenatis.
@ -138,28 +145,33 @@
<img class="banner-bottom-desktop" src="./Assets/Images/Bannner-bottom-desktop.png" alt="Bannner bottom desktop"/> <img class="banner-bottom-desktop" src="./Assets/Images/Bannner-bottom-desktop.png" alt="Bannner bottom desktop"/>
<img class="banner-bottom-mobile" src="./Assets/Images/Banner-bottom-mobile.png" alt="Banner bottom mobile"/> <img class="banner-bottom-mobile" src="./Assets/Images/Banner-bottom-mobile.png" alt="Banner bottom mobile"/>
</section> </section>
</main> </main>
<footer class="page-footer"> <footer class="page-footer">
<div> <div>
<a href="http://"> <a href="https://www.instagram.com/m3.ecommerce/">
<img src="./Assets/SVG/Instagram-logo.svg" alt="Instagram logo"> <img src="./Assets/SVG/Instagram-logo.svg" alt="Instagram logo"/>
</a> </a>
<a href="http://"> <a href="https://pt-br.facebook.com/digitalm3/">
<img src="./Assets/SVG/Facebook-logo.svg" alt="Facebook logo"> <img src="./Assets/SVG/Facebook-logo.svg" alt="Facebook logo"/>
</a> </a>
<a href="http://"> <a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">
<img src="./Assets/SVG/Youtube-logo.svg" alt="Youtube logo"> <img src="./Assets/SVG/Youtube-logo.svg" alt="Youtube logo"/>
</a> </a>
</div> </div>
<p> <p>
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00 Copyright © 2020 - Loja Comércio Eletrônico
CNPJ: 000.000.000/0001-00
</p> </p>
</footer> </footer>
</body> </body>
</html> </html>