-
Notifications
You must be signed in to change notification settings - Fork 2
/
test.html
130 lines (130 loc) · 11.1 KB
/
test.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
<!doctype html>
<html>
<head>
<title>Zelda-breath-of-the-wild-theme-css</title>
<meta name="description" content="This is a theme in CSS3 with resources inspired Legend of Zelda: Breath of the wild.">
<link href="./zelda-botw.css?ver=0.3.6" rel="stylesheet">
<meta property="og:title" content="Zelda-breath-of-the-wild-theme-css">
<meta property="og:description" content="This is a theme in CSS3 with resources inspired Legend of Zelda: Breath of the wild.">
<meta property="og:image" content="https://theflash.gwannon.com/Zelda-breath-of-the-wild-theme-css/example1.png">
<style>
i {
--font-size: 100px !important;
}
ul {
font-size: 100px; display: flex; flex-direction: row; flex-wrap: wrap; list-style-type: none; padding: 0px; margin: 0px; text-align: center; justify-content: center; color: var(--color-gold);
}
ul li {
padding: 10px; border: 1px solid var(--color-gold); margin: 5px;
}
.stoned {
font-size: 60px !important; margin-top: 30px !important;
}
input {
font-family: arial;
}
</style>
</head>
<body>
<section class="botw">
<p style="text-align: center; color: var(--color-gold); font-size: 2rem;">Using Hylian symbols from <a href="https://zeldauniverse.net/media/fonts/">zeldauniverse.net</a> and Hylia Serif from <a href="http://artsyomni.com/hyliaserif">http://artsyomni.com/hyliaserif</a></p>
<ul>
<li style=""><i class="symbol force"></i><br/><input type="text" value='<i class="symbol force"></i>' /></li>
<li ><i class="symbol triforce"></i><br/><input type="text" value='<i class="symbol triforce"></i>' /></li>
<li ><i class="symbol drop1"></i><br/><input type="text" value='<i class="symbol drop1"></i>' /></li>
<li ><i class="symbol eye"></i><br/><input type="text" value='<i class="symbol eye"></i>' /></li>
<li ><i class="symbol drop2"></i><br/><input type="text" value='<i class="symbol drop2"></i>' /></li>
<li ><i class="symbol sheikah"></i><br/><input type="text" value='<i class="symbol sheikah"></i>' /></li>
<li ><i class="symbol gerudo"></i><br/><input type="text" value='<i class="symbol gerudo"></i>' /></li>
<li ><i class="symbol kokiri"></i><br/><input type="text" value='<i class="symbol kokiri"></i>' /></li>
<li ><i class="symbol zora"></i><br/><input type="text" value='<i class="symbol zora"></i>' /></li>
<li ><i class="symbol goron"></i><br/><input type="text" value='<i class="symbol goron"></i>' /></li>
<li ><i class="symbol royalcrest"></i><br/><input type="text" value='<i class="symbol royalcrest"></i>' /></li>
<li ><i class="symbol din"></i><br/><input type="text" value='<i class="symbol din"></i>' /></li>
<li ><i class="symbol farore"></i><br/><input type="text" value='<i class="symbol farore"></i>' /></li>
<li ><i class="symbol nayru"></i><br/><input type="text" value='<i class="symbol nayru></i>' /></li>
<li ><i class="symbol light"></i><br/><input type="text" value='<i class="symbol light"></i>' /></li>
<li ><i class="symbol forest"></i><br/><input type="text" value='<i class="symbol forest"></i>' /></li>
<li ><i class="symbol water"></i><br/><input type="text" value='<i class="symbol water"></i>' /></li>
<li ><i class="symbol spirit"></i><br/><input type="text" value='<i class="symbol spirit"></i>' /></li>
<li ><i class="symbol shadow"></i><br/><input type="text" value='<i class="symbol shadow"></i>' /></li>
<li ><i class="symbol heart"></i><br/><input type="text" value='<i class="symbol heart"></i>' /></li>
<li style="color: #000;"><i class="symbol triforce glowing"></i><br/><input type="text" value='<i class="symbol triforce glowing"></i>' /></li>
<li ><i class="rupee"></i><br/><input type="text" value='<i class="rupee" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee green"></i><br/><input type="text" value='<i class="rupee green" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee blue"></i><br/><input type="text" value='<i class="rupee blue" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee purple"></i><br/><input type="text" value='<i class="rupee purple" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee yellow"></i><br/><input type="text" value='<i class="rupee yellow" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee thin"></i><br/><input type="text" value='<i class="rupee thin" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee thin green"></i><br/><input type="text" value='<i class="rupee thin green" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee thin blue"></i><br/><input type="text" value='<i class="rupee thin blue" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee thin purple"></i><br/><input type="text" value='<i class="rupee thin purple" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee thin yellow"></i><br/><input type="text" value='<i class="rupee thin yellow" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee broad"></i><br/><input type="text" value='<i class="rupee broad" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee broad green"></i><br/><input type="text" value='<i class="rupee broad green" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee broad blue"></i><br/><input type="text" value='<i class="rupee broad blue" style="--font-size: 100px;"></i>' /></li>
<li ><i class="rupee broad purple"></i><br/><input type="text" value='<i class="rupee broad purple" style="--font-size: 100px;"></i>' /></li>
<li ><i class="alphabet a"></i><br/><input type="text" value='<i class="alphabet a"></i>' /></li>
<li ><i class="alphabet b"></i><br/><input type="text" value='<i class="alphabet b"></i>' /></li>
<li ><i class="alphabet c"></i><br/><input type="text" value='<i class="alphabet c"></i>' /></li>
<li ><i class="alphabet d"></i><br/><input type="text" value='<i class="alphabet d"></i>' /></li>
<li ><i class="alphabet e"></i><br/><input type="text" value='<i class="alphabet e"></i>' /></li>
<li ><i class="alphabet f"></i><br/><input type="text" value='<i class="alphabet f"></i>' /></li>
<li ><i class="alphabet g"></i><br/><input type="text" value='<i class="alphabet g"></i>' /></li>
<li ><i class="alphabet h"></i><br/><input type="text" value='<i class="alphabet h"></i>' /></li>
<li ><i class="alphabet i"></i><br/><input type="text" value='<i class="alphabet i"></i>' /></li>
<li ><i class="alphabet j"></i><br/><input type="text" value='<i class="alphabet j"></i>' /></li>
<li ><i class="alphabet k"></i><br/><input type="text" value='<i class="alphabet k"></i>' /></li>
<li ><i class="alphabet l"></i><br/><input type="text" value='<i class="alphabet l"></i>' /></li>
<li ><i class="alphabet m"></i><br/><input type="text" value='<i class="alphabet m"></i>' /></li>
<li ><i class="alphabet n"></i><br/><input type="text" value='<i class="alphabet n"></i>' /></li>
<li ><i class="alphabet o"></i><br/><input type="text" value='<i class="alphabet o"></i>' /></li>
<li ><i class="alphabet p"></i><br/><input type="text" value='<i class="alphabet p"></i>' /></li>
<li ><i class="alphabet q"></i><br/><input type="text" value='<i class="alphabet q"></i>' /></li>
<li ><i class="alphabet r"></i><br/><input type="text" value='<i class="alphabet r"></i>' /></li>
<li ><i class="alphabet s"></i><br/><input type="text" value='<i class="alphabet s"></i>' /></li>
<li ><i class="alphabet t"></i><br/><input type="text" value='<i class="alphabet t"></i>' /></li>
<li ><i class="alphabet u"></i><br/><input type="text" value='<i class="alphabet u"></i>' /></li>
<li ><i class="alphabet v"></i><br/><input type="text" value='<i class="alphabet v"></i>' /></li>
<li ><i class="alphabet w"></i><br/><input type="text" value='<i class="alphabet w"></i>' /></li>
<li ><i class="alphabet x"></i><br/><input type="text" value='<i class="alphabet x"></i>' /></li>
<li ><i class="alphabet y"></i><br/><input type="text" value='<i class="alphabet y"></i>' /></li>
<li ><i class="alphabet z"></i><br/><input type="text" value='<i class="alphabet z"></i>' /></li>
<li ><i class="alphabet hyphen"></i><br/><input type="text" value='<i class="alphabet hyphen"></i>' /></li>
<li ><i class="alphabet exclamation"></i><br/><input type="text" value='<i class="alphabet exclamation"></i>' /></li>
<li ><i class="alphabet spot"></i><br/><input type="text" value='<i class="alphabet spot"></i>' /></li>
<li ><i class="alphabet question"></i><br/><input type="text" value='<i class="alphabet question"></i>' /></li>
<li ><i class="alphabet zero"></i><br/><input type="text" value='<i class="alphabet zero"></i>' /></li>
<li ><i class="alphabet one"></i><br/><input type="text" value='<i class="alphabet one"></i>' /></li>
<li ><i class="alphabet two"></i><br/><input type="text" value='<i class="alphabet two"></i>' /></li>
<li ><i class="alphabet three"></i><br/><input type="text" value='<i class="alphabet three"></i>' /></li>
<li ><i class="alphabet four"></i><br/><input type="text" value='<i class="alphabet four"></i>' /></li>
<li ><i class="alphabet five"></i><br/><input type="text" value='<i class="alphabet five"></i>' /></li>
<li ><i class="alphabet six"></i><br/><input type="text" value='<i class="alphabet six"></i>' /></li>
<li ><i class="alphabet seven"></i><br/><input type="text" value='<i class="alphabet seven"></i>' /></li>
<li ><i class="alphabet eight"></i><br/><input type="text" value='<i class="alphabet eight"></i>' /></li>
<li ><i class="alphabet nine"></i><br/><input type="text" value='<i class="alphabet nine"></i>' /></li>
</ul>
</section>
<section class="botw">
<div class="stoned">
<i class="symbol royalcrest"></i> <i class="symbol eye"></i> <i class="symbol drop1"></i> <i class="symbol drop2"></i> <i class="symbol neguro"></i>
</div>
<div class="stoned">
<i class="symbol force glowing"></i> <i class="symbol triforce glowing"></i> <i class="symbol light glowing"></i> <i class="symbol shadow glowing"></i> <i class="symbol zora glowing"></i>
</div>
<div class="stoned">
<i class="rupee thin yellow"></i> <i class="rupee purple"></i> <i class="rupee broad green"></i>
</div>
<div class="stoned">
<i class="alphabet a"></i> <i class="alphabet exclamation"></i> <i class="alphabet g"></i> <i class="alphabet two"></i>
</div>
<div class="stoned">
<i class="alphabet a glowing"></i> <i class="alphabet exclamation glowing"></i> <i class="alphabet g glowing"></i> <i class="alphabet two glowing"></i>
</div>
</section>
<section class="botw">
<a href="https://github.com/gwannon/Zelda-breath-of-the-wild-theme-css" target="_blank" style="color: var(--color-gold); font-size: 2rem;">View in GITHUB</a>
</section>
</body>
</html>