forked from Dogfalo/materialize
-
Notifications
You must be signed in to change notification settings - Fork 0
/
about.html
200 lines (184 loc) · 9.62 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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<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="http://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css"/>
</head>
<body>
<!-- Buy sell ads-->
<script>
(function(){
var bsa = document.createElement('script');
bsa.type = 'text/javascript';
bsa.async = true;
bsa.src = 'http://s3.buysellads.com/ac/bsa.js';
(document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(bsa);
})();
</script>
<nav id="front-page-nav">
<div class="container">
<div class="nav-wrapper"><a id="logo-container" href="http://materializecss.com/" class="brand-logo">
<object id="front-page-logo" type="image/svg+xml" data="res/materialize.svg">Your browser does not support SVG</object></a>
<ul id="nav-mobile" class="right side-nav">
<li class="active"><a href="http://materializecss.com/about.html">About</a></li>
<li><a href="http://materializecss.com/getting_started.html">Getting Started</a></li>
<li><a href="http://materializecss.com/sass.html">Sass</a></li>
<li><a href="http://materializecss.com/components.html">Components</a></li>
<li><a href="http://materializecss.com/javascript.html">JavaScript</a></li>
<li><a href="http://materializecss.com/mobile.html">Mobile</a></li>
</ul><a href="#" data-activates="nav-mobile" class="button-collapse"><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav><div class="section" id="index-banner">
<div class="container">
<div class="row">
<div class="col s12 m9">
<h1 class="header center-on-small-only">About</h1>
<h4 class ="light red-text lighten-4 center-on-small-only">Learn about the Material Design and our Project Team.</h4>
</div>
<div class="col s12 m3">
<!-- BuySellAds Zone Code -->
<div class="buysellads-header center-on-small-only">
<div id="bsap_1300189" class="bsarocks bsap_b9468009151bf6fe6de9519ffdd7961f"></div>
</div>
<!-- End BuySellAds Zone Code -->
</div>
</div>
</div>
</div>
<div class="container">
<!-- Outer row -->
<div class="row">
<div class="col hide-on-small-only m3 l2">
<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 class="col s12 m9 l10">
<!-- 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>
<iframe width="100%" height="350" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
<h3 class="header light">Principles</h3>
<div class="row">
<div class="col s12 m4">
<img class="promo" src="images/metaphor.png"></img>
<h4 class="center">Material is the metaphor</h4>
<p class="light">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>
</div>
<div class="col s12 m4">
<img class="promo" src="images/bold.png"></img>
<h4 class="center">Bold, graphic, intentional</h4>
<p class="light">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>
</div>
<div class="col s12 m4">
<img class="promo" src="images/motion.png"></img>
<h4 class="center">Motion provides meaning</h4>
<p class="light">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>
<!-- 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>
<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>
</div>
</div> <!-- End Container --><div id="footer" class="section">
<div class="footer-block">
<iframe src="http://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>
</div>
<div class="footer-block">
<a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a>
</div>
<div class="footer-block">
<div class="g-follow" data-annotation="bubble" data-height="24" data-href="https://plus.google.com/108619793845925798422" data-rel="publisher"></div>
</div>
<div class="footer-block">
<a href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
</div>
</div><!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.timeago.js"></script>
<script src="js/prism.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>