-
Notifications
You must be signed in to change notification settings - Fork 2
/
contact.html
154 lines (142 loc) · 8.4 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
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel="icon" type="icon" href="assets/images/favicon.png" />
<title>Contact us</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Manrope:[email protected]&display=swap" rel="stylesheet">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="node_modules/swiper/swiper-bundle.css">
<link rel="stylesheet" href="assets/css/custom.css">
</head>
<body>
<header class="bg-gray-dark sticky top-0 z-50">
<div class="container mx-auto flex justify-between items-center py-4">
<!-- Left section: Logo -->
<div class="flex items-center">
<img src="assets/images/logo-blue.png" alt="Logo" class="h-14 w-auto mr-4">
</div>
<!-- Hamburger menu (for mobile) -->
<div class="flex md:hidden">
<button id="hamburger" class="text-white focus:outline-none">
<svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 6h16M4 12h16m-7 6h7"></path>
</svg>
</button>
</div>
<!-- Center section: Menu -->
<nav class="hidden md:flex md:flex-grow justify-center">
<ul class="flex justify-center space-x-4 text-white">
<li><a href="index.html" class="hover:text-secondary font-bold">Home</a></li>
<li><a href="aboutus.html" class="hover:text-secondary font-bold">About us</a></li>
<li><a href="reviews.html" class="hover:text-secondary font-bold">Reviews</a></li>
<li><a href="portfolio.html" class="hover:text-secondary font-bold">Portfolio</a></li>
<li><a href="team.html" class="hover:text-secondary font-bold">Team</a></li>
<li><a href="404.html" class="hover:text-secondary font-bold">404</a></li>
<li><a href="contact.html" class="hover:text-secondary font-bold">Contact</a></li>
</ul>
</nav>
<!-- Right section: Buttons (for desktop) -->
<div class="hidden lg:flex items-center space-x-4">
<a href="https://spacema-dev.com/elevate-free-tailwind-business-template/"
class="bg-primary hover:bg-secondary text-white font-semibold px-4 py-2 rounded-full inline-block">Get
started</a>
</div>
</div>
</header>
<!-- Mobile menu -->
<nav id="mobile-menu-placeholder" class="mobile-menu hidden flex flex-col items-center space-y-8 md:hidden">
<ul>
<li><a href="index.html" class="hover:text-secondary font-bold">Home</a></li>
<li><a href="aboutus.html" class="hover:text-secondary font-bold">About us</a></li>
<li><a href="reviews.html" class="hover:text-secondary font-bold">Reviews</a></li>
<li><a href="portfolio.html" class="hover:text-secondary font-bold">Portfolio</a></li>
<li><a href="team.html" class="hover:text-secondary font-bold">Team</a></li>
<li><a href="404.html" class="hover:text-secondary font-bold">404</a></li>
<li><a href="contact.html" class="hover:text-secondary font-bold">Contact</a></li>
</ul>
<div class="flex flex-col mt-6 space-y-2 items-center">
<a href="https://spacema-dev.com/elevate-free-tailwind-business-template/"
class="bg-primary hover:bg-secondary text-white font-semibold px-4 py-2 rounded-full inline-block flex items-center justify-center min-w-[110px]">Download</a>
</div>
</nav>
<section id="contact" class="bg-white py-16 flex items-center justify-center min-h-screen">
<div class="container px-5 py-24 mx-auto flex sm:flex-nowrap flex-wrap">
<div class="lg:w-2/3 md:w-1/2 bg-blue-300 rounded-lg overflow-hidden sm:mr-10 p-10 flex items-end justify-start relative">
<iframe width="100%" height="100%" class="absolute inset-0" frameborder="0" title="map" marginheight="0" marginwidth="0" scrolling="no"
src="https://maps.google.com/maps?width=100%&height=600&hl=en&q=London+(My%20Business%20Name)&ie=UTF8&t=&z=14&iwloc=B&output=embed"
style="filter: grayscale(0) contrast(1.2) opacity(0.6);"></iframe>
<div class="bg-white relative flex flex-wrap py-6 rounded shadow-md">
<div class="lg:w-1/2 px-6">
<h2 class="font-bold text-gray-dark">ADDRESS</h2>
<p class="mt-1">123 Main Street, London, UK</p>
</div>
<div class="lg:w-1/2 px-6 mt-4 lg:mt-0">
<h2 class="font-bold text-gray-dark">EMAIL</h2>
<a href="mailto:[email protected]" class="text-primary leading-relaxed">[email protected]</a>
<h2 class="font-bold text-gray-dark mt-4">PHONE</h2>
<a href="tel:123-456-7890" class="leading-relaxed">123-456-7890</a>
</div>
</div>
</div>
<div class="lg:w-1/3 md:w-1/2 bg-white flex flex-col md:ml-auto w-full md:py-8 mt-8 md:mt-0">
<h2 class="text-primary text-lg mb-2 font-medium">Get in Touch</h2>
<p class="mb-5 text-gray-txt">Have questions, suggestions, or just want to say hello? We'd love to hear from you! Drop us a message and we'll get back to you as soon as possible.</p>
</p>
<div class="relative mb-4">
<label for="name" class="leading-7 text-sm text-gray-dark">Name</label>
<input type="text" id="name" name="name" class="w-full bg-white rounded border border-gray-txt text-base outline-none text-gray-txt py-1 px-3 leading-8">
</div>
<div class="relative mb-4">
<label for="email" class="leading-7 text-sm text-gray-dark">Email</label>
<input type="email" id="email" name="email" class="w-full bg-white rounded border border-gray-txt text-base outline-none text-gray-txt py-1 px-3 leading-8">
</div>
<div class="relative mb-4">
<label for="message" class="leading-7 text-sm text-gray-dark">Message</label>
<textarea id="message" name="message" class="w-full bg-white rounded border border-gray-txt h-32 text-base outline-none text-gray-txt py-1 px-3 resize-none"></textarea>
</div>
<button class="text-white bg-primary border-0 py-3 px-6 focus:outline-none hover:bg-secondary rounded text-lg">Submit</button>
</div>
</div>
</section>
<footer class="py-10">
<img src="assets/images/logo-gray.png" alt="Logo" class="h-14 w-auto mx-auto mb-5">
<span class="block text-center text-gray-txt font-semibold">© 2024. All Rights Reserved.
Developerd by <a href="https://spacema-dev.com" class="text-primary">Spacema-dev</a>
</span>
<ul class="flex justify-center mt-10 space-x-8">
<li>
<a href="#">
<img src="assets/images/social_icons/instagram.png" alt="Instagram" class="h-10 w-10">
</a>
</li>
<li>
<a href="#">
<img src="assets/images/social_icons/youtube.png" alt="YouTube" class="h-10 w-10">
</a>
</li>
<li>
<a href="#">
<img src="assets/images/social_icons/facebook.png" alt="Facebook" class="h-10 w-10">
</a>
</li>
<li>
<a href="#">
<img src="assets/images/social_icons/twitter.png" alt="Twitter" class="h-10 w-10">
</a>
</li>
<li>
<a href="#">
<img src="assets/images/social_icons/linkedin.png" alt="LinkedIn" class="h-10 w-10">
</a>
</li>
</ul>
</footer>
<script src="assets/js/script.js"></script>
</body>
</html>