-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
170 lines (157 loc) · 6.21 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
<!DOCTYPE html>
<html lang="en">
<head> <!--Title of tab in browser-->
<meta charset="UTF-8">
<title>Profile | Olivia Jardine</title>
<style>
body {
background-color: #ede0e6;
color: black;
}
</style>
</head>
<body>
<header>
<h1>Olivia Jardine</h1> <!--biggest-->
<hr> <!--horizontal rule-->
<style>
ul{list-style-type: none;}
</style>
<nav aria-labelledby="contents">
<h2 id="contents">Contents</h2>
<ul>
<li>
<aside>
<details>
<summary>
<a href="#about">About Me</a> <!--anchor # shows in web address-->
</summary>
<ul>
<li>
<a href="#Photos">Photos</a>
</li>
</ul>
<ul>
<li>
<a href="#Biography">Biography</a>
</li>
</ul>
</details>
</aside>
</li>
<li>
<aside>
<details>
<summary>
<a href="#goal">My Goals</a>
</summary>
</details>
</aside>
</li>
</ul>
</nav>
</header>
<main>
<article id="about">
<h2>About Me</h2>
<section>
<h3 id="Photos">Photos</h3>
<figure>
<img src="img/uw.heic" alt="UW" title="University of Washington!"
width="423" height="564" loading="lazy">
<figcaption>
Beautiful University of Washington
</figcaption>
</figure>
<figure>
<img src="img/mt_rainer.HEIC" alt="Mt. Rainier" title="Mt. Rainier"
width="304" height="402" loading="lazy">
<figcaption>
A Sunny Snowy Day Trip to Mount. Rainier, Washington
</figcaption>
</figure>
<figure>
<img src="img/camping.HEIC" alt="camping" title="Mt. Rainier"
width="393" height="524" loading="lazy">
<figcaption>
The Woody Adventure on Mount. Rainier
</figcaption>
</figure>
</section>
<section>
<h3 id="Biography">Biography</h3>
<p>#MadeInChina: Small baby me was born in China, but within
6 months, I was adopted by my mom and dad and became an American.
Raised in Seattle, Washington, I enjoy exploring the ins and outs
of the big city. The abundance of sites, activies, food, and
beautiful nature has and will always carry my interest and
enjoyment. I would consider myself an curious person as I like
to try new things. This has led to my hobbies that include
creating art, going on walks, coding, listening to music, writing,
and quite frankly, anything that peaks my interest.
</p> <!--paragraph-->
</section>
</article>
<article id="goal">
<h2>My Goals</h2>
<p>As a person, I obviously hope to be successful, but more
importantly, I hope to enjoy all the steps up to that point.
From different experiences, I see myself growing as a person for
the betterment of my personal self but also for the people and
society around me. As for my career goals, I plan to become
a member and contributor in the world of technology. I could be
a software engineer, website designer, game or app developer, or
wherever I am drawn to.
</p>
</article>
</main>
<hr>
<article id="contact">
<h2>Contact Me</h2>
<form action="https://httpbin.org/get" method="get">
<fieldset>
<legend><strong>Personal Info</strong></legend>
<p>
<label for="firstName">First Name:</label>
<input type="text" name="firstName"
id="firstName" placeholder="Enter" autocomplete="on"
required>
</p>
<p>
<label for="lastName">Last Name:</label>
<input type="text" name="lastName"
id="lastName" placeholder="Enter" autocomplete="on"
required>
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email"
id="email" placeholder="Enter" required>
</p>
<label for="phone">Phone Number (optional):</label>
<input type="tel" name="phone"
id="phone" placeholder="5555555555"
pattern="[0-9]{3}[0-9]{3}[0-9][4]">
</p>
<br>
<label for="message">Additional Note (optional):</label>
<br>
<textarea name="nessage" id="message" cols="30" rows="10"
placeholder="Typer your message here..."></textarea>
</fieldset>
<br>
<button type="submit" formaction="after_submit.html" formmethod="submit">Submit</button>
<button type="submit" formaction="https://httpbin.org/post" formmethod="post">Post</button>
<button type="reset">Reset</button>
</form>
</article>
<footer>
<p>
<<< © <a href="about_me.html">Olivia Jardine</a> >>>
</p>
<p>
<a href="#">Back to Top</a>
</p>
</footer>
</body>
</html>