atualização
This commit is contained in:
parent
4c7d3c1fbc
commit
b0683202fc
@ -16,6 +16,7 @@ body {
|
|||||||
padding: 29px 0;
|
padding: 29px 0;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.cabecalho-logo {
|
.cabecalho-logo {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
@ -124,6 +125,8 @@ body {
|
|||||||
padding: 129px 72px 108px;
|
padding: 129px 72px 108px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
gap: 3em;
|
gap: 3em;
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nephew-section {
|
.nephew-section {
|
||||||
@ -186,6 +189,7 @@ body {
|
|||||||
padding: 38px 0 41px;
|
padding: 38px 0 41px;
|
||||||
background: #000000;
|
background: #000000;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-icons {
|
.footer-icons {
|
||||||
display: flex;
|
display: flex;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
@ -195,6 +199,7 @@ body {
|
|||||||
.footer-icon {
|
.footer-icon {
|
||||||
margin: 0 10px;
|
margin: 0 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-text {
|
.footer-text {
|
||||||
font-size: 10px;
|
font-size: 10px;
|
||||||
line-height: 12px;
|
line-height: 12px;
|
||||||
@ -207,6 +212,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 414px) {
|
@media screen and (max-width: 414px) {
|
||||||
|
|
||||||
.main-image-desktop,
|
.main-image-desktop,
|
||||||
.middle-image-desktop {
|
.middle-image-desktop {
|
||||||
display: none;
|
display: none;
|
||||||
@ -214,6 +220,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 415px) {
|
@media screen and (min-width: 415px) {
|
||||||
|
|
||||||
.main-image-mobile,
|
.main-image-mobile,
|
||||||
.middle-image-mobile,
|
.middle-image-mobile,
|
||||||
.last-image-mobile {
|
.last-image-mobile {
|
||||||
@ -225,7 +232,8 @@ body {
|
|||||||
.niece-section-text span {
|
.niece-section-text span {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.last-image-desktop {
|
.last-image-desktop {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
356
index.html
356
index.html
@ -1,208 +1,166 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="pt-BR">
|
<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" />
|
|
||||||
|
|
||||||
<title>Desafio Landing Page</title>
|
<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
|
<title>Desafio Landing Page</title>
|
||||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
|
||||||
rel="stylesheet"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<link rel="stylesheet" href="assets/styles/main.css" />
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
<link rel="stylesheet" href="assets/styles/main.css" />
|
||||||
<header class="cabecalho">
|
</head>
|
||||||
<a href="/"
|
|
||||||
><img
|
|
||||||
class="cabecalho-logo"
|
|
||||||
src="assets/image/Logo-M3Academy.svg"
|
|
||||||
alt="Logo da M3 academy"
|
|
||||||
/></a>
|
|
||||||
</header>
|
|
||||||
<main>
|
|
||||||
<section>
|
|
||||||
<img
|
|
||||||
class="main-image main-image-desktop"
|
|
||||||
src="assets/image/main-image-desktop.png"
|
|
||||||
alt="imagem principal"
|
|
||||||
/>
|
|
||||||
<img
|
|
||||||
class="main-image main-image-mobile"
|
|
||||||
src="assets/image/main-image-mobile.png"
|
|
||||||
alt="imagem principal"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="firts-section">
|
<body>
|
||||||
<div class="son-section-text">
|
<header class="cabecalho">
|
||||||
<h1 class="son-subtitle">Lorem ipsum</h1>
|
<a href="/"><img class="cabecalho-logo" src="assets/image/Logo-M3Academy.svg" alt="Logo da M3 academy" /></a>
|
||||||
<h2 class="son-title">dolor sit amet</h2>
|
</header>
|
||||||
<p class="son-description">
|
<main>
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
<section>
|
||||||
euismod enim non dui fringilla interdum. Curabitur ut tortor sed
|
<img class="main-image main-image-desktop" src="assets/image/main-image-desktop.png" alt="imagem principal" />
|
||||||
lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
|
<img class="main-image main-image-mobile" src="assets/image/main-image-mobile.png" alt="imagem principal" />
|
||||||
dui.
|
</section>
|
||||||
</p>
|
|
||||||
|
|
||||||
<img
|
<section class="firts-section">
|
||||||
class="son-image"
|
<div class="son-section-text">
|
||||||
src="assets/image/top-pcs-image.png"
|
<h1 class="son-subtitle">Lorem ipsum</h1>
|
||||||
alt="imagem dos pcs"
|
<h2 class="son-title">dolor sit amet</h2>
|
||||||
/>
|
<p class="son-description">
|
||||||
</div>
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
</section>
|
euismod enim non dui fringilla interdum. Curabitur ut tortor sed
|
||||||
|
lacus egestas vulputate vel sit amet velit. Nulla suscipit magna
|
||||||
<section class="second-section">
|
dui.
|
||||||
<div class="cousin-section">
|
|
||||||
<img
|
|
||||||
class="cousin-image"
|
|
||||||
src="assets/image/image-ss1.png"
|
|
||||||
alt="Primeir imagem "
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="cousin-text">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
|
||||||
euismod enim non dui fringilla interdum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cousin-section">
|
|
||||||
<img
|
|
||||||
class="cousin-image"
|
|
||||||
src="assets/image/image-ss2.png"
|
|
||||||
alt="Segunda imagem"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="cousin-text">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
|
||||||
euismod enim non dui fringilla interdum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="cousin-section">
|
|
||||||
<img
|
|
||||||
class="cousin-image"
|
|
||||||
src="assets/image/image-ss3.png"
|
|
||||||
alt="Terceira imagem"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="cousin-text">
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
|
||||||
euismod enim non dui fringilla interdum.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="third-section">
|
|
||||||
<img src="assets/image/middle-image-desktop-01.png" />
|
|
||||||
<img src="assets/image/middle-image-desktop-02.png" />
|
|
||||||
<img
|
|
||||||
class="third-section-maior"
|
|
||||||
src="assets/image/middle-image-desktop-03.png"
|
|
||||||
/>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="fourth-section">
|
|
||||||
<div class="nephew-section">
|
|
||||||
<img class="nephew-image" src="assets/image/image-fs-01.png" alt="" />
|
|
||||||
<p class="nephew-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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nephew-section">
|
|
||||||
<img class="nephew-image" src="assets/image/image-fs-02.png" alt="" />
|
|
||||||
<p class="nephew-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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nephew-section">
|
|
||||||
<img class="nephew-image" src="assets/image/image-fs-03.png" alt="" />
|
|
||||||
<p class="nephew-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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nephew-section">
|
|
||||||
<img class="nephew-image" src="assets/image/image-fs-04.png" alt="" />
|
|
||||||
<p class="nephew-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.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
|
|
||||||
<section class="fifth-section">
|
|
||||||
<div class="niece-section-text">
|
|
||||||
<h2 class="niece-subtitle">Lorem ipsum dolor sit amet</h2>
|
|
||||||
<p class="niece-description">
|
|
||||||
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="last-image last-image-desktop"
|
|
||||||
src="assets/image/bottom-image-desktop.png"
|
|
||||||
alt=" Ultima imagem desktop"
|
|
||||||
/>
|
|
||||||
<span>
|
|
||||||
<img src="assets/image/bottom-image-mobile.png" />
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<footer class="page-footer">
|
|
||||||
<ul class="footer-icons">
|
|
||||||
<li class="footer-icon">
|
|
||||||
<a href="#" target="_blank">
|
|
||||||
<img
|
|
||||||
src="assets/image/instagram-icon.png"
|
|
||||||
alt="Icone do instagram"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="footer-icon">
|
|
||||||
<a href="#" target="_blank">
|
|
||||||
<img
|
|
||||||
src="assets/image/facebook-icon.png"
|
|
||||||
alt="Icone do Facebook"
|
|
||||||
/>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li class="footer-icon">
|
|
||||||
<a href="#" target="_blank">
|
|
||||||
<img src="assets/image/youtube-icon.png" alt="Icone do Youtube" />
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<p class="footer-text">
|
|
||||||
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
|
||||||
</p>
|
</p>
|
||||||
</footer>
|
|
||||||
</main>
|
<img class="son-image" src="assets/image/top-pcs-image.png" alt="imagem dos pcs" />
|
||||||
</body>
|
</div>
|
||||||
</html>
|
</section>
|
||||||
|
|
||||||
|
<section class="second-section">
|
||||||
|
<div class="cousin-section">
|
||||||
|
<img class="cousin-image" src="assets/image/image-ss1.png" alt="Primeir imagem " />
|
||||||
|
|
||||||
|
<p class="cousin-text">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cousin-section">
|
||||||
|
<img class="cousin-image" src="assets/image/image-ss2.png" alt="Segunda imagem" />
|
||||||
|
|
||||||
|
<p class="cousin-text">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="cousin-section">
|
||||||
|
<img class="cousin-image" src="assets/image/image-ss3.png" alt="Terceira imagem" />
|
||||||
|
|
||||||
|
<p class="cousin-text">
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
|
euismod enim non dui fringilla interdum.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="third-section">
|
||||||
|
<img src="assets/image/middle-image-desktop-01.png" />
|
||||||
|
<img src="assets/image/middle-image-desktop-02.png" />
|
||||||
|
<img class="third-section-maior" src="assets/image/middle-image-desktop-03.png" />
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="fourth-section">
|
||||||
|
<div class="nephew-section">
|
||||||
|
<img class="nephew-image" src="assets/image/image-fs-01.png" alt="" />
|
||||||
|
<p class="nephew-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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nephew-section">
|
||||||
|
<img class="nephew-image" src="assets/image/image-fs-02.png" alt="" />
|
||||||
|
<p class="nephew-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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nephew-section">
|
||||||
|
<img class="nephew-image" src="assets/image/image-fs-03.png" alt="" />
|
||||||
|
<p class="nephew-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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="nephew-section">
|
||||||
|
<img class="nephew-image" src="assets/image/image-fs-04.png" alt="" />
|
||||||
|
<p class="nephew-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.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="fifth-section">
|
||||||
|
<div class="niece-section-text">
|
||||||
|
<h2 class="niece-subtitle">Lorem ipsum dolor sit amet</h2>
|
||||||
|
<p class="niece-description">
|
||||||
|
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="last-image last-image-desktop" src="assets/image/bottom-image-desktop.png"
|
||||||
|
alt=" Ultima imagem desktop" />
|
||||||
|
<span>
|
||||||
|
<img src="assets/image/bottom-image-mobile.png" />
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
<footer class="page-footer">
|
||||||
|
<ul class="footer-icons">
|
||||||
|
<li class="footer-icon">
|
||||||
|
<a href="#" target="_blank">
|
||||||
|
<img src="assets/image/instagram-icon.png" alt="Icone do instagram" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="footer-icon">
|
||||||
|
<a href="#" target="_blank">
|
||||||
|
<img src="assets/image/facebook-icon.png" alt="Icone do Facebook" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="footer-icon">
|
||||||
|
<a href="#" target="_blank">
|
||||||
|
<img src="assets/image/youtube-icon.png" alt="Icone do Youtube" />
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<p class="footer-text">
|
||||||
|
Copyright © 2020 - Loja Comércio Eletrônico CNPJ: 000.000.000/0001-00
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user