-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
156 lines (156 loc) · 5.85 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
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 lang="en">
<head>
<title>MGHMay</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.0/css/all.css">
<link rel="stylesheet" href="./resources/styles.css">
<link rel="icon" type="image/x-icon" href="./resources/images/favicon-16x16.png">
<script src="https://kit.fontawesome.com/62bcea50ce.js" crossorigin="anonymous"></script>
<script src="./resources/jquery-3.6.0.js"></script>
</head>
<body>
<div class="contact-page grid wrapper">
<nav id="navbar">
<ul>
<li class="top-fade right-fade"><a href="./index.html">Welcome</a></li>
<li class="top-fade" ><a href="#projects">Projects</a></li>
<li class="top-fade"><a href="#about">About</a></li>
<li class="top-fade right-fade"><a href="./contact.html">Contact</a></li>
</ul>
</nav>
<header class = "light-text dark-background contact-header">
<h1>MGHMay design</h1>
<p class = "tag">Leave your details in the form below and I'll get back to you as soon as possible.</p>
</header>
<main class = "grid">
<section class = "light-text dark-background form">
<form class="survey-container" id="survey-form" action = "" method = "post">
<div class="form-group">
<label id="first-name-label" for = "first-name" class = "bold">First name</label>
<input
type="text"
name="first-name"
id="first-name"
class="form-control"
placeholder="Enter your first name"
required
/>
</div>
<div class="form-group">
<label id="last-name-label" for = "last-name" class = "bold">Last name</label>
<input
type="text"
name="last-name"
id="last-name"
class="form-control"
placeholder="Enter your last name"
required
/>
</div>
<div class="form-group">
<label id="email-label" for = "email" class = "bold">Email</label>
<input
type="email"
name="email"
id="email"
class="form-control"
placeholder="Enter your email address here"
required
/>
</div>
<div class="form-group" id="collaborate">
<p class = "bold">Are you interested in building a website?</p>
<label for = "build-site" >
<input
name="build-site"
id = 'yes'
class = "input-radio"
type="radio"
value="yes"
>Yes, I am!
</label>
<br>
<label for = "build-site" >
<input
name="build-site"
id = 'no'
class = "input-radio"
type="radio"
value="no"
>I'd like to talk to you about something else!
</label>
</div>
<div class="form-group" id="what-project" >
<p class = "bold">
What are you interested in working on together?
</p>
<select
id="dropdown"
name="interest"
class="form-control"
>
<option disabled selected value>
Select what to work on.
</option>
<option value="commerce">Commerce site</option>
<option value="personal">Personal site or blog</option>
<option value="form">Survey forms</option>
<option value="game">Javascript games</option>
<option value="other">Other</option>
</select>
</div>
<div class="form-group" id = "other-option">
<label id="other" for = "other" class = "bold">What kind of project did you have in mind?</label>
<input
type="text"
name="other"
id="otherSiteOption"
class="form-control"
placeholder = "Enter the project here"
min = "5"
max = "25"
required
/>
</div>
<div class="form-group" id = "what-talk-about">
<p class = "bold">What would you like to talk about?</p>
<textarea id="talkAbout"
name="talkAbout"
min="100"
max="500"
placeholder="Enter your ideas here."></textarea>
</div>
<div class="form-group" id = "further-comments">
<p class = "bold">If you have any further comments please leave them below.</p>
<textarea id="comments"
name="comment"
min="100"
max="500"
placeholder="Enter comments here."></textarea>
</div>
<div class="form-group">
<button type="submit"
id="submit" class = "bold">Submit
</button>
</div>
</form>
</section>
</main>
<footer role="contentinfo" class = "light-text dark-background">
Copyright © Mathew May 2022
<br>
Device icons made by
<a href="https://www.flaticon.com/authors/xnimrodx" title="xnimrodx">
xnimrodx
</a>
from
<a href="https://www.flaticon.com/" title="Flaticon">
www.flaticon.com
</a>
</footer>
</div>
<script src="./resources/script.js"></script>
</body>
</html>