-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
235 lines (214 loc) · 9.58 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
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/hasser.css">
<style>
label {
padding: 5px;
padding-left: 0;
font-weight: 600;
display: inline-block;
min-width: 90px !important; }
.block {
min-height: 60px;
margin: 2.5px;
padding: 15px;
background: #d6d6d6;
border-radius: 4px;
box-shadow: 0 0 1px 2px #eee;
}
</style>
<title>Hasser CSS | Test</title>
</head>
<body>
<div class="has-hero"
style="background-image:url('img/bg.jpg');background-clip:border-box">
<div class="hero-body-middle has-text-right has-padding-small">
<h3>
<span class="has-text-primary has-text-large"
style="text-shadow:8px -4px 10px #000">Hasser CSS</span><br/>
<span class="has-text-meta">A new generation
CSS-Only style framework!</span><br/>
<span class="has-text-meta">view the
<a href="documentation.html">documentation</a>!</span>
</h3>
</div>
</div>
<div class="container has-padding-large
has-no-padding-left has-no-padding-right">
<p>
A <span class="has-text-large">prank text</span> with a
<span class="has-button-success"><span>Fake...</span></span>
<span class="has-button-error"><a href="#">Fake...</a></span>
<span class="has-button-warning"><label>Fake...</label></span>
<span class="has-animation is-button-primary">Fake Button</span>
</p>
<div class="has-padding-large">
<div class="col-2-6">
<form>
<fieldset>
<legend>A Form</legend>
<div>
<label>Name</label>
<input type="text" class="has-underline"
placeholder="eg: John Doe" />
</div>
<div>
<label for="gender">Gender</label>
<select id="gender">
<option value="m">Male</option>
<option value="f">Female</option>
</select>
</div>
<div>
<label>You like...</label><br/>
<label><input type="checkbox"/> Video Games</label>
<label><input type="checkbox"/> Sport</label>
</div>
<span>
<label></label>
<input type="submit" value="send" />
</span>
</fieldset>
</form>
</div>
<div class="col-1-6"></div>
<div class="col-3-6">
<table class="has-stripes has-table-style" style="width:100%">
<tr>
<th>Pseudo</th>
<th>Age</th>
<th>Score</th>
</tr>
<tr>
<td>John Doe</td>
<td>18</td>
<td>150</td>
</tr>
<tr>
<td>Foo Bar</td>
<td>25</td>
<td>245</td>
</tr>
<tr>
<td class="has-text-primary has-text-bold">HeavenMercy</td>
<td class="has-text-italic">N/A</td>
<td>2500</td>
</tr>
</table>
</div>
</div>
<hr/>
<div class="has-animation">
<div>
<div class="col-4-6">
<div class="col-4-6">
<div class="block"></div>
</div>
<div class="col-2-6">
<div class="block"></div>
</div>
</div>
<div class="col-1-6">
<!-- For An offset -->
<!-- <div class="block"></div> -->
</div>
<div class="col-1-6">
<div class="block"></div>
</div>
</div>
<div>
<div class="col-1-6">
<div class="block"></div>
</div>
<div class="col-1-6"></div>
<div class="col-1-6">
<div class="block"></div>
</div>
<div class="col-1-6">
<div class="block"></div>
</div>
<div class="col-1-6">
<div class="block"></div>
</div>
<div class="col-1-6">
<div class="block"></div>
</div>
</div>
</div>
<hr/>
<div class="has-padding">
<h3 class="has-text-center">Sample Text</h3>
<p class="has-text-justify"><span class="has-text-bold">Lorem ipsum</span> dolor sit amet consectetur adipisicing elit. Aperiam assumenda saepe minima, quos odio consequatur repellendus vero impedit nesciunt praesentium expedita culpa architecto facere debitis voluptas beatae mollitia eaque perspiciatis quasi dolorum hic veritatis? Perferendis eligendi unde dolore commodi praesentium mollitia ipsum atque voluptatum accusantium maiores dolorum, nostrum, est repellendus explicabo omnis illum quisquam officiis nemo. Asperiores cum doloribus ad fugit aspernatur eos eveniet mollitia voluptatibus a, inventore autem id debitis magni? Fugiat, iure id delectus soluta natus nostrum sunt temporibus, totam, laudantium nihil aperiam labore aliquam asperiores molestiae provident ab harum! <span class="has-text-error">Cupiditate</span>, odio! Dignissimos quibusdam repellendus laudantium tempora maxime architecto porro obcaecati accusamus deserunt? Fugit consectetur assumenda expedita iste vero. Quo perferendis exercitationem, doloribus, accusamus ut fuga corrupti aperiam officia velit placeat vitae dolorem culpa sequi totam odit in, earum nulla non eveniet commodi quasi modi? Eius blanditiis quaerat ex. Animi beatae sapiente deleniti praesentium ipsa repudiandae ipsam consequuntur maxime atque quibusdam delectus similique error in dolor ex sunt, sint perspiciatis voluptates nam est ut cupiditate? Architecto ab incidunt dolores et, alias eligendi aliquam nostrum. Hic, provident tenetur illo sint obcaecati earum? Error sapiente deleniti temporibus laudantium! Perspiciatis, necessitatibus quod. Quaerat commodi dolore sunt amet dolorem, corporis inventore nesciunt!</p>
</div>
<hr/>
<div>
<div class="col-2-6">
<div class="block">
<ul><h5>List of Friends</h5>
<li>John Doe</li>
<li>Esk Quiss</li>
<li>Foo Bar</li>
</ul>
</div>
</div>
<div class="col-2-6"></div>
<div class="col-2-6">
<div class="block">
<ol><h5>Todo List</h5>
<li>Buy a Car</li>
<li>Build a House</li>
<li>Be Proud with...
<ol>
<li>The good wife</li>
<li>The Job of your dream</li>
<li>Good kids</li>
</ol>
</li>
</ol>
</div>
</div>
</div>
<div>
<pre class="has-border-primary"><code>
<!-- .container is main centered wrapper -->
<div class="container">
<!-- columns should be the immediate child of a .row -->
<div class="row">
<div class="one column">One</div>
<div class="eleven columns">Eleven</div>
</div>
<!-- just use a number and class 'column' or 'columns' -->
<div class="row">
<div class="two columns">Two</div>
<div class="ten columns">Ten</div>
</div>
<!-- there are a few shorthand columns widths as well -->
<div class="row">
<div class="one-third column">1/3</div>
<div class="two-thirds column">2/3</div>
</div>
<div class="row">
<div class="one-half column">1/2</div>
<div class="one-half column">1/2</div>
</div>
</div>
<!-- Note: columns can be nested, but it's not recommended since Skeleton's grid has %-based gutters, meaning a nested grid results in variable with gutters (which can end up being *really* small on certain browser/device sizes) -->
</code></pre>
</div>
</div>
<div class="has-hero"
style="background-color:#333;color:#eee">
<div class="has-text-center">
Hasser CSS
© <script>document.write(new Date().getFullYear())</script>
<br /><br />
Inspired By Skeleton CSS!
</div>
</div>
</body>
</html>