-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
157 lines (142 loc) · 6.95 KB
/
index.html
File metadata and controls
157 lines (142 loc) · 6.95 KB
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
<!-- needed for HTML5 (newest shiniest HTML standard) -->
<!DOCTYPE html>
<!-- defines the beginning of the HTML markdown. "lang='en'" is an element option, which we will discuss. -->
<html lang="en">
<!-- THE HEAD. -->
<!-- The head is where most of the predefinded "meta" data about your webpage lives. It can define the allowed character set, link stylesheets and scripts for the whole page, and much more! -->
<head>
<!-- Change this! What does it do? -->
<title>CHANGEME.yolo</title>
<!-- some fancy character rendering and viewport (browser window) specifications to make our lives easier -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- to use bootstrap stylesheets, we need the following link -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="styles.css">
<!-- these lines let us use the Javascript libraries for Bootstrap and jQuery, and they are included as a native part of this repo to limit 3rd-party script injection. Hooray! -->
<script src="./scripts/jquery.js"></script>
<script src="./scripts/bootstrap.js"></script>
</head>
<body>
<!-- THE BODY -->
<!-- The body is where you add page elements and content. It is the part of the file that makes your website unique and exciting! -->
<!-- 1st section-->
<div class="section-container">
<div class="section">
<h1 class="section-text">A Simple Demo: Hello World</h1>
</div>
</div>
<div class="spacer-small"></div>
<!-- 1st demo -->
<div>
<!-- What do you think the markup elements mean? (an element is anything defined by <></> syntax) -->
<h3>
Hello world!
</h3>
<p>
We are going to do great things together.
</p>
</div>
<!-- 2nd section -->
<div class="spacer"></div>
<div class="section-container">
<div class="section">
<h1 class="section-text">Bootstrap Demo</h1>
<h5 class="section-text">Resize your browser window to see the grid wrap differently for different screen sizes.</h5>
</div>
</div>
<div class="spacer-small"></div>
<!-- 2nd demo (kinda fancy) -->
<!-- We are using Bootstrap here, which is what the items saying 'class=""' are for. -->
<!-- Each bootstrap style is defined as a CLASS that we can apply to an ELEMENT. -->
<!-- As we will see later, we can define our own CSS classes and use them elsewhere! -->
<div class="container">
<div class="row">
<div class="col-md-6">
<!-- Here, we see an inline example of some CSS stylings. Can you guess what this element is going to look like before you see it? -->
<div class="row" style="background-color: red">
hello
</div>
<div class="row" style="background-color: yellow">
world
</div>
</div>
<div class="col-md-6">
<div class="row" style="background-color: green">
grid
</div>
<div class="row" style="background-color: blue">
view
</div>
</div>
</div>
</div>
<!-- 3rd section-->
<div class="spacer"></div>
<div class="section-container">
<div class="section">
<h1 class="section-text">jQuery + Image Demo</h1>
<h5 class="section-text">This section also utilizes CSS rules from a stylesheet and Bootstrap CSS rules.</h5>
</div>
</div>
<div class="spacer-small"></div>
<!-- 3rd demo (very fancy) -->
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: black">
<!-- What do you think is going on here? -->
<img class="fit-my-image" src="./site_content/wave_hello.jpg" alt="A friendly ocean wave, waving hello.">
</div>
<!-- WOT IN TARNATION does this do??? It's an empty element; why is it here??? -->
<div class="col-md-8" id="mystery">
</div>
</div>
</div>
<!-- Hmmmmmm.... mystery script! -->
<script>
$( "#mystery" ).load("./site_content/mystery.txt");
</script>
<!-- 4th section-->
<div class="spacer"></div>
<div class="section-container">
<div class="section">
<h1 class="section-text">Javascript Demo</h1>
<h5 class="section-text">The elements in this section utilize custom Javascript methods and routines to do interesting things.</h5>
</div>
</div>
<div class="spacer-small"></div>
<script src="./scripts/buttonsDoThings.js"></script>
<div class="container">
<div class="row">
<div class="col-md-4" style="background-color: red">
<button onClick="getNextMeme()" class="paddi-boi">This button will rotate through a set of images!</button>
<img href="" id="memes" class="fit-my-image">
</div>
<div class="col-md-4" style="background-color: green">
<div class="row">
<p class="paddi-boi light-bg">Click the button below to get a JavaScript alert in your window!</p>
</div>
<div class="row">
<button onclick="makeAlert()" class="paddi-boi">Click Me!</button>
</div>
</div>
<div class="col-md-4" style="background-color: blue">
<div class="row">
<p class="paddi-boi light-bg">Type content in the text box and watch it generate in the div below! The first section will show the unsanitized output, and the second section shows the sanitized output. Sanitizing form input can prevent malicious or accidental manipulation of your site.<br>To see an example of the difference, try pasting one of the following snippets:
<br>
<code><iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></code>
<br>or perhaps<br><code>IS IT WORKING YET</br> <img src="http://2.bp.blogspot.com/-x2_8ib6NEB0/Ur32TJiiheI/AAAAAAAAPiU/He_fZF97GDM/s1600/Oh-shit-Im-okay.gif"></code>
<br>or what about<br><code>CAUTION CAUTION <img onerror="alert('you got HACKED')" src/></code>
</p>
</div>
<textarea cols="20" rows="3" id="typeHere" type="text" placeholder="Type some things here!"></textarea>
<div class="paddi-boi light-bg">
<p><b>Unsanitized</b> output goes here:</p>
<p id="outputUnsanitized"></p>
</div>
</div>
</div>
</div>
<script src="./scripts/input.js"></script>
</body>
</html>