forked from jeffreycharters/station
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
209 lines (179 loc) · 10.4 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="color-scheme" content="dark light">
<meta property="og:description" content="Discover the Joy of Open-source">
<meta property="og:title" content="Station - A STTN Production">
<meta property="og:image" content="https://station-team.netlify.app/images/coding-photo1.jpg">
<meta property="twitter:card" content="summary">
<meta property="twitter:description" content="Discover the Joy of Open-source!">
<meta property="twitter:site" content="https://station-team.netlify">
<meta property="twitter:title" content="Station - A STTN Production">
<meta property="twitter:image" content="https://station-team.netlify.app/images/coding-photo1.jpg">
<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=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- Font Awesome CDN -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/fontawesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/solid.min.css">
<!-- Local CSS -->
<link rel="stylesheet" href="style.css">
<title>Station - A STTN Production</title>
</head>
<body>
<div class="container">
<section class="hero-section">
<div class="hero-content">
<h1 class="hero-title">Discover the Joy of Open-source!</h1>
<div class="hero-description">
<p>Learn to work in a development team by making small contributions.</p>
<p>Join us on GitHub to start contibuting or network with other developers on Discord.</p>
</div>
<div class="hero-btns">
<a class="hero-button" href="https://github.com/jeffreycharters/station" target="_blank">Start Contibuting!
»</a>
<a class="hero-button--outline" href="https://discord.gg/NhAfhBnh8g" target="_blank">Join Our Discord!</a>
</div>
<img src="./assets/images/hero-circles-sm.svg" class="hero-svg" alt="svg">
</div>
<div class="hero-image">
<img src="./assets/images/hero-illustration.svg" alt="svg">
<img src="./assets/images/hero-circles-big.svg" class="hero-svg--second" alt="svg">
</div>
</section>
<section class="about">
<h1 id="h1">Station</h1>
<p>Hi, this is a community effort. 🌍</p>
<p>We're curious to see where this takes us. 😁</p>
<!-- motivational image -->
<iframe src="https://giphy.com/embed/Ju7l5y9osyymQ" frameBorder="0" id="embed"></iframe>
<!-- image attribution -->
<p><a href="https://giphy.com/">via GIPHY</a></p>
<p id="embed"><a class="link" href="https://giphy.com/" target="_blank">via GIPHY</a></p>
<p>Check us out on <a class="link" href="https://github.com/jeffreycharters/station" target="_blank">GitHub</a>!
</p>
<p>Join us on the <a class="link" href="https://discord.gg/NhAfhBnh8g" target="_blank">Self Taught Tech Network
Discord Server</a> 👈</p>
</section>
<section class="links">
<h2>Helpful Links </h2>
<p>Introduction to <i>Open Source</i> <a class="link" href="https://dev.to/slimcodes/what-is-open-source-and-why-should-you-care-47l0"
target="_blank">What is Open Source and why should you care?</a></p>
<p>Check here to know <a class="link" href="https://www.koskila.net/how-to-git-merge-upstream/"
target="_blank">How to git merge upstream🧑💻</a></p>
<p>Click here for <a class="link"
href="https://www.freecodecamp.org/news/a-practical-guide-to-start-opensource-contributions/"
target="_blank">A Beginner's Handbook to Help You Start Contributing</a> 📑</p>
<p>Git driving you nuts? Try this approach <a class="resource" href="https://github.com/firstcontributions/first-contributions/blob/main/gui-tool-tutorials/github-windows-vs-code-tutorial.md">First Contributions</a></p>
</section>
<div>
<span id="visitCounter"></span>
</div>
<section class="favourites">
<div class="fave-container">
<div id="list">
<p>Favourite Sports</p>
<ol>
<li>Football</li>
<li>Basketball</li>
<li>Cricket</li>
</ol>
</div>
<div id="list2">
<p>Favourite Song</p>
<ol>
<li>Suicide year</li>
<li>Nights - Frank Ocean</li>
<li>Beautiful Day - U2</li>
<li> Rosa Parks - Outkast</li>
</ol>
</div>
</div>
</section>
<section class="testimonials">
<h2 class="subheading">Testimonials section</h2>
<div class="slider-controls">
<i class="fa-solid fa-circle-arrow-left slider-control slider--prev"></i>
<i class="fa-solid fa-circle-arrow-right slider-control slider--next"></i>
<!-- <ion-icon name="arrow-dropleft" class="slider-control slider--prev"></ion-icon>
<ion-icon name="arrow-dropright" class="slider-control slider--next"></ion-icon> -->
</div>
<div class="slider">
<!-- THIS IS JUST A PLACEHOLDER ===> Edit the testimonial.js file to add a new testimonial. Create a new object in the array of testimonials with the format. -->
<div class="slide">
<h2 class="testminonial_name">John Doe</h2>
<h3 class="testimonial_post">CEO, Havabi</h3>
<p class="testimonial_text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit quaerat assumenda esse aliquam amet accusamus vel distinctio consectetur illum officiis.</p>
</div>
</div>
<!--
<div class="test-container">
<div>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:90px">
<p><span>Chris Fox.</span> CEO at Mighty Schools.</p>
</div>
<p>John Doe saved us from a web disaster.</p>
</div>
<div class="test-container">
<div>
<img src="https://www.w3schools.com/w3images/bandmember.jpg" alt="Avatar" style="width:90px">
<p><span>Rebecca Flex.</span> CEO at Company.</p>
</div>
<p>No one is better than John Doe.</p>
</div>
<div class="test-container">
<div>
<img src="assets/images/pippi.jpeg" alt="Micha's avatar, Pippi Longstocking has red hair in braids" class="pippi">
<p><span>Micha</span> - STaTioN contributor</p>
</div>
<p class="testimonial-text">"This is the first open source project I've ever worked on. I was nervous at first, but it's really been fun! My first pull request was to change the font for the page. You should definitely jump in, this is a very friendly environment where we are all learning. 😊"</p>
</div> -->
</section>
<form id="color-form" class="color-form">
<div class="color-input">
<label for="color-picker">What's your favorite color?</label>
<input type="color" id="color-picker" class="color-picker" />
</div>
<button type="submit" id="color-submit">Click to change background</button>
</form>
<p id="favorite-hex"></p>
<section class="favourites"></section>
<div class="fave-container">
<div id="list">
<p>Favourite sports</p>
<ol>
<li>Football</li>
<li>Basketball</li>
<li>Cricket</li>
</ol>
</div>
<div id="list2">
<p>Favourite songs</p>
<ol>
<li>Suicide Year</li>
<li>Nights - Frank Ocean</li>
<li>Crimson & Clover</li>
</ol>
</div>
</div>
<button id="plus" onclick="return func();">+</button>
</div>
<svg class="svg-icon sun" data-set="moon" viewBox="0 0 20 20">
<path fill="none"
d="M5.114,5.726c0.169,0.168,0.442,0.168,0.611,0c0.168-0.169,0.168-0.442,0-0.61L3.893,3.282c-0.168-0.168-0.442-0.168-0.61,0c-0.169,0.169-0.169,0.442,0,0.611L5.114,5.726z M3.955,10c0-0.239-0.193-0.432-0.432-0.432H0.932C0.693,9.568,0.5,9.761,0.5,10s0.193,0.432,0.432,0.432h2.591C3.761,10.432,3.955,10.239,3.955,10 M10,3.955c0.238,0,0.432-0.193,0.432-0.432v-2.59C10.432,0.693,10.238,0.5,10,0.5S9.568,0.693,9.568,0.932v2.59C9.568,3.762,9.762,3.955,10,3.955 M14.886,5.726l1.832-1.833c0.169-0.168,0.169-0.442,0-0.611c-0.169-0.168-0.442-0.168-0.61,0l-1.833,1.833c-0.169,0.168-0.169,0.441,0,0.61C14.443,5.894,14.717,5.894,14.886,5.726 M5.114,14.274l-1.832,1.833c-0.169,0.168-0.169,0.441,0,0.61c0.168,0.169,0.442,0.169,0.61,0l1.833-1.832c0.168-0.169,0.168-0.442,0-0.611C5.557,14.106,5.283,14.106,5.114,14.274 M19.068,9.568h-2.591c-0.238,0-0.433,0.193-0.433,0.432s0.194,0.432,0.433,0.432h2.591c0.238,0,0.432-0.193,0.432-0.432S19.307,9.568,19.068,9.568 M14.886,14.274c-0.169-0.168-0.442-0.168-0.611,0c-0.169,0.169-0.169,0.442,0,0.611l1.833,1.832c0.168,0.169,0.441,0.169,0.61,0s0.169-0.442,0-0.61L14.886,14.274z M10,4.818c-2.861,0-5.182,2.32-5.182,5.182c0,2.862,2.321,5.182,5.182,5.182s5.182-2.319,5.182-5.182C15.182,7.139,12.861,4.818,10,4.818M10,14.318c-2.385,0-4.318-1.934-4.318-4.318c0-2.385,1.933-4.318,4.318-4.318c2.386,0,4.318,1.933,4.318,4.318C14.318,12.385,12.386,14.318,10,14.318 M10,16.045c-0.238,0-0.432,0.193-0.432,0.433v2.591c0,0.238,0.194,0.432,0.432,0.432s0.432-0.193,0.432-0.432v-2.591C10.432,16.238,10.238,16.045,10,16.045">
</path>
</svg>
<svg class="svg-icon moon hidden" data-set="sun" viewBox="0 0 20 20">
<path fill="none"
d="M10.544,8.717l1.166-0.855l1.166,0.855l-0.467-1.399l1.012-0.778h-1.244L11.71,5.297l-0.466,1.244H10l1.011,0.778L10.544,8.717z M15.986,9.572l-0.467,1.244h-1.244l1.011,0.777l-0.467,1.4l1.167-0.855l1.165,0.855l-0.466-1.4l1.011-0.777h-1.244L15.986,9.572z M7.007,6.552c0-2.259,0.795-4.33,2.117-5.955C4.34,1.042,0.594,5.07,0.594,9.98c0,5.207,4.211,9.426,9.406,9.426c2.94,0,5.972-1.354,7.696-3.472c-0.289,0.026-0.987,0.044-1.283,0.044C11.219,15.979,7.007,11.759,7.007,6.552 M10,18.55c-4.715,0-8.551-3.845-8.551-8.57c0-3.783,2.407-6.999,5.842-8.131C6.549,3.295,6.152,4.911,6.152,6.552c0,5.368,4.125,9.788,9.365,10.245C13.972,17.893,11.973,18.55,10,18.55 M19.406,2.304h-1.71l-0.642-1.71l-0.642,1.71h-1.71l1.39,1.069l-0.642,1.924l1.604-1.176l1.604,1.176l-0.642-1.924L19.406,2.304z">
</path>
</svg>
<script type="text/javascript" src="script.js"></script>
<script src="testimonials.js"></script>
<!-- Ionicons -->
<!-- <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script> -->
</body>
</html>