<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<header>
<h1>My Blog</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Blog Post Title</h2>
<p>Author - Date</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis vestibulum quam, sit amet laoreet mauris. Curabitur tincidunt odio ut dui dapibus, eu faucibus odio suscipit. Vivamus condimentum tortor at massa tincidunt, ac scelerisque mi feugiat.</p>
<a href="#">Read More</a>
</article>
<article>
<h2>Another Blog Post Title</h2>
<p>Author - Date</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis vestibulum quam, sit amet laoreet mauris. Curabitur tincidunt odio ut dui dapibus, eu faucibus odio suscipit. Vivamus condimentum tortor at massa tincidunt, ac scelerisque mi feugiat.</p>
<a href="#">Read More</a>
</article>
</main>
<footer>
<p>© 2023 My Blog. All rights reserved.</p>
</footer>
</body>
</html>
body, h1, h2, p, ul {
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
font-size: 28px;
margin-bottom: 10px;
}
nav ul {
list-style-type: none;
}
nav ul li {
display: inline;
margin-right: 10px;
}
nav ul li a {
color: #fff;
text-decoration: none;
}
main {
padding: 20px;
}
article {
background-color: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 4px;
}
article h2 {
font-size: 24px;
margin-bottom: 10px;
}
article p {
margin-bottom: 10px;
}
article a {
color: #333;
text-decoration: none;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
}