-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontact.html
184 lines (174 loc) · 11.9 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
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us - EatMORE</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="styles/main.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="#">EatMORE</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
About
</a>
<ul class="dropdown-menu bg-dark" aria-labelledby="navbarDropdown">
<li><a class="nav-link" href="index.html#about">About Us</a></li>
<li><a class="nav-link" href="index.html#our-team">Team</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="index.html#menu">Menu</a>
</li>
<li class="nav-item">
<a class="nav-link" href="drinks.html">Drinks</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="contact.html">Contact Us</a>
</li>
</ul>
<button id="call-btn" type="button" class="rounded-pill call-btn"><a id="tel" href="tel:+26461000000">+264-61-000-000</a><span class="call-icon"><img src="images/phone.svg" class="img-fluid phone-icon"></span></button>
</div>
</div>
</nav>
<section class="container form-container justify-content-center my-5 p-5">
<div class="text-center">
<h2>Get in touch</h2>
<p class="lead">Questions? Do not hesitate to contact us.</p>
</div>
<div class="row justify-content-center my-3">
<div class="col-lg-6">
<form action="">
<div class="form-floating my-3">
<input type="text" id="name" name="name" class="form-control" placeholder="e.g Jane">
<label for="name" class="mx-1 form-label">Name:</label>
</div>
<div class="form-floating my-3">
<input type="email" id="email" name="email" class="form-control" placeholder="e.g [email protected]">
<label for="email" class="mx-1 form-label">Email:</label>
</div>
<div class="form-floating my-3">
<input type="text" id="contact" name="contact" class="form-control" placeholder="e.g 0810000000">
<label for="contact" class="mx-1 form-label">Contact:</label>
</div>
<div class="text-center form-floating my-3">
<textarea class="form-control" name="book-msg" style="height:150px" id="book-msg" placeholder="Write a message"></textarea>
<label for="book-msg">Write a message</label>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</div>
</div>
</section>
<section id="footer" class="bg-dark text-light">
<div class="row m-auto pt-3 px-5">
<div class="col-lg-6">
<div>
<h3>Subscribe to our newsletter</h3>
<form>
<div class="input-group">
<input type="email" class="form-control" placeholder="e.g [email protected]" aria-label="Recipient's email" aria-describedby="button-addon2">
<button class="btn btn-outline-secondary" type="submit" id="button-addon2" style="background:black !important; border-color:black !important;">Subscribe</button>
</div>
</form>
</div>
<div class="location pt-lg-5 pt-4">
<h3>We are situated at</h3>
<p>Lorem ipsum dolor sit amet, Windhoek</p>
</div>
</div>
<div class="col col-lg-6 px-lg-5 justify-content-center ">
<div class="operate-time-container">
<h3>Operting hours</h3>
<div class="d-flex">
<span class="date">
Monday - Thursday
</span>
<span class="time ms-auto">
10:00 - 21:00
</span>
</div>
<div class="d-flex">
<span class="date">
Friday - Saturday
</span>
<span class="time ms-auto">
10:00 - 23:00
</span>
</div>
<div class="d-flex">
<span class="date">
Sunday
</span>
<span class="time ms-auto">
10:00 - 22:00
</span>
</div>
</div>
<div class="socials d-flex justify-content-center pt-lg-5 pt-4">
<span class="facebook px-2"><a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-facebook" viewBox="0 0 16 16">
<path d="M16 8.049c0-4.446-3.582-8.05-8-8.05C3.58 0-.002 3.603-.002 8.05c0 4.017 2.926 7.347 6.75 7.951v-5.625h-2.03V8.05H6.75V6.275c0-2.017 1.195-3.131 3.022-3.131.876 0 1.791.157 1.791.157v1.98h-1.009c-.993 0-1.303.621-1.303 1.258v1.51h2.218l-.354 2.326H9.25V16c3.824-.604 6.75-3.934 6.75-7.951z"/>
</svg>
</a></span>
<span class="instagram px-2"><a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-instagram" viewBox="0 0 16 16">
<path d="M8 0C5.829 0 5.556.01 4.703.048 3.85.088 3.269.222 2.76.42a3.917 3.917 0 0 0-1.417.923A3.927 3.927 0 0 0 .42 2.76C.222 3.268.087 3.85.048 4.7.01 5.555 0 5.827 0 8.001c0 2.172.01 2.444.048 3.297.04.852.174 1.433.372 1.942.205.526.478.972.923 1.417.444.445.89.719 1.416.923.51.198 1.09.333 1.942.372C5.555 15.99 5.827 16 8 16s2.444-.01 3.298-.048c.851-.04 1.434-.174 1.943-.372a3.916 3.916 0 0 0 1.416-.923c.445-.445.718-.891.923-1.417.197-.509.332-1.09.372-1.942C15.99 10.445 16 10.173 16 8s-.01-2.445-.048-3.299c-.04-.851-.175-1.433-.372-1.941a3.926 3.926 0 0 0-.923-1.417A3.911 3.911 0 0 0 13.24.42c-.51-.198-1.092-.333-1.943-.372C10.443.01 10.172 0 7.998 0h.003zm-.717 1.442h.718c2.136 0 2.389.007 3.232.046.78.035 1.204.166 1.486.275.373.145.64.319.92.599.28.28.453.546.598.92.11.281.24.705.275 1.485.039.843.047 1.096.047 3.231s-.008 2.389-.047 3.232c-.035.78-.166 1.203-.275 1.485a2.47 2.47 0 0 1-.599.919c-.28.28-.546.453-.92.598-.28.11-.704.24-1.485.276-.843.038-1.096.047-3.232.047s-2.39-.009-3.233-.047c-.78-.036-1.203-.166-1.485-.276a2.478 2.478 0 0 1-.92-.598 2.48 2.48 0 0 1-.6-.92c-.109-.281-.24-.705-.275-1.485-.038-.843-.046-1.096-.046-3.233 0-2.136.008-2.388.046-3.231.036-.78.166-1.204.276-1.486.145-.373.319-.64.599-.92.28-.28.546-.453.92-.598.282-.11.705-.24 1.485-.276.738-.034 1.024-.044 2.515-.045v.002zm4.988 1.328a.96.96 0 1 0 0 1.92.96.96 0 0 0 0-1.92zm-4.27 1.122a4.109 4.109 0 1 0 0 8.217 4.109 4.109 0 0 0 0-8.217zm0 1.441a2.667 2.667 0 1 1 0 5.334 2.667 2.667 0 0 1 0-5.334z"/>
</svg>
</a></span>
<span class="twitter px-2"><a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" class="navbar-nav-svg d-inline-block align-text-top" viewBox="0 0 512 416.32" role="img">
<title>Twitter</title>
<path fill="white" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"></path>
</svg>
</a></span>
<span class="linkedin px-2"><a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-linkedin" viewBox="0 0 16 16">
<path d="M0 1.146C0 .513.526 0 1.175 0h13.65C15.474 0 16 .513 16 1.146v13.708c0 .633-.526 1.146-1.175 1.146H1.175C.526 16 0 15.487 0 14.854V1.146zm4.943 12.248V6.169H2.542v7.225h2.401zm-1.2-8.212c.837 0 1.358-.554 1.358-1.248-.015-.709-.52-1.248-1.342-1.248-.822 0-1.359.54-1.359 1.248 0 .694.521 1.248 1.327 1.248h.016zm4.908 8.212V9.359c0-.216.016-.432.08-.586.173-.431.568-.878 1.232-.878.869 0 1.216.662 1.216 1.634v3.865h2.401V9.25c0-2.22-1.184-3.252-2.764-3.252-1.274 0-1.845.7-2.165 1.193v.025h-.016a5.54 5.54 0 0 1 .016-.025V6.169h-2.4c.03.678 0 7.225 0 7.225h2.4z"/>
</svg>
</a></span>
<span class="youtube px-2"><a href="#">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" fill="white" class="bi bi-youtube" viewBox="0 0 16 16">
<path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.007 2.007 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.007 2.007 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31.4 31.4 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.007 2.007 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A99.788 99.788 0 0 1 7.858 2h.193zM6.4 5.209v4.818l4.157-2.408L6.4 5.209z"/>
</svg>
</a></span>
</div>
</div>
</div>
<div class="row" style="margin:0 !important">
<div class="logo text-center p-0">
<a class="navbar-brand" href="#" style="color:white !important"><small>EatMORE</small></a>
</div>
</div>
<div class="row text-center" style="margin:0 !important">
<p style="border-top:1px solid white">Copyright © 2022 - EatMORE | Design by <a href="">Roberto Smith</a></p>
</div>
</section>
<script src="bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="scripts/jquery.js"></script>
<script async>
var call_btn = document.getElementById("call-btn");
call_btn.addEventListener("mouseover", () => {
document.getElementById("tel").style = "color:white";
})
call_btn.addEventListener("mouseout", () => {
document.getElementById("tel").style = "color:#212529";
})
</script>
</body>
</html>