-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
261 lines (247 loc) · 10.8 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">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<!-- The Title of the Webpage. -->
<title>HTML Drills</title>
</head>
<body>
<!-- A Div wrapping the ENTIRE page. -->
<div>
<!-- A table containing column headers for month, day and year. -->
<section>
<table>
<thead>
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
</tr>
</thead>
<tbody>
<!-- A row for each day that you worked on these tasks. -->
<tr>
<!-- First Day -->
<td>June</td>
<td>5</td>
<td>2018</td>
</tr>
<tr>
<!-- Second Day -->
<td>June</td>
<td>10</td>
<td>2018</td>
</tr>
<tr>
<!-- Third Day -->
<td>July</td>
<td>15</td>
<td>2018</td>
</tr>
</tbody>
</table>
</section>
<!-- h1, h2, h3, h4, h5 and h6 tags containing some funny text. -->
<section>
<!-- h1 -->
<h1>Funny Lorem Ipsum.</h1>
<!-- h2 -->
<h2>Funny, funny Lorem Ipsum.</h2>
<!-- h3 -->
<h3>Funny, funny, funny Lorem Ipsum.</h3>
<!-- h4 -->
<h4>Funny, funny, funny, funny Lorem Ipsum.</h4>
<!-- h5 -->
<h5>Funny, funny, funny, funny, funny Lorem Ipsum.</h5>
<!-- A h6 tag containing either a copyright or trademark HTML symbol entity. -->
<h6>Funny, funny, funny, funny, funny, funny Lorem Ipsum. ©</h6>
</section>
<hr>
<div>
<!-- x6 paragraph tags, each with an unordered list containing at least x3 list items and an image. -->
<section>
<p>Hello.</p>
<!-- ...in x3 different languages; Spanish, French and German. -->
<ul>
<li>Hola.</li>
<li>Bonjour.</li>
<li>Hallo.</li>
</ul>
<a target="_blank" href="images/me.jpg">
<img src="images/me.jpg" alt="Yours truly." width="560px">
</a>
</section>
<section>
<p>My name is Matthew Campbell.</p>
<!-- ...in x3 different languages; Spanish, French and German. -->
<ul>
<li>Mi nombre es Matthew Campbell.</li>
<li>Je m'appelle Matthew Campbell.</li>
<li>Mein Name ist Matthew Campbell.</li>
</ul>
<a target="_blank" href="images/wedding.jpg">
<img src="images/wedding.jpg" alt="Olivia and I on our wedding day." width="560px">
</a>
</section>
<section>
<p>I'm married to my best friend, Olivia.</p>
<!-- ...in x3 different languages; Spanish, French and German. -->
<ul>
<li>Estoy casado con mi mejor amiga, Olivia.</li>
<li>Je suis marié à ma meilleure amie, Olivia.</li>
<li>Ich bin mit meiner besten Freundin Olivia verheiratet.</li>
</ul>
<a target="_blank" href="images/olivia.jpg">
<img src="images/olivia.jpg" alt="Olivia poses for a photo-op." width="560px">
</a>
</section>
<section>
<p>Together we live in Chattanooga, Tennessee.</p>
<!-- ...in x3 different languages; Spanish, French and German. -->
<ul>
<li>Juntos vivimos en Chattanooga, Tennessee.</li>
<li>Ensemble, nous vivons à Chattanooga, Tennessee.</li>
<li>Zusammen leben wir in Chattanooga, Tennessee.</li>
</ul>
<a target="_blank" href="images/bae.jpg">
<img src="images/bae.jpg" alt="Olivia trying to stay warm atop Lookout Mountain." width="560px">
</a>
</section>
<section>
<p>With our cat, Toast.</p>
<!-- ...in x3 different languages; Spanish, French and German. -->
<ul>
<li>Con nuestro gato, Toast.</li>
<li>Avec notre chat, Toast.</li>
<li>Mit unserer Katze, Toast.</li>
</ul>
<a target="_blank" href="images/toast.jpg">
<img src="images/toast.jpg" alt="Toast at the local watering hole." width="560px">
</a>
</section>
<section>
<p>Goodbye!</p>
<!-- ...in x3 different languages; Spanish, French and German. -->
<ul>
<li>¡Adiós!</li>
<li>Au revoir!</li>
<li>Auf Wiedersehen!</li>
</ul>
<a target="_blank" href="images/synthesizer.jpg">
<img src="images/synthesizer.jpg" alt="A KingKorg synthesizer basking in the sunlight." width="560px">
</a>
</section>
<hr>
</div>
<section>
<!-- Form containing inputs for first name, last name, email address and a submit button. -->
<form action="">
<input type="text" name="firstName" placeholder="First Name">
<input type="text" name="lastName" placeholder="Last Name">
<input type="email" name="email" placeholder="Email Address">
<input type="submit" value="Submit">
</form>
</section>
<hr>
<section>
<!-- An ordered list containing at least x5 things you're excited to learn about in Covalence. -->
<h3>5 Things I'm Excited to Learn About in Covalence</h3>
<ol>
<!-- #01 -->
<li>User Interface (UI) & User Experience (UX) Design</li>
<!-- #02 -->
<li>Responsive Web Design</li>
<!-- #03 -->
<li>React Native</li>
<!-- #04 -->
<li>Database Management</li>
<!-- #05 -->
<li>Back-End Development Technologies</li>
</ol>
<!-- An unordered list containing at least x5 interesting facts about you. -->
<h3>5 Interesting Things About Me</h3>
<ul>
<!-- #01 -->
<li>I play the drums.</li>
<!-- #02 -->
<li>I really, really love pizza.</li>
<!-- #03 -->
<li>I lost one of my front two teeth in the 4th grade.</li>
<!-- #04 -->
<li>I remodeled my in-laws staircase (all thanks to YouTube).</li>
<!-- #05 -->
<li>I can fix just about anything (with a sufficient amount of Google searches).</li>
</ul>
</section>
<hr>
<section>
<!-- An anchor tag linking to a funny YouTube video. -->
<a target="_blank" href="https://www.youtube.com/watch?v=TfE93xON8jk">SNL Debbie Downer: Disney World</a>
</section>
<hr>
<section>
<!-- A div tag that wraps an h1 tag containing text that is your favorite movie. -->
<div>
<h1>
<i>Interstellar</i>
</h1>
<!-- A paragraph tag containing a description/plot of the movie (no spoilers, please). -->
<p>
Earth's future has been riddled by disasters, famines, and droughts. There is only one way to ensure mankind's survival:
Interstellar travel.
<br> A newly discovered wormhole in the far reaches of our solar system allows a team of astronauts to go
where no man has gone before...
</p>
<!-- An image of the movie poster. -->
<img src="https://i.pinimg.com/564x/6d/c9/c9/6dc9c9d34bd64ba13d01a2c8efe924be.jpg" alt="Interstellar Movie Poster" width="560px">
<!-- An unordered list containing the cast of the movie. -->
<h3>Cast</h3>
<ul>
<li>Matthew McConaughey as Joseph "Coop" Cooper</li>
<li>Anne Hathaway as Dr. Amelia Brand</li>
<li>Jessica Chastain as Murphy "Murph" Cooper </li>
<li>Mackenzie Foy as Young Murphy</li>
<li>Ellen Burstyn as Elderly Murphy</li>
<li>Matt Damon as Dr. Mann</li>
<li>John Lithgow as Donald</li>
<li>Michael Caine as Professor John Brand</li>
<li>Casey Affleck as Tom Cooper </li>
<li>Timothée Chalamet as Young Tom</li>
<li>Wes Bentley as Dr. Doyle</li>
<li>Bill Irwin as TARS (Voice and Puppetry) and CASE (Puppetry)</li>
<li>Josh Stewart as CASE (Voice)</li>
<li>Topher Grace as Getty</li>
</ul>
<!-- An unordered list containing the release date, budget and box office sale stats. -->
<ul>
<li>
<u>Release Date</u>
</li>
<ul>
<li>October 26, 2014 (China)</li>
<li>November 5, 2014 (United States)</li>
<li>November 7, 2014 (United Kingdom)</li>
</ul>
<li>
<u>Budget</u>
</li>
<ul>
<li>$165, 000, 000 (USD)</li>
</ul>
<li>
<u>Box Office Sales</u>
</li>
<ul>
<li>$677, 500, 000 (USD)</li>
</ul>
</ul>
<!-- Embedded trailer of the film via YouTube. -->
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/2LqzF5WauAw?rel=0&showinfo=0" frameborder="0"
allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>
</section>
</div>
</body>
</html>