tiago_rodrigues/challenge-landing-page
1
0
Fork 0
forked from M3-Academy/challenge-landing-page
Code Issues Pull Requests Packages Projects Releases Wiki Activity

atualização

Browse Source
This commit is contained in:
tiago medeiros rodrigues 2022-10-13 22:38:33 -03:00
parent 4c7d3c1fbc
commit b0683202fc
2 changed files with 166 additions and 200 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
assets/styles/main.css
View File

@ -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;
}

80
index.html
View File

@ -1,6 +1,7 @@
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<head>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<meta charset="UTF-8" />
@ -9,35 +10,19 @@
<title>Desafio Landing Page</title>
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
rel="stylesheet"
/>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="assets/styles/main.css" />
</head>
</head>
<body>
<body>
<header class="cabecalho">
<a href="/"
><img
class="cabecalho-logo"
src="assets/image/Logo-M3Academy.svg"
alt="Logo da M3 academy"
/></a>
<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"
/>
<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">
@ -51,21 +36,13 @@
dui.
</p>
<img
class="son-image"
src="assets/image/top-pcs-image.png"
alt="imagem dos pcs"
/>
<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 "
/>
<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
@ -74,11 +51,7 @@
</div>
<div class="cousin-section">
<img
class="cousin-image"
src="assets/image/image-ss2.png"
alt="Segunda imagem"
/>
<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
@ -87,11 +60,7 @@
</div>
<div class="cousin-section">
<img
class="cousin-image"
src="assets/image/image-ss3.png"
alt="Terceira imagem"
/>
<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
@ -103,10 +72,7 @@
<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"
/>
<img class="third-section-maior" src="assets/image/middle-image-desktop-03.png" />
</section>
<section class="fourth-section">
@ -162,11 +128,8 @@
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"
/>
<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>
@ -176,19 +139,13 @@
<ul class="footer-icons">
<li class="footer-icon">
<a href="#" target="_blank">
<img
src="assets/image/instagram-icon.png"
alt="Icone do instagram"
/>
<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"
/>
<img src="assets/image/facebook-icon.png" alt="Icone do Facebook" />
</a>
</li>
@ -204,5 +161,6 @@
</p>
</footer>
</main>
</body>
</body>
</html>