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

feat: adiciona os cards de baixoe paragrafos

Browse Source
This commit is contained in:
Yan Pecanha Garriga 2022-10-10 23:26:14 -03:00
parent ada7b2e808
commit 73ffbb9a61
1 changed files with 123 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
index.html
View File

@ -1,91 +1,138 @@
<!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" /> <head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> <link rel="preconnect" href="https://fonts.googleapis.com">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<title>M3 Desafio 1</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./assets/styles.css/main.css" /> <meta charset="UTF-8" />
</head> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<body> <title>M3 Desafio 1</title>
<header class="page-header">
<a href="/"> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet">
<img class="header-logo" src="./assets/images/Logo-M3Academy 1.png" alt="Logo M3-Academy" />
</a> <link rel="stylesheet" href="./assets/styles.css/main.css" />
</header> </head>
<main> <body>
<section class="main-banner-row"> <header class="page-header">
<img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png" alt="Banner principal desktop"> <a href="/">
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile"> <img class="header-logo" src="./assets/images/Logo-M3Academy 1.png" alt="Logo M3-Academy" />
</section> </a>
</header>
<section class="top-infocard">
<div class="top-infocard-text"> <main>
<h2 class="top-infocard-subtitle">Lorem ipsum</h2> <section class="main-banner-row">
<h1 class="top-infocard-title">Dolor sit amet</h1> <img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png"
alt="Banner principal desktop">
<p class="top-infocard-description"> <img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
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. alt="Banner principal mobile">
</p> </section>
<div>
<img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Primeira infocard do topo" /> <section class="top-infocard">
<div class="top-infocard-text">
<h2 class="top-infocard-subtitle">Lorem ipsum</h2>
<h1 class="top-infocard-title">Dolor sit amet</h1>
<p class="top-infocard-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>
<div>
<img class="top-infocard-image" src="./assets/images/top-infocard-image.png"
alt="Primeira infocard do topo" />
</div> </div>
</section> </section>
<section class="top-cards"> <section class="top-cards">
<div class="top-card"> <div class="top-card">
<img class="top-card-image" src="./assets/images/top-card01.png" alt="Imagem do Primeiro card do Topo" /> <img class="top-card-image" src="./assets/images/top-card01.png"
alt="Imagem do Primeiro card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
<div class="top-card"> <p class="top-card-description">
<img class="top-card-image" src="./assets/images/top-card-02.png" alt="Imagem do Segundo card do Topo" /> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
interdum.
<p class="top-card-description"> </p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </div>
</p>
</div>
<div class="top-card"> <div class="top-card">
<img class="top-card-image" src="./assets/images/top-card03.png" alt="Imagem do Terceiro card do Topo" /> <img class="top-card-image" src="./assets/images/top-card-02.png"
alt="Imagem do Segundo card do Topo" />
<p class="top-card-description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum.
</p>
</div>
</section>
<section class="middle-banner"> <p class="top-card-description">
<div class="middle-banner-group"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
<div class="middle-banner-item"> interdum.
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" /> </p>
</div> </div>
<div class="middle-banner-item"> <div class="top-card">
<img class="middle-banner-image" src="./assets/images/middle-banner-02.png" <img class="top-card-image" src="./assets/images/top-card03.png"
alt="Segundo banner do meio" /> alt="Imagem do Terceiro card do Topo" />
</div>
<p class="top-card-description">
<div class="middle-banner-item"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla
<img class="middle-banner-image" src="./assets/images/middle-banner-03.png" interdum.
alt="Terceiro banner do meio" /> </p>
</div> </div>
</section>
<section class="middle-banner">
<div class="middle-banner-group">
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
alt="Primeiro banner do Meio" />
</div> </div>
</section>
</main> <div class="middle-banner-item">
</body> <img class="middle-banner-image" src="./assets/images/middle-banner-02.png"
alt="Segundo banner do meio" />
</div>
<div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-03.png"
alt="Terceiro banner do meio" />
</div>
</div>
</section>
<section class="bottom-card">
<div class="bottom-card-group">
<img class=" bottom-card-image01" src="./assets/images/bottom-card-01.png" alt="image01-bottomcard" />
<p class="bottom-card-description">
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="bottom-card-group">
<img class="bottom-card-image02" src="./assets/images/bottom-card-02.png" alt="image02-bottomcard" />
<p class="bottom-card-description">
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="bottom-card-group">
<img class="bottom-card-image03" src="./assets/images/bottom-card-03.png" alt="image03-bottomcard">
<p class="bottom-card-description">
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="bottom-card-group">
<img class="bottom-card-image04" src="./assets/images/bottom-card-04.png" alt="image04-bottomcard">
<p class="bottom-card-description">
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>
</main>
</body>
</html> </html>