-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
196 lines (173 loc) · 8.68 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
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
<!DOCTYPE html>
<html>
<head>
<title>Project STORM</title>
<link type="text/css" rel="stylesheet" href="build/storm.css">
<script src="assets/js/iconic.min.js"></script>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
</head>
<body>
<layers class="layers">
<div class="primary-layer">
<section class="splash-section">
<div class="content">
<div class="header">
<div class="title">
storm
</div>
<div class="pages">
<a target="_blank" class="page" href="https://github.com/projectstorm/" >Github</a>
</div>
</div>
<div class="hero">
<img src="assets/img/logo.png">
</div>
<div class="description">
<h1>Storm is a collection of projects designed primarily <br> for realising the future web</h1>
<p>"Two roads diverged in a wood, and I<br>I took the intergalactic leap to the future" - You</p>
</div>
</div>
<div class="trim">
<svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="70">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#d200ff;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#00c6ff;stop-opacity:1"/>
</linearGradient>
</defs>
<polygon points="6,100 50,0 94,100" style="fill:url(#grad1);" fill-opacity="0.3"/>
<polygon points="3,100 50,40 97,100" style="fill:url(#grad1);" fill-opacity="0.9"/>
<polygon points="0,100 50,70 100,100" style="fill:#e5e5e5;"/>
</svg>
</div>
</section>
<section class="principals-section">
<div class="content">
<div class="header">
<h1>Things you'll love about storm</h1>
</div>
<div class="principals">
<div class="principal">
<h2>Modularity</h2>
<p>
Storm is by design a collection of independent libraries,
but when you put them together, they become super-charged and work together seamlessly.
</p>
</div>
<div class="principal">
<h2>Simple Integration</h2>
<p>
Storm libraries will always be installable via package managers and will not require
external builds steps before they can be integrated.
</p>
</div>
<div class="principal">
<h2>Quality</h2>
<p>
We work hard to make sure that storm libs are of a high code quality,
responsibly versioned, well documented and soft to the touch.
</p>
</div>
<div class="principal">
<h2>Standards Driven</h2>
<p>
One of the most exciting things is when industry players lay down their
muscats and decide to work together. And so, Storm libs promise to always
be standards driven.
</p>
</div>
<div class="principal">
<h2>Varied Complexity</h2>
<p>
Storm libs are nice and simple for those just starting out, but for those
who want to take it to the next level, we expose full API access for complete customization
and hacking.
</p>
</div>
<div class="principal">
<h2>Sexy</h2>
<p>
Storm libs dont just look great on the front, they also <i>bring sexy back</i>, to the backend that is.
</p>
</div>
<div class="principal">
<h2>Bleeding Edge</h2>
<p>
Storm libraries aim to always be at the forefront of innovation, giving you future tools to enable your apps today.
</p>
</div>
<div class="principal">
<h2>Production Ready</h2>
<p>
Storm gives you all this and more, and best of all, its production ready.
All storm libraries are <i>willing, ready and fully enabled</i> to tackle the hardest web problems.
</p>
</div>
</div>
</div>
<div class="trim">
<svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="100">
<polygon points="0,100 50,70 100,100" style="fill:#1d1d1d;"/>
</svg>
</div>
</section>
<section class="showcase-section">
<div class="content">
<div class="blurb">
<h1>Workflows</h1>
<p>Whether you are a new or experienced programmer, we have opinions and ideas from multiple
perspectives that act as a good starting guide</p>
</div>
<div class="plus">
<svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100" height="100">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#d200ff;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#00c6ff;stop-opacity:1"/>
</linearGradient>
<linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#d200ff;stop-opacity:1"/>
<stop offset="100%" style="stop-color:#00c6ff;stop-opacity:1"/>
</linearGradient>
</defs>
<rect x="0" y="49" width="100" height="2" style="fill:url(#grad2);"/>
<rect x="49" y="0" width="2" height="100" style="fill:url(#grad1);"/>
</svg>
</div>
<div class="blurb">
<h1>Libraries</h1>
<p>Whether you are a new or experienced programmer, we have opinions and ideas from multiple
perspectives that act as a good starting guide</p>
</div>
</div>
</section>
<section class="github-section">
<div class="trim">
<svg viewBox="0 0 100 100" preserveAspectRatio="none" width="100%" height="70">
<polygon points="0,0 50,0 0,80" style="fill:#1d1d1d"/>
<polygon points="100,0 50,0 100,80" style="fill:#1d1d1d"/>
<polygon points="0,80 50,0 50,20 0,100" style="fill:#1d1d1d" fill-opacity="0.6"/>
<polygon points="100,80 50,0 50,20 100,100" style="fill:#1d1d1d" fill-opacity="0.6"/>
</svg>
</div>
<div class="content">
<div class="blurb">
<h1>Storm is a work in progress</h1>
<p>But you can checkout our Github project page</p>
</div>
<div class="social">
<a href="http://github.com/projectstorm/" target="_blank"><img class="iconic iconic-fluid"
data-type="github"
data-src="assets/iconic/social.svg"></a>
</div>
</div>
</section>
<section class="footer-section">
<p>crafted by <a href="http://alexisvincent.io" target="_blank" class="name">Alexis Vincent</a> & <a
href="http://github.com/dylanvorster" target="_blank" class="name">Dylan Vorster</a> © 2015
</p>
</section>
</div>
</layers>
</body>
</html>