Certainly! When creating styles for the `portfolio-detail.html` page, you'll want to ensure your `styles.css` includes appropriate styles for the `.portfolio-detail-section` and `.portfolio-detail` classes, as well as any additional styles needed for the layout and content of the detail page. Below is an example of how you can structure your CSS to achieve a clean and organized look for the portfolio detail page:
### CSS (styles.css)
```css
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
line-height: 1.6;
}
.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;
}
/* Portfolio Detail Section Styles */
.portfolio-detail-section {
padding: 4rem 0;
background: #f4f4f4;
}
.portfolio-detail {
display: flex;
align-items: center;
justify-content: space-between;
}
.portfolio-detail img {
max-width: 50%;
height: auto;
border-radius: 5px;
}
.portfolio-detail-info {
flex: 1;
padding: 0 2rem;
}
.portfolio-detail-info h2 {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.portfolio-detail-info p {
font-size: 1.1rem;
margin-bottom: 1rem;
line-height: 1.8;
}
.portfolio-detail-info .btn {
display: inline-block;
padding: 1rem 2rem;
background: #ff6347;
color: #fff;
border: none;
border-radius: 5px;
text-decoration: none;
font-size: 1rem;
transition: background 0.3s ease;
}
.portfolio-detail-info .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;
}
```
### Explanation:
1. **General Styles**: These styles set basic typography and layout for the entire page.
2. **Navbar Styles**: Styles for the navigation bar (`navbar`) ensure it stands out with a dark background and white text.
3. **Portfolio Detail Section Styles**:
- `.portfolio-detail-section` sets the padding and background color for the detail section.
- `.portfolio-detail` uses flexbox to align the image and details side by side.
- `.portfolio-detail img` styles the portfolio item image, ensuring it resizes appropriately and has rounded corners.
- `.portfolio-detail-info` styles the text content next to the image, providing padding and spacing.
- `.portfolio-detail-info .btn` styles the button with a background color, border radius, and hover effect.
4. **Footer Styles**: Styles the footer with a dark background, white text, and centers the content.
5. **Social Links**: Styles the social media icons (`social-links`) to be horizontally aligned with a small gap between them.
### Integration:
- Ensure that `styles.css` is linked properly in your `portfolio-detail.html` page (`<link rel="stylesheet" href="styles.css">`).
- Customize colors, fonts, and dimensions according to your theme's design guidelines.
- Replace placeholder images and content (`images/project-detail.jpg`, `Project Title`, `Category`, etc.) with actual content relevant to your portfolio items.
By organizing your CSS in this way, you maintain clarity and structure while styling the portfolio detail page for your ThemeForest theme. Adjustments can be made based on your specific design preferences and requirements.