-
Notifications
You must be signed in to change notification settings - Fork 75
/
Copy pathcontact.html
88 lines (81 loc) · 5.04 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Contact Us</title>
<link rel="stylesheet" href="assets/css/contact.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-kXaK6D6E4bZC31t2jUw5A9bGZ5DL44b/a3RbT0/aey2HS7HXtxaG3hnFQF4UvF5LJbxO2dB7RLDuMA17gAYvg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<a href="index.html" class="getback"> ← Back </a>
<div class="container2">
<!-- Header Section -->
<div class="header">
<h1>Contact Us</h1>
<p>We're here to help! Get in touch with us through the form or details below.</p>
</div>
<!-- Contact Form and Info Section -->
<div class="contact-wrapper">
<!-- Contact Form -->
<div class="contact-form">
<h2 style="color: green">Send Us a Message</h2>
<form action="#" method="POST">
<label for="name">Full Name</label>
<input type="text" id="name" name="name" placeholder="Your full name..." required />
<label for="email">Email Address</label>
<input type="email" id="email" name="email" placeholder="Your email..." required />
<label for="message">Your Message</label>
<textarea id="message" name="message" placeholder="Write your message here..." required></textarea>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
<!-- Info section -->
<div class="contact-info">
<h2>Our Contact Information</h2>
<div class="info">
<span class="info-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M3 21a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h18a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H3zm0-2h18V5H3v14zm1-11h2v2H4v-2zm0 4h2v2H4v-2zm0 4h2v2H4v-2zm4-8h2v2H8V8zm0 4h2v2H8v-2zm0 4h2v2H8v-2zm4-8h2v2h-2V8zm0 4h2v2h-2v-2zm0 4h2v2h-2v-2z"/></svg>
</span>
<div>
<h3>Phone</h3>
<p>+1 234 567 890</p>
</div>
</div>
<div class="info">
<span class="info-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M3.5 6.1a1.1 1.1 0 011.2-1.1c3.1.2 6.2 1 9.3 2.6a1 1 0 01.4 1.4c-1.2 1.5-2.3 3-3.5 4.4a14.1 14.1 0 01-5.6 2.2c-.6.1-1.1-.3-1.4-.8l-.6-1.3c-.3-.7-.1-1.5.5-1.9.9-.7 1.7-1.6 2.5-2.4 1.3-1.1 2.7-2.4 3.8-3.8a1 1 0 00.1-1.2c-2.9-1.5-5.8-2.3-8.8-2.3a1.1 1.1 0 00-1.1 1.1c0 4.4 2.5 8.4 6.3 10.5.4.2.6.6.6 1.1 0 .6-.5 1.2-1.2 1.3C4.5 18.5 2.5 16.4 2 13.4c-.2-1 .4-2.1 1.2-2.6.5-.3 1.2-.3 1.7.2 1.5 1.3 3.1 2.6 4.8 3.7a1.1 1.1 0 001.6-.2c1.4-1.7 2.8-3.4 4-5.3 1.4-2.3 2-4.7 2.2-7.3a1.1 1.1 0 00-1.1-1.2c-1.6 0-3.2.2-4.8.6a1 1 0 01-.7-1.8c1.8-.4 3.7-.6 5.6-.6a3.3 3.3 0 013.3 3.3c-.1 3.5-1.2 7-3.2 9.9a1 1 0 00.1 1.4c2.8 1.7 4.6 4.5 4.6 7.3 0 2.4-1.5 4.7-4.1 5.6-1 .3-2.1.3-3.1.1-1.2-.3-2.2-1-2.8-2.2a1 1 0 00-1.8-.1c-2.4 4.2-8.7 5.2-12.3 1.9z"/></svg>
</span>
<div>
<h3>Email</h3>
<p>[email protected]</p>
</div>
</div>
<div class="info">
<span class="info-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M12 2l10 8-10 8-10-8 10-8zm0 12l2 2-2 2-2-2 2-2z"/></svg>
</span>
<div>
<h3>Office Address</h3>
<p>1234 Example St, City, Country</p>
</div>
</div>
<div class="info">
<span class="info-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="#28a745" viewBox="0 0 24 24"><path d="M12 8v4l2 2m8 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
</span>
<div>
<h3>Business Hours</h3>
<p>Mon - Fri, 9:00 AM - 6:00 PM</p>
</div>
</div>
</div>
</div>
<!-- Map Section -->
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.835434509363!2d144.95373531532174!3d-37.81627977975178!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f11fd81%3A0xf577f564f693dd7a!2sVictoria%20Market!5e0!3m2!1sen!2sin!4v1603119239336!5m2!1sen!2sin"
width="100%" height="100%" frameborder="0" style="border: 0" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
</div>
</div>
</body>
</html>