-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
235 lines (226 loc) · 10.6 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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Sétimo projeto prático do curso Webmaster Front-End" />
<meta name="keywords" content="sétimo, projeto, prático, curso, webmaster front end, danki code" />
<meta name="author" content="Matheus Ramalho de Oliveira" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<!--CSS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<link href="plugins/materialize/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection" />
<!--JS-->
<script src="plugins/jquery/jquery.min.js"></script>
<script src="plugins/materialize/materialize.min.js"></script>
<script src="js/script.js"></script>
<title>Projeto 07 by Matheus</title>
</head>
<body>
<section id="header">
<nav class="deep-orange">
<div class="container">
<div class="nav-wrapper">
<a href="" class="brand-logo">Danki.Code</a>
<a href="#" data-target="mobile-demo" class="sidenav-trigger right"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a href="">Home</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div>
<ul class="sidenav" id="mobile-demo">
<li><a href="">Home</a></li>
<li><a href="#sobre">Sobre</a></li>
<li><a href="#contato">Contato</a></li>
</ul>
</div><!--container-->
</nav>
</section><!--header-->
<section>
<div class="row deep-orange darken-1 deep-orange-text text-lighten-4">
<div class="col offset-s1 s10 offset-s1 offset-l3 l6 offset-l3">
<div class="margin-40"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque id sodales est, nec auctor urna. Mauris dictum metus sit amet risus fermentum sagittis. Etiam eget ligula nulla. Quisque imperdiet risus vitae dolor tincidunt, nec rutrum arcu lobortis. Nam ullamcorper metus lacus, non euismod mauris ornare et. Suspendisse potenti. Donec et magna a ante mollis mattis non sit amet felis. Integer posuere lectus augue, ac sagittis tortor blandit at. Fusce sollicitudin nulla vel urna rhoncus hendrerit. Morbi tincidunt scelerisque bibendum.</p>
<p>Aenean ullamcorper sapien dui, a aliquam elit lobortis vitae. Fusce a libero quis nibh pretium semper a vitae diam. Mauris hendrerit justo eget dui condimentum, nec ullamcorper tellus egestas. Morbi dignissim aliquam urna sit amet finibus. Fusce porta erat eu urna pretium vulputate. Phasellus et pulvinar enim, et luctus eros. Praesent suscipit nulla nisl, eget dictum leo faucibus ut. Integer id nulla non massa fermentum fermentum sed in augue. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris maximus est dignissim, pulvinar nisl sit amet, cursus nibh. Sed aliquam eget nisl quis venenatis. Maecenas efficitur vulputate lacus, non lobortis sapien interdum eu. Fusce gravida interdum orci at pulvinar. Ut at lectus venenatis, tincidunt elit a, egestas dui.</p>
<div class="margin-40"></div>
</div>
</div>
</section>
<section id="sobre">
<div class="row">
<div class="container">
<div class="col s12 m6">
<div class="title-line">
<div class="line"></div>
<h2>Sobre o autor</h2>
</div>
<p class="flow-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ac mattis urna, vitae laoreet magna. Mauris non turpis sed tellus pretium lacinia in eget ligula.</p>
</div><!--col-->
<div class="col s12 m6">
<div class="title-line">
<div class="line"></div>
<h2>Mensagem do dia</h2>
</div>
<div class="card deep-orange darken-1">
<div class="card-content deep-orange-text text-lighten-4">
<span class="card-title">Lorem Ipsum</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius nunc tellus, at consectetur nibh posuere nec. Donec massa risus, faucibus quis elit sit amet, pharetra porta ligula.</p>
</div>
</div>
</div><!--col-->
</div><!--container-->
</div><!--row-->
</section><!--sobre-->
<section id="lugares">
<div class="container">
<div class="title-line">
<div class="line"></div>
<h2>Lugares bacanas!</h2>
</div>
<div class="row">
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="img/background1.jpg">
<span class="card-title">Lorem ipsum silor domor</span>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi justo, euismod ac ultricies sed, tempus eu lorem. In vel leo a justo tempor pharetra ut at mi.</p>
</div>
</div>
</div><!--col-->
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="img/background2.jpg">
<span class="card-title">Lorem ipsum silor domor</span>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi justo, euismod ac ultricies sed, tempus eu lorem. In vel leo a justo tempor pharetra ut at mi.</p>
</div>
</div>
</div><!--col-->
<div class="col s12 m4">
<div class="card">
<div class="card-image">
<img src="img/background3.jpg">
<span class="card-title">Lorem ipsum silor domor</span>
</div>
<div class="card-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mi justo, euismod ac ultricies sed, tempus eu lorem. In vel leo a justo tempor pharetra ut at mi.</p>
</div>
</div>
</div><!--col-->
</div><!--row-->
</div><!--container-->
</section><!--lugares-->
<section id="equipe">
<div class="container">
<div class="title-line">
<div class="line"></div>
<h2>Equipe!</h2>
</div>
<div class="row">
<div class="col s12 m6">
<ul class="collection">
<li class="collection-item avatar">
<i class="material-icons circle deep-orange">account_circle</i>
<span class="title">Matheus Ramalho de Oliveira</span>
<p>Systems Analyst<br/>Web Developer</p>
<a class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
</div><!--col-->
<div class="col s12 m6">
<ul class="collection">
<li class="collection-item avatar">
<i class="material-icons circle deep-purple">account_circle</i>
<span class="title">Guilherme Grillo</span>
<p>Developer<br/>Programmer</p>
<a class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
</div><!--col-->
<div class="col s12 m6">
<ul class="collection">
<li class="collection-item avatar">
<i class="material-icons circle orange">account_circle</i>
<span class="title">Naruto Uzumaki</span>
<p>Hokage<br/>Shinobi</p>
<a class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
</div><!--col-->
<div class="col s12 m6">
<ul class="collection">
<li class="collection-item avatar">
<i class="material-icons circle indigo">account_circle</i>
<span class="title">Sasuke Uchiha</span>
<p>Ninja<br/>Shinobi</p>
<a class="secondary-content"><i class="material-icons">grade</i></a>
</li>
</ul>
</div><!--col-->
</div><!--row-->
</div><!--container-->
</section><!--equipe-->
<section id="contato">
<div class="container">
<div class="title-line">
<div class="line"></div>
<h2>Entre em contato</h2>
</div>
<div class="row">
<form class="col s12 offset-m2 m8 offset-m2">
<div class="input-field col s12 m6">
<input id="first_name" type="text" class="validate">
<label for="first_name">Nome</label>
</div>
<div class="input-field col s12 m6">
<input id="last_name" type="text" class="validate">
<label for="last_name">Sobrenome</label>
</div>
<div class="row">
<div class="input-field col s12">
<input id="email" type="email" class="validate">
<label for="email">Email</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea1" class="materialize-textarea"></textarea>
<label for="textarea1">Mensagem</label>
</div>
</div>
<button class="btn waves-effect waves-light deep-orange right" type="submit" name="action">Enviar<i class="material-icons right">send</i></button>
</form>
</div><!--row-->
</div><!--container-->
</section><!--contato-->
<div class="margin-40"></div>
<footer class="page-footer deep-orange">
<div class="container">
<div class="row">
<div class="col m6 s12">
<h5 class="white-text">Feito com materialize</h5>
<p class="grey-text text-lighten-4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ut vulputate dolor.</p>
</div>
<div class="col m4 offset-m2 s12">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="https://www.lipsum.com" target="_blank">Lorem Ipsum</a></li>
<li><a class="grey-text text-lighten-3" href="https://jquery.com" target="_blank">jQuery</a></li>
<li><a class="grey-text text-lighten-3" href="https://materializecss.com" target="_blank">Materialize</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<p class="grey-text text-lighten-4 center">Made with ♥ by Matheus Ramalho de Oliveira</p>
</div>
</div>
</footer>
</body>
</html>