AdilsonFernandoNevesOrnellas/practice-time-landing-page
1
0
Fork 0
forked from M3-Academy/practice-time-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

trabalho pratico pronto

Browse Source
This commit is contained in:
Adilson Fernando Neves Ornellas 2022-10-08 18:28:51 -03:00
parent 08edfea66b
commit d77b97353b
20 changed files with 443 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

327
css usados/index.css Normal file
View File

@ -0,0 +1,327 @@
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
header{
background: black;
display: flex;
justify-content: center;
padding: 28px 0px;
}
.logom3{
display:block;
}
.imagemcomputador{
display: block;
width: 100%;
}
.imagemcomputadorpequena{
display: none;
}
.info2bloco{
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0px 96px;
}
.texto2bloco{
margin-right: 124px;
max-width: 766px;
}
.imagem3pc{
display: block;
}
.imagem3pcpq{
display: none;
}
.escrito2bloco{
font-family: 'Inter';
font-weight: 400;
font-size: 32px;
text-transform: uppercase;
}
.escritog2bloco{
font-family: 'Inter';
font-weight: 500;
font-size: 48px;
text-transform: uppercase;
}
.p2bloco{
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
}
.bloco3{
padding: 74px 0;
background: #F0F0F0;
display: grid;
grid-template-columns: repeat(3, max-content);
gap: 20px;
justify-content: center;
}
.quadradosbloco3{
padding: 34px 26px 28px;
display: flex;
flex-direction: column;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
}
.imgbloco3{
display: block;
margin-bottom: 26px;
}
.descriçãobloco3{
padding: 0 26px 0;
max-width: 300px;
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
text-align: center;
color: black;
}
.imgbloco4{
display: block;
width: 100%;
}
.imgbloco4pq{
display: none;
}
.bloco05-buttoes{
margin-top: 144px;
background: linear-gradient(180deg, #00C8FF 0%, #15ACD6 100%);
}
.deslocamentobloco5{
display: grid;
grid-template-columns: repeat(2, max-content);
justify-content: center;
grid-gap: 20px;
position: relative;
top: -62px;
}
.buttoes{
padding: 36px 32px 66px;
display: flex;
flex-direction: column;
align-items: center;
background: #FFFFFF;
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
}
.imgbuttons{
display: block;
margin-bottom: 14px;
}
.textobuttons{
max-width: 368px;
text-align: center;
color: black;
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
max-width: 368px;
}
.bloco06{
display: flex;
align-items: center;
justify-content: center;
padding: 140px 0 180px;
}
.imgbloco06{
display: block;
margin-right: 40px;
}
.imgbloco06pq{
display: none;
}
.textobloco06{
max-width: 550px;
}
.titulobloco06{
font-family: 'Inter';
font-weight: 600;
font-size: 32px;
line-height: 20px;
color: black;
margin-bottom: 18px;
}
.subtitulobloco06{
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: black;
}
footer{
padding: 38px 76px 26px;
background: black;
height: 128px;
width: 100%;
}
.faixafinal{
display: flex;
flex-direction: column;
align-items: center;
}
.icones{
display: flex;
list-style: none;
}
.imgicon{
margin-right: 16px;
margin-bottom: 16px;
}
.textofinal{
font-family: 'Inter';
font-weight: 400;
font-size: 10px;
line-height: 12px;
text-transform: uppercase;
color: #BDBDBD;
}
@media screen and (max-width: 414px){
.imagemcomputador{
display: none;
}
.imagemcomputadorpequena{
display: block;
width: 100%;
}
.imgbloco4{
display: none;
}
.imgbloco4pq{
display: block;
width: 100%;
}
}
@media screen and (max-width: 882px){
.bloco05-buttoes{
margin-top: 125px;
}
.deslocamentobloco5{
grid-template-columns: 1fr;
gap: 16px;
padding: 0px 24px;
margin-top: 54px;
}
.textobuttons{
font-size: 14px;
}
.bloco06{
display: flex;
flex-direction:column;
align-items: center;
justify-content: center;
padding: 80px 0 416px;
}
.imgbloco06{
display: none;
}
.imgbloco06pq{
display: block;
width: 100%;
margin-bottom: 50px;
}
.textobloco06{
max-width: 350px;
}
.titulobloco06{
font-size: 24px;
}
.subtitulobloco06{
font-family: 'Inter';
font-weight: 400;
font-size: 16px;
line-height: 24px;
color: black;
}
}
@media screen and (max-width: 1108px){
.bloco3{
padding: 37px 32px 54px;
background: #F0F0F0;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
justify-content: center;}
}
@media screen and (max-width: 1024px){
.imagem3pc{
display: none;
}
.imagem3pcpq{
display: block;
}
.info2bloco{
padding: 84px 28px 158px;
display: flex;
align-items: center;
justify-content: center;
padding: 80px 0px 96px;
flex-direction: column;
}
.texto2bloco{
margin-right: 0px;
margin: 0 0 68px;
}
.escrito2bloco{
font-size: 20px ;
}
.escritog2bloco{
margin-bottom: 20px;
font-size: 28px;
}
}
@media screen and (min-width: 1550px){
.texto2bloco{
margin-right: 140px;
max-width: 1000px;
}
.escrito2bloco{
font-family: 'Inter';
font-weight: 400;
font-size: 45px;
text-tgitransform: uppercase;
}
.escritog2bloco{
font-family: 'Inter';
font-weight: 500;
font-size: 65px;
text-transform: uppercase;
}
.p2bloco{
font-family: 'Inter';
font-weight: 400;
font-size: 30px;
}
.quadradosbloco3{
width: 500px;
}
.imgbloco3{
display: block;
margin-bottom: 26px;
}
.descriçãobloco3{
max-width: 450px;
font-size: 25px;
}
}
@media screen and (min-width: 1900){
}

BIN
imagens/Imagem 3 computadores pequeno.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
imagens/Imagem 3 computadores.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.6 KiB

BIN
imagens/Imagem principal pequena.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 332 KiB

BIN
imagens/Logo M3 [branco] (4) 1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
imagens/Rectangle 9.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 828 KiB

BIN
imagens/facebook icone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 263 B

BIN
imagens/imagem lojinha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
imagens/imagem mão com dinheiro.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
imagens/imagem notebook meio aberto pequeno.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 142 KiB

BIN
imagens/imagem notebook meio aberto.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 946 KiB

BIN
imagens/imagem oculos grande.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 441 KiB

BIN
imagens/imagem oculos pequeno.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 246 KiB

BIN
imagens/imagem sacolinha.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

BIN
imagens/instagram icone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 484 B

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).png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
imagens/telefonezinho.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
imagens/youtube icone.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 342 B

