#### HTML Code for Blog News Social Media Post Content
html
Weekend Blog News
Weekend Blog News
Latest Blog Posts
Post Title
Published on August 10, 2024 by John Doe
**Content of the blog post goes here.**
Another Post Title
Published on August 10, 2024 by Jane Smith
**Content of another blog post goes here.**
#### CSS Code (styles.css)
css
/* Reset default margin and padding */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Style the header */
header {
background-color: #f2f2f2;
padding: 1rem;
text-align: center;
}
/* Style the navigation menu */
nav ul {
list-style: none;
}
nav ul li {
display: inline;
margin: 0 1rem;
}
nav ul li a {
text-decoration: none;
color: #333;
}
/* Style the main content area */
.main-content {
display: flex;
justify-content: space-between;
padding: 2rem;
}
.post {
margin-bottom: 2rem;
}
/* Style the footer */
footer {
background-color: #f2f2f2;
padding: 1rem;
text-align: center;
}
.social-media {
margin-top: 1rem;
}
.social-icon {
display: inline-block;
margin-right: 1rem;
text-decoration: none;
color: #333;
}
#### JavaScript Code (script.js)
javascript
// Add interactive functionality here
// For example, handling social media icon clicks
document.querySelectorAll('.social-icon').forEach(icon => {
icon.addEventListener('click', () => {
// Add functionality to share blog content on respective social media platforms
});
});
This HTML code provides a basic structure for a weekend blog news website, including the main content area with blog posts, an archive section, and social media links in the footer. The accompanying CSS and JavaScript files add styling and interactive functionality to the website, allowing for a more engaging user experience.