129 lines
3.9 KiB
HTML
129 lines
3.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Contact - My Website</title>
|
|
<link rel="stylesheet" href="styles/main.css" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav>
|
|
<div class="nav-container">
|
|
<h1 class="logo">My Website</h1>
|
|
<ul class="nav-links">
|
|
<li><a href="index.html">Home</a></li>
|
|
<li><a href="about.html">About</a></li>
|
|
<li><a href="services.html">Services</a></li>
|
|
<li><a href="contact.html">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<main>
|
|
<section class="page-header">
|
|
<div class="container">
|
|
<h1>Contact Us</h1>
|
|
<p>Get in touch with us today</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="contact-content">
|
|
<div class="container">
|
|
<div class="contact-grid">
|
|
<div class="contact-info">
|
|
<h2>Get In Touch</h2>
|
|
<p>
|
|
Ready to start your next project? We'd love to hear from you.
|
|
Send us a message and we'll respond as soon as possible.
|
|
</p>
|
|
|
|
<div class="contact-details">
|
|
<div class="contact-item">
|
|
<h3>Address</h3>
|
|
<p>123 Business Street<br />City, State 12345</p>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<h3>Email</h3>
|
|
<p>
|
|
<a href="mailto:contact@example.com">contact@example.com</a>
|
|
</p>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<h3>Phone</h3>
|
|
<p><a href="tel:+1234567890">+1 (234) 567-890</a></p>
|
|
</div>
|
|
|
|
<div class="contact-item">
|
|
<h3>Hours</h3>
|
|
<p>
|
|
Monday - Friday: 9:00 AM - 6:00 PM<br />
|
|
Saturday: 10:00 AM - 4:00 PM
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-form">
|
|
<h2>Send Message</h2>
|
|
<form id="contactForm">
|
|
<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="phone">Phone</label>
|
|
<input type="tel" id="phone" name="phone" />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="subject">Subject *</label>
|
|
<input type="text" id="subject" name="subject" required />
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="message">Message *</label>
|
|
<textarea
|
|
id="message"
|
|
name="message"
|
|
rows="5"
|
|
required
|
|
></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="submit-btn">Send Message</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="map-section">
|
|
<div class="container">
|
|
<h2>Find Us</h2>
|
|
<div class="map-placeholder">
|
|
<p>Map would be embedded here</p>
|
|
<p>You can add Google Maps or any other mapping service</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer>
|
|
<div class="container">
|
|
<p>© 2024 My Website. All rights reserved.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="scripts/main.js"></script>
|
|
</body>
|
|
</html>
|