Let's update the `styles.css` file to include styles for the `blog.html` page, ensuring it fits with the existing theme and maintains consistency across all pages.
### Updated CSS (styles.css)
```css
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1.6;
background-color: #f8f9fa;
color: #333;
}
.container {
width: 90%;
margin: 0 auto;
}
/* Navbar Styles */
.navbar {
background: #333;
color: #fff;
padding: 1rem 0;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-menu {
list-style: none;
display: flex;
}
.nav-menu li {
margin-left: 2rem;
}
.nav-menu a {
color: #fff;
text-decoration: none;
font-weight: bold;
}
/* Section Title Styles */
.section-title {
text-align: center;
margin-bottom: 3rem;
font-size: 2.5rem;
color: #333;
}
/* Blog Section Styles */
.blog-section {
padding: 4rem 0;
background: #fff;
text-align: center;
}
.blog-posts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.blog-post {
background: #f4f4f4;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
}
.blog-post:hover {
transform: translateY(-5px);
}
.blog-post img {
width: 100%;
height: 200px;
object-fit: cover;
object-position: center;
}
.blog-content {
padding: 1.5rem;
}
.blog-content h3 {
font-size: 1.8rem;
margin-bottom: 1rem;
color: #333;
}
.blog-content .blog-meta {
font-size: 0.9rem;
color: #666;
margin-bottom: 1rem;
}
.blog-content p {
font-size: 1.1rem;
line-height: 1.6;
color: #555;
}
.btn {
display: inline-block;
padding: 0.75rem 1.5rem;
background: #ff6347;
color: #fff;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 1rem;
cursor: pointer;
transition: background 0.3s ease;
}
.btn:hover {
background: #e65100;
}
/* Footer Styles */
.footer {
background: #333;
color: #fff;
padding: 1rem 0;
text-align: center;
}
.footer p {
margin: 0;
}
.social-links {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
gap: 1rem;
}
.social-links li {
margin: 0;
}
.social-links a img {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
.social-links a img:hover {
transform: scale(1.2);
}
```
### Explanation:
1. **General Styles**: Updated `body` background color and text color for better readability on light backgrounds (`#f8f9fa` for background and `#333` for text).
2. **Navbar Styles**: Styles remain consistent with dark background (`#333`) and white text (`#fff`).
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` has a white background (`#fff`) and is centered (`text-align: center`).
- `.blog-posts` uses CSS grid (`display: grid`) to arrange blog posts in a responsive grid layout (`grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))`).
- `.blog-post` styles each blog post with a light gray background (`#f4f4f4`), border-radius, box-shadow, and a hover effect (`transform: translateY(-5px)`) for interaction.
- `.blog-post img` ensures images fit within their containers with `object-fit: cover` and `object-position: center`.
5. **Button Styles**:
- `.btn` class styles the read more button with a contrasting color scheme, padding, border-radius, and hover effect (`background` transition).
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 (`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 blog posts in a visually appealing and structured format, enhancing user engagement and navigation through your portfolio website. Customize and expand the content based on your specific blog topics and interests. Adjustments can be made to suit your design preferences and functionality needs.