Let's create an `about.html` page for your portfolio theme. This page will provide information about you or your company. Here's how you can structure it:
### `about.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="About MyPortfolio">
<title>About | 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>
<!-- About Section -->
<section class="about-section">
<div class="container">
<h2 class="section-title">About Us</h2>
<div class="about-content">
<div class="about-text">
<h3>Who We Are</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero id libero pulvinar.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div class="about-image">
<img src="images/about-image.jpg" alt="About Image">
</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 `.about-section`, `.section-title`, `.about-content`, `.about-text`, `.about-image`, and any additional styles needed for the layout and content of the about page.
### Explanation:
1. **General Structure**:
- The HTML structure includes a navigation bar (`navbar`), an `about-section` with `about-content`, and a footer (`footer`).
2. **Navigation**:
- Navigation bar (`navbar`) with links to various sections including the about page (`about.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. **About Section Styles**:
- `.about-section` has a white background (`#fff`) and is centered (`text-align: center`).
- `.about-content` uses flexbox (`display: flex`) to organize content (`about-text` and `about-image`).
5. **About Text and Image**:
- `.about-text` styles the textual content with headings (`h3`) and paragraphs (`p`).
- `.about-image` contains an image (`img`) with appropriate styling for size and presentation.
6. **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 linked correctly in all HTML pages (`<link rel="stylesheet" href="styles.css">`).
- Replace placeholder content (`Who We Are`, Lorem ipsum...) with actual information about yourself or your company.
- Customize the image (`about-image.jpg`) with a relevant image that represents your brand or yourself.
This `about.html` page effectively introduces visitors to you or your company, providing essential information in a visually appealing and structured format. Adjust the content and styling based on your specific needs and preferences to create a compelling about page for your portfolio theme.