forked from M3-Academy/challenge-landing-page
finalizando meuprojeto.
This commit is contained in:
parent
8806507b5a
commit
99d1cd71e0
@ -1,9 +1,10 @@
|
|||||||
*{
|
* {
|
||||||
margin:0;
|
margin: 0;
|
||||||
padding:0;
|
padding: 0;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
.page-header{
|
|
||||||
|
.page-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 101px;
|
height: 101px;
|
||||||
@ -13,84 +14,135 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
background: #000000;
|
background: #000000;
|
||||||
}
|
}
|
||||||
.header-logo{
|
|
||||||
|
.header-logo {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 43px;
|
height: 43px;
|
||||||
}
|
}
|
||||||
.main-banner{
|
|
||||||
|
.main-banner {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 414px){
|
|
||||||
.desktop-hidden{
|
@media screen and (max-width: 414px) {
|
||||||
|
.desktop-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.div-image-pc{
|
|
||||||
|
.div-image-pc {
|
||||||
margin: 15% 0;
|
margin: 15% 0;
|
||||||
}
|
}
|
||||||
.image-pc{
|
|
||||||
width: 50%;
|
.image-pc {
|
||||||
}
|
|
||||||
.infoboxes-sub-wrapper{
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.div-infobox{
|
|
||||||
|
|
||||||
width: 96%;
|
|
||||||
height: 70%;
|
|
||||||
}
|
|
||||||
.imagem-note-wrapper{
|
|
||||||
width: 100%;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
.image-note-mobile{
|
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.infoboxes-sub-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.div-infobox {
|
||||||
|
gap: 6%;
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.imagem-note-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-note-mobile {
|
||||||
|
width: 50%;
|
||||||
|
gap: 2%;
|
||||||
|
margin: 0.3% 0;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
.imagem-note{
|
|
||||||
|
.imagem-note {
|
||||||
width: 96%;
|
width: 96%;
|
||||||
height: 70%;
|
height: 70%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.footer-image {
|
||||||
|
margin: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-footer {
|
||||||
|
margin: 5%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 12px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #bdbdbd;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 415px) {
|
@media screen and (min-width: 415px) {
|
||||||
.mobile-hidden{
|
.mobile-hidden {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
.div-image-pc{
|
|
||||||
|
.div-image-pc {
|
||||||
margin: 5% 0;
|
margin: 5% 0;
|
||||||
}
|
}
|
||||||
.image-pc{
|
|
||||||
|
.image-pc {
|
||||||
width: 15%;
|
width: 15%;
|
||||||
}
|
}
|
||||||
.infoboxes-sub-wrapper{
|
|
||||||
|
.infoboxes-sub-wrapper {
|
||||||
width: 70%;
|
width: 70%;
|
||||||
|
height: 10%;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
margin: 5% 0;
|
margin: 5% 0;
|
||||||
}
|
}
|
||||||
.div-infobox{
|
|
||||||
width: 40%;
|
.div-infobox {
|
||||||
|
width: 100%;
|
||||||
margin: 5% 0;
|
margin: 5% 0;
|
||||||
}
|
}
|
||||||
.image-note-desktop{
|
|
||||||
|
.image-note-desktop {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
gap: 2%;
|
||||||
}
|
}
|
||||||
.imagem-note{
|
|
||||||
|
.imagem-note {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text-footer {
|
||||||
|
margin: 3% 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: -20px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
line-height: 12px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #bdbdbd;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.div-title{
|
|
||||||
margin: 5% 0;
|
.div-title {
|
||||||
|
margin: 15% 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.title-one{
|
|
||||||
|
.title-one {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: 'Inter';
|
font-family: 'Inter';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -101,7 +153,8 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
.title-two{
|
|
||||||
|
.title-two {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
font-family: 'Inter';
|
font-family: 'Inter';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -112,7 +165,8 @@
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
.title-three{
|
|
||||||
|
.title-three {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
font-family: 'Inter';
|
font-family: 'Inter';
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
@ -123,26 +177,30 @@
|
|||||||
color: #000000;
|
color: #000000;
|
||||||
|
|
||||||
}
|
}
|
||||||
.div-image-pc{
|
|
||||||
|
.div-image-pc {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
.infoboxes-wrapper{
|
|
||||||
|
.infoboxes-wrapper {
|
||||||
margin: 5% 0;
|
margin: 5% 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
gap: 2%;
|
gap: 2%;
|
||||||
}
|
}
|
||||||
.infoboxes-sub-wrapper{
|
|
||||||
|
.infoboxes-sub-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 2%;
|
gap: 2%;
|
||||||
}
|
}
|
||||||
.div-infobox{
|
|
||||||
|
.div-infobox {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -154,26 +212,32 @@
|
|||||||
line-height: 24px;
|
line-height: 24px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
box-shadow: 0 0 8px #E0E0E0;;
|
box-shadow: 0 0 8px #E0E0E0;
|
||||||
|
;
|
||||||
}
|
}
|
||||||
.infobox-image{
|
|
||||||
|
.infobox-image {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 35%;
|
width: 35%;
|
||||||
}
|
}
|
||||||
.imagem-note-wrapper{
|
|
||||||
gap: 10%;
|
.imagem-note-wrapper {
|
||||||
margin: 5% 0;
|
margin: 5% 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
|
|
||||||
background-color: #E0E0E0;;
|
background-color: #E0E0E0;
|
||||||
|
;
|
||||||
}
|
}
|
||||||
.imagem-note{
|
|
||||||
|
.imagem-note {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 5% 0;
|
margin: 5% 0;
|
||||||
}
|
}
|
||||||
.page-footer{
|
|
||||||
|
.page-footer {
|
||||||
|
margin: 5% 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -191,43 +255,44 @@
|
|||||||
background: #000000;
|
background: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-footer{
|
.page-footer {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
}
|
}
|
||||||
.text-footer{
|
|
||||||
text-transform: uppercase;
|
.icones-footer {
|
||||||
line-height: 12px;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #bdbdbd ;
|
|
||||||
}
|
|
||||||
.icones-footer{
|
|
||||||
display: flex;
|
display: flex;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
margin-bottom: 16px;
|
margin-bottom: 16px;
|
||||||
}
|
}
|
||||||
.footer-li{
|
|
||||||
|
.footer-li {
|
||||||
margin: 0 8px
|
margin: 0 8px
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 415px) {
|
@media screen and (min-width: 415px) {
|
||||||
.footer-image{
|
.footer-image {
|
||||||
margin-left: 10%;
|
|
||||||
display:flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 80%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media screen and (max-width: 414px){
|
|
||||||
.footer-image{
|
|
||||||
margin-left: 10%;
|
margin-left: 10%;
|
||||||
display:flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 414px) {
|
||||||
|
.footer-image {
|
||||||
|
margin-left: 10%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icones-footer {
|
||||||
|
margin: 2% 0;
|
||||||
}
|
}
|
||||||
BIN
assets/images/Group.png
Normal file
BIN
assets/images/Group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
assets/images/laptop.png
Normal file
BIN
assets/images/laptop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
assets/images/money.png
Normal file
BIN
assets/images/money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
19
index.html
19
index.html
@ -20,7 +20,8 @@
|
|||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<img class="main-banner desktop-hidden" src="./assets/images/imagem-top.png" alt="Banner Principal Desktop">
|
<img class="main-banner desktop-hidden" src="./assets/images/imagem-top.png" alt="Banner Principal Desktop">
|
||||||
<img class="main-banner mobile-hidden" src="./assets/images/imagem-top-mobile.png" alt="Banner Principal Mobile">
|
<img class="main-banner mobile-hidden" src="./assets/images/imagem-top-mobile.png"
|
||||||
|
alt="Banner Principal Mobile">
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
@ -52,7 +53,7 @@
|
|||||||
interdum.
|
interdum.
|
||||||
</div>
|
</div>
|
||||||
<div class="div-infobox">
|
<div class="div-infobox">
|
||||||
<img class="infobox-image" src="./assets/images/gorjeta.png" alt="Logo da compra">
|
<img class="infobox-image" src="./assets/images/coin.png" alt="Logo da compra">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
interdum.
|
interdum.
|
||||||
</div>
|
</div>
|
||||||
@ -92,26 +93,26 @@
|
|||||||
<div class="infoboxes-wrapper">
|
<div class="infoboxes-wrapper">
|
||||||
<div class="infoboxes-sub-wrapper">
|
<div class="infoboxes-sub-wrapper">
|
||||||
<div class="div-infobox">
|
<div class="div-infobox">
|
||||||
<img class="infobox-image" src="./assets/images/loja-online.png" alt="Logo da loja online">
|
<img class="infobox-image" src="./assets/images/money.png" alt="Logo da loja online">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
interdum. Lorem ipsum dolor sit amet,
|
interdum. Lorem ipsum dolor sit amet,
|
||||||
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<div class="div-infobox">
|
<div class="div-infobox">
|
||||||
<img class="infobox-image" src="./assets/images/loja-online.png" alt="Logo da compra segura">
|
<img class="infobox-image" src="./assets/images/coin.png" alt="Logo da compra segura">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
interdum. Lorem ipsum dolor sit amet,
|
interdum. Lorem ipsum dolor sit amet,
|
||||||
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
</div>
|
</div>
|
||||||
<div class="div-infobox">
|
<div class="div-infobox">
|
||||||
<img class="infobox-image" src="./assets/images/gorjeta.png" alt="Logo da compra">
|
<img class="infobox-image" src="./assets/images/laptop.png" alt="Logo da compra">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
interdum. Lorem ipsum dolor sit amet,
|
interdum. Lorem ipsum dolor sit amet,
|
||||||
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
</div>
|
</div>
|
||||||
<div class="div-infobox">
|
<div class="div-infobox">
|
||||||
<img class="infobox-image" src="./assets/images/gorjeta.png" alt="Logo da compra">
|
<img class="infobox-image" src="./assets/images/Group.png" alt="Logo da compra">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
|
||||||
interdum. Lorem ipsum dolor sit amet,
|
interdum. Lorem ipsum dolor sit amet,
|
||||||
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
|
||||||
@ -133,8 +134,9 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<section>
|
<section>
|
||||||
<img class="main-banner footer-image desktop-hidden" src="./assets/images/imagem-baixo.png" alt="Banner Principal Desktop">
|
<img class="main-banner footer-image desktop-hidden" src="./assets/images/imagem-baixo.png"
|
||||||
|
alt="Banner Principal Desktop">
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
<footer class="page-footer">
|
<footer class="page-footer">
|
||||||
<ul class="icones-footer">
|
<ul class="icones-footer">
|
||||||
@ -143,6 +145,7 @@
|
|||||||
<li class="footer-li"><img src="/assets/images/youtube.png"></i></a></li>
|
<li class="footer-li"><img src="/assets/images/youtube.png"></i></a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<p class="text-footer">
|
<p class="text-footer">
|
||||||
|
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||||
|
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
</footer>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user