-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
156 lines (143 loc) · 7.82 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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Snowflakes</title>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<h1 class = "common_align">Snowflakes</h1>
<p id ="intro">Winter is my favorite season. One reason is because it's pretty amazing to watch snowflakes flutter throughout the air. Snowflakes can also snowball (<strong>pun intended!</strong>) into anything its builder wants to create. </p>
<img src = "16323322240_3760c674b2_m.jpg" alt = "Flickr - Benjamin Balázs (brenkee) - Snowflake / Hópihe">
<aside class = "common_align"><em>Thanks to <a href = "https://www.flickr.com/photos/brenkee/"> Benjamin Balázs (flickr: brenkee) </a> for the public domain photo of <a href = "https://www.flickr.com/photos/brenkee/16323322240/in/photolist-qSri1m-8ZjYoP-8Zo1hS-8Zo37L-C9LDTL-CrurWC-jAvMRD-8Zo1fq-8ZjYsD-8ZjYpt-8ZjYmK-8ZjYtk-8ZjWBp-8Zo1h5-8ZjWCz-q4vRow-8Zo3cq-8Zo1gq-8Zo38s-fqmcvD-CrusYY-SDnXMN-Fp1rjx-hn3fPY-6jDa78-wJs3rQ-SyoDpQ-drJ2Cm-roEmg8-odYEwg-w2Ytsm-x2DVfR-r8eSZW-Qucwmy-NTpppE-7CAu91-dyxoQA-dyrVpz-dyrVoP-dyrVqz-dyxoHj-dyrVsx-dyrVmM-dyxoSs-dyrVi2-SYuEdx-dyrVnH-dyrVjr-ohnCrd-jAJypJ"> Snowflake / Hópihe </a>!</em> </aside>
<h3 class = "common_align"> Commentary:</h3>
<p>Another site that goes into great detail about the snowflake is Wikipedia's <a href = "https://en.wikipedia.org/wiki/Snowflake">Snowflake article </a>.</p>
<div>
<h4 class = "common_align">Reasons why the Wikipedia site is superior compared with this site:</h4>
<ol>
<li>The Wikipedia site uses many of the same elements and tags that we learned in this past week's challenges, such as links, div, images, headings, and paragraphs, but their site is designed a lot better than this site. Wikipedia also incorporates other languages such as CSS to assist. This greatly enhances the overall look of their site.</li>
<li>The Wikipedia article lists information in sections and helps the user navigate through different sections via links. Meanwhile, this site lists all the information by automatically aligning them to the left of the page via paragraphs, so the information can seem cluttered.</li>
<li>The Wikipedia article on snowflakes contains a lot more information on snowflakes than I know.</li>
</ol>
</div>
<h4 class ="common_align">Optional Form:</h4>
<p>What was the coolest thing that you built with snow?</p>
<form action="form_submitted.html" method= "post">
<div>
<label>First Name:</label>
<input type ="text" name ="name">
</div>
<div>
<label>How long did it take to build?</label>
<select>
<option value ="option_1">1 to 3 hours</option>
<option value ="option_2">Over 3 hours</option>
<option value ="option_3">Don't remember</option>
</select>
</div>
<label>Description:</label>
<div>
<textarea rows ="10" cols="50"></textarea>
</div>
<button type="submit">Submit</button>
<em> Status: Unavailable | <a href = "form_submitted.html">Check Status Page</a></em>
</form>
<h4 class = "common_align">Additional References:</h4>
<p>In addition to the materials from the course, the following resources were used for information:</p>
<table border ="1">
<tr>
<th>Description</th>
<th>Links</th>
</tr>
<tr>
<td>W3Schools - CSS :visited Selector</td>
<td><a href="https://www.w3schools.com/cssref/sel_visited.asp">https://www.w3schools.com/cssref/sel_visited.asp</a>
</tr>
<tr>
<td>W3Schools - CSS background-image Property</td>
<td><a href="https://www.w3schools.com/cssref/pr_background-image.asp">https://www.w3schools.com/cssref/pr_background-image.asp</a>
</tr>
<tr>
<td>W3Schools - CSS Borders</td>
<td><a href="https://www.w3schools.com/css/css_border.asp">https://www.w3schools.com/css/css_border.asp</a>
</tr>
<tr>
<td>W3Schools - CSS display Property</td>
<td><a href="https://www.w3schools.com/cssref/pr_class_display.asp">https://www.w3schools.com/cssref/pr_class_display.asp</a>
</tr>
<tr>
<td>W3Schools - CSS Layout - Horizontal & Vertical Align</td>
<td><a href="https://www.w3schools.com/css/css_align.asp">https://www.w3schools.com/css/css_align.asp</a>
</tr>
<tr>
<td>W3Schools - CSS Margins</td>
<td><a href="https://www.w3schools.com/css/css_margin.asp">https://www.w3schools.com/css/css_margin.asp</a>
</tr>
<tr>
<td>W3Schools - CSS text-align Property</td>
<td><a href="https://www.w3schools.com/cssref/pr_text_text-align.asp">https://www.w3schools.com/cssref/pr_text_text-align.asp</a>
</tr>
<tr>
<td>W3Schools - HTML Color Picker</td>
<td><a href="https://www.w3schools.com/colors/colors_picker.asp">https://www.w3schools.com/colors/colors_picker.asp</a>
</tr>
<tr>
<td>W3Schools - HTML Encoding (Character Sets)</td>
<td><a href="https://www.w3schools.com/html/html_charset.asp">https://www.w3schools.com/html/html_charset.asp</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - CSS - padding</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/padding">https://developer.mozilla.org/en-US/docs/Web/CSS/padding</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - a</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - em</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - div</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - form</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - img</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - label</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - li</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - p</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - strong</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - table</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table</a>
</tr>
<tr>
<td>Mozilla MDN Documentation - HTML - Heading Elements</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements</a>
</tr>
<tr>
<td>Mozilla MDN - CSS - Using media queries</td>
<td><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries">https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries</a>
</tr>
</table>
<footer class = "common_align"><p>_ </p>Note: This site was created to practice HTML and CSS. </footer>
</body>
</html>