RodrigoJorge #1
BIN
imagens/Group (1).png
Normal file
BIN
imagens/Group (1).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
imagens/Group (2).png
Normal file
BIN
imagens/Group (2).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
imagens/Group (3).png
Normal file
BIN
imagens/Group (3).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
imagens/Group (4).png
Normal file
BIN
imagens/Group (4).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 490 B |
BIN
imagens/Group.png
Normal file
BIN
imagens/Group.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 939 B |
9
imagens/Logo-M3Academy 1.svg
Normal file
9
imagens/Logo-M3Academy 1.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 19 KiB |
BIN
imagens/Rectangle 13.png
Normal file
BIN
imagens/Rectangle 13.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
imagens/Rectangle 15 (2).png
Normal file
BIN
imagens/Rectangle 15 (2).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
imagens/Rectangle 15.png
Normal file
BIN
imagens/Rectangle 15.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
imagens/Rectangle 16.png
Normal file
BIN
imagens/Rectangle 16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
imagens/Rectangle 17.png
Normal file
BIN
imagens/Rectangle 17.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
BIN
imagens/Rectangle 9 (2).png
Normal file
BIN
imagens/Rectangle 9 (2).png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
BIN
imagens/Rectangle 9.png
Normal file
BIN
imagens/Rectangle 9.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
imagens/facebook-logo.png
Normal file
BIN
imagens/facebook-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
BIN
imagens/fxemoji_threenetworkedcomputers.png
Normal file
BIN
imagens/fxemoji_threenetworkedcomputers.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
imagens/laptop 1.png
Normal file
BIN
imagens/laptop 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
imagens/money (1) 2.png
Normal file
BIN
imagens/money (1) 2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
imagens/shopping-bag (1) 1.png
Normal file
BIN
imagens/shopping-bag (1) 1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
imagens/youtube 2.png
Normal file
BIN
imagens/youtube 2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 351 B |
121
index.html
Normal file
121
index.html
Normal file
@ -0,0 +1,121 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="style.css">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter&display=swap" rel="stylesheet">
|
||||
<title>Desafio 1 - Landing Page</title>
|
||||
</head>
|
||||
<body>
|
||||
<header class="cabecalho">
|
||||
<img class="imagemCabecalho" src="imagens/Logo-M3Academy 1.svg" alt="Imagem m3 Academy">
|
||||
</header>
|
||||
<main>
|
||||
<figure>
|
||||
<img class="imagemCorpoMobile" src="imagens/Rectangle 9 (2).png" alt="imagem de computador">
|
||||
<img class="imagemCorpoPt1" src="imagens/Rectangle 9.png" alt="imagem de computador">
|
||||
<figcaption class="corpoPt1">
|
||||
<h2>Lorem Ipsum</h2>
|
||||
<h1>Dolor sit amet</h1>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. Curabitur ut tortor sed lacus egestas vulputate vel sit amet velit. Nulla suscipit magna dui.</p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="corpoPt2">
|
||||
<img class="imagem2" src="imagens/fxemoji_threenetworkedcomputers.png" alt="Imagem de tres computadores">
|
||||
</figure>
|
||||
<section class="corpoPt3">
|
||||
<figure class="quadrado1">
|
||||
<img src="imagens/Group.png" alt="imagem de loja">
|
||||
<figcaption>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="quadrado2">
|
||||
<img src="imagens/shopping-bag (1) 1.png" alt="imagem de bolsa">
|
||||
<figcaption>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="quadrado3">
|
||||
<img src="imagens/Group (1).png" alt="imagem de dinheiro">
|
||||
<figcaption>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="corpoPt4Mobile">
|
||||
<div>
|
||||
<figure class="retangulo1">
|
||||
<img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado">
|
||||
</figure>
|
||||
<figure class="retangulo2">
|
||||
<img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado">
|
||||
</figure>
|
||||
</div>
|
||||
<figure class="retangulo3">
|
||||
<img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto">
|
||||
</figure>
|
||||
</section>
|
||||
<section class="corpoPt4">
|
||||
<div>
|
||||
<figure class="retangulo1">
|
||||
<img src="imagens/Rectangle 13.png" alt="imagem de notebook fechado">
|
||||
</figure>
|
||||
<figure class="retangulo2">
|
||||
<img src="imagens/Rectangle 16.png" alt="imagem de notebook quase fechado">
|
||||
</figure>
|
||||
<figure class="retangulo3">
|
||||
<img src="imagens/Rectangle 17.png" alt="imagem de notebook aberto">
|
||||
</figure>
|
||||
</div>
|
||||
</section>
|
||||
<section class="corpoPt5">
|
||||
<figure class="box1">
|
||||
<img src="imagens/money (1) 2.png" alt="imagem de dinheiro">
|
||||
<figcaption>
|
||||
<p>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>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="box2">
|
||||
<img src="imagens/Group (1).png" alt="imagem de dinheiro">
|
||||
<figcaption>
|
||||
<p>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>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="box3">
|
||||
<img src="imagens/laptop 1.png" alt="imagem de dinheiro">
|
||||
<figcaption>
|
||||
<p>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>
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="box4">
|
||||
<img src="imagens/Group (3).png" alt="imagem de dinheiro">
|
||||
<figcaption>
|
||||
<p>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>
|
||||
</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section class="corpoPt6">
|
||||
<img class="retanguloMobile" src="imagens/Rectangle 15 (2).png" alt="imagem de retangulo">
|
||||
<h1>Lorem ipsum dolor sit amet</h1>
|
||||
<p>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.
|
||||
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.</p>
|
||||
<img class="retanguloDesktop" src="imagens/Rectangle 15.png" alt="imagem de retangulo">
|
||||
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<div class="divRodape">
|
||||
<img src="imagens/Group (4).png" alt="icone instagram">
|
||||
<img src="imagens/facebook-logo.png" alt="icone facebook">
|
||||
<img src="imagens/youtube 2.png" alt="icone youtube">
|
||||
</div>
|
||||
<p class="paragrafoRodape">Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
358
style.css
Normal file
358
style.css
Normal file
@ -0,0 +1,358 @@
|
||||
body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-family: inter;
|
||||
}
|
||||
main figure{
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
.cabecalho {
|
||||
background-color: #000000;
|
||||
text-align: center;
|
||||
}
|
||||
.imagemCabecalho {
|
||||
width: 12%;
|
||||
height: 42%;
|
||||
padding-top: 1.4%;
|
||||
padding-bottom: 1.4%;
|
||||
}
|
||||
.imagemCorpoMobile{
|
||||
display: none;
|
||||
}
|
||||
.imagemCorpoPt1{
|
||||
width: 100%;
|
||||
}
|
||||
.corpoPt1{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
}
|
||||
.corpoPt1 h2{
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-top: 73px;
|
||||
line-height: 39px;
|
||||
font-size: 32px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.corpoPt1 h1{
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.corpoPt1 p{
|
||||
margin-top: 28px;
|
||||
width: 40%;
|
||||
font-size: 16px;
|
||||
}
|
||||
.corpoPt2{
|
||||
margin-top: 73px;
|
||||
text-align: center;
|
||||
}
|
||||
.imagem2{
|
||||
width: 16%;
|
||||
}
|
||||
.corpoPt3{
|
||||
margin-top: 178px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 1%;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
section figure {
|
||||
text-align: center;
|
||||
width: 18%;
|
||||
}
|
||||
section figure img{
|
||||
width: 29%;
|
||||
}
|
||||
section figure figcaption p{
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
margin-left: 11%;
|
||||
margin-right: 11%;
|
||||
}
|
||||
.quadrado1 {
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.quadrado2 {
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.quadrado3 {
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
}
|
||||
.quadrado1 img{
|
||||
margin-top: 47px;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
.quadrado2 img{
|
||||
margin-top: 35px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.quadrado3 img{
|
||||
margin-top: 31px;
|
||||
margin-bottom: 31px;
|
||||
}
|
||||
.corpoPt4{
|
||||
background: #E0E0E0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.corpoPt4Mobile{
|
||||
display: none;
|
||||
background: #E0E0E0;
|
||||
}
|
||||
.corpoPt4 div{
|
||||
position: relative;
|
||||
gap: 2%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.corpoPt4 figure {
|
||||
width: 29%;
|
||||
position: relative;
|
||||
top: 70px;
|
||||
}
|
||||
.corpoPt4 figure img{
|
||||
width: 100%;
|
||||
}
|
||||
.corpoPt5{
|
||||
margin-top: 129px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 0.8%;
|
||||
}
|
||||
.corpoPt5 figure{
|
||||
width: 22.5%;
|
||||
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
.corpoPt5 figure p{
|
||||
font-size: 16px;
|
||||
margin-bottom: 65px;
|
||||
}
|
||||
.box1 img{
|
||||
margin-top: 51px;
|
||||
width: 24%;
|
||||
}
|
||||
.box2 img{
|
||||
margin-top: 41px;
|
||||
width: 24%;
|
||||
}
|
||||
.box3 img{
|
||||
margin-top: 41px;
|
||||
width: 24%;
|
||||
}
|
||||
.box4 img{
|
||||
margin-top: 35px;
|
||||
width: 20%;
|
||||
}
|
||||
.corpoPt6{
|
||||
margin-top: 108px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.corpoPt6 p{
|
||||
font-size: 16px;
|
||||
width: 28%;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.corpoPt6 h1{
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
width: 22%;
|
||||
margin-block-start: 0;
|
||||
margin-block-end: 0;
|
||||
}
|
||||
.corpoPt6 img{
|
||||
width: 71%;
|
||||
}
|
||||
.retanguloMobile{
|
||||
display: none;
|
||||
}
|
||||
footer{
|
||||
margin-top: 116px ;
|
||||
background: #000000;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.divRodape{
|
||||
margin-top: 38px;
|
||||
gap: 21.5px;
|
||||
width: 5%;
|
||||
}
|
||||
.divRodape img{
|
||||
width: 23%;
|
||||
}
|
||||
.paragrafoRodape{
|
||||
color:#BDBDBD;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 38px;
|
||||
}
|
||||
@media(max-width:1024px){
|
||||
.cabecalho {
|
||||
height: 101px;
|
||||
}
|
||||
.imagemCabecalho{
|
||||
margin-top: 18px;
|
||||
width: 52%;
|
||||
}
|
||||
.imagemCorpoMobile{
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
.imagemCorpoPt1{
|
||||
display: none;
|
||||
}
|
||||
.corpoPt1 h2{
|
||||
font-size: 20px;
|
||||
}
|
||||
.corpoPt1 h1{
|
||||
font-size: 28px;
|
||||
}
|
||||
.corpoPt1 p{
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
width: 86%;
|
||||
}
|
||||
.imagem2{
|
||||
width: 58%;
|
||||
}
|
||||
.corpoPt3{
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
}
|
||||
section figure {
|
||||
text-align: center;
|
||||
width: 84%;
|
||||
}
|
||||
.corpoPt4Mobile div figure{
|
||||
width: 42%;
|
||||
}
|
||||
.corpoPt4Mobile div figure img{
|
||||
width: 100%;
|
||||
}
|
||||
.corpoPt4Mobile figure{
|
||||
width:100%;
|
||||
background: #E0E0E0;
|
||||
}
|
||||
.corpoPt4Mobile figure img{
|
||||
width:86%;
|
||||
}
|
||||
.corpoPt4{
|
||||
display: none;
|
||||
}
|
||||
.corpoPt5 figure figcaption p{
|
||||
font-size: 14px;
|
||||
}
|
||||
.retangulo2{
|
||||
order: 1;
|
||||
}
|
||||
.retangulo1{
|
||||
order: 2;
|
||||
}
|
||||
.retangulo3{
|
||||
order: 3;
|
||||
}
|
||||
.corpoPt5{
|
||||
margin-top: 129px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.corpoPt5 figure{
|
||||
width: 89%;
|
||||
}
|
||||
.divRodape{
|
||||
width: 25%;
|
||||
}
|
||||
.corpoPt6 p{
|
||||
width: 84%;
|
||||
order: 3;
|
||||
}
|
||||
.corpoPt6 h1{
|
||||
font-size: 24px;
|
||||
width: 76%;
|
||||
order: 2;
|
||||
}
|
||||
.corpoPt6 img{
|
||||
width: 100%;
|
||||
order: 1;
|
||||
height: 414px;
|
||||
}
|
||||
.retanguloDesktop{
|
||||
display: none;
|
||||
}
|
||||
.retanguloMobile{
|
||||
display: flex;
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
.corpoPt4Mobile{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
.corpoPt4Mobile div{
|
||||
background: #E0E0E0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
gap: 2%;
|
||||
}
|
||||
.paragrafoRodape{
|
||||
width: 63%;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media(min-width: 2500px){
|
||||
.corpoPt1 h2{
|
||||
font-size: 64px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
.corpoPt1 h1{
|
||||
font-size: 96px;
|
||||
}
|
||||
.corpoPt1 p{
|
||||
font-size: 32px;
|
||||
}
|
||||
section figure figcaption p{
|
||||
font-size: 32px;
|
||||
}
|
||||
.corpoPt4 div{
|
||||
position: relative;
|
||||
gap: 2%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
}
|
||||
.corpoPt5 figure p{
|
||||
font-size: 32px;
|
||||
}
|
||||
.corpoPt6 p{
|
||||
font-size: 32px;
|
||||
}
|
||||
.corpoPt6 h1{
|
||||
font-size: 64px;
|
||||
}
|
||||
.paragrafoRodape{
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user