Let's create a `services.html` page for your portfolio theme. This page will showcase the services you offer. Here's how you can structure it:
### `services.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="Services offered by MyPortfolio">
<title>Services | 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>
</ul>
</div>
</nav>
<!-- Services Section -->
<section class="services-section">
<div class="container">
<h2 class="section-title">Our Services</h2>
<div class="services-list">
<div class="service-item">
<h3>Web Design</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla convallis libero id libero pulvinar.</p>
</div>
<div class="service-item">
<h3>Frontend Development</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.</p>
</div>
<div class="service-item">
<h3>UI/UX Design</h3>
<p>Totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
<div class="service-item">
<h3>Graphic Design</h3>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione.</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 `.services-section`, `.section-title`, `.services-list`, `.service-item`, and any additional styles needed for the layout and content of the services page.
### Explanation:
1. **Navigation**: The navigation bar (`navbar`) provides links to the home page (`index.html`), portfolio page (`portfolio.html`), about page (`about.html`), contact page (`contact.html`), and services page (`services.html`).
2. **Services Section**:
- `.services-section` contains a title (`section-title`) and a list of services (`services-list`).
- Each service (`service-item`) includes a title (`h3`) and a description (`p`).
3. **Footer**:
- `.footer` provides copyright information and social media links (`social-links`).
4. **Integration**:
- Link `styles.css` to ensure consistent styling across all HTML pages (`<link rel="stylesheet" href="styles.css">`).
- Replace placeholder content (`Web Design`, `Frontend Development`, `UI/UX Design`, `Graphic Design`) with actual services offered by your portfolio.
This `services.html` page effectively communicates the range of services you provide, enhancing the visitor's understanding of your skills and expertise. Customize and expand the content based on your specific offerings and client needs.