<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f1f1f1;
}
.container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 20px;
}
.logo {
font-size: 36px;
font-weight: bold;
color: blue;
text-align: center;
}
.menu {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: white;
padding: 10px;
}
.menu a {
color: white;
text-decoration: none;
}
.menu a:hover {
color: #aaa;
}
.posts {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.post {
width: 30%;
margin-bottom: 20px;
}
.post-title {
font-size: 24px;
margin: 10px 0;
}
.post-content {
font-size: 16px;
}
.sidebar {
width: 25%;
background-color: #333;
color: white;
padding: 20px;
}
.sidebar h2 {
font-size: 24px;
margin: 0 0 10px;
}
.sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar li {
margin: 10px 0;
}
.sidebar a {
color: white;
text-decoration: none;
}
.sidebar a:hover {
color: #aaa;
}
.footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="logo">zakiology</div>
<div class="menu">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
<div class="posts">
<div class="post">
<div class="post-title">Post Title 1</div>
<div class="post-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin malesuada nisi velit, non viverra tellus consectetur at. Aliquam erat volutpat.</div>
</div>
<div class="post">
<div class="post-title">Post Title 2</div>