-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
159 lines (150 loc) · 6.4 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
<!DOCTYPE html>
<html>
<head>
<title>The Materialize Example</title>
<meta name="viewport" content="width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/js/materialize.min.js">
</script>
</head>
<body>
<header>
<div class="red accent-1">
<nav class="nav-extended">
<div class="nav-wrapper">
<a href="#" class="brand-logo">
<img src="./src/images/logo.ico" alt="" class="circle responsive-img" style="width:50px" />
</a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>
<a href="sass.html">Sass</a>
</li>
<li>
<a href="badges.html">Components</a>
</li>
<li>
<a href="collapsible.html">JavaScript</a>
</li>
</ul>
</div>
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">
<a href="#test1">What</a>
</li>
<li class="tab">
<a href="#test2">Start</a>
</li>
<li class="tab disabled">
<a href="#test3">Disabled</a>
</li>
<li class="tab">
<a class="active" href="#test4">Search</a>
</li>
</ul>
</div>
</nav>
<ul class="sidenav" id="mobile-demo">
a
</ul>
<div id="test1" class="col s12">
<div class="container">
<div class="card-panel yellow lighten-5" id="desc">
<p>
Materialize is a UI component library created with CSS, JavaScript, and HTML. Materialize reusable UI components help in
constructing attractive, consistent, and functional web pages and web apps while adhering to
modern web design principles such as browser portability, device independence, and graceful degradation.
</p>
<p>
Materialize has in-built responsive designing so that the website created using Materialize will redesign itself as per the
device size. Materialize classes are created in such a way that the website can fit any screen
size.
</p>
</div>
</div>
</div>
<div id="test2" class="col s12">
<div class="container">
<div class="divider"></div>
<div class="card-panel z-depth-5">
<!-- z-depth-5: shadow on the card panel -->
<div class="row">
<h4>Installation</h4>
<div class="col s6">
<p>Local Installation: You can download the materialize.min.css and materialize.min.js files
on your local machine and include it in your HTML code.</p>
</div>
<div class="col s6">
<p>CDN Based Version: You can include the materialize.min.css and materialize.min.js files into
your HTML code directly from the Content Delivery Network (CDN).</p>
</div>
</div>
</div>
<div class="divider"></div>
</div>
</div>
<div id="test3" class="col s12">
Disabled
</div>
<div id="test4" class="col s12">
<div class="nav-wrapper">
<form>
<div class="input-field">
<input id="search" type="search" required>
<label class="label-icon" for="search">
<i class="material-icons">search</i>
</label>
<i class="material-icons">close</i>
</div>
</form>
</div>
</div>
</div>
</header>
<div class="card-panel red accent-2 ">
<span class="white-text ">
<h3>Materialize</h3>
</span>
</div>
<div class="center-align">
<img src="./src/images/Logo.png" alt="" class="responsive-img">
</div>
<blockquote>
The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet
Explorer 9.0 will also have support for some HTML5 functionality.
</blockquote>
<div class="center-align">
<img src="./src/images/banner.jpg" alt="" class="responsive-img">
</div>
<footer class="center-align">
<ul class="pagination">
<li class="disabled">
<a href="#!">
<i class="material-icons">chevron_left</i>
</a>
</li>
<li class="active">
<a href="#!">1</a>
</li>
<li class="waves-effect">
<a href="#!">2</a>
</li>
<li class="waves-effect">
<a href="#!">3</a>
</li>
<li class="waves-effect">
<a href="#!">
<i class="material-icons">chevron_right</i>
</a>
</li>
</ul>
<div class="card-panel red white-text">
<div class="divider"></div>
<h6>Aulinha de web foi produtiva!</h6>
Copyright(R)
</div>
</footer>
</body>
</html>