-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
262 lines (236 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
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./chisha.css" />
<link rel="stylesheet" href="style.css" />
<!--Creating fontsawesome external website for linking right/left arrows-->
<script src="https://kit.fontawesome.com/58d6d0819a.js" crossorigin="anonymous"></script>
<title>Chisha Website!</title>
</head>
<body>
<!--Creating Navigation Bar to contain the Tabs from unordered list-->
<nav>
<div class="navbar">
<ul class="tabs">
<li><a data-tab-target="#home" class="active tab">Home</a></li>
<li><a data-tab-target="#about" class="tab">About</a></li>
<li><a data-tab-target="#recap" class="tab">Recap</a></li>
</ul>
</div>
</nav>
<main>
<!--Tab 1. Tab content includes headers, divs, paragraphs-->
<div class="tab-content">
<div id="home" data-tab-content class="active">
<div class="firstPage">
<h1>CHISHA-CODES</h1>
<h2>Welcome Hello </h2>
<h3>Aspiring Coder-Web Developers journey to join Founders and Coders</h3>
<!-- Change text color on mouseover-->
<div class="textColor">
<h4 id="bulge" style="text-align:center">Why not Me?</h4>
</div>
<!--Sliding words-->
<div class="slideWords" style="text-align:center">Problem solver <br>Organiser <br>Collaborator <br>Co-ordinator <br>Communicator<br>Coder!</div>
<p>I am a not just a <b>Black female</b>, I am a...</p>
<div class="femaleCoder">
<img src="ImagesApplication/Female coder image.jpeg" width="250vw" height="250vh" alt="femaleOnLaptop">
<p>Mother, Sister, Wife, Cousin, Aunt, Friend and Lover</p>
<p>Team Lead Co-ordinator, Collaborator, Communicator, Team player</p>
<p>Coder, Aspiring techy, full stack web-developer</p>
<p>Problem solver, Organiser, Resourceful planner, Inquisitive, Get things done!</p>
<p>Because of all I am, I say why not choose me</p>
</div>
<div class="femaleCoderTwo">
<img src="ImagesApplication/Female multi job image.jpeg" width="250vw" height="250vh" alt="femaleOnLaptop">
<!--Sliding words-->
<div class="slideWordss">Mother Wife</p> <p>Sister Friend</p> <p>Team player!</p></div>
</div>
<div class="textColor">
<h4 id="bulge" style="text-align:center">Why not Founders and Coders?</h4>
</div>
<p>Founders and Coders promote diversity with no judgement for the Tech industry</p>
<p>Making a social impact with technology</p>
<p>Proving that peer-led learning is the most effective and least expensive</p>
<p>Cohorts thrive when teams represent diversity </p>
<p>Promote learning by pair programming, projects, and “near-peer” mentorship</p>
<p>Principle is of reciprocity</p>
<p>Because of all Founders and Coders are, I say why not choose to learn with them</p>
</div> <!--Tab-content close-->
</div> <!--Tab-active close-->
</div><!-- FirstPage closing div-->
<!--Tab 2. Tab content includes headers, divs, paragraphs-->
<div id="about" data-tab-content>
<h1>CHISHA-CODES</h1>
<h2>Enjoy Like</h2>
<h3>On this journey you will also learn I enjoy travelling to beautiful beaches</h3>
<p>Holidays are all about rest, relaxation and indulging in pure bliss. So while you are here, join in and participate. </p>
<div class="textColor">
<h4 id="bulge" style="text-align:center">Which beach? Which country?</h4>
</div>
<p>Collaborate and share your suggestions. Where should the next destination be.</p>
<!--Textbox for longest spelling country-->
<div class="spellCountry" style="text-align: center">
<label for="country">Favourite destination</label>
<input type="text" id="longestCountry">
<output id="character-count">0 characters</output>
</div>
<br>
<br>
<p>Enjoy some of the beaches I have travelled to around the world. Perhaps you can guess which country each beach belongs to.<br>Check the landmarks or hidden flags.</p>
<!--Destination textbox for user input-->
<div class="changeTextbox" style="text-align: center">
<label for="username">Match the correct: <input type="text" id="username" value="country"/>
<!-- Blue button answer correct -->
<button id="blueButton"> Is it correct?</button></label>
</div>
<p>Did you get it right? If not, <b>click </b>one more time to clear and try again.</p>
<div class="div1"></div> <!--Ensures image carousel appears on Tab 2 only-->
<!--Creating image carousel container. Slideshow Container-->
<div class="slideshow-container">
<!-- Images -->
<div class="mySlides">
<img src="ImagesApplication/slide1.jpeg" alt="Aruba beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide2.jpeg" alt="Bora Bora beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide3.jpeg" alt="Tahiti beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide4.jpeg" alt="Cuba Varadero beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide5.jpeg" alt="Cape Verde Sal beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide6.jpeg" alt="Gambia beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide7.jpeg" alt="Mexico Cancun beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide8.jpeg" alt="Saint Lucia beach">
</div>
<div class="mySlides">
<img src="ImagesApplication/slide9.jpeg" alt="Thailand Koh Samui beach">
</div>
<!-- Pause button -->
<button class="controls" id="pause">Pause</button>
<!-- Next and previous buttons -->
<div class="slideControls">
<button id="prev">
<i class="fas fa-chevron-left"></i>
</button>
<button id="next">
<i class="fas fa-chevron-right"></i>
</button>
</div>
</div> <!--Slide-show container close-->
<br>
<p>Don't forget the capital letter at the beginning!</p>
</div> <!--Close to keep slideshow on tab2-->
<!-- Tab 3-->
<!--Flexbox Column layout-->
<div id="recap" data-tab-content>
<h1>CHISHA-CODES</h1>
<h2>Return Come Again</h2>
<h3 class="return"> Listen and enjoy as we go back</h3>
<h3 class="returnTwo">Back to the beginning of the coding learning journey</h3>
<h4>Click on the icons below to return to the start. Beginning platforms but make sure you return back. <br>We need you for more particpation!</h4>
<!--Audio Music-->
<div class="blackstreet">
<img src="https://www.musiconvinyl.com/fotos/3236_foto1_product_xl.jpg" width="700" height="250" alt="blackstreetMusicAlbum">
</div>
<div class="blackstreetControls">
<audio controls>
<source src="ImagesApplication/Blackstreetmusic.mp3" type="audio/mpeg">
</audio>
</div>
<!--Return to Learning platforms Freecodecamp-->
<div class="row">
<div class="column">
<a href="https://www.freecodecamp.org/newmember"><img id="myFreecodecamp" src="https://upload.wikimedia.org/wikipedia/commons/3/39/FreeCodeCamp_logo.png" width="100" height="100" alt="freecodecamp logo"></a>
</div>
<!--Return to Learning platforms GitHub-->
<div class="column">
<a href="https://github.com/NewCoderCA/FAC21-Application"><img id="myGithub" src="https://res.cloudinary.com/practicaldev/image/fetch/s--i_sb3chq--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://thepracticaldev.s3.amazonaws.com/i/fk0849hvg2rt13bpqhjy.jpg" width="100" height="100" alt="github logo"></a>
</div>
<!--Return to Learning platforms Codewars-->
<div class="column">
<a href="https://www.codewars.com/users/Newmember/stats"><img id="myCodewars" src="https://pathrise-website-guide-wp.s3.us-west-1.amazonaws.com/guides/wp-content/uploads/2019/06/10173017/codewars-logo-1.png" width="100" height="100" alt="codewars logo"></a>
</div>
</div>
<p>Listening and learning other languages from around the world is so enjoyable. It promotes diversity!</p>
<p>Can you guess which continent the translations below belong to before the timer runs out. </p>
<!--Link for Hourglass image-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!--Display Timer-->
<div><b>Timer </b><label id="time"></label>
<div id="sandtimer" class="fa"></div> <!--Sandtimer wrapped in Timer div tag so they stick together-->
</div>
<!--Translate textbox for user input-->
<div class="changeTranslate" style="text-align: center">
<label for="usernameT">Correct order: <input type="text" id="usernameT" value="3 continents"/>
<!-- Blue button answer correct -->
<button id="blueButtonT"> Is it correct?</button></label>
</div>
<p>Hope you enjoyed your time here! Please return again.</p>
<!--Rotate translate-->
<div class="translateWords">
<p>Translated word: <span></span></p>
</div>
<!--<div class="columnLayout">-->
<!--Column One-->
<section>
<article>
<h3>Comprehend</h3>
<p>Comprehend means to understand, to grasp, makes sense of, or work out.</p>
<p>ịghọta </p> <!--Igbo language-->
<p>fahmid</p><!--Somali language -->
<p>loye </p><!--Yoruba language -->
<p>fahimta</p> <!-- Hausa language -->
<p>kuelewa</p><!-- Swahili language -->
<p>qonda</p> <!-- Zulu language -->
<p>ተረድአ teredi’ā </p><!-- Tigrinya-->
<p>verstaan <!--Africans--></p>
</article>
<!--Column Two-->
<article>
<h3>Study</h3>
<p>Study means the devotion of time and attention to gaining knowledge of an academic subject, especially by means of books.</p>
<p>研究 </p><!--Chinese language-->
<p>ਅਧਿਐਨ </p><!--Punjabi language -->
<p>ศึกษา </p><!--Thai language -->
<p>судлах </p><!--Mongolian language -->
<p>belajar </p><!--Indonesian language -->
<p>مطالعہ </p><!--Urdu language -->
<p>học </p><!--Vietnamese language -->
<p>अध्ययन </p><!--Nepalese language--></p>
</article>
<!--Column Three-->
<article>
<h3>Learn</h3>
<p>Learn means to gain or acquire knowledge of or skill in something by study, experience, or being taught.</p>
<p>dysgu </p><!--Welsh language-->
<p>învăța </p><!--Romanian language -->
<p>naučiti </p><!--Croatian language -->
<p>mokytis </p><!--Lithuanian language -->
<p>öğrenmek </p><!--Turkish language -->
<p>μαθαίνω </p><!--Greek language -->
<p>jitgħallmu </p><!--Maltese language-->
<p>foghlaim </p><!--Irish language-->
</article>
</section>
</div> <!--Recap div close-->
</div>
</div>
</div>
</div>
</main>
<script src="./chisha.js"></script>
</body>
</html>