Let's create a `blog.html` page for your portfolio theme. This page will showcase your blog posts. Here's how you can structure it:
### `blog.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="Blog posts by MyPortfolio">
<title>Blog | 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>
<!-- Blog Section -->
<section class="blog-section">
<div class="container">
<h2 class="section-title">Latest Blog Posts</h2>
<div class="blog-posts">
<div class="blog-post">
<img src="images/blog-post1.jpg" alt="Blog Post Image">
<div class="blog-content">
<h3>Blog Post Title 1</h3>
<p class="blog-meta">Posted on <span>June 10, 2024</span> by <span>John Doe</span></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero id libero pulvinar.</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
<div class="blog-post">
<img src="images/blog-post2.jpg" alt="Blog Post Image">
<div class="blog-content">
<h3>Blog Post Title 2</h3>
<p class="blog-meta">Posted on <span>June 5, 2024</span> by <span>Jane Smith</span></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
<a href="#" class="btn">Read More</a>
</div>
</div>
<!-- Add more blog posts as needed -->
</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 `.blog-section`, `.section-title`, `.blog-posts`, `.blog-post`, `.blog-content`, `.blog-meta`, `.btn`, and any additional styles needed for the layout and content of the blog page.
### Explanation:
1. **General Styles**: Standard styles for `body`, `.container`, and basic typography.
2. **Navbar Styles**: Navigation bar (`navbar`) with links to various sections including the blog page (`blog.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. **Blog Section Styles**:
- `.blog-section` contains a title (`section-title`) and a list of blog posts (`blog-posts`).
- Each blog post (`blog-post`) includes an image (`img`), title (`h3`), metadata (`blog-meta`), excerpt (`p`), and a read more link (`btn`).
5. **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 (`Blog Post Title 1`, `June 10, 2024`, `John Doe`, `Lorem ipsum...`, `Read More`, social media icons) with actual blog content and images.
This `blog.html` page effectively presents your latest blog posts in a structured manner, enhancing engagement with visitors interested in your thoughts and insights. Customize and expand the content based on your specific blog topics and interests.