atualização
This commit is contained in:
parent
4c7d3c1fbc
commit
b0683202fc
@ -16,6 +16,7 @@ body {
|
||||
padding: 29px 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.cabecalho-logo {
|
||||
display: block;
|
||||
}
|
||||
@ -124,6 +125,8 @@ body {
|
||||
padding: 129px 72px 108px;
|
||||
justify-content: center;
|
||||
gap: 3em;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.nephew-section {
|
||||
@ -186,6 +189,7 @@ body {
|
||||
padding: 38px 0 41px;
|
||||
background: #000000;
|
||||
}
|
||||
|
||||
.footer-icons {
|
||||
display: flex;
|
||||
list-style: none;
|
||||
@ -195,6 +199,7 @@ body {
|
||||
.footer-icon {
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
font-size: 10px;
|
||||
line-height: 12px;
|
||||
@ -207,6 +212,7 @@ body {
|
||||
}
|
||||
|
||||
@media screen and (max-width: 414px) {
|
||||
|
||||
.main-image-desktop,
|
||||
.middle-image-desktop {
|
||||
display: none;
|
||||
@ -214,6 +220,7 @@ body {
|
||||
}
|
||||
|
||||
@media screen and (min-width: 415px) {
|
||||
|
||||
.main-image-mobile,
|
||||
.middle-image-mobile,
|
||||
.last-image-mobile {
|
||||
@ -225,6 +232,7 @@ body {
|
||||
.niece-section-text span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.last-image-desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
354
index.html
354
index.html
@ -1,208 +1,166 @@
|
||||
<!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" />
|
||||
|
||||
<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
|
||||
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<title>Desafio Landing Page</title>
|
||||
|
||||
<link rel="stylesheet" href="assets/styles/main.css" />
|
||||
</head>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||
|
||||
<body>
|
||||
<header class="cabecalho">
|
||||
<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>
|
||||
<link rel="stylesheet" href="assets/styles/main.css" />
|
||||
</head>
|
||||
|
||||
<section class="firts-section">
|
||||
<div class="son-section-text">
|
||||
<h1 class="son-subtitle">Lorem ipsum</h1>
|
||||
<h2 class="son-title">dolor sit amet</h2>
|
||||
<p class="son-description">
|
||||
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>
|
||||
<body>
|
||||
<header class="cabecalho">
|
||||
<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>
|
||||
|
||||
<img
|
||||
class="son-image"
|
||||
src="assets/image/top-pcs-image.png"
|
||||
alt="imagem dos pcs"
|
||||
/>
|
||||
</div>
|
||||
</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
|
||||
<section class="firts-section">
|
||||
<div class="son-section-text">
|
||||
<h1 class="son-subtitle">Lorem ipsum</h1>
|
||||
<h2 class="son-title">dolor sit amet</h2>
|
||||
<p class="son-description">
|
||||
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>
|
||||
</footer>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<img class="son-image" src="assets/image/top-pcs-image.png" alt="imagem dos pcs" />
|
||||
</div>
|
||||
</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