-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
174 lines (162 loc) · 7.39 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cascade - You Create CSS Animations</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
</style>
<link rel="stylesheet" href="styles.css" />
<link rel="stylesheet" href="mobile.css" />
<script defer src="https://unpkg.com/cursor-effects@latest/dist/browser.js"></script>
<script defer src="/_vercel/insights/script.js"></script>
</head>
<body>
<nav>
<div id="center">
<ul>
<li><a href="#about">About</a></li>
<li><a href="#participate">How to Participate</a></li>
<li><a href="#judging">Judging Criteria</a></li>
</ul>
</div>
</nav>
<header>
<h1 class="icon">💅</h1>
<h1 class="floating"><div class="tilt">
<span>C</span>
<span>A</span>
<span>S</span>
<span>C</span>
<span>A</span>
<span>D</span>
<span>E</span>
</div></h1>
<h2>Build and ship CSS Animations</h2>
<p class="tagline marquee">Ends Dec 12th, 2024</p>
<div style="text-align: center; margin-top: 20px;">
<a href="https://forms.hackclub.com/cascade" target="_blank">
<button class="submit">Submit Your Animation</button>
</a>
</div>
</header>
<section id="about" class="card">
<h2>About the YSWS</h2>
<p>
Make a CSS animation! Use only CSS to create a cool animation and get
some art supplies.
</p>
</section>
<section id="participate" class="card">
<h2>How to Participate</h2>
<ol>
<li>
Design a creative CSS animation (check
<a href="#rules" class="hover-link">criteria</a> for what counts as creative)
</li>
<li>
Make your CSS animation in CodePen!
</li>
<li>
Submit your CodePen and code to the submission form
<a href="https://forms.hackclub.com/cascade" class="hover-link" target="_blank">here</a> by the deadline
</li>
<li>
If you're approved, we'll be in touch to arrange the shipping of your
choice between art supplies and art software.
</li>
</ol>
</section>
<section id="judging" class="card">
<h2>Judging Criteria</h2>
<ul>
<li>Creativity: How creative the animation is.</li>
<li>Visual Appeal: The animation should look good.</li>
<li>Elements: Must use 2+ elements like text, shapes, and colors.</li>
<li>Uniqueness: Must be unique. (Cannot do a project similar to someone else's).</li>
</ul>
</section>
<!-- <section id="examples" class="card">
<h2>What have people built?</h2>
<ul>
<li><a class="hover-link" href="https://codepen.io/advaitconty/pen/PoMaeOP" target="_blank">Solar system</a> by advaitconty</li>
<li><a class="hover-link" href="https://codepen.io/mitang321/pen/OJKwpvV" target="_blank">Solar system 2.0</a> by Mitang Hindocha</li>
<li><a class="hover-link" href="https://codepen.io/grandell1234/pen/abeGrPZ" target="_blank">3D cube</a> by grandell1234</li>
<li><a class="hover-link" href="https://codepen.io/Acidicts/pen/jOgKdZv" target="_blank">Trippy rings</a> by acidicts</li>
<li><a class="hover-link" href="https://codepen.io/fun840/pen/VwomJQN" target="_blank">Magic floppy disk</a> by fun840</li>
<li><a class="hover-link" href="https://codepen.io/Abhay-Gupta-the-sans/pen/dyxzMqo" target="_blank">Calm in chaos</a> by abhay-gupta-the-sans</li>
</ul>
</section> -->
<section id="examples" class="card">
<h2>What have people built?</h2>
<div class="carousel">
<div class="carousel-item active">
<video class="video-preview" autoplay muted loop>
<source src="https://cloud-d90gilkow-hack-club-bot.vercel.app/020241107-0542-58.1276128.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-info">
<a href="https://codepen.io/grandell1234/pen/abeGrPZ" target="_blank" class="carousel-title">Solar System</a>
<p class="carousel-creator">Made by advaitconty</p>
</div>
</div>
<div class="carousel-item">
<video class="video-preview" autoplay muted loop>
<source src="https://cloud-eddof49rk-hack-club-bot.vercel.app/020241107-0530-48.7408860.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-info">
<a href="https://codepen.io/mitang321/details/OJKwpvV" target="_blank" class="carousel-title">Solar System 2.0</a>
<p class="carousel-creator">Made by Mitang Hindocha</p>
</div>
</div>
<div class="carousel-item">
<video class="video-preview" autoplay muted loop>
<source src="https://cloud-esswqztm5-hack-club-bot.vercel.app/020241107-0558-15.1040299.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-info">
<a href="https://codepen.io/mitang321/details/OJKwpvV" target="_blank" class="carousel-title">3d Cube</a>
<p class="carousel-creator">Made by grandell1234</p>
</div>
</div>
<div class="carousel-item">
<video class="video-preview" autoplay muted loop>
<source src="https://cloud-hr6mrdi8j-hack-club-bot.vercel.app/020241107-0600-40.5273409.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-info">
<a href="https://codepen.io/Acidicts/pen/jOgKdZv" target="_blank" class="carousel-title">Trippy rings</a>
<p class="carousel-creator">Made by acidicts</p>
</div>
</div> <div class="carousel-item">
<video class="video-preview" autoplay muted loop>
<source src="https://cloud-7xigpmq3n-hack-club-bot.vercel.app/020241107-0602-36.4703362.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-info">
<a href="https://codepen.io/fun840/pen/VwomJQN" target="_blank" class="carousel-title">Magic floppy disk</a>
<p class="carousel-creator">Made by fun840</p>
</div>
</div>
</div> <div class="carousel-item">
<video class="video-preview" autoplay muted loop>
<source src="https://cloud-6uyd9wwtz-hack-club-bot.vercel.app/020241107-0604-41.6137854.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="carousel-info">
<a href="https://codepen.io/Abhay-Gupta-the-sans/pen/dyxzMqo" target="_blank" class="carousel-title">Calm in chaos</a>
<p class="carousel-creator">Made by abhay-gupta-the-sans</p>
</div>
</div>
<button class="prev" onclick="moveCarousel(-1)">❮</button>
<button class="next" onclick="moveCarousel(1)">❯</button>
</div>
</section>
<footer>
<p>Made with ❤️ by @Rrr <span class="glitched"></span></p>
</footer>
<script src="script.js"></script>
</body>
</html>