-
Notifications
You must be signed in to change notification settings - Fork 49
/
about.html
320 lines (302 loc) · 16 KB
/
about.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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="msapplication-tap-highlight" content="no">
<meta name="description" content="Materialize is a modern responsive CSS framework based on Material Design by Google. ">
<title>About - Materialize</title>
<!-- Favicons-->
<link rel="apple-touch-icon-precomposed" href="images/favicon/apple-touch-icon-152x152.png">
<meta name="msapplication-TileColor" content="#FFFFFF">
<meta name="msapplication-TileImage" content="images/favicon/mstile-144x144.png">
<link rel="icon" href="images/favicon/favicon-32x32.png" sizes="32x32">
<!-- Android 5 Chrome Color-->
<meta name="theme-color" content="#EE6E73">
<!-- CSS-->
<link href="css/prism.css" rel="stylesheet">
<link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script>
window.liveSettings = {
api_key: "a0b49b34b93844c38eaee15690d86413",
picker: "bottom-right",
detectlang: true,
dynamic: true,
autocollect: true
};
</script>
<script src="//cdn.transifex.com/live.js"></script>
</head>
<body class="rtl">
<header>
<div class="container"><a href="#" data-target="nav-mobile" class="button-collapse top-nav sidenav-trigger waves-effect waves-light circle hide-on-large-only"><i class="material-icons">menu</i></a></div>
<ul id="nav-mobile" class="sidenav sidenav-fixed">
<li class="logo"><a id="logo-container" href="/" class="brand-logo">
<object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a></li>
<li class="search">
<div class="search-wrapper">
<input id="search" placeholder="Search"><i class="material-icons">search</i>
<div class="search-results"></div>
</div>
</li>
<li class="bold active"><a href="about.html" class="waves-effect waves-teal">About</a></li>
<li class="bold"><a href="getting-started.html" class="waves-effect waves-teal">Getting Started</a></li>
<li class="no-padding">
<ul class="collapsible collapsible-accordion">
<li class="bold"><a class="collapsible-header waves-effect waves-teal">CSS</a>
<div class="collapsible-body">
<ul>
<li><a href="color.html">Color</a></li>
<li><a href="grid.html">Grid</a></li>
<li><a href="helpers.html">Helpers</a></li>
<li><a href="media-css.html">Media</a></li>
<li><a href="pulse.html">Pulse</a></li>
<li><a href="sass.html">Sass</a></li>
<li><a href="shadow.html">Shadow</a></li>
<li><a href="table.html">Table</a></li>
<li><a href="css-transitions.html">Transitions</a></li>
<li><a href="typography.html">Typography</a></li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-teal">Components</a>
<div class="collapsible-body">
<ul>
<li><a href="badges.html">Badges</a></li>
<li><a href="buttons.html">Buttons</a></li>
<li><a href="breadcrumbs.html">Breadcrumbs</a></li>
<li><a href="cards.html">Cards</a></li>
<li><a href="collections.html">Collections</a></li>
<li><a href="footer.html">Footer</a></li>
<li><a href="icons.html">Icons</a></li>
<li><a href="navbar.html">Navbar</a></li>
<li><a href="pagination.html">Pagination</a></li>
<li><a href="preloader.html">Preloader</a></li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-teal">JavaScript</a>
<div class="collapsible-body">
<ul>
<li><a href="carousel.html">Carousel</a></li>
<li><a href="collapsible.html">Collapsible</a></li>
<li><a href="dropdown.html">Dropdown</a></li>
<li><a href="feature-discovery.html">FeatureDiscovery</a></li>
<li><a href="media.html">Media</a></li>
<li><a href="modals.html">Modals</a></li>
<li><a href="parallax.html">Parallax</a></li>
<li><a href="pushpin.html">Pushpin</a></li>
<li><a href="scrollspy.html">Scrollspy</a></li>
<li><a href="sidenav.html">Sidenav</a></li>
<li><a href="tabs.html">Tabs</a></li>
<li><a href="toasts.html">Toasts</a></li>
<li><a href="tooltips.html">Tooltips</a></li>
<li><a href="waves.html">Waves</a></li>
</ul>
</div>
</li>
<li class="bold"><a class="collapsible-header waves-effect waves-teal">Forms</a>
<div class="collapsible-body">
<ul>
<li><a href="autocomplete.html">Autocomplete</a></li>
<li><a href="checkboxes.html">Checkboxes</a></li>
<li><a href="chips.html">Chips</a></li>
<li><a href="pickers.html">Pickers</a></li>
<li><a href="radio-buttons.html">Radio Buttons</a></li>
<li><a href="range.html">Range</a></li>
<li><a href="select.html">Select</a></li>
<li><a href="switches.html">Switches</a></li>
<li><a href="text-inputs.html">Text Inputs</a></li>
</ul>
</div>
</li>
</ul>
</li>
<li class="bold"><a href="mobile.html" class="waves-effect waves-teal">Mobile</a></li>
<li class="bold"><a href="showcase.html" class="waves-effect waves-teal">Showcase</a></li>
<li class="bold"><a href="themes.html" class="waves-effect waves-teal">Themes<span class="new badge"></span></a></li>
</ul>
<div class="patreon-ad"><a href="https://www.patreon.com/materialize" target="_blank" class="waves-effect">Become a Patron</a></div>
</header>
<main><div class="section" id="index-banner">
<div class="container">
<div class="row" style="margin-bottom: 0;">
<div class="col s12 m8 offset-m1 xl7 offset-xl1 center-on-small-only">
<h1 class="header">About</h1>
<h4 class ="light">Learn about Material Design and our Project Team.</h4>
</div>
<div class="col s12 m3 xl3 offset-xl1">
<div class="buysellads-header center-on-small-only">
<!-- CarbonAds Zone Code -->
<script async type="text/javascript" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=materializecss" id="_carbonads_js"></script>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<!-- Outer row -->
<div class="row">
<div class="col s12 m8 offset-m1 xl7 offset-xl1 center-on-small-only">
<!-- Material Design -->
<div id="materialdesign" class="section scrollspy">
<h2 class="header">Material Design</h2>
<p class="caption">Created and designed by Google, Material Design is a design language that combines the classic principles of successful design
along with innovation and technology. Google's goal is to develop a system of design that allows for a unified user experience
across all their products on any platform.</p>
<div class="video-container">
<iframe width="853" height="480" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class="section">
<h3 class="header light">Principles</h3>
<div class="row">
<div class="col s12 l4">
<img class="promo" src="images/metaphor.png">
<h4 class="center">Material is the metaphor</h4>
<p>The metaphor of material defines the relationship between space and motion. The idea is that the technology is inspired by paper and ink and is utilized to facilitate creativity and innovation. Surfaces and edges provide familiar visual cues that allow users to quickly understand the technology beyond the physical world.</p>
<br>
</div>
<div class="col s12 l4">
<img class="promo" src="images/bold.png">
<h4 class="center">Bold, graphic, intentional</h4>
<p>Elements and components such as grids, typography, color, and imagery are not only visually pleasing, but also create a sense of hierarchy, meaning, and focus. Emphasis on different actions and components create a visual guide for users.</p>
<br>
</div>
<div class="col s12 l4">
<img class="promo" src="images/motion.png">
<h4 class="center">Motion provides meaning</h4>
<p>Motion allows the user to draw a parallel between what they see on the screen and in real life. By providing both feedback and familiarity, this allows the user to fully immerse him or herself into unfamiliar technology. Motion contains consistency and continuity in addition to giving users additional subconscious information about objects and transformations.</p>
</div>
</div>
</div>
</div>
<!-- About the Team-->
<div id="team" class="section scrollspy">
<h2 class="header">Meet the Team</h2>
<p class="caption">We are a team of students from Carnegie Mellon University.</p>
<div class="center">
<div class="image-container">
<img src="images/materialize_team.jpeg" style="width:100%;">
</div>
</div>
<br />
<div class="row">
<div class="col s12 m3 center-on-small-only">
<div class="image-container">
<img src="images/alvin.png">
</div>
</div>
<div class="col s12 m9">
<h4>Alvin Wang</h4>
<p>Alvin is an Information Systems and Human Computer Interaction Major. He worked as a Software Engineer at Fidelity Investments this past summer.</p>
</div>
</div>
<div class="row">
<div class="col s12 m3 center-on-small-only">
<div class="image-container">
<img src="images/Alan.png">
</div>
</div>
<div class="col s12 m9">
<h4>Alan Chang</h4>
<p>Alan is an Information Systems major with a minor in computer science. He worked at as a Front End Developer at Shift Collaborative this past summer.</p>
</div>
</div>
<div class="row">
<div class="col s12 m3 center-on-small-only">
<div class="image-container">
<img src="images/alex.png">
</div>
</div>
<div class="col s12 m9">
<h4>Alex Mark</h4>
<p>Alex is an Information Systems major with a minor in Human Computer Interaction. He worked as a software developer for Intuit this past summer.</p>
</div>
</div>
<div class="row">
<div class="col s12 m3 center-on-small-only">
<div class="image-container">
<img src="images/kevin.png">
</div>
</div>
<div class="col s12 m9">
<h4>Kevin Louie</h4>
<p>Kevin is an Information Systems major with a minor in Human Computer Interaction. This past summer, he worked as a technology analyst at PPG Industries.</p>
</div>
</div>
</div>
</div>
<!-- Table of Contents -->
<div class="col hide-on-small-only m3 xl3 offset-xl1">
<div class="toc-wrapper">
<div style="height: 1px;">
<ul class="section table-of-contents">
<li><a href="#materialdesign">Material Design</a></li>
<li><a href="#team">Meet the Team</a></li>
</ul>
</div>
</div>
</div>
</div>
</div> <!-- End Container -->
</main> <footer class="page-footer docs-footer">
<div class="container">
<div class="row" style="margin-bottom: 0;">
<div class="col s12 m10 offset-m1">
<div class="row">
<div class="col l4 s12">
<h5>Help Materialize Grow</h5>
<p class="grey-text text-darken-2">We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.</p>
<a class="btn waves-effect waves-light red lighten-2" href="/support-us.html">Support Us</a>
</div>
<div class="col l4 s12">
<h5>Join the Discussion</h5>
<p class="grey-text text-darken-2">We have a Gitter chat room set up where you can talk directly with us. Come in and discuss new features, future goals, general problems or questions, or anything else you can think of.</p>
<a class="btn waves-effect waves-light red lighten-2" target="_blank" href="https://gitter.im/Dogfalo/materialize">Chat</a>
</div>
<div class="col l4 s12" style="overflow: hidden;">
<h5>Connect</h5>
<iframe src="https://ghbtns.com/github-btn.html?user=dogfalo&repo=materialize&type=watch&count=true&size=large" allowtransparency="true" frameborder="0" scrolling="0" width="170" height="30"></iframe>
<br>
<a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
<br>
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
</div>
</div>
<div class="footer-copyright">
© 2014-2017 Materialize, All rights reserved.
<a class="grey-text text-darken-1 right" href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
</div>
</div>
</div>
</div>
</footer>
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>if (!window.jQuery) { document.write('<script src="bin/jquery-3.2.1.min.js"><\/script>'); }
</script>
<script src="js/jquery.timeago.min.js"></script>
<script src="js/prism.js"></script>
<script src="jade/lunr.min.js"></script>
<script src="jade/search.js"></script>
<script src="bin/materialize.js"></script>
<script src="js/init.js"></script>
<!-- Twitter Button -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<!-- Google Plus Button-->
<script src="https://apis.google.com/js/platform.js" async defer></script>
<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-56218128-1', 'auto');
ga('require', 'displayfeatures');
ga('send', 'pageview');
</script>
</body>
</html>