-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
162 lines (162 loc) · 9.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
<!DOCTYPE html>
<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">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/assets/Css/Styles.css">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet"> <title>Desafio Landing page</title>
</head>
<body>
<header class="Page-Header">
<a href="index.html">
<img class="Header-Logo" src="assets/Image/Logo-M3Academy 1.svg" alt="Logo M3">
</a>
</header>
<main>
<figure>
<img class="main-banner MainBannerDesktop" src="assets/Image/Top-banner-desktop.png" alt="Banner Principal desktop"/>
<img class="main-banner MainBannerMobile"" src="assets/Image/Top-banner-mobile.png" alt="Banner Principal mobile"/>
</figure>
<section class="TopInfocard">
<div class="TopInfocardText">
<h2 class="TopInfocardSubtitle">Lorem ipsum</h2>
<h1 class="TopInfocardTitle">dolor sit amet</h1>
<p class="TopInfocardDescription">
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>
</section>
<figure class="PcContainer">
<img class="ImageTop" src="assets/Image/Computers.png" alt="Computadores">
</figure>
<div class="Cards">
<figure class="CardBox">
<img class="imageCard" src="assets/Image/shop 1.png" alt="icone de Loja">
<figcaption class="CardDescription">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras euismod enim non dui fringilla interdum. </figcaption>
</figure>
<figure class="CardBox">
<img class="imageCard" src="/assets/Image/shopping-bag (1) 1.png" alt="icone de sacola">
<figcaption class="CardDescription">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras euismod enim non dui
fringilla interdum.
</figcaption>
</figure>
<figure class="CardBox">
<img class="imageCard"src="assets/Image/coin 1.png" alt="icone de mão com moeda">
<figcaption class="CardDescription">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras euismod enim non dui fringilla interdum.
</figcaption>
</figure>
</div>
<div class="MidBanner">
<div class="wrapper">
<figure class="midCard img1">
<img class="midimg " src="assets/Image/midNoteBook1.png" alt="Descktop frontal">
</figure>
<figure class="midCard img2">
<img class="midimg " src="assets/Image/MidNotebook2.png" alt="Desktop Top-Down">
</figure>
<figure class="midCard img3">
<img class="midimg" src="assets/Image/MidNotebook3.png" alt="Desktop Perfil">
</figure>
</div>
</div>
<div class="BottomCards">
<figure class="bottomcard" >
<img class="BottomImage" src="/assets/Image/money (1) 2.png" alt="icone de Money">
<figcaption class="imgdescripton">
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.
</figcaption>
</figure>
<figure class="bottomcard">
<img class="BottomImage" src="/assets/Image/coin 2.png" alt="icone de Dinheiro">
<figcaption class="imgdescripton">
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.
</figcaption>
</figure>
<figure class="bottomcard">
<img class="BottomImage" src="/assets/Image/laptop 1.png" alt="icone de Laptop">
<figcaption class="imgdescripton">
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.
</figcaption>
</figure>
<figure class="bottomcard">
<img class="BottomImage" src="/assets/Image/Group.png" alt="icone de Celular">
<figcaption class="imgdescripton">
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.
</figcaption>
</figure>
</div>
<div class="bottomwarp">
<section class="BottomInfoCard">
<div class="BoxText">
<h1 class="BotdescriptionTitlte">Lorem ipsum dolor sit amet</h1>
<p class="Botdescription">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit.
Cras vulputate sapien non libero faucibus interdum.
In eget tincidunt ipsum.
Quisque a tellus at lectus blandit tempor.
Ut tristique auctor mi eget hendrerit.
Curabitur venenatis felis vitae sagittis venenatis.
Donec finibus turpis vitae lectus interdum rutrum vitae sed augue.
</p>
</div>
</section>
<figure class="downBannerBox">
<img class="footerDesk lastBanner" src="/assets/Image/óculos-desktop.png" alt="Imagem oculos desktop">
<img class="footermob lastBanner" src="/assets/Image/óculos moible.png" alt="Imagem oculos mobile">
</figure>
</div>
</main>
<footer>
<div class="footer">
<ul class="icons">
<li class="icon" >
<a href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR" target="_blank">
<img class="fotimg" src="/assets/Image/instagram.png" alt="icone do instragram">
</a>
</li>
<li class="icon">
<a href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR" target="_blank">
<img class="fotimg" src="/assets/Image/facebook.png" alt="icone do facebook">
</a>
</li>
<li class="icon">
<a href="https://classroom.google.com/u/0/c/NTA3MTMyNDAzNTgw/a/NDkwNjMyNzQxMzgx/details?hl=pt-BR" target="_blank">
<img class="fotimg" src="/assets/Image/youtube 2.png" alt="icone do youtube">
</a>
</li>
</ul>
<p class="footerText">Copyright © 2020 - Loja Comércio Eletrônico | CNPJ: 000.000.000/0001-00</p>
</div>
</footer>
</body>
</html>