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