-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbooking.html
185 lines (185 loc) · 8.71 KB
/
booking.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
185
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Booking Page | Elijah.dev</title>\
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="images/man.png" loading="lazy"/>
<!-- Google Font -->
<link href="https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
<!-- CSS Libraries -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="lib/flaticon/font/flaticon.css" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"
rel="stylesheet"
/>
</head>
<body>
<nav class="navbar">
<h3 class="logo">Elijah.dev</h3>
<ul id="sidemenu" class="menu-list">
<div class="icon cancel-btn">
<i class="fa-solid fa-xmark"></i>
</div>
<li><a href="index.html">Home</a></li>
<button class="booking-btn">Book Now</button>
<div class="appearance" id="theme-toggle">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 1.75V3.25M12 20.75V22.25M1.75 12H3.25M20.75 12H22.25M4.75216 4.75216L5.81282 5.81282M18.1872 18.1872L19.2478 19.2478M4.75216 19.2478L5.81282 18.1872M18.1872 5.81282L19.2478 4.75216M16.25 12C16.25 14.3472 14.3472 16.25 12 16.25C9.65279 16.25 7.75 14.3472 7.75 12C7.75 9.65279 9.65279 7.75 12 7.75C14.3472 7.75 16.25 9.65279 16.25 12Z" stroke-width="1.5" stroke-linecap="round" class="sun"/>
<path d="M2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C16.7154 21.25 20.6068 17.7216 21.1778 13.161C20.1198 13.8498 18.8566 14.25 17.5 14.25C13.7721 14.25 10.75 11.2279 10.75 7.5C10.75 5.66012 11.4861 3.99217 12.6799 2.77461C12.4554 2.7583 12.2287 2.75 12 2.75C6.89137 2.75 2.75 6.89137 2.75 12Z" stroke-width="1.5" stroke-linejoin="round" class="moon"/>
</svg>
</div>
</ul>
<div class="icon menu-btn">
<i class="fa-solid fa-bars"></i>
</div>
</nav>
<!-- Price Start -->
<div class="price">
<div class="grid2"></div>
<div class="container">
<div class="section-header text-center">
<p>Website Plan</p>
<h2>Choose Your Plan</h2>
</div>
<div class="row">
<div class="col-md-4">
<div class="price-item">
<div class="price-header">
<h3>Basic Website</h3>
<h2><span>$</span><strong>300</strong><span>.00</span></h2>
</div>
<div class="price-body">
<ul>
<li><i class="far fa-check-circle"></i> Up to 5 pages (Home, About, Menu/Services, Contact)</li>
<li><i class="far fa-check-circle"></i> Mobile-friendly design</li>
<li><i class="far fa-check-circle"></i> Social media links</li>
<li><i class="far fa-check-circle"></i> Contact form</li>
<li><i class="far fa-check-circle"></i> Perfect for small businesses and local shops.</li>
</ul>
</div>
<div class="price-footer">
<a class="btn btn-custom" href="booking.html">Book Now</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="price-item featured-item">
<div class="price-header">
<h3>Custom Website</h3>
<h2><span>$</span><strong>1400</strong><span>.00</span></h2>
</div>
<div class="price-body">
<ul>
<li><i class="far fa-check-circle"></i> Custom design and functionality</li>
<li><i class="far fa-check-circle"></i> Advanced SEO optimization</li>
<li><i class="far fa-check-circle"></i> Integration with third-party services</li>
<li><i class="far fa-check-circle"></i> Ongoing support and maintenance</li>
<li><i class="far fa-check-circle"></i> Responsive design for all devices</li>
<li><i class="far fa-check-circle"></i> Content management system (CMS)</li>
<li><i class="far fa-check-circle"></i> Performance Optimization</li>
<li><i class="far fa-check-circle"></i> Security Enhancements</li>
<li><i class="far fa-check-circle"></i> Analytics and Reporting</li>
<li><i class="far fa-check-circle"></i> Custom Forms and User Interactions</li>
</ul>
</div>
<div class="price-footer">
<a class="btn btn-custom" href="booking.html">Book Now</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="price-item">
<div class="price-header">
<h3>E-Commerce Website</h3>
<h2><span>$</span><strong>800</strong><span>.00</span></h2>
</div>
<div class="price-body">
<ul>
<li><i class="far fa-check-circle"></i> Online store with secure payment options</li>
<li><i class="far fa-check-circle"></i> Product catalog with categories</li>
<li><i class="far fa-check-circle"></i> Mobile and SEO-friendly</li>
<li><i class="far fa-check-circle"></i> Sell your products online with ease.</li>
<li><i class="far fa-check-circle"></i> Has everything the Basic Website Offers</li>
</ul>
</div>
<div class="price-footer">
<a class="btn btn-custom" href="booking.html">Book Now</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Price End -->
<section id="contact" class="contactres">
<div class="container-fluid">
<div class="content-container">
<div class="contact-box">
<h3 class="header">CONTACT</h3>
<h1 class="sub-header">Let's dive in and have a great chat! 🎉</h1>
<div class="contact-info">
<div class="contact-card">
<span class="bubble"
><i class="fa-solid fa-map-location-dot"></i
></span>
<div class="content-text">
<h3 class="location">Location</h3>
<h4 class="location-name">Brisbane, Australia</h4>
</div>
</div>
<div class="contact-card">
<span class="bubble"><i class="fa-regular fa-envelope"></i></span>
<div class="content-text">
<h3 class="email">Mail</h3>
<h4 class="email-name">[email protected]</h4>
</div>
</div>
</div>
</div>
<div class="contact-area">
<div class="contact-form">
<form action="https://formsubmit.co/[email protected]" method="POST">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" required></textarea>
</div>
<input type="hidden" name="_next" value="https://elijahgummer.github.io/thanks.html">
<input type="hidden" name="_subject" value="New Contact Request.">
<input type="hidden" name="_cc" value="[email protected]">
<input type="hidden" name="_autoresponse" value="Thank you for contacting me! I will get back to you as soon as possible.">
<input type="hidden" name="_template" value="table">
<button class="booking-btn" type="submit" >Send Message</button>
</form>
</div>
</div>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="footer-container">
<h3 class="header">Copyright © 2024. All rights are reserved</h3>
<div class="footer-social">
<a class="twitter" href="https://twitter.com/codedesigneli"><i class="fa-brands fa-x-twitter"></i></a>
<a class="github" href="https://github.com/elijahgummer"><i class="fa-brands fa-github"></i></a>
<a class="github" href="https://www.linkedin.com/in/elijah-gummer-4168172a9/"><i class="fa-brands fa-linkedin-in"></i></a>
</div>
</div>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>