forked from paul-ooi/SeasoningShack
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
171 lines (168 loc) · 7.22 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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Contact Us -Seasoning Shack</title>
<link rel="stylesheet" href="CSS/header-footer-style.css">
<link rel="stylesheet" href="CSS/general.css">
<link rel="stylesheet" href="CSS/contact.css">
</head>
<body>
<header class="large">
<nav id="main-nav">
<ul>
<li><a href="menu.html">menu</a></li>
<li><a href="specials.html">specials</a></li>
<li><a href="locations.html">locations</a></li>
<li><a href="event-bookings.html">event booking</a></li>
<li><a href="about-us.html">about</a></li>
<li><a href="contact.html">contact</a></li>
</ul>
</nav>
<div id="company-branding"><a href="index.html"><img src="Logo/logo.svg" id="logo" alt="seasoning shack logo"/></a>
<h2><a href="index.html">seasoning shack</a></h2>
</div>
</header>
<div class="wrapper">
<!-- MAIN CONTENTS START FROM HERE -->
<main class="centre contact">
<h1 class="centre">Contact Us</h1>
<div class="flex-container">
<!-- LOCATION ANNEX -->
<section class="location cenre">
<h2 class=hidden>Gereral Contact Information</h2>
<div class="location-detail">
<img src="images/contact-front-annex.png" alt="image of the entrance">
<cite>Photo from https://www.pexels.com/photo/</cite>
<h3>Annex</h3>
<ul>
<li id="annex-hours"></li>
<li>Address: 15 Bedford Road, Toronto, ON</li>
<li>Phone: 1-416-123-4567</li>
</ul>
</div>
<div class="location-detail">
<img src="images/contact-front-kensington.png" alt="image of the entrance">
<cite>Photo from https://www.pexels.com/photo/</cite>
<h3>Kensinton</h3>
<ul>
<li id="kensington-hours"></li>
<li>Address: 199 Augusta Avenue, Toronto, ON</li>
<li>Phone: 1-416-987-6543</li>
</ul>
</div>
</section>
<!-- CONTACT FORM -->
<section class="contact-form">
<h2 class="hidden"> Contact form</h2>
<form id="contact-id" name="contact_nm" action="#" method="post">
<label for="fn">First Name</label>
<span id="fn-err"></span>
<div>
<input id="fn" type="text" placeholder="Your first name...">
</div>
<label for="ln">Last Name</label>
<span id="ln-err"></span>
<div>
<input id="ln" type="text" placeholder="Your last name...">
</div>
<label for="phone">Phone Number</label>
<span id="phone-err"></span>
<div>
<input id="phone" type="text" placeholder="+1-123-456-7890">
</div>
<label for="email">Email Address</label>
<span id="email-err"></span>
<div>
<input id="email" type="text" placeholder="Your email address...">
</div>
<label for="subject">How can we help you?</label>
<span id="subject-err"></span>
<div>
<select id="subject">
<option value="default">-- Select an option --</option>
<option value="location">Location and hours</option>
<option value="booking">Event booking</option>
<option value="services">Our foods and services</option>
<option value="careers">Careers</option>
<option value="others">Others</option>
</select>
<div id="subject-suggestion"></div>
</div>
Would you like to receive special promotions from us?
<div>
<input type="checkbox" id="promotion"><label for="promotion">Yes, I would like to receive promotional emails.</label>
</div>
<label for="msg">Message</label>
<span id="msg-err"></span>
<div>
<textarea id="msg" placeholder="Enter your message..."></textarea>
</div>
<div>
<input type="submit" id="submit" value="SUBMIT">
<div>
<span id="submit-err"></span>
</div>
</div>
</form>
<div id="confirmation">
<div>Thank you. Your message has been submitted.</div>
<div>
Name: <span id="conf-nm"></span>
</div>
<div>
Phone: <span id="conf-phone"></span>
</div>
<div>
Email address: <span id="conf-email"></span>
</div>
<div>
Subject: <span id="conf-subject"></span>
</div>
<div>
Promotional email: <span id="conf-promotion"></span>
</div>
<div>
Message: <div id="conf-msg"></div>
</div>
</div>
</section>
</div>
</main>
<!-- MAIN CONTENTS TILL HERE -->
<footer>
<section id="social-media">
<h2 class="hidden">Social Media Icons</h2>
<div class="social" id="fbook"><a href="http://www.facebook.com"><img src="images/social-icons/facebook.png" alt="Like and Follow us on Facebook" title="Like and Follow us on Facebook"/></a></div>
<div class="social" id="twitter"><a href="http://www.twitter.com"><img src="images/social-icons/twitter.png" alt="Follow us on Twitter" title="Follow us on Twitter"/></a></div>
<div class="social" id="instagram"><a href="http://www.instagram.com"><img src="images/social-icons/instagram.png" alt="Follow us on Instagram" title="Follow us on Instagram"/></a></div>
<div class="social" id="google-plus"><a href="http://plus.google.com"><img src="images/social-icons/google-plus.png" alt="Follow us on Google+" title="Follow us on Google+"/></a></div>
</section>
<nav>
<ul>
<li><a href="menu.html">menu</a></li>
<li><a href="specials.html">specials</a></li>
<li><a href="locations.html">locations</a></li>
<li><a href="event-bookings.html">event booking</a></li>
<li><a href="about-us.html">about</a></li>
<li><a href="contest.html">contest</a></li>
<li><a href="careers.html">careers</a></li>
<li><a href="gift-cards.html">gift cards</a></li>
<li><a href="contact.html">contact</a></li>
<li><a href="sitemap.html">sitemap</a></li>
</ul>
</nav>
<div id="copyright-privacy">
<ul>
<li><a href="#">Privacy</a></li>
<li><a href="#">Terms of Use</a></li>
</ul>
© Seasoning Shack <span id="copyright-year">2017</span>
</div>
<img class="background" src="images/pexels-photo-672046.jpg" alt="spices on worksurface"/>
</footer>
</div>
<script src="JavaScript/header-footer.js"></script>
<script src="JavaScript/contact.js"></script>
</body>
</html>