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,6 +232,7 @@ body {
|
|||||||
.niece-section-text span {
|
.niece-section-text span {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
.last-image-desktop {
|
.last-image-desktop {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
72
index.html
72
index.html
@ -1,5 +1,6 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="pt-BR">
|
<html lang="pt-BR">
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
@ -9,35 +10,19 @@
|
|||||||
|
|
||||||
<title>Desafio Landing Page</title>
|
<title>Desafio Landing Page</title>
|
||||||
|
|
||||||
<link
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
|
||||||
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 rel="stylesheet" href="assets/styles/main.css" />
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<header class="cabecalho">
|
<header class="cabecalho">
|
||||||
<a href="/"
|
<a href="/"><img class="cabecalho-logo" src="assets/image/Logo-M3Academy.svg" alt="Logo da M3 academy" /></a>
|
||||||
><img
|
|
||||||
class="cabecalho-logo"
|
|
||||||
src="assets/image/Logo-M3Academy.svg"
|
|
||||||
alt="Logo da M3 academy"
|
|
||||||
/></a>
|
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<section>
|
<section>
|
||||||
<img
|
<img class="main-image main-image-desktop" src="assets/image/main-image-desktop.png" alt="imagem principal" />
|
||||||
class="main-image main-image-desktop"
|
<img class="main-image main-image-mobile" src="assets/image/main-image-mobile.png" alt="imagem principal" />
|
||||||
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>
|
||||||
|
|
||||||
<section class="firts-section">
|
<section class="firts-section">
|
||||||
@ -51,21 +36,13 @@
|
|||||||
dui.
|
dui.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<img
|
<img class="son-image" src="assets/image/top-pcs-image.png" alt="imagem dos pcs" />
|
||||||
class="son-image"
|
|
||||||
src="assets/image/top-pcs-image.png"
|
|
||||||
alt="imagem dos pcs"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="second-section">
|
<section class="second-section">
|
||||||
<div class="cousin-section">
|
<div class="cousin-section">
|
||||||
<img
|
<img class="cousin-image" src="assets/image/image-ss1.png" alt="Primeir imagem " />
|
||||||
class="cousin-image"
|
|
||||||
src="assets/image/image-ss1.png"
|
|
||||||
alt="Primeir imagem "
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="cousin-text">
|
<p class="cousin-text">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
@ -74,11 +51,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cousin-section">
|
<div class="cousin-section">
|
||||||
<img
|
<img class="cousin-image" src="assets/image/image-ss2.png" alt="Segunda imagem" />
|
||||||
class="cousin-image"
|
|
||||||
src="assets/image/image-ss2.png"
|
|
||||||
alt="Segunda imagem"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="cousin-text">
|
<p class="cousin-text">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
@ -87,11 +60,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="cousin-section">
|
<div class="cousin-section">
|
||||||
<img
|
<img class="cousin-image" src="assets/image/image-ss3.png" alt="Terceira imagem" />
|
||||||
class="cousin-image"
|
|
||||||
src="assets/image/image-ss3.png"
|
|
||||||
alt="Terceira imagem"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<p class="cousin-text">
|
<p class="cousin-text">
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras
|
||||||
@ -103,10 +72,7 @@
|
|||||||
<section class="third-section">
|
<section class="third-section">
|
||||||
<img src="assets/image/middle-image-desktop-01.png" />
|
<img src="assets/image/middle-image-desktop-01.png" />
|
||||||
<img src="assets/image/middle-image-desktop-02.png" />
|
<img src="assets/image/middle-image-desktop-02.png" />
|
||||||
<img
|
<img class="third-section-maior" src="assets/image/middle-image-desktop-03.png" />
|
||||||
class="third-section-maior"
|
|
||||||
src="assets/image/middle-image-desktop-03.png"
|
|
||||||
/>
|
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="fourth-section">
|
<section class="fourth-section">
|
||||||
@ -162,11 +128,8 @@
|
|||||||
venenatis.Donec finibus turpis vitae lectus interdum rutrum vitae
|
venenatis.Donec finibus turpis vitae lectus interdum rutrum vitae
|
||||||
sed augue.
|
sed augue.
|
||||||
</p>
|
</p>
|
||||||
<img
|
<img class="last-image last-image-desktop" src="assets/image/bottom-image-desktop.png"
|
||||||
class="last-image last-image-desktop"
|
alt=" Ultima imagem desktop" />
|
||||||
src="assets/image/bottom-image-desktop.png"
|
|
||||||
alt=" Ultima imagem desktop"
|
|
||||||
/>
|
|
||||||
<span>
|
<span>
|
||||||
<img src="assets/image/bottom-image-mobile.png" />
|
<img src="assets/image/bottom-image-mobile.png" />
|
||||||
</span>
|
</span>
|
||||||
@ -176,19 +139,13 @@
|
|||||||
<ul class="footer-icons">
|
<ul class="footer-icons">
|
||||||
<li class="footer-icon">
|
<li class="footer-icon">
|
||||||
<a href="#" target="_blank">
|
<a href="#" target="_blank">
|
||||||
<img
|
<img src="assets/image/instagram-icon.png" alt="Icone do instagram" />
|
||||||
src="assets/image/instagram-icon.png"
|
|
||||||
alt="Icone do instagram"
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
<li class="footer-icon">
|
<li class="footer-icon">
|
||||||
<a href="#" target="_blank">
|
<a href="#" target="_blank">
|
||||||
<img
|
<img src="assets/image/facebook-icon.png" alt="Icone do Facebook" />
|
||||||
src="assets/image/facebook-icon.png"
|
|
||||||
alt="Icone do Facebook"
|
|
||||||
/>
|
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|
||||||
@ -205,4 +162,5 @@
|
|||||||
</footer>
|
</footer>
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
Loading…
Reference in New Issue
Block a user