feature/containers #1
9
Assets/Images/Logo-M3Academy 1.svg
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
Assets/Images/bag.png
Normal file
|
After Width: | Height: | Size: 2.0 KiB |
BIN
Assets/Images/celular4.png
Normal file
|
After Width: | Height: | Size: 1.7 KiB |
BIN
Assets/Images/coin.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
Assets/Images/computadores-conectados-mobile.png
Normal file
|
After Width: | Height: | Size: 3.7 KiB |
BIN
Assets/Images/connected-computers.png
Normal file
|
After Width: | Height: | Size: 4.6 KiB |
BIN
Assets/Images/dinheiro1.png
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
Assets/Images/imagem-bottom.png
Normal file
|
After Width: | Height: | Size: 362 KiB |
BIN
Assets/Images/laptop3.png
Normal file
|
After Width: | Height: | Size: 35 KiB |
BIN
Assets/Images/main-banner-desktop.png
Normal file
|
After Width: | Height: | Size: 1.5 MiB |
BIN
Assets/Images/main-banner-mobile.png
Normal file
|
After Width: | Height: | Size: 341 KiB |
BIN
Assets/Images/pagamento2.png
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
Assets/Images/paragrafo-container-3.png
Normal file
|
After Width: | Height: | Size: 9.3 KiB |
BIN
Assets/Images/pc1.png
Normal file
|
After Width: | Height: | Size: 234 KiB |
BIN
Assets/Images/pc2.png
Normal file
|
After Width: | Height: | Size: 215 KiB |
BIN
Assets/Images/pc3.png
Normal file
|
After Width: | Height: | Size: 318 KiB |
BIN
Assets/Images/shop.png
Normal file
|
After Width: | Height: | Size: 959 B |
BIN
Assets/Images/texto.png
Normal file
|
After Width: | Height: | Size: 18 KiB |
250
desafio1.css
Normal file
@ -0,0 +1,250 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.body {
|
||||
font-family: 'Inter', sans-serif;
|
||||
color: black;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*CABEÇALHO*/
|
||||
|
||||
.header {
|
||||
display: grid;
|
||||
background-color: black;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 101px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*BANNER PRINCIPAL*/
|
||||
|
||||
.imagem-banner-principal {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.imagem-banner-principal-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*TEXTO PRINCIPAL*/
|
||||
|
||||
.texto-principal {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
justify-content: center;
|
||||
padding: 73px 0px 73px 0px;
|
||||
}
|
||||
|
||||
.titulo1 {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
}
|
||||
|
||||
.titulo2 {
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.paragrafo-principal {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
max-width: 53%;
|
||||
margin-top: 28px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*IMAGEM COMPUTADORES CONECTADOS*/
|
||||
|
||||
.figura-computadores-conectados {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*CONTAINER 1*/
|
||||
|
||||
.pai-container1 {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
padding: 177px 0px 0px 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.container1 {
|
||||
display: grid;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
margin: 0 1%;
|
||||
padding: 26px;
|
||||
min-width: 350px;
|
||||
max-width: 350px;
|
||||
min-height: 287px;
|
||||
max-height: 287px;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
}
|
||||
|
||||
.paragrafo-container1 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*CONTAINER2*/
|
||||
|
||||
.pai-container2 {
|
||||
display: flex;
|
||||
gap: 39px;
|
||||
grid-template-columns: repeat(3, 3fr);
|
||||
justify-content: center;
|
||||
background: #E0E0E0;
|
||||
max-width: 100%;
|
||||
max-height: 27%;
|
||||
}
|
||||
|
||||
.container2 {
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.imagem-container2 {
|
||||
display: block;
|
||||
max-width: 566px;
|
||||
translate: 0px 64px;
|
||||
}
|
||||
|
||||
|
||||
.pai-container3 {
|
||||
display: flex;
|
||||
max-width: 100%;
|
||||
padding: 177px 0px 0px 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 80px;
|
||||
}
|
||||
|
||||
.container3 {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
.texto2 {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.oculos {
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*RESPONSIVIDADE*/
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
|
||||
/*BANNER PRINCIPAL*/
|
||||
.imagem-banner-principal-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/*TEXTO PRINCIPAL*/
|
||||
.titulo1 {
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
|
||||
.titulo2 {
|
||||
font-size: 96px;
|
||||
line-height: 116px;
|
||||
}
|
||||
|
||||
.paragrafo-principal {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
/*IMAGEM COMPUTADORES CONECTADOS*/
|
||||
.imagem-computadores-conectados-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1025px) {
|
||||
|
||||
/*IMAGEM COMPUTADORES CONECTADOS*/
|
||||
.imagem-computadores-conectados-mobile {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
||||
|
||||
/*BANNER PRINCIPAL*/
|
||||
.imagem-banner-principal {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.imagem-banner-principal-mobile {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*TEXTO PRINCIPAL*/
|
||||
.texto-principal {
|
||||
padding-bottom: 65px;
|
||||
}
|
||||
|
||||
|
||||
/*IMAGEM COMPUTADORES CONECTADOS*/
|
||||
.imagem-computadores-conectados-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.imagem-computadores-conectados-mobile {
|
||||
display: grid;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*CONTAINER 1*/
|
||||
.pai-container1 {
|
||||
display: grid;
|
||||
padding-top: 90px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.container1 {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@media (max-width: 820px) {
|
||||
}
|
||||
|
||||
@media (max-width: 320px) {
|
||||
}
|
||||
146
desafio1.html
Normal file
@ -0,0 +1,146 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="pt-br">
|
||||
<head>
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
|
||||
<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="desafio1.css">
|
||||
|
||||
<title>Landing Page</title>
|
||||
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
|
||||
|
||||
</head>
|
||||
|
||||
|
||||
<body class="body">
|
||||
|
||||
<header class="header">
|
||||
|
||||
<img class="logo-m3" src="./Assets/Images/Logo-M3Academy 1.svg" alt="logo m3 Academy">
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
||||
<div class="banner-principal">
|
||||
|
||||
<img class="imagem-banner-principal" src="Assets/Images/main-banner-desktop.png" alt="banner principal">
|
||||
<img class="imagem-banner-principal-mobile" src="Assets/Images/main-banner-mobile.png" alt="banner principal mobile">
|
||||
|
||||
</div>
|
||||
|
||||
<section class="texto-principal">
|
||||
|
||||
<h1 class="titulo1">LOREM IPSUM</h1>
|
||||
|
||||
<h2 class="titulo2">DOLOR SIT AMET</h2>
|
||||
|
||||
<p class="paragrafo-principal">
|
||||
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>
|
||||
|
||||
</section>
|
||||
|
||||
<figure class="figura-computadores-conectados">
|
||||
|
||||
<img class="imagem-computadores-conectados-desktop"src="Assets/Images/connected-computers.png" alt="Computadores conectados">
|
||||
<img class="imagem-computadores-conectados-mobile" src="Assets/Images/computadores-conectados-mobile.png" alt="computadores interligados">
|
||||
|
||||
</figure>
|
||||
|
||||
|
||||
<section class="pai-container1">
|
||||
|
||||
<div class="container1">
|
||||
<img class="imagem-container1" src="Assets/Images/shop.png" alt="loja">
|
||||
<p class="paragrafo-container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
|
||||
</div>
|
||||
<div class="container1">
|
||||
<img class="imagem-container1" src="Assets/Images/bag.png" alt="compras">
|
||||
<p class="paragrafo-container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
|
||||
</div>
|
||||
<div class="container1">
|
||||
<img class="imagem-container1" src="Assets/Images/coin.png" alt="pagamento">
|
||||
<p class="paragrafo-container1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.</p>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
<section class="pai-container2">
|
||||
|
||||
<div class="container2">
|
||||
|
||||
<img class="imagem-container2" src="Assets/Images/pc1.png" alt="notebook">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container2">
|
||||
|
||||
<img class="imagem-container2" src="Assets/Images/pc2.png" alt="notebook abrindo">
|
||||
|
||||
</div>
|
||||
|
||||
<div class="container2">
|
||||
|
||||
<img class="imagem-container2" src="Assets/Images/pc3.png" alt="tela notebook">
|
||||
|
||||
</div>
|
||||
|
||||
</section>
|
||||
|
||||
|
||||
|
||||
|
||||
<section class="pai-container3">
|
||||
|
||||
<div class="container3">
|
||||
|
||||
<img class="imagem-container3" src="Assets/Images/dinheiro1.png" alt="imagem1">
|
||||
|
||||
<img -class="paragrafo-container3" src="Assets/Images/paragrafo-container-3.png" alt="paragrafo-container3">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container3">
|
||||
|
||||
<img class="imagem-container3" src="Assets/Images/pagamento2.png" alt="imagem1">
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container3">
|
||||
|
||||
<img class="imagem-container3" src="Assets/Images/laptop3.png" alt="imagem1">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container3">
|
||||
|
||||
<img class="imagem-container3" src="Assets/Images/celular4.png" alt="imagem1">
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
<section class="texto2">
|
||||
<img src="Assets/Images/texto.png" alt="texto">
|
||||
</section>
|
||||
|
||||
<div class="oculos">
|
||||
<img src="Assets/Images/imagem-bottom.png" alt="imagem">
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
23
tatus
Normal file
@ -0,0 +1,23 @@
|
||||
[33mcommit 038d559c2182b30985db9eafe15947556fea9cc9[m[33m ([m[1;36mHEAD -> [m[1;32mfeature/texto-principal[m[33m)[m
|
||||
Author: Jessé <jessesymon@hotmail.com>
|
||||
Date: Thu Oct 13 17:36:47 2022 -0300
|
||||
|
||||
feat(main-text): cria texto principal
|
||||
|
||||
[33mcommit be682768342ceca032b98389959ab4582ecb98a0[m[33m ([m[1;32mfeature/main-banner[m[33m)[m
|
||||
Author: Jessé <jessesymon@hotmail.com>
|
||||
Date: Thu Oct 13 16:35:55 2022 -0300
|
||||
|
||||
feat(div-banner):inclui banner principal
|
||||
|
||||
[33mcommit b7fdd34d95145b75769f6192338f973f4b9feb60[m[33m ([m[1;31morigin/feature/header[m[33m, [m[1;32mfeature/header[m[33m)[m
|
||||
Author: Jessé <jessesymon@hotmail.com>
|
||||
Date: Thu Oct 13 16:01:20 2022 -0300
|
||||
|
||||
feat(header):inclui header
|
||||
|
||||
[33mcommit 89ee7124acf39f95e55dd0e21f2aa8b5918c7fbe[m[33m ([m[1;31morigin/main[m[33m, [m[1;31morigin/HEAD[m[33m, [m[1;32mmain[m[33m)[m
|
||||
Author: Daniel Schuab <daniel.schuab@digitalm3.com.br>
|
||||
Date: Sun Oct 17 21:07:34 2021 +0000
|
||||
|
||||
Initial commit
|
||||