-
Notifications
You must be signed in to change notification settings - Fork 0
/
Practice.html
397 lines (317 loc) · 15.4 KB
/
Practice.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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
<html>
<head>
<!-- <title> means what will be displayed as the webpag's name. Look at the tab of the webpage. -->
<title> Practice Coding </title>
<!-- <base> means that what ever you put inside base will become the default for everything else within the code. For example if I used the tag bellow:
<base target="_blank" href="http://www.youtube.com">
then all of the links in the body would place the above url before the other urls. So if later on I just had:
<a href="Vsauce"> This will take you to Vsauce </a>
This link would take you to Vsauces youtube page. -->
<!-- by using type="text/css" you are telling the browser what you are using within the tags -->
<style type="text/css" >
/* You state what part you want a certain style to pertain to, in the first case h1, and then use brackets to house the style choices for that section */
h1
{
font-size:72px;
color:darkmagenta;
background-color:azure;
}
body
{
font-size: 20px;
color:darkmagenta;
background-image: url(images/Kelby/Sidewave.jpg);
background-size: contain;
background-repeat: no-repeat;
background-position: right top;
margin-right: 400px;
background-attachment: fixed;
background-color: azure;
}
table
{
border-collapse: collapse;
width: 100%;
}
th, td
{
text-align: left;
padding: 8px;
}
tr:nth-child(even)
{
background-color: #f2f2f2
}
th
{
background-color: #4CAF50;
color: white;
}
#wave
{
color: red;
}
#panel,
#flip {
padding: 5px;
text-align: center;
background-color: #EEAA33;
border: solid 1px #c3c3c3;
}
#panel {
padding: 200px;
display: none;
}
#ocean
{
position:absolute;
min-width: 100%;
min-height:100%;
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,50,150)),
color-stop(0.50, rgb(0,150,255))
);
}
.wave
{
background-color: rgb(179, 204, 255);
display:inline-block;
height:60%;
width:10px;
position:absolute;
-webkit-animation-name: dostuff;
-webkit-animation-duration: 7s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}
@-webkit-keyframes dostuff{
0%{
height:60%;
}
50%{
height:40%;
}
100%{
height:60%;
}
}
#ocean2{
position:absolute;
width:100%;
min-height:100%;
background:#a8e3ff;
}
.wave2{
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(0,50,150)),
color-stop(0.50, rgb(0,150,255))
);
display:inline-block;
height:60%;
width:10px;
position:absolute;
-webkit-animation-name: dostuff;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-transition-timing-function: ease-in-out;
}
@-webkit-keyframes dostuff{
0%{
height:60%;
}
50%{
height:40%;
}
100%{
height:60%;
}
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/jjquery.js"></script>
<script>
$(document).ready(function() {
$("#flip").mouseover(function() {
$("#panel").slideDown("slow");
});
$("#flip").mouseout(function() {
$("#panel").slideUp("fast");
});
});
</script>
</head>
<body>
<div id="flip">Roll over to slideDown!</div>
<div id="panel">Roll out to slideUp!</div>
<center><h1> For practicing different coding formats. </h1></center>
<h2 id="wave"> This is a table </h2>
<!-- This is a Table -->
<table >
<!-- <tr> means table row -->
<tr>
<th>Row 1</th>
<th>Row 2</th>
<th>Row 3</th>
</tr>
<tr>
<!-- <td> means table data, a table cell -->
<td> 1/1 </td>
<td> 1/2 </td>
<td> 1/3 </td>
</tr>
<tr>
<td> 2/1 </td>
<td> 2/2 </td>
<td> 2/3 </td>
</tr>
<tr>
<td> 3/1 </td>
<td> 3/2 </td>
<td> 3/3 </td>
</tr>
<tr>
<td> 4/1 </td>
<td> 4/2</td>
<td> 4/3</td>
</tr>
</table>
<h2> These are Lists</h2>
<!-- Lists -->
<h3> This is an ordered list, meaning its items are numbered </h3>
<!-- <ol> means ordered list, will give you a numbered list -->
<p> Don't Kings Playing Chess On Freeways Get Squashed? </p>
<ol>
<!-- <li> means list item -->
<li> Domain </li>
<li> Kingdom </li>
<li> Phylum </li>
<li> Class </li>
<li> Order </li>
<li> Family </li>
<li> Genus </li>
<li> Species </li>
</ol>
<h3> This is an unordered list, meaning its items are bulletpointed </h3>
<!-- <ul> means unordered list, uses bullet points -->
<ul>
<li> Red </li>
<li> White </li>
<li> Blue </li>
</ul>
<h3> Definition List </h3>
<!-- <dl> means definition list -->
<dl>
<!-- <dt> menas definition title, <dd> means defintion desscription -->
<dt>Russia</dt>
<dd>The largest country in both Europe and Asia</dd>
<dt>Canada</dt>
<dd>The largest country in North America</dd>
<dt>Brazil</dt>
<dd>The largest country in South America</dd>
<dt>Algeria</dt>
<dd>The largest country in Africa</dd>
<dt>Australia</dt>
<dd>The largest country in Oceania</dd>
</dl>
<h2> Links </h2>
<!-- <a> means link, href is placed within the first a's closing bracket and means your link is inside the following quotation marks. What is palced between the a's is the text that is clicked to get to the attatched link. -->
<a href="http://www.google.com"> This will take you to google. </a>
<br>
<br>
<!-- add target="_blank" to link to another tab -->
<a href="http://www.google.com" target="_blank"> This will take you to google on a seperate tab. </a>
<center><h2 > Images </h2>
<!-- <img> means image and is just an empty bracket with no closing tag -->
<!-- <img src="url" alt="Text to be dispalyed if image does not work"> -->
<!-- src is the image's source, either a file or a url, alt is what is displayed if the image is broken -->
<img src="images/Kelby/KelbyCover.jpg" alt="Wave Photo" style="width600px;height:600px;"></center>
<h2> Formating </h2>
<h3> Line Breaks </h3>
<!-- <br> means break and does not have to be closed. A single <br> will put you on the next line, two <br>'s will skip a line, three <br>'s will skip two lines and so on. -->
<p> Line 1 <br> Line 2 <br> <br> Line 4 <br><br><br> Line 7
</p>
<h3> <b>Bold Text</b> </h3>
<!-- <b> means blod text -->
<p> <b> This text will be bold! </b> </p>
<h3> <i> Italics </i></h3>
<!-- <i> means italics -->
<p> <i> This text will be in italics! </i></p>
<h3> Centering Text </h3>
<!-- <center> will center texts and images -->
<p> <center> Look at me I'm centered </center> </p>
<h3> Block Elements </h3>
<p> A block element is a tag that will take a new line. </p>
<!-- Examples are <p> <h1...h6> <table> <ol> -->
<h3> Inline Elements </h3>
<p> Inline Elements are tags that will not take a new line.
</p>
<!-- Examples are <b> <i> <image> <a> -->
<h3> Fonts </h3>
<h4> Size </h4>
<p>This <font size="6">text </font>is is a different size
<br>
<font size="1">Size 1</font>
<br>
<font size="2">Size 2</font>
<br>
<font size="3">Size 3</font>
<br>
<font size="4">Size 4</font>
<br>
<font size="5">Size 5</font>
<br>
<font size="6">Size 6</font>
<br>
<font size="7">Size 7</font>
<br>
</p>
<h4> Font Styles </h4>
<p> This will be in <font face="Comic Sans MS" > Comic Sans </font></p>
<h4> Color </h4>
<p> This <fonts style="color:green"> Text </fonts> will be green </p>
<p style="color:green"> All of this text will be green </p>
<div id="ocean">
</div>
<div class="oceanspace"> </div>
<div id="ocean2">
</div>
<script>
var ocean = document.getElementById("ocean2"),
waveWidth = 10,
waveCount = Math.floor(window.innerWidth/waveWidth),
docFrag = document.createDocumentFragment();
for(var i = 0; i < waveCount; i++){
var wave = document.createElement("div");
wave.className += " wave2";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i/100) + "s";
}
ocean.appendChild(docFrag)
</script>
<script>
// make some waves.
var ocean = document.getElementById("ocean"),
waveWidth = 8,
waveCount = Math.floor(window.innerWidth/waveWidth),
docFrag = document.createDocumentFragment();
for(var i = 0; i < waveCount; i++){
var wave = document.createElement("div");
wave.className += " wave";
docFrag.appendChild(wave);
wave.style.left = i * waveWidth + "px";
wave.style.webkitAnimationDelay = (i/100) + "s";
}
ocean.appendChild(docFrag);
</script>
<<div><div class="_nljxa"><div class="_myci9"><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BLpo4ZOhpAs/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="But if you find a roof, take some time to soak it in." class="_icyx7" id="pImage_0" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14701189_952625004844249_8316927809033338880_n.jpg?ig_cache_key=MTM2MjgwMDE1OTQ5NDY3MjQyOA%3D%3D.2" style=""></div><!-- react-empty: 43 --><div class="_ovg3g"></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BLm2jBVBMeu/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="Yep, just keep walking" class="_icyx7" id="pImage_1" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14591043_194549520972462_5334281035817418752_n.jpg?ig_cache_key=MTM2MjAxNTgzODQ0NTgxNTcyNg%3D%3D.2" style=""></div><!-- react-empty: 51 --><div class="_ovg3g"></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BLhtqhChqKf/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="Walk on" class="_icyx7" id="pImage_2" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14727686_544101289125671_933909396923088896_n.jpg?ig_cache_key=MTM2MDU2OTM5NjIyOTQ4MTExOQ%3D%3D.2" style=""></div><!-- react-empty: 59 --><div class="_ovg3g"></div></div></a></div><div class="_myci9"><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BLfK2uWB_PP/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="This has to be the one time in my life I wish I could just slow down, and enjoy." class="_icyx7" id="pImage_3" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14624425_1788631384743193_8725802205916954624_n.jpg?ig_cache_key=MTM1OTg1MzM1MzU2Nzc3Nzc0Mw%3D%3D.2" style=""></div><!-- react-empty: 68 --><div class="_ovg3g"></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BLaIyUiBM4k/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="Gotta get to the point :)" class="_icyx7" id="pImage_4" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14487178_1847524635483834_7495431222508650496_n.jpg?ig_cache_key=MTM1ODQzNjg3OTk5NzEyODIyOA%3D%3D.2" style=""></div><!-- react-empty: 76 --><div class="_ovg3g"></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BLC1CF3hoHr/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="一步登天" class="_icyx7" id="pImage_5" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14574154_1184114164981282_8994048150779985920_n.jpg?ig_cache_key=MTM1MTg3NjA3ODM2ODg4MzE3OQ%3D%3D.2" style=""></div><!-- react-empty: 84 --><div class="_ovg3g"></div></div></a></div><div class="_myci9"><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BKyt_G5h_lz/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="Framed by a tree friend" class="_icyx7" id="pImage_6" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14369223_1775416609342202_490251971169615872_n.jpg?ig_cache_key=MTM0NzM0MTQ4NzM2NDg5NzEzOQ%3D%3D.2" style=""></div><!-- react-empty: 93 --><div class="_ovg3g"></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BJwZGcUBs6e/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="Climb on young ones, climb on" class="_icyx7" id="pImage_7" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/14063430_1857632387805425_836187554_n.jpg?ig_cache_key=MTMyODY3MjI4Mzk1NDY5NTgzOA%3D%3D.2" style=""></div><!-- react-empty: 101 --><div class="_ovg3g"></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BJHI8W_AHA9/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="Places are colorful,
People provide the meaning." class="_icyx7" id="pImage_8" src="https://scontent.cdninstagram.com/t51.2885-15/e35/c238.0.604.604/13736965_1054803604557221_1811002661_n.jpg?ig_cache_key=MTMxNzA2MDc0ODI0OTE2NTg4NQ%3D%3D.2.c" style=""></div><!-- react-empty: 109 --><div class="_ovg3g"></div></div></a></div><div class="_myci9"><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BG-zdCrKhnw/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="-Road Trip- *Check*" class="_icyx7" id="pImage_9" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13473349_604183796404176_1310963547_n.jpg?ig_cache_key=MTI3ODY4NTY0MDMyODM1NDI4OA%3D%3D.2" style=""></div><!-- react-empty: 118 --><div class="_ovg3g"></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BGqTus3Khm5/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="The ever changing ocean - the only constant that gives me comfort.
Flume - Intro (ft. Stalley)" class="_icyx7" id="pImage_10" src="https://scontent.cdninstagram.com/t51.2885-15/e15/c157.0.406.406/13381176_1686235744974705_394875275_n.jpg?ig_cache_key=MTI3MjkxNjYxNjgzNTM3MzQ5Nw%3D%3D.2.c" style=""></div><!-- react-empty: 126 --><div class="_ovg3g"></div></div><div class="_1lp5e"><div class="_cxj4a"><span class="_hrkr1 _soakw coreSpriteVideoIconDesktop">Video</span></div></div></a><a class="_8mlbc _vbtk2 _t5r8b" href="/p/BGnpWcBqhj5/?taken-by=krazykelbs"><div class="_22yr2"><div class="_jjzlb"><img alt="Growth - Endures - Indefinitely" class="_icyx7" id="pImage_11" src="https://scontent.cdninstagram.com/t51.2885-15/s640x640/sh0.08/e35/13388606_1122848887777514_1425218979_n.jpg?ig_cache_key=MTI3MjE2NzI4MTU4MzU5MzcyMQ%3D%3D.2" style=""></div><!-- react-empty: 137 --><div class="_ovg3g"></div></div></a></div></div><div class="_ikcuh"><div class="_4tedc"><iframe aria-hidden="true" class="_823eg" tabindex="-1"></iframe></div></div><div class="_pupj3"><a class="_oidfu" href="/krazykelbs/?max_id=925022963209214856">Load more</a></div></div>
</body>
</html>