Merge pull request 'feature/landingPage' (#1) from feature/landingPage into main
Reviewed-on: #1
This commit is contained in:
Caroline Moran
commit
77c5c620e1
BIN
src/assets/Bag.png
Normal file
BIN
src/assets/Bag.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
BIN
src/assets/BannerFinalDesktop.png
Normal file
BIN
src/assets/BannerFinalDesktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
BIN
src/assets/BannerFinalMobile.png
Normal file
BIN
src/assets/BannerFinalMobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 247 KiB |
BIN
src/assets/BannerPrincipalDesktop.png
Normal file
BIN
src/assets/BannerPrincipalDesktop.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
src/assets/BannerPrincipalMobile.png
Normal file
BIN
src/assets/BannerPrincipalMobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 341 KiB |
BIN
src/assets/Card-1.png
Normal file
BIN
src/assets/Card-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 234 KiB |
BIN
src/assets/Card-2.png
Normal file
BIN
src/assets/Card-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
BIN
src/assets/Card-3.png
Normal file
BIN
src/assets/Card-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 318 KiB |
BIN
src/assets/Coin.png
Normal file
BIN
src/assets/Coin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
src/assets/Ecommerce.png
Normal file
BIN
src/assets/Ecommerce.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/Facebook.png
Normal file
BIN
src/assets/Facebook.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 287 B |
BIN
src/assets/Instagram.png
Normal file
BIN
src/assets/Instagram.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 490 B |
BIN
src/assets/LogoM3Branco.png
Normal file
BIN
src/assets/LogoM3Branco.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
src/assets/Money.png
Normal file
BIN
src/assets/Money.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
BIN
src/assets/Phone.png
Normal file
BIN
src/assets/Phone.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/Store.png
Normal file
BIN
src/assets/Store.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 959 B |
BIN
src/assets/TrioComputadores.png
Normal file
BIN
src/assets/TrioComputadores.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
BIN
src/assets/Youtube.png
Normal file
BIN
src/assets/Youtube.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 346 B |
BIN
src/assets/Youtube.zip
Normal file
BIN
src/assets/Youtube.zip
Normal file
Binary file not shown.
200
src/landingPage.html
Normal file
200
src/landingPage.html
Normal file
@ -0,0 +1,200 @@
|
||||
<!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 href="./style/landingPage.css" rel="stylesheet" />
|
||||
<title>Desafio 1-M3 Academy</title>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Cabecalho -->
|
||||
<header>
|
||||
<figure class="logo-container">
|
||||
<img
|
||||
src="./assets/LogoM3Branco.png"
|
||||
alt="Logo M3 Ecommerce"
|
||||
class="logo"
|
||||
/>
|
||||
</figure>
|
||||
</header>
|
||||
<!-- Corpo do site -->
|
||||
<main>
|
||||
<!-- Banner principal -->
|
||||
<div class="banner-principal-container">
|
||||
<figure class="banner-principal-desktop">
|
||||
<img
|
||||
src="./assets/BannerPrincipalDesktop.png"
|
||||
alt="Mesa com um Notebook"
|
||||
/>
|
||||
</figure>
|
||||
<figure class="banner-principal-mobile">
|
||||
<img src="./assets/BannerPrincipalMobile.png" alt="Um Notebook" />
|
||||
</figure>
|
||||
</div>
|
||||
<!-- Título principal do site e descricão principal -->
|
||||
<section class="descricao-container">
|
||||
<div class="texto-container">
|
||||
<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>
|
||||
</div>
|
||||
<figure class="image-descricao-container">
|
||||
<img
|
||||
src="./assets/TrioComputadores.png"
|
||||
alt="Desenho de 3 computadores"
|
||||
class="image-descricao"
|
||||
/>
|
||||
</figure>
|
||||
</section>
|
||||
<!-- Primeiro container de cards -->
|
||||
<div class="cards-container">
|
||||
<figure class="card">
|
||||
<img
|
||||
src="./assets/Store.png"
|
||||
alt="figura de loja"
|
||||
class="card-image"
|
||||
/>
|
||||
<figcaption class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||
euismod enim non dui fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card">
|
||||
<img src="./assets/Bag.png" alt="figura sacola" class="card-image" />
|
||||
<figcaption class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||
euismod enim non dui fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card">
|
||||
<img src="./assets/Coin.png" alt="figura pagar" class="card-image" />
|
||||
<figcaption class="card-text">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||
euismod enim non dui fringilla interdum.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<!-- Container de mini banners -->
|
||||
<div class="mini-banners-container">
|
||||
<div class="mini-banners-wrapper">
|
||||
<div class="mini-banners">
|
||||
<figure class="mini-banner mini-banner1">
|
||||
<img
|
||||
src="./assets/Card-1.png"
|
||||
alt="Computador"
|
||||
class="mini-banner-image"
|
||||
/>
|
||||
</figure>
|
||||
<figure class="mini-banner mini-banner2">
|
||||
<img
|
||||
src="./assets/Card-2.png"
|
||||
alt="Computador"
|
||||
class="mini-banner-image"
|
||||
/>
|
||||
</figure>
|
||||
<figure class="mini-banner mini-banner3">
|
||||
<img
|
||||
src="./assets/Card-3.png"
|
||||
alt="Computador"
|
||||
class="mini-banner-image"
|
||||
/>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fundo-branco"></div>
|
||||
</div>
|
||||
<!-- Segundo Container de cards -->
|
||||
<div class="cards2-container">
|
||||
<figure class="card">
|
||||
<img
|
||||
src="./assets/Money.png"
|
||||
alt="figura de loja"
|
||||
class="card-image"
|
||||
/>
|
||||
<figcaption class="card-text">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card">
|
||||
<img src="./assets/Coin.png" alt="figura sacola" class="card-image" />
|
||||
<figcaption class="card-text">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card">
|
||||
<img
|
||||
src="./assets/Ecommerce.png"
|
||||
alt="figura pagar"
|
||||
class="card-image"
|
||||
/>
|
||||
<figcaption class="card-text">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
<figure class="card">
|
||||
<img src="./assets/Phone.png" alt="figura pagar" class="card-image" />
|
||||
<figcaption class="card-text">
|
||||
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.
|
||||
</figcaption>
|
||||
</figure>
|
||||
</div>
|
||||
<!-- Artigo de finalizacão -->
|
||||
<article class="descricao-final-container">
|
||||
<div class="texto-final-container">
|
||||
<h2>Lorem ipsum dolor sit amet</h2>
|
||||
<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>
|
||||
</div>
|
||||
<figure class="image-descricao-final-desktop">
|
||||
<img
|
||||
src="./assets/BannerFinalDesktop.png"
|
||||
alt="Banner com código"
|
||||
class="image-descricao-final"
|
||||
/>
|
||||
</figure>
|
||||
<figure class="image-descricao-final-mobile">
|
||||
<img
|
||||
src="./assets/BannerFinalMobile.png"
|
||||
alt="Banner com código"
|
||||
class="image-descricao-final"
|
||||
/>
|
||||
</figure>
|
||||
</article>
|
||||
</main>
|
||||
<!-- Rodapé do site -->
|
||||
<footer class="footer-landingpage">
|
||||
<figure class="redes-sociais">
|
||||
<img src="./assets/Instagram.png" alt="Icone Instagram" />
|
||||
<img src="./assets/Facebook.png" alt="Icone Facebook" />
|
||||
<img src="./assets/Youtube.png" alt="Icone Youtube" />
|
||||
</figure>
|
||||
<p class="footer-landingpage-text">
|
||||
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||
</p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
389
src/style/landingPage.css
Normal file
389
src/style/landingPage.css
Normal file
@ -0,0 +1,389 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
font-family: "Inter", sans-serif;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
/* Cabecalho */
|
||||
.logo-container {
|
||||
width: 100%;
|
||||
background-color: #000;
|
||||
padding: 29px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 5%;
|
||||
}
|
||||
|
||||
/* Banner principal */
|
||||
.image-descricao-container,
|
||||
.banner-principal-mobile img,
|
||||
.banner-principal-desktop img,
|
||||
.banner-principal-mobile,
|
||||
.banner-principal-desktop,
|
||||
.banner-principal-container {
|
||||
width: 100%;
|
||||
}
|
||||
.banner-principal-desktop {
|
||||
display: block;
|
||||
}
|
||||
.banner-principal-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Título principal do site e descricão principal */
|
||||
.descricao-container,
|
||||
.texto-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.descricao-container {
|
||||
padding: 65px 0 94px;
|
||||
gap: 65px;
|
||||
}
|
||||
.texto-container {
|
||||
max-width: 50%;
|
||||
}
|
||||
.texto-container h1 {
|
||||
font-weight: 500;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.texto-container h2 {
|
||||
font-weight: 400;
|
||||
font-size: 32px;
|
||||
line-height: 39px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.texto-container p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
margin-top: 28px;
|
||||
}
|
||||
.image-descricao {
|
||||
width: 20%;
|
||||
}
|
||||
/* Primeiro container de cards */
|
||||
.cards-container {
|
||||
width: 100%;
|
||||
padding: 93px 0 80px;
|
||||
}
|
||||
.cards-container {
|
||||
gap: 21px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.card {
|
||||
width: 20%;
|
||||
height: auto;
|
||||
min-height: 287px;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.23);
|
||||
padding: 35px 26px 27px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 27px;
|
||||
}
|
||||
.card-image {
|
||||
width: 33%;
|
||||
}
|
||||
.card-text {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
/* Container de mini banners */
|
||||
.fundo-branco {
|
||||
width: 100%;
|
||||
height: 62px;
|
||||
}
|
||||
.mini-banners-wrapper {
|
||||
padding: 0 72px;
|
||||
width: 100%;
|
||||
background: #e0e0e0;
|
||||
}
|
||||
.mini-banners {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 39px;
|
||||
position: relative;
|
||||
top: 62px;
|
||||
}
|
||||
.mini-banner {
|
||||
width: 33%;
|
||||
}
|
||||
.mini-banner-image {
|
||||
width: 100%;
|
||||
}
|
||||
/* Segundo Container de cards */
|
||||
.cards2-container {
|
||||
padding: 129px 72px 108px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.cards2-container .card {
|
||||
width: 25%;
|
||||
min-height: 332px;
|
||||
}
|
||||
.cards2-container .card .card-image {
|
||||
width: 25%;
|
||||
}
|
||||
/* Artigo de finalizacão */
|
||||
.image-descricao-final-mobile {
|
||||
display: none;
|
||||
width: 100%;
|
||||
}
|
||||
.image-descricao-final-desktop {
|
||||
display: block;
|
||||
width: 70%;
|
||||
}
|
||||
.image-descricao-final {
|
||||
width: 100%;
|
||||
}
|
||||
.descricao-final-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 50px;
|
||||
padding-bottom: 116px;
|
||||
}
|
||||
.texto-final-container {
|
||||
width: 33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 18px;
|
||||
}
|
||||
.texto-final-container h2 {
|
||||
font-weight: 600;
|
||||
font-size: 32px;
|
||||
line-height: 29px;
|
||||
}
|
||||
.texto-final-container p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
/* Rodapé do site */
|
||||
.redes-sociais,
|
||||
.footer-landingpage {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.footer-landingpage {
|
||||
background-color: #000;
|
||||
padding: 38px 0;
|
||||
flex-direction: column;
|
||||
}
|
||||
.footer-landingpage-text {
|
||||
font-weight: 400;
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
text-transform: uppercase;
|
||||
color: #bdbdbd;
|
||||
}
|
||||
.redes-sociais {
|
||||
width: 6%;
|
||||
}
|
||||
.redes-sociais img {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
@media (min-width: 2500px) {
|
||||
/* Título principal do site e descricão principal */
|
||||
.texto-container h1 {
|
||||
font-size: 96px;
|
||||
line-height: 116px;
|
||||
}
|
||||
.texto-container h2 {
|
||||
font-size: 64px;
|
||||
line-height: 78px;
|
||||
}
|
||||
.texto-container p {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
/* Primeiro container de cards */
|
||||
.card-text {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
.card {
|
||||
min-height: 574px;
|
||||
}
|
||||
/* Segundo container de cards */
|
||||
.cards2-container .card {
|
||||
min-height: 664px;
|
||||
}
|
||||
/* Artigo de finalizacão */
|
||||
.texto-final-container h2 {
|
||||
font-size: 64px;
|
||||
line-height: 58px;
|
||||
}
|
||||
.texto-final-container p {
|
||||
font-size: 32px;
|
||||
line-height: 48px;
|
||||
}
|
||||
/* Rodapé do site */
|
||||
.footer-landingpage-text {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 1024px) {
|
||||
/* Cabecalho */
|
||||
.logo {
|
||||
width: 20%;
|
||||
}
|
||||
/* Banner principal */
|
||||
.banner-principal-desktop {
|
||||
display: none;
|
||||
}
|
||||
.banner-principal-mobile {
|
||||
display: block;
|
||||
}
|
||||
/* Título principal do site e descricão principal */
|
||||
.descricao-container {
|
||||
padding: 73px 29px 91px;
|
||||
}
|
||||
.texto-container {
|
||||
max-width: 100%;
|
||||
}
|
||||
.texto-container h1 {
|
||||
font-size: 28px;
|
||||
line-height: 34px;
|
||||
}
|
||||
.texto-container h2 {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.texto-container p {
|
||||
margin-top: 10px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
.image-descricao-container {
|
||||
width: 70%;
|
||||
}
|
||||
.image-descricao {
|
||||
width: 100%;
|
||||
}
|
||||
/* Primeiro container de cards */
|
||||
.cards-container {
|
||||
flex-direction: column;
|
||||
padding: 0 32px 80px;
|
||||
gap: 24px;
|
||||
}
|
||||
.card {
|
||||
width: 100%;
|
||||
}
|
||||
/* Container de mini banners */
|
||||
.mini-banners-wrapper {
|
||||
padding: 0 23px;
|
||||
}
|
||||
.mini-banner1 {
|
||||
width: 100%;
|
||||
grid-area: mini-banner1;
|
||||
}
|
||||
.mini-banner2 {
|
||||
width: 100%;
|
||||
grid-area: mini-banner2;
|
||||
}
|
||||
.mini-banner3 {
|
||||
width: 100%;
|
||||
grid-area: mini-banner3;
|
||||
}
|
||||
.mini-banners {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"mini-banner1 mini-banner2"
|
||||
"mini-banner3 mini-banner3";
|
||||
gap: 24px 14px;
|
||||
top: 32px;
|
||||
}
|
||||
.fundo-branco {
|
||||
height: 32px;
|
||||
}
|
||||
/* Segundo Container de cards */
|
||||
.cards2-container {
|
||||
flex-direction: column;
|
||||
padding: 80px 23px 98px;
|
||||
}
|
||||
.cards2-container .card {
|
||||
width: 100%;
|
||||
padding: 35px 33px 65px;
|
||||
}
|
||||
.cards2-container .card .card-image {
|
||||
width: 33%;
|
||||
}
|
||||
.cards2-container .card .card-text {
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
}
|
||||
/* Artigo de finalizacão */
|
||||
.image-descricao-final-mobile {
|
||||
display: block;
|
||||
}
|
||||
.image-descricao-final-desktop {
|
||||
display: none;
|
||||
}
|
||||
.descricao-final-container {
|
||||
flex-direction: column-reverse;
|
||||
padding-bottom: 87px;
|
||||
}
|
||||
.texto-final-container {
|
||||
padding: 0 32px;
|
||||
width: 100%;
|
||||
}
|
||||
.texto-final-container h2 {
|
||||
font-size: 24px;
|
||||
line-height: 29px;
|
||||
}
|
||||
.texto-final-container p {
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
}
|
||||
/* Rodapé do site */
|
||||
.footer-landingpage-text {
|
||||
max-width: 261px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 820px) {
|
||||
/* Rodapé do site */
|
||||
.redes-sociais {
|
||||
width: 18%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 320px) {
|
||||
.texto-final-container,
|
||||
.card,
|
||||
.cards2-container,
|
||||
.mini-banners-wrapper,
|
||||
.cards-container,
|
||||
.descricao-container {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user