-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (130 loc) · 4.31 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="z-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="Zephyr/zephyr.all.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Minimal class-less css stylesheet to make boring sites cool">
<title>Zephyr</title>
</head>
<body>
<!-- Headers & Text -->
<h1 align="center">Zephyr 🎐</h1>
<p data-z-center>Minimal class-less css stylesheet to make boring sites look cool!</p>
<hr>
<h1>This is Heading 1</h1>
<h2>This is Heading 2</h2>
<h3>This is Heading 3</h3>
<h4>This is Heading 4</h4>
<h5>This is Heading 5</h5>
<h6>This is Heading 6</h6>
<span data-z-text>This is a normal text</span></br>
<br>
<pre><span>code_ex.js</span>
<code>// function to retrieve movie info
async function getMovies() {
const response = await fetch("http://moviedb.com/api/movies.json");
const movies = await response.json();
console.log(movies);
}
</code>
</pre>
<hr>
<!-- Card -->
<div data-z-card-container>
<div data-z-card>
<p>
But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born
and I will give you a complete account of the system,
</p>
</div>
<div data-z-card>
<p data-z-center>
CSS Card 🔥 <br>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean
massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam
felis,
Centered using <code>z-center</code>
</p>
</div>
<div data-z-card>
<p>
One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a
horrible vermin. He lay on his armour-like back, and if he lifted
</p>
</div>
</div>
<hr>
<!-- Buttons -->
<button>Default</button>
<button disabled>Disabled</button>
<button data-z-red>Red Button</button>
<button data-z-green>Green Button</button>
<button data-z-white>White Button</button>
<button data-z-yellow>Yellow Button</button>
<button data-z-purple>Purple Button</button>
<button data-z-blue>Blue Button</button>
<!-- This is just an empty div. Don't care about it! -->
<div style="margin-top: 2em;"></div>
<hr>
<!-- Form -->
<form>
<!-- Text/Number Input -->
<div>
<label for="text_input">Your name:</label>
<input id="text_input" type="text" placeholder="Name" class="c-input">
</div>
<div>
<label for="text_input">Your email:</label>
<input id="email_input" type="email" placeholder="Email" class="c-input">
</div>
<!-- Checkboxes -->
<div>
<input type="checkbox" id="favr-02" name="Favourite2" value="Dark mode">
<label for="favr-02">Dark theme</label>
</div>
<!-- Radio buttons -->
<div>
<input type="radio" name="greet" id="gtr1">
<label for="gtr1">Greet Em!</label>
</div>
<!-- Drop down -->
<div>
<select name="Gender" id="">
<option value="male">Male</option>
<option value="female">Female</option>
<option value="pref-not">I prefer not to say</option>
<option value="croissant">Croissant</option>
</select>
</div>
</form>
<hr>
<!-- Tables -->
<br>
<div data-z-center>
<table>
<tr>
<th>Code</th>
<th>Name</th>
<th>Price</th>
</tr>
<tr>
<td>6AUTGH</td>
<td>Wireless earbuds</td>
<td>100$</td>
</tr>
<tr>
<td>9OLKUG</td>
<td>Portable 3D Printer</td>
<td>1000$</td>
</tr>
<tr>
<td>4HJKOL</td>
<td>Mini PC</td>
<td>300$</td>
</tr>
</table>
</div>
</body>
</html>