Feature: adjustment banner-midle, font-size mobile/desktop
This commit is contained in:
parent
57392507f7
commit
85121413d0
BIN
Assets/Images/Banner-midle-mobile.png
Normal file
BIN
Assets/Images/Banner-midle-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 171 KiB |
151
Styles/index.css
151
Styles/index.css
@ -25,6 +25,7 @@ body{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
.text-infocard{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -32,14 +33,12 @@ body{
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.infocard-subtitle{
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.infocard-title{
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
@ -47,27 +46,25 @@ body{
|
||||
margin-bottom: 20px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.infocard-description{
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
width: 38%;
|
||||
}
|
||||
|
||||
.infocard-image{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.top-cards{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 178px 150px 80px;
|
||||
gap: 26px;
|
||||
}
|
||||
|
||||
.top-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -80,34 +77,31 @@ body{
|
||||
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{
|
||||
display: flex;
|
||||
gap: 39px;
|
||||
padding: 0 72px;
|
||||
gap: 4.3%;
|
||||
justify-content: center;
|
||||
background: #E0E0E0;
|
||||
}
|
||||
|
||||
.banners-midle img{
|
||||
position: relative;
|
||||
top: 62px;
|
||||
|
||||
top: 35px;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.banner-midle{
|
||||
display: flex;
|
||||
gap: 39px;
|
||||
gap: 3.4%;
|
||||
}
|
||||
.banner-midle img{
|
||||
max-width: 50%;
|
||||
}
|
||||
.banner-midle-third{
|
||||
gap: 39px;
|
||||
width: 32%;
|
||||
}
|
||||
|
||||
|
||||
.bottom-cards{
|
||||
display: flex;
|
||||
@ -115,7 +109,6 @@ body{
|
||||
padding: 178px 30px 108px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.bottom-card{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -128,12 +121,12 @@ body{
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
|
||||
.bottom-infocard{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.text-bottom-infocard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -142,19 +135,18 @@ body{
|
||||
width: 80%;
|
||||
padding: 0 0 50px;
|
||||
}
|
||||
|
||||
.bottom-infocard-title{
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.bottom-infocard img{
|
||||
justify-content: center;
|
||||
width: 70%;
|
||||
padding: 0 0 116px;
|
||||
}
|
||||
|
||||
|
||||
.page-footer{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -164,7 +156,6 @@ body{
|
||||
gap: 16px;
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
.page-footer p{
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
@ -175,6 +166,7 @@ body{
|
||||
color: #BDBDBD;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 414px){
|
||||
.banner-principal-desktop,
|
||||
.infocard-image-desktop{
|
||||
@ -184,6 +176,8 @@ body{
|
||||
.infocard-image-mobile{
|
||||
display: unset;
|
||||
}
|
||||
|
||||
|
||||
.text-bottom-infocard{
|
||||
width: 100%;
|
||||
}
|
||||
@ -193,6 +187,11 @@ body{
|
||||
.bottom-infocard img{
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
.page-footer p{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px){
|
||||
@ -208,11 +207,40 @@ body{
|
||||
width: 100%;
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
|
||||
.top-cards{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
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{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@ -221,21 +249,25 @@ body{
|
||||
.bottom-card{
|
||||
max-width: 350px;
|
||||
}
|
||||
|
||||
|
||||
.bottom-infocard{
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.bottom-infocard img{
|
||||
padding: unset;
|
||||
}
|
||||
.text-bottom-infocard{
|
||||
padding: 50px 0 87px;
|
||||
}
|
||||
|
||||
|
||||
.banner-bottom-desktop{
|
||||
display: none;
|
||||
}
|
||||
.banner-bottom-mobile{
|
||||
display: unset;
|
||||
}
|
||||
.bottom-infocard img{
|
||||
padding: unset;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2000px){
|
||||
@ -250,6 +282,8 @@ body{
|
||||
.card-description{
|
||||
font-size: 25px;
|
||||
}
|
||||
|
||||
|
||||
.top-infocard{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -260,6 +294,8 @@ body{
|
||||
max-width: 400px;
|
||||
align-items: unset;
|
||||
}
|
||||
|
||||
|
||||
.top-cards{
|
||||
padding: 200px 250px 80px;
|
||||
}
|
||||
@ -269,12 +305,63 @@ body{
|
||||
padding: 40px;
|
||||
gap: 40px;
|
||||
}
|
||||
|
||||
|
||||
.bottom-cards{
|
||||
padding: 178px 72px 80px;
|
||||
}
|
||||
.bottom-card{
|
||||
padding: 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;
|
||||
}
|
||||
}
|
||||
54
index.html
54
index.html
@ -16,6 +16,7 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<header class="page-header">
|
||||
|
||||
<a href="/">
|
||||
@ -32,6 +33,7 @@
|
||||
</div>
|
||||
|
||||
<section class="top-infocard">
|
||||
|
||||
<div class="text-infocard">
|
||||
<h2 class="infocard-subtitle"> Lorem ipsum </h2>
|
||||
<h1 class="infocard-title"> dolor sit amet </h1>
|
||||
@ -43,14 +45,16 @@
|
||||
</div>
|
||||
|
||||
<div class="infocard-image">
|
||||
<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-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"/>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
<div class="top-cards">
|
||||
|
||||
<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.
|
||||
Cras euismod enim non dui fringilla interdum.
|
||||
@ -58,7 +62,7 @@
|
||||
</div>
|
||||
|
||||
<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.
|
||||
Cras euismod enim non dui fringilla interdum.
|
||||
@ -66,7 +70,7 @@
|
||||
</div>
|
||||
|
||||
<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.
|
||||
Cras euismod enim non dui fringilla interdum.
|
||||
@ -75,20 +79,20 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!--<div class="banner-midle-back">
|
||||
<div class="banners-midle">
|
||||
<div class="banners-midle">
|
||||
|
||||
<div class="banner-midle">
|
||||
<img src="./Assets/Images/Banner-midle-first.png" alt="Banner midle first">
|
||||
<img src="./Assets/Images/Banner-midle-second.png" alt="Banner midle second">
|
||||
</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-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">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
@ -97,7 +101,7 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
@ -106,7 +110,7 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
@ -115,20 +119,23 @@
|
||||
</div>
|
||||
|
||||
<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">
|
||||
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 class="bottom-infocard">
|
||||
|
||||
<div class="text-bottom-infocard">
|
||||
<h2 class="bottom-infocard-title">
|
||||
Lorem ipsum dolor sit amet
|
||||
</h2>
|
||||
|
||||
<p class="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.
|
||||
@ -138,28 +145,33 @@
|
||||
|
||||
<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"/>
|
||||
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer class="page-footer">
|
||||
|
||||
<div>
|
||||
<a href="http://">
|
||||
<img src="./Assets/SVG/Instagram-logo.svg" alt="Instagram logo">
|
||||
<a href="https://www.instagram.com/m3.ecommerce/">
|
||||
<img src="./Assets/SVG/Instagram-logo.svg" alt="Instagram logo"/>
|
||||
</a>
|
||||
|
||||
<a href="http://">
|
||||
<img src="./Assets/SVG/Facebook-logo.svg" alt="Facebook logo">
|
||||
<a href="https://pt-br.facebook.com/digitalm3/">
|
||||
<img src="./Assets/SVG/Facebook-logo.svg" alt="Facebook logo"/>
|
||||
</a>
|
||||
|
||||
<a href="http://">
|
||||
<img src="./Assets/SVG/Youtube-logo.svg" alt="Youtube logo">
|
||||
<a href="https://www.youtube.com/channel/UCW4o86gZG_ceA8CmHltXeXA">
|
||||
<img src="./Assets/SVG/Youtube-logo.svg" alt="Youtube logo"/>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user