-
Notifications
You must be signed in to change notification settings - Fork 8
/
contact.html
133 lines (130 loc) · 5.59 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="icon" type="image/x-icon" href="assets/Dev Soc Logo.png" />
<!-- Core theme CSS (includes Bootstrap)-->
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="./css/contact.css" />
</head>
<body>
<nav class="navbar">
<div class="container">
<div class="logo">
<a href="#">DEVSOC</a>
</div>
<div class="hamburger" id="hamburger">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<ul class="nav-links" id="nav-links">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="about.html">About</a></li>
<li class="nav-item"><a class="nav-link" href="contact.html">Contact Us</a></li>
<li class="nav-item"><a class="nav-link" href="./events.html">Events</a></li>
</ul>
</div>
</nav>
<!-- Contact Section -->
<!-- Contact Section -->
<section class="contact-section">
<div class="contact-container">
<h2 class="contact-title">Contact Us</h2>
<p class="contact-intro">
If you have any questions, feel free to reach out. We're here to help!
</p>
<h5 class="get-in-touch">Get in Touch</h5>
<div class="contact-content">
<div class="contact-info">
<ul class="contact-details">
<li>
<i class="bi bi-geo-alt"></i> 123 Tech Avenue, City, Country
</li>
<li>
<i class="bi bi-envelope"></i>
<a href="mailto:[email protected]" class="email-link">[email protected]</a>
</li>
<li>
<i class="bi bi-phone"></i> +1 (123) 456-7890
</li>
</ul>
<div class="map-section">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3153.123456789012!2d144.96305791540964!3d-37.81362827975137!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad642af0f0f0f0%3A0x5045675218ce6e0!2sVortex+HQ!5e0!3m2!1sen!2sin!4v1613731163310!5m2!1sen!2sin"
allowfullscreen=""
loading="lazy"
></iframe>
</div>
</div>
<div class="form-container">
<form>
<div class="form-group">
<label for="name">Your Name</label>
<input required type="text" id="name" placeholder="Enter your name" />
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input required type="email" id="email" placeholder="Enter your email" />
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input required type="text" id="subject" placeholder="Subject" />
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" rows="4" placeholder="Your message..."></textarea>
</div>
<button type="submit" class="submit-btn">Send Message</button>
</form>
</div>
</div>
</div>
</section>
<!-- Footer -->
<!-- Footer -->
<footer class="footer-section">
<div class="footer-container">
<div class="footer-links">
<h5>Quick Links</h5>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="footer-contact">
<h5>Contact Us</h5>
<ul>
<li><a href="mailto:[email protected]">[email protected]</a></li>
<li>+1 (123) 456-7890</li>
<li>123 Tech Avenue, City, Country</li>
</ul>
</div>
<div class="footer-social">
<h5>Follow Us</h5>
<div class="social-icons">
<a href="#"><i class="bi bi-facebook"></i></a>
<a href="#"><i class="bi bi-twitter"></i></a>
<a href="#"><i class="bi bi-instagram"></i></a>
<a href="#"><i class="bi bi-linkedin"></i></a>
</div>
</div>
<p>© 2024 Vortex. All Rights Reserved.</p>
</div>
</footer>
<!-- Bootstrap Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.5.0/font/bootstrap-icons.min.css"
/>
</body>
</html>