Let's create a `contact.html` page for your portfolio theme. This page will provide a form for visitors to reach out to you. Here's how you can structure it:
### `contact.html`
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Contact page for inquiries and messages">
<title>Contact | MyPortfolio</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- Navigation -->
<nav class="navbar">
<div class="container">
<a href="index.html" class="logo">MyPortfolio</a>
<ul class="nav-menu">
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</nav>
<!-- Contact Form Section -->
<section class="contact-section">
<div class="container">
<h2 class="section-title">Contact Me</h2>
<div class="contact-form">
<form action="#" method="POST">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">Your 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>
<button type="submit" class="btn">Send Message</button>
</form>
</div>
</div>
</section>
<!-- Footer -->
<footer class="footer">
<div class="container">
<p>© 2024 MyPortfolio. All rights reserved.</p>
<ul class="social-links">
<li><a href="#"><img src="images/icon-facebook.svg" alt="Facebook"></a></li>
<li><a href="#"><img src="images/icon-twitter.svg" alt="Twitter"></a></li>
<li><a href="#"><img src="images/icon-instagram.svg" alt="Instagram"></a></li>
<li><a href="#"><img src="images/icon-linkedin.svg" alt="LinkedIn"></a></li>
</ul>
</div>
</footer>
<!-- JavaScript -->
<script src="scripts.js"></script>
</body>
</html>
```
### `styles.css`
Ensure your `styles.css` includes styles for the `.contact-section`, `.section-title`, `.contact-form`, `.form-group`, `.btn`, and any additional styles needed for the layout and content of the contact page.
### Explanation:
1. **Navigation**: The navigation bar (`navbar`) provides links to the home page (`index.html`), portfolio page (`portfolio.html`), about page (`about.html`), and contact page (`contact.html`).
2. **Contact Form Section**:
- `.contact-section` contains a title (`section-title`) and a form (`contact-form`) for visitors to fill out and submit messages.
- Form fields (`name`, `email`, `message`) are wrapped in `.form-group` for styling and structure.
- Submit button (`btn`) is styled to stand out as a call to action.
3. **Footer**:
- `.footer` provides copyright information and social media links (`social-links`).
4. **Integration**:
- Link `styles.css` to ensure consistent styling across all pages.
- Replace placeholder content (`Your Name`, `Your Email`, `Message`, `Send Message`, social media icons) with actual content relevant to your contact form and social media profiles.
This `contact.html` page allows visitors to easily reach out to you through a simple and effective contact form, integrated seamlessly into your portfolio theme. Customize and enhance based on your specific design preferences and functionality needs.