-
-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathabout.html
120 lines (110 loc) · 5.35 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
<!DOCTYPE html>
<html lang="en">
<head>
{{> head }}
<style>
.promo {
width: 100%;
}
</style>
</head>
<body>
{{> navbar }}
<main>
{{> intro}}
<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="https://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>
</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>
</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>
<h5>The community</h5>
<p class="caption">
Due to inactivity of the original developers, MaterializeCSS has been forked by a community of enthusiasts, which continues to be fully maintained by open source
principes since 2021. Without the many contributors who participated in this fork, this project would probably not have received any updates anymore.
</p>
<div class="center">
<div class="image-container">
<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore-start -->
<!-- markdownlint-disable -->
<!-- markdownlint-restore -->
<!-- prettier-ignore-end -->
<!-- ALL-CONTRIBUTORS-LIST:END -->
</div>
</div>
<h5>The original team</h5>
<p class="caption">
<a href="https://www.materializecss.com" target="_blank">MaterializeCSS</a>
was originally launched in 2014 by a team of students from Carnegie Mellon University. After 4 years of development, the latest official release was released in
September 2018 and received more than 38K stars on GitHub.
</p>
<div class="center">
<div class="image-container">
<img src="images/materialize_team.jpeg" style="width: 100%" />
</div>
</div>
</div>
</div>
<!-- Table of Contents -->
<div class="col hide-on-small-only m3 xl3">
<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 }}
<script type="module" src="/src/main.ts"></script>
</body>
</html>