-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (114 loc) · 5.03 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/anims-style.css">
<link rel="stylesheet" type="text/css" href="css/all-animations.css">
<title>JS & CSS animations</title>
</head>
<body id="toptop">
<main class="page-block" id="index-anims">
<div class="container">
<header>
<h1 class="page-title page-white" id="hey">Hey</h1>
<h2 class="page-title page-white">Welcome Here</h2>
</header>
<p class="page-white" id="landing-p">Next you’ll see some of the animations done with CSS that I’ve been working on.<br>Enjoy!</p>
<a href="#btn-page" title="Next" class="up-down-btn light-btn" id="first-btn">↓</a>
</div>
</main>
<!-- BUTTON PAGE -->
<section class="page-block" id="btn-page">
<div class="container">
<header>
<h1 class="page-title page-white">Transition Buttons</h1>
</header>
<div class="container" id="animated-btn-page">
<p class="animated-btn" id="animated-btn-one">Let's</p>
<p class="animated-btn" id="animated-btn-two">Test</p>
<p class="animated-btn" id="animated-btn-three">This</p>
<p class="animated-btn" id="animated-btn-four">Out</p>
</div>
<div class="buttons">
<div></div>
<div class="right-btns">
<a href="#appa-page" title="Next" class="light-btn">↓</a>
<a href="#toptop" title="Previous" class="light-btn">↑</a>
</div>
</div>
</div>
</section>
<!-- NAV BAR PAGE -->
<section class="page-block" id="appa-page">
<div class="container">
<header>
<h1 class="page-title">SVG<br>Animations</h1>
</header>
<div class="container heart">
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In -->
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="291.9px" height="220px" viewBox="-5 -20 300 250" style="enable-background:new 0 0 291.9 220;"
xml:space="preserve"><path class="st0" d="M269.6,22.3L269.6,22.3c-29.1-29.1-76.3-29.1-105.4,0L146,40.5c0,0,0,0,0,0l-18.2-18.2
C98.7-6.8,51.5-6.8,22.3,22.3l0,0c-29.1,29.1-29.1,76.3,0,105.4c0,0,104.2,92,123.6,91.8c19.4,0.2,123.6-91.8,123.6-91.8
C298.7,98.7,298.7,51.5,269.6,22.3z"/>
</svg>
</div>
<div class="buttons">
<a href="#toptop" title="Back to Top" class="dark-btn back-to-top-btn">▲</a>
<div class="right-btns">
<a href="#loading-glow" title="Next" class="dark-btn">↓</a>
<a href="#btn-page" title="Previous" class="dark-btn">↑</a>
</div>
</div>
</div>
</section>
<!-- PURE CSS ANIMATION HERE -->
<section class="page-block" id="loading-glow">
<div class="container">
<header>
<h1 class="page-title page-white">CSS Loading Animation</h1>
</header>
<div class="container">
<div class="circle-container">
<div class="first-two">
<div class="circle"></div>
<div class="circle"></div>
</div>
<div class="second-two">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
<div class="buttons">
<a href="#toptop" title="Back to Top" class="light-btn back-to-top-btn">▲</a>
<div class="right-btns">
<a href="#end-page" title="Next" class="light-btn">↓</a>
<a href="#appa-page" title="Previous" class="light-btn">↑</a>
</div>
</div>
</div>
</section>
<!-- SVG ANIMATION -->
<section class="page-block" id="end-page">
<div class="container">
<header>
<h1 class="page-title page-white">Thanks for watching :)</h1>
</header>
<div class="container">
<div class="kinetic-container">
<div class="kinetic"></div>
</div>
</div>
<div class="buttons">
<a href="#toptop" title="Back to Top" class="light-btn back-to-top-btn">▲</a>
<div class="right-btns">
<a href="#loading-glow" title="Previous" class="light-btn">↑</a>
</div>
</div>
</div>
</section>
</body>
</html>