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

RodrigoJorge #1

Merged
RodrigoJorge merged 13 commits from RodrigoJorge into main 2022-10-13 00:50:18 +00:00
Conversation 0 Commits 13 Files Changed 21 +488
21 changed files with 488 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
imagens/Group (1).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.9 KiB

BIN
imagens/Group (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
imagens/Group (3).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
imagens/Group (4).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 490 B

BIN
imagens/Group.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 939 B

9
imagens/Logo-M3Academy 1.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
imagens/Rectangle 13.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 234 KiB

BIN
imagens/Rectangle 15 (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

BIN
imagens/Rectangle 15.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

BIN
imagens/Rectangle 16.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 215 KiB

BIN
imagens/Rectangle 17.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 318 KiB

BIN
imagens/Rectangle 9 (2).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 341 KiB

BIN
imagens/Rectangle 9.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 MiB

BIN
imagens/facebook-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 B

BIN
imagens/fxemoji_threenetworkedcomputers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
imagens/laptop 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
imagens/money (1) 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
imagens/shopping-bag (1) 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
imagens/youtube 2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 351 B

121
index.html Normal file
View 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
View 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;
}
}