-
Notifications
You must be signed in to change notification settings - Fork 0
/
contact.html
132 lines (120 loc) · 6.52 KB
/
contact.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<meta name="title" content="Jung Tzen Liew's About Me">
<meta name="author" content="Jung Tzen Liew">
<meta name="keywords" content="About Me, University of California San Diego, Peanut Gallery">
<link rel="stylesheet" type="text/css" href="styles/style.css">
<title>Contact Me</title>
<style>
input[type="checkbox"]{
display: none;
}
</style>
</head>
<body>
<header class="header_container">
<div id="theme">
<label for="theme_switcher">
<input type="checkbox" id="theme_switcher" onclick="themeButton()">
<span class="theme_switch"></span>
</label>
</div>
<nav class="navigation">
<ul id="menu">
<li><a href="index.html">HOMEPAGE</a></li>
<li><a href="all_about_me.html">ABOUT ME</a></li>
<li><a href="documents.html">LET'S GET PROFESSIONAL</a></li>
<li><a href="contact.html" class="current_page">CONTACT ME</a></li>
</ul>
</nav>
</header>
<main>
<br>
<form class="suggestions" action="https://httpbin.org/post" method="POST">
<fieldset>
<label for="form_name">WHAT'S YOUR NAME?</label>
<input type="text" name="form_name" id="form_name" placeholder="Enter your name here..." pattern="[A-Za-z ]*" required><br>
<output for="form_name" id="name_error"></output><br>
<output for="form_name" id="name_info"></output><br>
<label for="email">WHAT'S YOUR EMAIL?</label>
<input type="email" name="email" id="email" placeholder="[email protected]" required><span></span><br>
<output for="email" id="email_error"></output><br>
<output for="email" id="email_info"></output><br>
<label for="comments">COMMENTS?</label>
<textarea type="text" name="comments" id="comments" placeholder="Comments should only contain typical characters (letters, numbers, spaces, and . ? ! , ' +)" rows="5" maxlength="200" required></textarea>
<output for="comments" id="comments_info"></output><br>
<output for="comments" id="comments_error"></output><br>
<label for="possible_bot"></label>
<input type="hidden" name="possible_bot" id="possible_bot" value="true">
<output for="possible_bot" id="possible_bot_error"></output>
<output for="possible_bot" id="possible_bot_info"></output>
<button class="submit" type="submit">SUBMIT</button>
</fieldset>
</form>
</main>
<script src="scripts/script.js"></script>
<script src="scripts/theme.js"></script>
</body>
</html>
<!--
<label for="outreach_input">HOW DID YOU FIND OUT ABOUT MY WEBSITE?</label>
<input list="outreach_options" id="outreach_input">
<datalist id="outreach_options">
<option value="Friend"></option>
<option value="Family"></option>
<option value="LinkedIn"></option>
<option value="Social Media"></option>
<option value="Referral"></option>
<option value="Other"></option>
</datalist>
<hr>
<label for="animal">WHAT KIND OF ANIMAL DO YOU THINK YOU ARE?</label>
<select id="animal">
<optgroup label="Reptile">
<option value="dino">Dinosaur</option>
<option value="croc">Crocodile</option>
<option value="lizard">Lizard</option>
<option value="snake">Snake</option>
<option value="turtle">Turtle</option>
</optgroup>
<optgroup label="Mammal">
<option value="elephant">Elephant</option>
<option value="big_cat">Big Cat</option>
<option value="hippo">Hippo</option>
<option value="dolphin">Dolphin</option>
<option value="monkey">Monkey</option>
</optgroup>
<optgroup label="Bird">
<option value="sparrow">Sparrow</option>
<option value="pigeon">Pigeon</option>
<option value="pelican">Pelican</option>
<option value="parrot">Parrot</option>
<option value="songbird">Songbird</option>
</optgroup>
<optgroup label="Amphibian">
<option value="frog">Frog</option>
<option value="toad">Toad</option>
<option value="salamander">Salamander</option>
<option value="newt">Newt</option>
<option value="Axolotl">Axolotl</option>
</optgroup>
<optgroup label="Fish">
<option value="shark">Shark</option>
<option value="flounder">Flounder</option>
<option value="salmon">Salmon</option>
<option value="goldfish">Goldfish</option>
<option value="sardine">Sardine</option>
</optgroup>
<optgroup label="Insect">
<option value="ant">Ant</option>
<option value="butterfly">Butterfly</option>
<option value="beetle">Beetle</option>
<option value="ladybug">Ladybug</option>
<option value="bee">Bee</option>
</optgroup>
<option value="other">My animal was not here :(</option>
</select>
-->