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

77
index.html
View File

@ -1,7 +1,8 @@
<!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>
@ -14,9 +15,9 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet"> <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" /> <link rel="stylesheet" href="./assets/styles.css/main.css" />
</head> </head>
<body> <body>
<header class="page-header"> <header class="page-header">
<a href="/"> <a href="/">
<img class="header-logo" src="./assets/images/Logo-M3Academy 1.png" alt="Logo M3-Academy" /> <img class="header-logo" src="./assets/images/Logo-M3Academy 1.png" alt="Logo M3-Academy" />
@ -25,8 +26,10 @@
<main> <main>
<section class="main-banner-row"> <section class="main-banner-row">
<img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png" alt="Banner principal desktop"> <img class="main-banner main-banner-desktop" src="./assets/images/Main-banner-desktop.png"
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png" alt="Banner principal mobile"> alt="Banner principal desktop">
<img class="main-banner main-banner-mobile" src="./assets/images/main-banner-mobile.png"
alt="Banner principal mobile">
</section> </section>
<section class="top-infocard"> <section class="top-infocard">
@ -35,35 +38,44 @@
<h1 class="top-infocard-title">Dolor sit amet</h1> <h1 class="top-infocard-title">Dolor sit amet</h1>
<p class="top-infocard-description"> <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. 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> </p>
<div> <div>
<img class="top-infocard-image" src="./assets/images/top-infocard-image.png" alt="Primeira infocard do topo" /> <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"> <p class="top-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> </p>
</div> </div>
<div class="top-card"> <div class="top-card">
<img class="top-card-image" src="./assets/images/top-card-02.png" alt="Imagem do Segundo 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"> <p class="top-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> </p>
</div> </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-card03.png"
alt="Imagem do Terceiro card do Topo" />
<p class="top-card-description"> <p class="top-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> </p>
</div> </div>
</section> </section>
@ -71,7 +83,8 @@
<section class="middle-banner"> <section class="middle-banner">
<div class="middle-banner-group"> <div class="middle-banner-group">
<div class="middle-banner-item"> <div class="middle-banner-item">
<img class="middle-banner-image" src="./assets/images/middle-banner-01.png" alt="Primeiro banner do Meio" /> <img class="middle-banner-image" src="./assets/images/middle-banner-01.png"
alt="Primeiro banner do Meio" />
</div> </div>
<div class="middle-banner-item"> <div class="middle-banner-item">
@ -86,6 +99,40 @@
</div> </div>
</section> </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> </main>
</body> </body>
</html> </html>