-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
132 lines (125 loc) · 5.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./blastoff.css" />
<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blast Off! | A minimal CSS framework</title>
</head>
<body>
<nav class="navbar material white">
<div class="container">
<div class="nav-logo">
<a href="/"><h3>Blast Off</h3></a>
</div>
<a class="nav-burger" href="#nav-mobile"><i class="fas fa-bars"></i></a>
<div class="nav-menu">
<h3>
<a href="https://github.com/StompRocket/BlastOff"><i class="fab fa-github"></i></a>
<a href="https://stomprocket.gitbook.io/blastoff"><i class="fas fa-book"></i></a>
</h3>
</div>
</div>
</nav>
<div class="nav-mobile" id="nav-mobile">
<div class="modal-background">
</div>
<div class="nav-body">
<a class="nav-close" href="#!"><i class="fa fa-times"></i></a>
<img src="logo-wordmark.png" />
<br>
<a href="https://github.com/StompRocket/BlastOff">Github</a>
<br>
<a href="https://stomprocket.gitbook.io/blastoff">Docs</a>
</div>
</div>
<main>
<div class="vertical-padding">
<div class="container row fullheight">
<div class="column fullheight hide-on-mobile">
<div class="vertical-center fullheight">
<span style="transform:rotate(20deg);">
<img src="logo-icon.png" width="70%" class="vertical-wiggle" style="background: none;" />
</span>
</div>
</div>
<div class="column fullheight">
<div class="vertical-center fullheight">
<h1>
BlastOff <b class="light">v1</b>
<br>
</h1>
<h2>
The framework you’ve been <b>waiting for.</b>
</h2>
<a href="#whats-new">
<h3>
what's new in v1?
</h3>
</a>
</div>
</div>
</div>
</div>
<div class="container">
<h1 id="whats-new">
New in v1
</h1>
<div class="box container">
<h3>Beautiful Boxes</h3>
<p>
Boxes are a natural way to seperate content and guide the users eye. BlastOff provides a beautiful, unobtrusive
box to help seperate your content. The light shadow makes it subtle enough to fit in with the rest of your design,
yet unique enough to stand out.
</p>
</div>
<br><br>
<h3>Buttons done right</h3>
<div class="row">
<div class="column">
<pre class="box"><code><button class="button primary">Primary Button</button>
<button class="button dark">Dark Button</button></code></pre>
</div>
<div class="column">
<button class="button primary">
Primary Button
</button>
<button class="button dark">
Dark Button
</button>
<button class="button">
Default Button
</button>
</div>
</div>
</div>
</main>
<br><br>
<footer class="footer">
<div class="container">
<br />
<div class="row">
<div class="column">
This page is <b>open source</b>. Want to improve it? Make a pull request on
<a href="https://github.com/StompRocket/BlastOff" target="_blank" class="minimal"><b>Github.</b></a>
</div>
<div class="column">
Website is licenced under
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank" class="minimal"><b>CC-BY-NC-SA 4.0</b></a> Blast Off is licenced under the<a href="https://opensource.org/licenses/mit-license.php" target="_blank" class="minimal">
<b>MIT license</b></a>.
</div>
<div class="column">
Created by Sasha S. with help from Ronan F.
</div>
</div>
<br />
</div>
</footer>
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>