-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
246 lines (195 loc) · 9.19 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Limelight&display=swap" rel="stylesheet">
</head>
<body>
<main> <!--main tag used for main content of a page-->
<!-- <div> - groups content, <section> - groups related content, <article> - groups independent, self-contained content
The next HTML5 element that adds semantic meaning and improves accessibility is the header tag. It's used to wrap introductory
information or navigation links for its parent tag and works well around content that's repeated at the top on multiple pages.
The header is meant for use in the body tag of your HTML document. It is different than the head element, which contains the page's title, meta information, etc.
-->
<header> <h1 id="h1">My Face</h1> </header>
<nav id="navbar"> <!-- nav is meant to wrap around the main navigation links in your page.-->
<ul>
<li><a href="#">sexy</a></li>
<li><a href="#">hot</a></li>
<li><a href="#">seductive</a></li>
</ul>
</nav>
<div class="star-1 stars"></div>
<div class="star-2 stars"></div>
<div class="balls" id="red"></div>
<div class="balls" id="blue"></div>
<div class="balls" id="green"></div>
<div class="make-moon">
</div>
<div class="heart-background">
</div>
<div class="make-heart">
</div>
<figure>
<a href="https://www.merriam-webster.com/dictionary/sexy" target="_blank"> <img src="images/me-small.jpg" class="thick-teal-border" alt="Me"> </a> <!--to apply two classes do class="class1 class2"-->
<br>
<figcaption>
This is my smexy face ya feel
</figcaption>
<!--HTML5 introduced the figure element and the related figcaption. Used together, these items wrap a visual
representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together
gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the figure.-->
</figure>
<audio controls>
<source src="audio/Etude 2, Tommy Shao.mp3" type="audio/mpeg">
</audio>
<h2 class="move-animation">ME</h2> <!--using css class-->
<div>
<p id="table-of-contents" class="teal-background"> <strong> <u><em><s>Table of Contents</s></em></u></strong></p> <!--strong tag to make it bold (font-weight:bold), u tag to underline(text-decorate:underline), em tag to italicize(font-style:italic), s tag for line-thrugh(text-decorate:line-through)-->
<ul>
<li> <a href="#smexy-face">Smexy Face</a> </li> <!--internal links-->
<li> <a href="#origins">Origins</a> </li>
<li> <a href="#phrases">Phrases</a> </li>
<li> <a href="#shao-industries">Shao Industries</a> </li>
<li> <a href="#rating">Rating</a> </li>
</ul>
</div>
</main>
<hr> <!--puts a line as a divider-->
<h3 class="striped-background" id=smexy-face>My smexy face:</h3>
<p>My smexy ass face is of full Taiwanese decent, the purest bloodline of the recent century.
My angles and jawlines are sharp enough to cut through the toughest wills
who pretend not to dig me
</p>
<p>Check out <a href="https://www.instagram.com/tommy.shao3/" accesskey="k">My irresistible presence</a></p> <!--accesskey attribute to specify a shortcut key to activate or bring
focus to an element. Adding an accesskey attribute can make navigation more efficient for keyboard-only users. HTML5 allows this attribute to be used on any element,
but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.-->
<hr>
<h3 class="teal-background" id=origins>Origins of smexy ass kingmamba shieeeee name:</h3>
<p>Origins of this mouth-watering nickname came in an eureka momment in math class
during senior year. It was true enlightenment.
</p>
<hr>
<h3 class="teal-background" id=phrases>Mind-shattering phrases:</h3>
<p>Dicc in da hand</p>
<p>Bobs ur uncle</p>
<p>Wakey wakey eggs and bakey</p>
<p>potato potatoe we're both in a shit ton of trouble</p>
<p>Disclaimer: these phrases are copyrighted by Shao Industries</p>
<hr>
<h3 class="teal-background" id=shao-industries>Shao Industries Brotherhood:</h3>
<ul>
<li>hot</li>
<li>diligent</li>
<li>smexy</li>
<li>creative</li>
<li>horny</li>
</ul>
<p>lads shafting each other</p>
<hr>
<h3 class="teal-background" id=rating>Rating</h3>
<form id="form" action="#"> <!--# is for dead link-->
<fieldset>
<legend tabindex="0">pick as many as you like rah rah:</legend>
<!--The fieldset tag surrounds the entire grouping of radio buttons to achieve this.
It often uses a legend tag to provide a description for the grouping, which screen
readers read for each choice in the fieldset element.-->
<!--The HTML tabindex attribute has three distinct functions relating to an element's keyboard focus. Is for keyboard users
When it's on a tag, it indicates that the element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.
Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as
the elements come in the HTML source markup. This same functionality can be given to other elements, such as div, span, and p, by placing a tabindex="0" attribute on them-->
<br>
<label for="drool-at-gainz"> <!--The for attribute on a label tag explicitly associates that label with the form control and is used by screen readers.-->
<input id="drool-at-gainz" value="drool-at-gainz" type="checkbox" name="desires">Drool at my gainz
</label>
<input id="caress-gainz" value="caress-gainz" type="checkbox" name="desires">
<label for="caress-gainz">Caress my shredded gainz</label>
<!--this also works, make sure the for attribute matches the id value of the input-->
<label for="hubby">
<input id="hubby" value="hubby" type="checkbox" name="desires"> Hubby me up
</label>
</fieldset>
<br>
<fieldset>
<legend tabindex="0">choose or despair:</legend>
<br>
<label for="0">
<input id="0" value="0" type="radio" name="number-rate"> 0
</label>
<label for="1">
<input id="1" value="1" type="radio" name="number-rate"> 1
</label>
<label for="2">
<input id="2" value="2" type="radio" name="number-rate"> 2
</label>
<label for="3">
<input id="3" value="3" type="radio" name="number-rate"> 3
</label>
<label for="4">
<input id="4" value="4" type="radio" name="number-rate"> 4
</label>
<label for="5">
<input id="5" value="5 "type="radio" name="number-rate"> 5
</label>
<label for="6">
<input id="6" value="6" type="radio" name="number-rate"> 6
</label>
<label for="7">
<input id="7" value="7" type="radio" name="number-rate"> 7
</label>
<label for="8">
<input id="8" value="8" type="radio" name="number-rate"> 8
</label>
<label for="9">
<input id="9" value="8" type="radio" name="number-rate"> 9
</label>
<label id= "10-rating" for="10">
<input id="10" value="8" type="radio" name="number-rate" checked> 10
</label>
</fieldset>
<br>
<input type="text" placeholder="guilty confessions" required> <!--required: requires user to enter a text before sumitting-->
<button id=confess type="submit">Confess</button>
<label for="pick-date">Go on a date rah rah! <time datetime="2021-06-30"> I'm free June 30th </time>:</label>
<input type="date" id="pick-date" name="date" required> <!--type date of input, is a calendar-->
<button type="submit">Pick</button>
</form>
<br>
<button id=cange-user>Change user</button>
<script src="scripts/main.js"></script>
<br>
<br>
<div id="flex-container">
<div id="box-1">
<p id="flex-left">strengths</p>
</div>
<div id="box-2">
<p id="flex-right">weaknesses</p>
</div>
</div>
<div class="container">
<div class="d1">1</div>
<div class="d2">king</div>
<div class="d3">mamba</div>
<div class="d4">4</div>
<div class="d5">5</div>
<div class="d6">6</div>
</div>
<br>
<div class="container2">
<div class="item1">header</div>
<div class="item2">advert</div>
<div class="item3">
<div class="itemOne">paragraph1</div>
<div class="itemTwo">paragraph2</div>
</div>
<div class="item4">footer</div>
</div>
<footer> <!--footer primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.-->
<p>Copyright Shao Industries @2001-2021</p>
</footer>
</body>
</html>