-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
118 lines (110 loc) · 4.67 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
@font-face {
font-family: 'Euclid Circular B Bold';
font-style: normal;
font-weight: normal;
src: local('Euclid Circular B Bold'), url('https://dreamysoft.net/EuclidCircularB-Bold.woff') format('woff');
}
</style>
<link rel="stylesheet" href="zephyr.min.css">
<zconfig $darkColor="#4a94fa"></zconfig>
<title>Zephyr - Example</title>
</head>
<zloader waitFor="windowLoad" delay="2000"></zloader>
<zbody font-family="Euclid Circular B Bold">
<znav>
<zh1>ZEPHYR</zh1>
<zl>
<zli>
<za href="index.html">Home</za>
</zli>
<zli>
<za href="example.html">Media</za>
</zli>
<zli>
<za href="example.html">Guides</za>
</zli>
<zli>
<za href="example.html">Stores</za>
</zli>
<zli>
<za href="example.html">Contact</za>
</zli>
<zli>
<za href="example.html">Credits</za>
</zli>
</zl>
</znav>
<zsection height="15vw">
<zh2>Welcome</zh2>
<zh3>to the framework!</zh3>
<zp text-align="center" margin="4vw 5vw 0">A totally different CSS framework striving to achieve elegance and efficiency by using custom HTML tags with predefined CSS and JS instead of classes. It is highly customizable, allowing for CSS properties to be used as HTML attributes. Has dark-mode
built in. Heavily in development.</zp>
</zsection>
<zsection>
<zh2>This is a table</zh2>
<ztable margin="2vw 0 2vw" text-align="center">
<ztr>
<zth></zth>
<zth>Header 2</zth>
<zth>Header 2</zth>
</ztr>
<ztr>
<zth>Header 1</zth>
<ztd>Table cell 1</ztd>
<ztd>Table cell 2</ztd>
</ztr>
<ztr>
<zth>Header 1</zth>
<ztd>Table cell 1</ztd>
<ztd>Table cell 2</ztd>
</ztr>
</ztable>
</zsection>
<zsection height="70vw">
<zh2>Contact Us.</zh2>
<zh3>Shoot us a message! :)</zh3>
<zform action="/test" method="post" margin="2vw 0 2vw">
<label for="name">Name: </label>
<input required type="text" name="name" id="name">
<label for="email">Email: </label>
<input required type="email" name="email" id="email">
<label for="message">Message: </label>
<textarea required name="message" id="message" cols="30" rows="8"></textarea>
<label id="random" for="captcha">Captcha: </label>
<input required type="text" name="captcha" id="captcha">
<button type="submit">Submit</button>
</zform>
</zsection>
<zsection height="30vw">
<zh2>FAQ</zh2>
<zh3>Some general questions about Eros</zh3>
<zdl padding="0 8vw 0">
<zdt>What is the meaning of Lorem ipsum?</zdt>
<zdd>Literally it does not mean anything. It is a sequence of words without a sense of Latin derivation that make up a text also known as filler text, fictitious, blind or placeholder</zdd>
<zdt>What is the meaning of Lorem ipsum?</zdt>
<zdd>Literally it does not mean anything. It is a sequence of words without a sense of Latin derivation that make up a text also known as filler text, fictitious, blind or placeholder</zdd>
<zdt>What is the meaning of Lorem ipsum?</zdt>
<zdd>Literally it does not mean anything. It is a sequence of words without a sense of Latin derivation that make up a text also known as filler text, fictitious, blind or placeholder</zdd>
<zdt>What is the meaning of Lorem ipsum?</zdt>
<zdd>Literally it does not mean anything. It is a sequence of words without a sense of Latin derivation that make up a text also known as filler text, fictitious, blind or placeholder</zdd>
</zdl>
</zsection>
<zfoot>
<zh1 href="#">ZEPHYR</zh1>
<zicon href="https://github.com/DxxxxY/Zephyr" src="https://pngimg.com/uploads/github/github_PNG63.png"></zicon>
<zp>Made with Zephyr</zp>
<zdark cursor="pointer"></zdark>
</zfoot>
<script src="zephyr.min.js"></script>
<script>
document.querySelector("zform").addEventListener("zSubmit", e => console.log(e.detail))
</script>
</zbody>
</html>