-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
434 lines (383 loc) · 28 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
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hand-Written-HTML-Site</title>
<meta charset="UTF-8" />
<meta http-equiv='content-language' content='en-us' />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="Guleixibian2009" />
<meta name="keywords" content="HTML,CSS,JS,Website" />
<meta name="description" content="My website written in HTML, CSS and JS!" />
<meta name="copyright" content="This website is under the GPL-3.0 LICENSE." />
<link rel="stylesheet" type="text/css" href="assets/CSS/main.css">
<link rel="stylesheet" type="text/css" href="assets/CSS/animation.css">
<link rel="stylesheet" type="text/css" href="assets/CSS/utils.css">
<link rel="stylesheet" type="text/css" href="assets/CSS/Header.css">
<link rel="stylesheet" type="text/css" href="assets/CSS/Wrapper.css">
<link rel="stylesheet" type="text/css" href="assets/CSS/Sidebar.css">
<link rel="stylesheet" type="text/css" href="assets/CSS/Main_Body.css">
<link rel="stylesheet" type="text/css" href="assets/CSS/Footer.css">
<!--HighlightJS Theme-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/atom-one-light.min.css">
<!--Customized Font-Awesome Animation CSS from GitHub-->
<!-- l-lin/font-awesome-animation -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1/css/font-awesome-animation.css">
<!--Magictime effects-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/magic.css@1/dist/magic.min.css">
<!--My Font Awesome Kit --- only free-->
<script src="https://kit.fontawesome.com/569065e831.js" crossorigin="anonymous"></script>
<!--jQuery and JS-->
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/howler@2/dist/howler.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2/jquery.scrollTo.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-mousewheel@3/jquery.mousewheel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bva/mouse-follow-js@0.0.8/dist/mousefollow.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
<script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>
<script src="assets/JavaScript/CopyCodeblock.js"></script>
<script src="assets/JavaScript/ReadingProgress.js"></script>
<script src="assets/JavaScript/UIDisplay.js"></script>
<script src="assets/JavaScript/UtilButtons.js"></script>
<script src="assets/JavaScript/CodeHighlight.js"></script>
<script src="assets/JavaScript/LikeSurvey.js"></script>
<script src="assets/JavaScript/TableOfContent.js"></script>
</head>
<body>
<div class="Welcome Dialogue">
<script type="text/javascript">
alert("Welcome To My site~\n(Maybe you should wait for the images to load?)");
</script>
<noscript>Your browser doesn't support Javascript. Please enable it and try again.</noscript>
</div>
<div id="Progress_Bar"></div>
<div id="Tip_Bar">There is nothing to tip!</div>
<div class="Wrapper">
<header class="Header">
<h1>👋Hi there~</h1>
<p>Welcome to <a href="https://github.com/guleixibian2009/" target="_blank">@Guleixibian2009</a>'s <strong>Hand-Written-HTML-Site</strong>!</p>
<p>The <code>Hand-Written-HTML-Site</code> project is my small experiment to study <code>HTML</code> , <code>CSS</code> and <code>JavaScript</code>. 😀</p>
<p>So why wait? <strong>Let's Start!</strong></p>
<marquee behavior="alternate" scrollamount="10" scrolldelay="0"><i class="fas fa-star animated faa-spin faa-fast"></i>This site finally meets its <strong>Final Version!</strong> Well done!</marquee>
<div class="Survey_Banner">
<p>It takes some time for all the assets to load successfully.<a href="https://github.com/guleixibian2009/Hand-Written-HTML-Site/" target="_blank">Make it Faster?</a></p>
<p>Also, any great ideas or suggestions? <a href="mailto:guleixibian2009@outlook.com" target="_blank">Contact Us Now!</a>or <a href="https://github.com/Guleixibian2009/Hand-Written-HTML-Site/issues" target="_blank">Open an Issue!</a></p>
</div>
</header>
<aside class="Sidebar">
<div class="Author">
<div class="Author_Photo">
<img id="Author" src="https://s4.ax1x.com/2022/02/21/HXLdHS.jpg" alt="My Photo" />
</div>
<div class="Author_Data">
<p id="Author_Name">Guleixibian2009</p>
<p id="Author_Sentence">Spring is in the air.</p>
</div>
<div class="Social_Link">
<div class="GitHub">
<a href="https://github.com/guleixibian2009/" target="_blank"><i class="fab fa-github" ></i> <span>GitHub</span></a>
</div>
<div class="Email">
<a href="mailto:guleixibian2009@outlook.com"><i class="fas fa-envelope"></i> <span>Email</span></a>
</div>
<div class="Website">
<a href="https://guleixibian2009.github.io/" target="_blank"><i class="fas fa-blog"></i> <span>Website</span></a>
</div>
<div class="RSS">
<a href="https://guleixibian2009.github.io/atom.xml" target="_blank"><i class="fas fa-rss"></i> <span>RSS</span></a>
</div>
</div>
</div>
<div class="Data">
<h3>Data about this site!</h3>
<div class="GitHub_Data">
<img alt="GitHub license" src="https://img.shields.io/github/license/Guleixibian2009/Hand-Written-HTML-Site?color=blue&style=flat-square">
<img alt="GitHub tag" src="https://img.shields.io/github/v/tag/Guleixibian2009/Hand-Written-HTML-Site?style=flat-square">
<img alt="GitHub language count" src="https://img.shields.io/github/languages/count/Guleixibian2009/Hand-Written-HTML-Site?style=flat-square">
<img alt="GitHub top language" src="https://img.shields.io/github/languages/top/Guleixibian2009/Hand-Written-HTML-Site?style=flat-square">
<img alt="GitHub repo size" src="https://img.shields.io/github/repo-size/Guleixibian2009/Hand-Written-HTML-Site?style=flat-square">
<img alt="GitHub commit activity" src="https://img.shields.io/github/commit-activity/y/Guleixibian2009/Hand-Written-HTML-Site?style=flat-square">
<img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/Guleixibian2009/Hand-Written-HTML-Site?style=flat-square">
</div>
<div class="Busuanzi_Data">
<span id="busuanzi_container_site_uv">
<i class="fa fa-user"></i>
<span id="busuanzi_value_site_uv"></span>
</span>
<span>|</span>
<span id="busuanzi_container_site_pv">
<i class="fa fa-eye"></i>
<span id="busuanzi_value_site_pv"></span>
</span>
</div>
<h3>Data about me!</h3>
<div class="Social_Data">
<img alt="GitHub followers" src="https://img.shields.io/github/followers/Guleixibian2009?style=social">
<img alt="GitHub User's stars" src="https://img.shields.io/github/stars/Guleixibian2009?affiliations=OWNER&style=social">
<img alt="GitHub watchers" src="https://img.shields.io/github/watchers/Guleixibian2009/Hand-Written-HTML-Site?style=social">
</div>
</div>
</aside>
<main class="Main_Body">
<div class="Main_Body_Title">
<h2>About this project ---- <code>Hand-Written-HTML-Site</code></h2>
</div>
<div class="Main_Body_Article">
<section id="Intro">
<h3>Introduction</h3>
<p>I started the <code>Hand-Written-HTML-Site</code> project on 2022.2.5. I do have a website (actually two), but they are all generated,
<a class="Link_With_Tooltip" href="https://guleixibian.github.io/" target="_blank">one by <code>Jekyll</code> <span class="Tooltip_Word">That's my old website!</span> </a>and
<a class="Link_With_Tooltip" href="https://guleixibian2009.github.io/" target="_blank">one by <code>Hexo</code> <span class="Tooltip_Word">That's my new website!</span></a>.
<p>When I run generated sites, I can only change some settings and I can't change the source code.</p>
<p>So after I have those two sites, I wonder 🤨 whether I can build websites from pure <code>HTML</code>.</p>
<p>I have tried several times before, but the effect wasn't exactly what I wanted. 😑 But recently I visited
<a class="Link_With_Tooltip" href="https://www.w3school.com.cn/" target="_blank">W3School <span class="Tooltip_Word">That's a very good place to study Website Building!</span> </a>,
I found something new. And then the usage of them makes my <code>Hand-Written-HTML-Site</code> become more and more elegant.</p>
</section>
<hr />
<section id="HTML">
<h3>The Main Core --- HTML</h3>
<p>Well, this site is completely hand-written. I don't use any generators, yes, no <code>Jekyll</code>, no <code>Hexo</code>, and no <code>BootStrap</code>.
I wrote it by hand. I used <code>HTML5</code> so I can use the <code><audio></code> tag. See that <code><!DOCTYPE html></code> ?🧐</p>
<hr />
<h4>My server --- GitHub Pages</h4>
<p>To deploy the files into a remote site, I'll need a web server. But I don't want to spend any money, so I used <code>GitHub Pages</code> as the server. You can go to
<a href="https://pages.github.com/" target="_blank">pages.github.com</a> to learn more. You can use it to build your blog or organization site. Isn't that cool?🎬</p>
</section>
<hr />
<section id="UI">
<h3>UI --- CSS and more</h3>
<h4>About the appearance and animations</h4>
<p>If a website is a person, then <code>CSS</code> is his skin. I used <code>CSS3</code> to create fantastic appearance for this site. All the background, heading,
everything on the page are beautified by <code>CSS</code>.</p>
<p>Try hovering on my photo on the left. It will spin when your mouse is over it. And try those links too! There will be a Tooltip. Some of the animations are created by
<code>CSS</code>. Now let me give you an example:</p>
<div class="Code_Block">
<span>
/*My photo --- rotate*/
aside.Sidebar div.Author div.Author_Photo img#Author{
transform: rotateZ(0deg);
/*Code from my generated site*/
transition: transform 2s ease-in-out;
}
aside.Sidebar div.Author div.Author_Photo:hover img#Author{
transform: rotateZ(360deg);
}
</span>
<button class="Copy_Button"><i class="far fa-clone fa-fw"></i></button>
</div>
<p>This makes my photo able to spin.🎨 I also used a third-party package for the icons...</p>
<hr />
<h4>Font Awesome Icons</h4>
<p>Wanna know where the icons are from? They are <code>Font Awesome</code> icons. Try them out now:</p>
<div class="Code_Block">
<span>
<i class="fab fa-github"></i> GitHub
<i class="fa fa-download"></i> Download
<i class="fa fa-icons"></i> Icons
<i class="fa fa-palette"></i> Palette
</span>
<button class="Copy_Button"><i class="far fa-clone fa-fw"></i></button>
</div>
<p>That equals to:
<i class="fab fa-github"></i>
<i class="fa fa-download"></i>
<i class="fa fa-icons"></i>
<i class="fa fa-palette"></i>
Amazing, right? 😎</p>
<p>I used an online kit for those icons(but <del>sadly I only have a free kit</del>). The package I mentioned
is called <code>l-lin/font-awesome-animation</code>. It allows me to create more kinds of font awesome animations.
See <code>faa-tada</code>! <i class="fa fa-award animated faa-tada"></i> I used it because the original animation
doesn't work for me.😐 Visit their <a href="https://github.com/l-lin/font-awesome-animation/" target="_blank">website</a> to see more demos!</p>
<hr />
<h4>The fonts I used</h4>
<p>Do you like those fonts I used? I'll give you a list of them:</p>
<div class="Ordered_List">
<ol>
<li><span id="Font_Fira_Code">Fira Code</span> (that's <code>Fira Code</code>)</li>
<li><span id="Font_Bigmouth">Bigmouth Regular</span> (that's <code>Bigmouth Regular</code>)</li>
<li><span id="Font_Fabfelt_Script">Fabfelt Script</span> (that's <code>Fabfelt Script</code>)</li>
<li><span id="Font_Gagalin">Gagalin Regular</span> (that's <code>Gagalin Regular</code>)</li>
<li><span id="Font_Wander_Brave">Wander Brave</span> (that's <code>Wander Brave</code>)</li>
</ol>
</div>
<p>Go to <a href="https://github.com/guleixibian2009/hand-written-html-site/" target="_blank">my repo</a> and download if you need them!</p>
<hr />
<h4>Mouse Follower!</h4>
<p>Now see cautiously at your cursor. Can you see that red dot?🤓 Now try to move your mouse. It will always follow you wherever you go.</p>
<p>I used <code>@bva/mouse-follow-js@0.0.8</code> to create it. Try this on your website!</p>
<div class="Code_Block">
<span>
"use strict";
$(document).ready(function(){
const followOptions = {
color : 'indianred',
height : 10,
width : 10,
transitionDelay: 0,
transitionDuration: 100
};
const follow = new MouseFollow(followOptions);
follow.initialize();
});
</span>
<button class="Copy_Button"><i class="far fa-clone fa-fw"></i></button>
</div>
</section>
<hr />
<section id="JavaScript">
<h3>All the functions --- JavaScript</h3>
<p>The use of <code>JavaScript</code> (actually <code>jQuery</code>) allows me to create beautiful animations and functions. The
<code>Utility Buttons</code> the <code>Survey Banner</code> are built with <code>jQuery</code>. You can Press <kbd>F12</kbd> or
<kbd>Ctrl + Shift + I</kbd> to view the source code!😋</p>
<hr />
<h4>JavaScript I wrote</h4>
<p>Well, actually I didn't want to learn <code>JavaScript</code> when I started this project... But once I decided to add a
<code>Survey Banner</code>, I realized that I needed to hide it after several seconds. Then I started to write <code>JavaScript</code>.😏</p>
<p>For example:</p>
<div class="Code_Block">
<span>
"use strict";
$(document).ready(function(){
const banner = $(".Survey_Banner");
function BannerDisappear(){
$(banner).hide(500);
}
window.setTimeout(BannerDisappear, 10000);
});
</span>
<button class="Copy_Button"><i class="far fa-clone fa-fw"></i></button>
</div>
<p>If you have learned <code>JavaScript</code> for a bit, you will know that <code>$</code> stands for <code>jQuery</code>.</p>
<hr />
<h4>Third-party packages</h4>
<p>I'm not a professional programmer, so I used some <code>npm</code> packages. They are:</p>
<div class="Unordered_List">
<ul>
<li>clipboardJS@2</li>
<li>jquery.scrollTo@2</li>
<li>jquery-mousewheel@3</li>
<li>highlightJS@11</li>
<li>howler@2</li>
</ul>
</div>
<p><code>ClipboardJS</code> is for the <code>Copy Button</code>. Try them now, then paste in your editor. <code>jQuery.scrollTo</code>
is for creating a linear animation when <code>Back To Top</code> is on. <code>jquery-mousewheel</code> is for listening to <code>mousewheel</code>
events because <code>jQuery</code> cannot listen to <code>mousewheel</code> events!</p>
<p>The package I like most is <code>highlightJS</code>.🧡 It's a package to "highlight" your code on a website. It supports more than 180 languages,
and it provides many themes. I used the <code>Atom One Light Theme</code>. The basics are like this:</p>
<div class="Code_Block">
<span>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/atom-one-light.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>
</span>
<button class="Copy_Button"><i class="far fa-clone fa-fw"></i></button>
</div>
<p>Go to <a href="https://highlightjs.org/" target="_blank">their website</a> and learn more!</p>
<p><code>HowlerJS</code> is for your background music(preloading). I used to use a <code><audio> tag</code> but it would be very slow. So I used preloading.
Well, I wanted to use <code>XHR</code> but <code>CORS</code> wouldn't let me go pass because I added an <code>Event Listener</code>.😥</p>
<hr />
<h4>JSdelivr --- CDNs</h4>
<p>So in order to make my website faster, I decided to use some CDNs. For <code>JavaScript</code>, I used <code>JSdelivr</code>.
It may not be very fast in China, but it's better than hosting myself. For images, I used <code>imgtu.com</code> to upload. Welcome to visit
<a href="https://imgtu.com/album/gIFx0" target="_blank">my album</a>! For your background music, I used <code>BitBucket</code>. It's quite like
<code>GitHub</code>, but it's much faster.✅</p>
</section>
<hr />
<section id="Statics">
<h3>Statistics and Counts</h3>
<p>When you want to display some data, but you don't want to count it yourself, you can use online projects. They are completely open source so they are
safe enough. See them!</p>
<hr />
<h4>shields.io --- badges</h4>
<p>The badges (like <img alt="GitHub license" src="https://img.shields.io/github/license/Guleixibian2009/Hand-Written-HTML-Site?color=lightgreen&label=Article-License&logo=GitHub&style=flat-square">)
are generated by <code>shields.io</code>. It is a professional badge generator. You can create badges however you like and
it's completely free!🤑 Also, it can get information from your social accouts, such as <code>GitHub</code>,
<code>BiliBili</code> and so on. You can also create badges manually:</p>
<div class="Code_Block">
<span>
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR>/
</span>
<button class="Copy_Button"><i class="far fa-clone fa-fw"></i></button>
</div>
<p>It's just like filling in the blanks! Go to <a href="https://shields.io/" target="_blank">shields.io and try it yourself</a>!</p>
<hr />
<h4>busuanzi --- count your visitors</h4>
<p>Visitor counting isn't that hard. Just put away those expensive APPs!🤚 <code>busuanzi</code> count can easily fulfill your dream.</p>
<p>You can see the statics on the left. Get the magic? It's so easy that you only need one line of code!</p>
<div class="Code_Block">
<span>
<script src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" async></script>
</span>
<button class="Copy_Button"><i class="far fa-clone fa-fw"></i></button>
</div>
<p>There are two display moods. One is <code>Page View</code>, the other is <code>User View</code>. You can choose what you need.
<a href="https://busuanzi.ibruce.info" target="_blank">Count your visitors</a>!</p>
</section>
<hr />
<section id="End">
<p>So that's all! Thank you for reading~</p>
<p>Tip: This site is tested on <code>Firefox 98.0</code>. It should work well on <code>Chrome</code> too. If you have found some conpatibility problems, please open an issue. </p>
</section>
<hr />
</div>
<div class="Main_Body_Update_Data">
<p>Last Updated: <a href="https://github.com/guleixibian2009/Hand-Written-HTML-Site"><img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/Guleixibian2009/Hand-Written-HTML-Site?logo=github&style=flat-square"></a></p>
<p>Last Tag: <img alt="GitHub tag" src="https://img.shields.io/github/v/tag/guleixibian2009/Hand-Written-HTML-Site?style=flat-square"></p>
<p>Total Languages: <img alt="GitHub language count" src="https://img.shields.io/github/languages/count/Guleixibian2009/Hand-Written-HTML-Site?style=flat-square"></p>
<p>License: <img alt="GitHub license" src="https://img.shields.io/github/license/Guleixibian2009/Hand-Written-HTML-Site?color=lightgreen&label=Article-License&logo=GitHub&style=flat-square"></p>
</div>
<div class="Like_Survey">
<p>To help us make this site better, please take this little survey!</p>
<p>
<button id="Start_Like_Survey">Take the survey</button>
<a href="https://github.com/Guleixibian2009/Hand-Written-HTML-Site/" target="_blank"><button>Contribute on GitHub</button></a>
<a href="https://github.com/Guleixibian2009/Hand-Written-HTML-Site/archive/refs/heads/master.zip"><button>Download this site</button></a>
</p>
<dialog id="Like_Survey">
<p>Thank you for taking this survey! Please choose the option that corresponds with your feelings now.</p>
<form method="dialog">
<p>
<label>Your feelings:
<select>
<option id="option0">😉Please choose.</option>
<option id="option1">😍Very great! I love it!</option>
<option id="option2">😀Well, good job. But It can be improved.</option>
<option id="option3">😠What is this? I won't look at it again!</option>
</select>
</label>
</p>
<menu>
<button value="cancel">Cancel</button>
<button id="confirm" value="default">OK</button>
</menu>
</form>
</dialog>
<p id="Output"></p>
</div>
</main>
<footer class="Footer">
<p>© Copyright 2022 <i class="fa fa-heart faa-pulse faa-fast animated"></i><a href="https://github.com/guleixibian2009/">Guleixibian2009</a></p>
<p>This site is <strong>Purely Hand-Written</strong> with all my heart! Hope you like it!</p>
</footer>
<nav class="TOC">
<!--The table of contents goes here! It will be automatically generated-->
</nav>
</div>
<div class="Util_Buttons">
<button id="Volume_Wrapper">
<input id="Volume" type="range" min="0.0" max="1.0" step="0.1"/>
<div id="Volume_Icon">
<i class="fa fa-volume-high"></i>
</div>
</button>
<button id="Read_Aloud" class="faa-parent animated-hover"><i class="fa fa-headphones faa-burst"></i></button>
<button id="BG_Music" class="faa-parent animated-hover"><i class="fa fa-music faa-ring"></i></button>
<button id="Back_To_Top" class="faa-parent animated-hover"><i class="fa fa-arrow-up faa-rising faa-fast"></i></button>
<button id="Full_Screen" class="faa-parent animated-hover"><i class="fa fa-expand-alt faa-tada faa-fast"></i></button>
<button id="Share_Link" class="faa-parent animated-hover"><i class="fa fa-share-square faa-float"></i></button>
<button id="Utils_Main" class="faa-parent animated-hover"><i class="fa fa-gear faa-spin faa-fast"></i></button>
</div>
</body>
</html>