-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathresources.html
196 lines (145 loc) · 10.2 KB
/
resources.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swirl</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="subpage.css">
<link rel="icon" type="image/x-icon" href="/images/assets/png/sprinkles.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Preahvihear&display=swap" rel="stylesheet">
</head>
<body style="background-color: #FDE09D;">
<!-- Navbar -->
<nav class="navbar">
<!-- Hack Club Flag -->
<a class="banner" href="https://hackclub.com/"><img style="position: absolute; top: 0; left: 10px; border: 0; width: 128px; z-index: 1000;" src="https://assets.hackclub.com/flag-orpheus-top.svg" alt="Hack Club"/></a>
<div class="navbar__container">
<ul class="navbar__menu">
<li class="navbar__item">
<a href="index.html" class="navbar__links">Home</a>
</li>
<li class="navbar__item">
<a href="requirements.html" class="navbar__links">Requirements</a>
</li>
<li class="navbar__item">
<a href="gallery.html" class="navbar__links">Gallery</a>
</li>
<li class="navbar__item">
<a href="resources.html" class="navbar__links">Resources</a>
</li>
<li class="navbar__btn">
<a href="https://forms.hackclub.com/t/t1UL6ZK4Nyus" class="navbar__btn">Submit</a>
</li>
</ul>
</div>
</nav>
<br>
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-left: 100px">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: -279px; margin-left: 14px; rotate: 431deg">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-bottom: -300px; margin-left: 982px; rotate: 94528deg">
<img src="/images/assets/svg/t/sprinkle-y.svg" class="sprinkles__img" alt="Yellow Sprinkle" style="background: none; margin-bottom: -180px; margin-left: 413px; rotate: 37deg">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-bottom: -370px; margin-left: 12px; rotate: 04253deg">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: -540px; margin-left: 720px; rotate: 34251deg">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Orange Sprinkle" style="background: none; margin-bottom: -449px; margin-left: 130px; rotate: 95248deg">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Green Sprinkle" style="background: none; margin-bottom: -32px; margin-left: 220px; rotate: 37deg">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Blue Sprinkle" style="background: none; margin-bottom: -33px; margin-left: 990px; rotate: 03deg">
<div class="subpage__logo">
<h1 id="circle_sub">
<br>
<img id="swirlText" src="images/assets/svg/swirl-text.svg" alt="Swirl! Text Logo" style="background: none; width: 300px; height: 350px; margin-bottom: -150px">
<br>
</h1>
<h1 id="circle2_sub">
<div class = "rotate_sub">
Resources
</div>
</h1>
</div>
<h1>Okay... so how do I Swirl?</h1>
<h2 style="font-size: 30px">Here's a bunch of stuff to make the process easier!</h2>
<br>
<h3>These have been designed to be used with Swirl!</h3>
<p>
<a target="_blank" href="https://hack.club/q9zpic" style="margin: 20px">Workshop (Slideshow)</a>
<a target="_blank" href="https://hack.club/67hn7h" style="margin: 20px">Website Planner</a>
<a target="_blank" href="" style="margin: 20px; color: #B875FF; cursor: not-allowed">Cheat Sheet (coming soon!)</a>
<center>
<button><a href="#faq" style="text-decoration: none; color: #B875FF" > Jump to FAQ </a> </button>
</center>
</p>
<br><br><br>
<h3>
Other Websites: </h3>
<ul>
<li><a target="_blank" style="font-size: 20px" href="https://www.w3schools.com/"> W3 Schools</a></li>
<p style="margin-left: 20px">W3 Schools is a great developer resource,
and is highly recommended to use to find CSS and HTML features you've never heard about.
It also is useful as a guide for elements you have forgotten the syntax of.</p>
<li><a target="_blank" style="font-size: 20px" href="https://g.co/kgs/62CmUCj"> Color Picker</a></li>
<p style="margin-left: 20px">The Google Color Picker gives the information for specific colors, so you can add all sorts of awesome colors!</p>
<li><a target="_blank" style="font-size: 20px" href="https://caniuse.com/"> Can I Use</a></li>
<p style="margin-left: 20px">Some browsers may not support some features, CanIUse tells you what is and isn't supported so you know you aren't going crazy.
This was useful for me when trying to figure out why my .svg favicon wasn't working in Safari.</p>
<li><a target="_blank" style="font-size: 20px" href="https://fonts.google.com/"> Google Fonts</a></li>
<p style="margin-left: 20px">Google Fonts lets you choose from a vast variety of fonts and import them into your website,
this can help you change the whole vibe of your website!</p>
</ul>
<br><br><br>
<h3>How to submit:</h3>
<p>The website needs to be made open source on Github, and hosted through a service like Github Pages.<br>
<br>
<button><a target="_blank" href="https://forms.hackclub.com/t/t1UL6ZK4Nyus" style="text-decoration: none; color: #B875FF; hover:white;" > Submission Form </a> </button>
<button><a target="_blank" href="https://forms.hackclub.com/t/8JgE9XsQanus" style="text-decoration: none; color: #B875FF; hover:white;" > Run an Event / Club Meeting </a> </button>
</p>
<!--
<p> Sample Websites: This one!, dhyans.xyz, potatoperks website</p>
-->
<br><br><br>
<h3>Need Help?</h3>
<p>
1. Ask in Slack Channel #swirl <br>
2. Message @blu for general, @jps for clubs if on Slack <br>
3. Email <a target="_blank" id="faq" href="mailto:[email protected]">[email protected]</a>
</p>
<br><br>
<h2>faq</h2><br>
<h3>How many club meetings should this take?</h3><br>
<p>Two are recommended to introduce the project, present the slides, let the members work and submit their website.<br>
A third meeting where everyone presents their project and eats ice cream can also be pretty fun!<br>
Join <a target="_blank" href="https://hackclub.slack.com/archives/C02PA5G01ND">#leaders</a> on the Hack Club Slack and ask other leaders what they did, and get advice!
</p>
<br>
<h3>Is this only for high schoolers?</h3><br>
<p>Yup, Hack Club focuses towards giving teenagers the resources to be creative. All people completing this workshop
must be 18 or under, and have gotten their Boba Drops submission approved.</p>
<br>
<h3>Is this a replacement for Boba Drops?</h3><br>
<p>Nope, this is a part two! You are allowed to expand on your Boba Drops submission as a result. If you choose not to,
the submission website has to have been created recently.</p>
<center>
<button><a target="_blank" href="https://forms.hackclub.com/t/t1UL6ZK4Nyus" style="text-decoration: none; color: #B875FF; hover:white;" > Get your ice cream </a> </button>
</center>
<br>
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 45px; rotate: 31deg">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 98deg">
<img src="/images/assets/svg/t/sprinkle-y.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 37deg">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 03deg">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 876deg">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 867deg">
<img src="/images/assets/svg/t/sprinkle-g.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 345deg">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 90deg">
<img src="/images/assets/svg/t/sprinkle-r.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 456deg">
<img src="/images/assets/svg/t/sprinkle-o.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 89deg">
<img src="/images/assets/svg/t/sprinkle-b.svg" class="sprinkles__img" alt="Red Sprinkle" style="background: none; margin-bottom: 0px; margin-left: 90px; rotate: 13deg">
<footer>
<br>
<img src="images/assets/other/stickers/orphmoji-yippee.png" alt="Orpheus Yippee!" style="background: none; width: 50px; margin-bottom: 2px; margin-right: 15px">
Made by Hack Club
<img src="images/assets/other/stickers/orphmoji-yippee.png" alt="Orpheus Yippee!" style="background: none; width: 50px; margin-bottom: 2px; margin-left: 20px">
<img src="images/assets/svg/cherry.svg" alt="Orpheus Yippee!" style="background: none; height: 50px; margin-bottom: 2px; position: absolute; right: 20px; top: -49px">
<br><br><br>
</footer>
</body>
</html>