116
index.html Normal file
View File

@ -0,0 +1,116 @@
<!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">
<title>Pratica 001 - M3 Academy </title>
<link rel="stylesheet" href="/css usados/index.css">
</head>
<body>
<!--parte preta com o simbolo da M3, "cabeçario"-->
<header>
<a href="index.html">
<img class="logom3" src="imagens/Logo M3 [branco] (4) 1.png" alt="Logo M3 ">
</a>
</header>
<!--Parte do conteudo principal da Page-->
<main>
<!-- 1° bloco (section) -Imagem principal, computador encima da mesa-->
<section>
<img class="imagemcomputador" src="imagens/Rectangle 9.jpg" alt="Imagem computador encima da mesa">
<img class="imagemcomputadorpequena" src="imagens/Imagem principal pequena.png" alt="Imagem computador encima da mesa pequena ">
</section>
<!--2° bloco, Descrição e a imagem dos 3 computadores ao lado-->
<section class="info2bloco">
<!--div não é semantico, usava somente p ajuda a organizar o css-->
<div class="texto2bloco">
<h2 class="escrito2bloco">Lorem Ipsum</h2>
<h1 class="escritog2bloco">Dolor sit amet</h1>
<p class="p2bloco">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>
</div>
<img class="imagem3pc" src="imagens/Imagem 3 computadores.png" alt="Imagem 3 computadores">
<img class="imagem3pcpq" src="imagens/Imagem 3 computadores pequeno.png" alt="imagem 3 computadores pequeno">
</section>
<!--3° bloco, sessão dos 3 quadrados com informaçoes-->
<section class="bloco3">
<!--Cada div é referente a um quadradinho-->
<div class="quadradosbloco3">
<img class="imgbloco3" src="imagens/imagem lojinha.png" alt="loginha">
<p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="quadradosbloco3">
<img class="imgbloco3" src="imagens/imagem sacolinha.png" alt="sacolinha">
<p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
<div class="quadradosbloco3">
<img class="imgbloco3" src="imagens/imagem mão com dinheiro.png" alt="mao com dinheiro">
<p class="descriçãobloco3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </p>
</div>
</section>
<!--4° bloco, imagem do notebook meio aberto-->
<section class="bloco4">
<img class="imgbloco4" src="imagens/imagem notebook meio aberto.png" alt="Imagem notebook meio aberto">
<img class="imgbloco4pq" src="imagens/imagem notebook meio aberto pequeno.png" alt="Imagem noteboook meio aberto">
</section>
<!--5° bloco, os "buttos"-->
<section class="bloco05-buttoes">
<!--Div inglobando todos os buttões, patra fazer o efeito de deslocamento no css-->
<div class="deslocamentobloco5">
<!-- Cada Div representa 1 "button"-->
<div class="buttoes">
<img class="imgbuttons" src="imagens/money (1).png" alt="notinha de dinheiro">
<p class="textobuttons">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 class="buttoes">
<img class="imgbuttons" src="imagens/laptop 1.png" alt="notebook">
<p class="textobuttons">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 class="buttoes">
<img class="imgbuttons" src="imagens/imagem mão com dinheiro.png" alt="mãozinha com dinheiro">
<p class="textobuttons">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 class="buttoes">
<img class="imgbuttons" src="imagens/telefonezinho.png" alt="telefonezinho">
<p class="textobuttons">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>
<!--6° bloco, imagem do oculos e texto-->
<section class="bloco06">
<img class="imgbloco06" src="imagens/imagem oculos grande.png" alt="">
<img class="imgbloco06pq" src="imagens/imagem oculos pequeno.png" alt="">
<div class="textobloco06">
<h2 class="titulobloco06">Lorem ipsum dolor sit amet </h2>
<p class="subtitulobloco06">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>
</div>
</section>
</main>
<!-- Final da pagina.-->
<footer>
<!--faixa preta com links p as redes sociais e informações-->
<section class="faixafinal">
<ul class="icones">
<li>
<a href="index.html">
<img class="imgicon" src="imagens/instagram icone.png" alt="Instagram icone">
</a>
</li>
<li>
<a href="index.html">
<img class="imgicon" src="imagens/facebook icone.png" alt="Facebook icone">
</a>
</li>
<li>
<a href="index.html">
<img class="imgicon" src="imagens/youtube icone.png" alt="you tube icone">
</a>
</li>
</ul>
<p class="textofinal">
Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00
</p>
</section>
</footer>
</body>
</html>