forked from Dogfalo/materialize
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
158 lines (141 loc) · 7.25 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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Materialize - Documentation</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">
<link href="css/ghpages-materialize.css" type="text/css" rel="stylesheet" media="screen,projection" />
<link href="css/prism.css" rel="stylesheet" />
</head>
<body>
<nav>
<div class="container">
<div class="nav-wrapper">
<a href="index.html" class="brand-logo">Materialize</a>
<ul class="right side-nav" id="nav-mobile">
<li class="active"><a href="about.html">About</a></li>
<li><a href="getting_started.html">Getting Started</a></li>
<li><a href="sass.html">Sass</a></li>
<li><a href="components.html">Components</a></li>
<li><a href="javascript.html">JavaScript</a></li>
</ul>
<a class="button-collapse" href="#" data-activates='nav-mobile'><i class="mdi-navigation-menu"></i></a>
</div>
</div>
</nav>
<!-- Tabs-->
<div class="tabs-wrapper">
<div class="row white z-depth-1">
<div class="container">
<ul class="tabs">
<li class="tab"><a href="#tab1">Material Design</a></li>
<li class="tab"><a href="#tab2">Meet the Team</a></li>
</ul>
</div>
</div>
</div>
<div class="container">
<!-- Material Design -->
<div id="tab1" class="section">
<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='col s12 m8 offset-m2'>
<iframe width="100%" height="350" src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0&controls=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<div class='row'>
<h3 class="header light">Principles</h3>
<div class="col s12 m4 center promo">
<img src="images/metaphor.png">
<h4>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>
</div>
<div class='col s12 m4 center promo'>
<img src="images/bold.png">
<h4>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>
</div>
<div class='col s12 m4 center promo'>
<img src="images/motion.png">
<h4>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>
<!-- About the Team-->
<div id="tab2" class="section">
<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">
<img src="images/alvin.png"style="width:140px;height:140px">
<div class="col s12 m6 offset-m1">
<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">
<img src="images/Alan.png"style="width:140px;height:140px">
<div class="col s12 m6 offset-m1">
<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">
<img src="images/alex.png"style="width:130px;height:130px">
<div class="col s12 m6 offset-m1">
<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">
<img src="images/kevin.png"style="width:140px;height:135px">
<div class="col s12 m6 offset-m1">
<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 id="footer" class="section">
<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>
<a href="https://twitter.com/MaterializeCSS" class="twitter-follow-button" data-show-count="true" data-size="large" data-dnt="true">Follow @MaterializeCSS</a><a href="https://github.com/Dogfalo/materialize/blob/master/LICENSE">MIT License</a>
</div>
</div> <!-- End Container -->
<!-- Scripts-->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/waves.js"></script>
<script src="js/prism.js"></script>
<script src="js/toasts.js"></script>
<script src="js/tooltip.js"></script>
<script src="js/tabs.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/parallax.js"></script>
<script src="js/leanModal.js"></script>
<script src="js/collapsible.js"></script>
<script src="js/materialbox.js"></script>
<script src="js/scrollspy.js"></script>
<script src="js/sideNav.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 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>