Let's create a `contact.html` page for your portfolio theme. This page will provide a way for visitors to get in touch with you or your company. 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 MyPortfolio">
<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>
<li><a href="services.html">Services</a></li>
<li><a href="blog.html">Blog</a></li>
</ul>
</div>
</nav>
<!-- Contact Section -->
<section class="contact-section">
<div class="container">
<h2 class="section-title">Contact Us</h2>
<div class="contact-content">
<form action="#" method="POST" class="contact-form">
<div class="form-group">
<label for="name">Your Name</label>
<input type="text" id="name" name="name" placeholder="Enter your name" required>
</div>
<div class="form-group">
<label for="email">Your Email</label>
<input type="email" id="email" name="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="message">Your Message</label>
<textarea id="message" name="message" rows="5" placeholder="Enter your message" required></textarea>
</div>
<button type="submit" class="btn">Send Message</button>
</form>
<div class="contact-info">
<h3>Contact Information</h3>
<p><strong>Email:</strong> contact@example.com</p>
<p><strong>Phone:</strong> +1 (123) 456-7890</p>
<p><strong>Address:</strong> 123 Main Street, City, Country</p>
</div>
</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-content`, `.contact-form`, `.form-group`, `.contact-info`, `.btn`, and any additional styles needed for the layout and content of the contact page.
### Explanation:
1. **General Structure**:
- The HTML structure includes a navigation bar (`navbar`), a `contact-section` with `contact-content`, and a footer (`footer`).
2. **Navigation**:
- Navigation bar (`navbar`) with links to various sections including the contact page (`contact.html`).
3. **Section Title Styles**:
- `.section-title` styles ensure consistent appearance of section titles across all pages with centered alignment, appropriate margin, and font size.
4. **Contact Section Styles**:
- `.contact-section` styles set a padding (`4rem 0`) and a white background (`#fff`) for the contact section.
- `.contact-content` uses flexbox (`display: flex`) to organize content (`contact-form` and `contact-info`).
5. **Contact Form Styles**:
- `.contact-form` styles the form with appropriate spacing and alignment.
- `.form-group` styles form inputs and labels for clarity and usability.
- `.btn` styles the submit button for the form.
6. **Contact Information Styles**:
- `.contact-info` styles set headings (`h3`) and paragraphs (`p`) for displaying contact information.
7. **Footer Styles**:
- `.footer` maintains a dark background (`#333`) with white text (`#fff`) and central alignment.
- `.social-links` aligns social media icons (`img`) horizontally with a gap (`gap: 1rem`) and hover effect (`transform: scale(1.2)`).
### Integration:
- Ensure `styles.css` is correctly linked in all HTML pages (`<link rel="stylesheet" href="styles.css">`).
- Replace placeholder content (`Your Name`, `Your Email`, `Your Message`, `Send Message`, `contact@example.com`, `+1 (123) 456-7890`, `123 Main Street, City, Country`) with actual contact information and details.
- Customize the form action (`action="#"`) to point to your backend script or service handling form submissions.
This `contact.html` page provides a straightforward way for visitors to contact you or your company, enhancing interactivity and engagement on your portfolio website. Adjust the content and styling based on your specific needs and preferences to create an effective contact page for your portfolio theme.