Skip to content

Commit 0c38fbb

Browse files
RallensonRallenson
Rallenson
authored and
Rallenson
committed
Ajusta formatação e organização do código HTML em index.html
1 parent 14f502a commit 0c38fbb

File tree

1 file changed

+185
-125
lines changed

1 file changed

+185
-125
lines changed

‎index.html‎

Lines changed: 185 additions & 125 deletions
Original file line numberDiff line numberDiff line change
@@ -2,160 +2,220 @@
22
<html lang="pt-br">
33
<head>
44
<link rel="preconnect" href="https://fonts.googleapis.com">
5-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
5+
<link rel="preconnect" href="https://fonts.gstatic.com"
6+
crossorigin>
67
<meta charset="UTF-8">
78
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<meta name="viewport"
10+
content="width=device-width, initial-scale=1.0">
911
<link rel="stylesheet" href="assets/Css/Styles.css">
10-
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <title>Desafio Landing page</title>
12+
<link
13+
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap"
14+
rel="stylesheet"> <title>Desafio Landing page</title>
1115
</head>
1216
<body>
1317
<header class="Page-Header">
14-
<a href="index.html">
15-
<img class="Header-Logo" src="assets/Image/Logo-M3Academy 1.svg" alt="Logo M3">
16-
</a>
18+
<a href="index.html">
19+
<img class="Header-Logo"
20+
src="assets/Image/Logo-M3Academy 1.svg"
21+
alt="Logo M3">
22+
</a>
1723
</header>
1824
<main>
1925
<figure>
20-
<img class="main-banner MainBannerDesktop" src="assets/Image/Top-banner-desktop.png" alt="Banner Principal desktop"/>
21-
<img class="main-banner MainBannerMobile" src="assets/Image/Top-banner-mobile.png" alt="Banner Principal mobile"/>
26+
<img class="main-banner MainBannerDesktop"
27+
src="assets/Image/Top-banner-desktop.png"
28+
alt="Banner Principal desktop" />
29+
<img class="main-banner MainBannerMobile"
30+
src="assets/Image/Top-banner-mobile.png"
31+
alt="Banner Principal mobile" />
2232
</figure>
23-
<section class="TopInfocard">
24-
<div class="TopInfocardText">
25-
<h2 class="TopInfocardSubtitle">Lorem ipsum</h2>
26-
<h1 class="TopInfocardTitle">dolor sit amet</h1>
27-
<p class="TopInfocardDescription">
28-
Lorem ipsum dolor sit amet,
29-
consectetur adipiscing elit.
30-
Cras euismod enim non dui fringilla interdum.
31-
Curabitur ut tortor sed lacus egestas vulputate vel
32-
sit amet velit.Nulla suscipit magna dui.
33-
</p>
34-
</div>
35-
</section>
36-
<figure class="PcContainer">
37-
<img class="ImageTop" src="assets/Image/Computers.png" alt="Computadores">
33+
<section class="TopInfocard">
34+
<div class="TopInfocardText">
35+
<h2 class="TopInfocardSubtitle">Lorem ipsum</h2>
36+
<h1 class="TopInfocardTitle">dolor sit amet</h1>
37+
<p class="TopInfocardDescription">
38+
Lorem ipsum dolor sit amet,
39+
consectetur adipiscing elit.
40+
Cras euismod enim non dui fringilla interdum.
41+
Curabitur ut tortor sed lacus egestas
42+
vulputate vel
43+
sit amet velit.Nulla suscipit magna dui.
44+
</p>
45+
</div>
46+
</section>
47+
<figure class="PcContainer">
48+
<img class="ImageTop" src="assets/Image/Computers.png"
49+
alt="Computadores">
50+
</figure>
51+
<div class="Cards">
52+
<figure class="CardBox">
53+
<img class="imageCard"
54+
src="assets/Image/shop 1.png"
55+
alt="icone de Loja">
56+
<figcaption class="CardDescription">Lorem ipsum
57+
dolor sit amet, consectetur adipiscing elit.
58+
Cras euismod enim non dui fringilla interdum.
59+
</figcaption>
60+
</figure>
61+
<figure class="CardBox">
62+
<img class="imageCard"
63+
src="assets/Image/shopping-bag (1) 1.png"
64+
alt="icone de sacola">
65+
<figcaption class="CardDescription">
66+
Lorem ipsum dolor sit amet,
67+
consectetur adipiscing elit.
68+
Cras euismod enim non dui
69+
fringilla interdum.
70+
</figcaption>
71+
</figure>
72+
<figure class="CardBox">
73+
<img class="imageCard"
74+
src="assets/Image/coin 1.png"
75+
alt="icone de mão com moeda">
76+
<figcaption class="CardDescription">
77+
Lorem ipsum dolor sit amet,
78+
consectetur adipiscing elit.
79+
Cras euismod enim non dui fringilla interdum.
80+
</figcaption>
3881
</figure>
39-
<div class="Cards">
40-
<figure class="CardBox">
41-
<img class="imageCard" src="assets/Image/shop 1.png" alt="icone de Loja">
42-
<figcaption class="CardDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
82+
</div>
83+
<div class="MidBanner">
84+
<div class="wrapper">
85+
<figure class="midCard img1">
86+
<img class="midimg "
87+
src="assets/Image/midNoteBook1.png"
88+
alt="Descktop frontal">
4389
</figure>
44-
<figure class="CardBox">
45-
<img class="imageCard" src="assets/Image/shopping-bag (1) 1.png" alt="icone de sacola">
46-
<figcaption class="CardDescription">
47-
Lorem ipsum dolor sit amet,
48-
consectetur adipiscing elit.
49-
Cras euismod enim non dui
50-
fringilla interdum.
51-
</figcaption>
90+
<figure class="midCard img2">
91+
<img class="midimg "
92+
src="assets/Image/MidNotebook2.png"
93+
alt="Desktop Top-Down">
5294
</figure>
53-
<figure class="CardBox">
54-
<img class="imageCard" src="assets/Image/coin 1.png" alt="icone de mão com moeda">
55-
<figcaption class="CardDescription">
56-
Lorem ipsum dolor sit amet,
57-
consectetur adipiscing elit.
58-
Cras euismod enim non dui fringilla interdum.
59-
</figcaption>
95+
<figure class="midCard img3">
96+
<img class="midimg"
97+
src="assets/Image/MidNotebook3.png"
98+
alt="Desktop Perfil">
6099
</figure>
61100
</div>
62-
<div class="MidBanner">
63-
<div class="wrapper">
64-
<figure class="midCard img1">
65-
<img class="midimg " src="assets/Image/midNoteBook1.png" alt="Descktop frontal">
66-
</figure>
67-
<figure class="midCard img2">
68-
<img class="midimg " src="assets/Image/MidNotebook2.png" alt="Desktop Top-Down">
69-
</figure>
70-
<figure class="midCard img3">
71-
<img class="midimg" src="assets/Image/MidNotebook3.png" alt="Desktop Perfil">
72-
</figure>
73-
</div>
74-
</div>
75-
<div class="BottomCards">
76-
<figure class="bottomcard" >
77-
<img class="BottomImage" src="assets/Image/money (1) 2.png" alt="icone de Money">
78-
<figcaption class="imgdescripton">
79-
Lorem ipsum dolor sit amet,
80-
consectetur adipiscing elit.
81-
Cras euismod enim non dui fringilla interdum.
82-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
83-
Cras euismod enim non dui fringilla interdum.
84-
</figcaption>
85-
</figure>
86-
<figure class="bottomcard">
87-
<img class="BottomImage" src="assets/Image/coin 2.png" alt="icone de Dinheiro">
88-
<figcaption class="imgdescripton">
89-
Lorem ipsum dolor sit amet,
90-
consectetur adipiscing elit.
91-
Cras euismod enim non dui fringilla interdum.
92-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
93-
Cras euismod enim non dui fringilla interdum.
94-
</figcaption>
95-
</figure>
96-
<figure class="bottomcard">
97-
<img class="BottomImage" src="assets/Image/laptop 1.png" alt="icone de Laptop">
98-
<figcaption class="imgdescripton">
99-
Lorem ipsum dolor sit amet,
100-
consectetur adipiscing elit.
101-
Cras euismod enim non dui fringilla interdum.
102-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
103-
Cras euismod enim non dui fringilla interdum.
104-
</figcaption>
105-
</figure>
106-
<figure class="bottomcard">
107-
<img class="BottomImage" src="assets/Image/Group.png" alt="icone de Celular">
108-
<figcaption class="imgdescripton">
101+
</div>
102+
<div class="BottomCards">
103+
<figure class="bottomcard">
104+
<img class="BottomImage"
105+
src="assets/Image/money (1) 2.png"
106+
alt="icone de Money">
107+
<figcaption class="imgdescripton">
108+
Lorem ipsum dolor sit amet,
109+
consectetur adipiscing elit.
110+
Cras euismod enim non dui fringilla interdum.
111+
Lorem ipsum dolor sit amet, consectetur
112+
adipiscing elit.
113+
Cras euismod enim non dui fringilla interdum.
114+
</figcaption>
115+
</figure>
116+
<figure class="bottomcard">
117+
<img class="BottomImage"
118+
src="assets/Image/coin 2.png"
119+
alt="icone de Dinheiro">
120+
<figcaption class="imgdescripton">
121+
Lorem ipsum dolor sit amet,
122+
consectetur adipiscing elit.
123+
Cras euismod enim non dui fringilla interdum.
124+
Lorem ipsum dolor sit amet, consectetur
125+
adipiscing elit.
126+
Cras euismod enim non dui fringilla interdum.
127+
</figcaption>
128+
</figure>
129+
<figure class="bottomcard">
130+
<img class="BottomImage"
131+
src="assets/Image/laptop 1.png"
132+
alt="icone de Laptop">
133+
<figcaption class="imgdescripton">
134+
Lorem ipsum dolor sit amet,
135+
consectetur adipiscing elit.
136+
Cras euismod enim non dui fringilla interdum.
137+
Lorem ipsum dolor sit amet, consectetur
138+
adipiscing elit.
139+
Cras euismod enim non dui fringilla interdum.
140+
</figcaption>
141+
</figure>
142+
<figure class="bottomcard">
143+
<img class="BottomImage"
144+
src="assets/Image/Group.png"
145+
alt="icone de Celular">
146+
<figcaption class="imgdescripton">
147+
Lorem ipsum dolor sit amet,
148+
consectetur adipiscing elit.
149+
Cras euismod enim non dui fringilla interdum.
150+
Lorem ipsum dolor sit amet, consectetur
151+
adipiscing elit.
152+
Cras euismod enim non dui fringilla interdum.
153+
</figcaption>
154+
</figure>
155+
</div>
156+
<div class="bottomwarp">
157+
<section class="BottomInfoCard">
158+
<div class="BoxText">
159+
<h1 class="BotdescriptionTitlte">Lorem ipsum
160+
dolor sit amet</h1>
161+
<p class="Botdescription">
109162
Lorem ipsum dolor sit amet,
110163
consectetur adipiscing elit.
111-
Cras euismod enim non dui fringilla interdum.
112-
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
113-
Cras euismod enim non dui fringilla interdum.
114-
</figcaption>
115-
</figure>
116-
</div>
117-
<div class="bottomwarp">
118-
<section class="BottomInfoCard">
119-
<div class="BoxText">
120-
<h1 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h1>
121-
<p class="Botdescription">
122-
Lorem ipsum dolor sit amet,
123-
consectetur adipiscing elit.
124-
Cras vulputate sapien non libero faucibus interdum.
125-
In eget tincidunt ipsum.
126-
Quisque a tellus at lectus blandit tempor.
127-
Ut tristique auctor mi eget hendrerit.
128-
Curabitur venenatis felis vitae sagittis venenatis.
129-
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
130-
</p>
131-
</div>
132-
</section>
133-
<figure class="downBannerBox">
134-
<img class="footerDesk lastBanner" src="assets/Image/óculos-desktop.png" alt="Imagem oculos desktop">
135-
<img class="footermob lastBanner" src="assets/Image/óculos moible.png" alt="Imagem oculos mobile">
136-
</figure>
137-
</div>
164+
Cras vulputate sapien non libero faucibus
165+
interdum.
166+
In eget tincidunt ipsum.
167+
Quisque a tellus at lectus blandit tempor.
168+
Ut tristique auctor mi eget hendrerit.
169+
Curabitur venenatis felis vitae sagittis
170+
venenatis.
171+
Donec finibus turpis vitae lectus interdum
172+
rutrum vitae sed augue.
173+
</p>
174+
</div>
175+
</section>
176+
<figure class="downBannerBox">
177+
<img class="footerDesk lastBanner"
178+
src="assets/Image/óculos-desktop.png"
179+
alt="Imagem oculos desktop">
180+
<img class="footermob lastBanner"
181+
src="assets/Image/óculos moible.png"
182+
alt="Imagem oculos mobile">
183+
</figure>
184+
</div>
138185
</main>
139186
<footer>
140187
<div class="footer">
141188
<ul class="icons">
142-
<li class="icon" >
143-
<a href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR" target="_blank">
144-
<img class="fotimg" src="assets/Image/instagram.png" alt="icone do instragram">
189+
<li class="icon">
190+
<a
191+
href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR"
192+
target="_blank">
193+
<img class="fotimg"
194+
src="assets/Image/instagram.png"
195+
alt="icone do instragram">
145196
</a>
146197
</li>
147198
<li class="icon">
148-
<a href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR" target="_blank">
149-
<img class="fotimg" src="assets/Image/facebook.png" alt="icone do facebook">
199+
<a
200+
href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR"
201+
target="_blank">
202+
<img class="fotimg"
203+
src="assets/Image/facebook.png"
204+
alt="icone do facebook">
150205
</a>
151206
</li>
152207
<li class="icon">
153-
<a href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR" target="_blank">
154-
<img class="fotimg" src="assets/Image/youtube 2.png" alt="icone do youtube">
155-
</a>
208+
<a
209+
href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR"
210+
target="_blank">
211+
<img class="fotimg"
212+
src="assets/Image/youtube 2.png"
213+
alt="icone do youtube">
214+
</a>
156215
</li>
157216
</ul>
158-
<p class="footerText">Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00</p>
217+
<p class="footerText">Copyright © 2020 - Loja Comércio
218+
Eletrônico | CNPJ: 000.000.000/0001-00</p>
159219
</div>
160220
</footer>
161221
</body>

0 commit comments

Comments
 (0)