<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Responsive Flexbox Layout</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
height: 100vh;
}
header, footer {
background: #35424a;
color: white;
text-align: center;
padding: 10px 0;
}
.container {
display: flex;
flex: 1; /* Take remaining space */
padding: 20px;
gap: 20px; /* Space between items */
}
main {
flex: 3; /* Main content takes more space */
background: white;
padding: 20px;
border-radius: 5px;
}
aside {
flex: 1; /* Sidebar takes less space */
background: #e7e7e7;
padding: 20px;
border-radius: 5px;
}
/* Responsive Styles */
</style>
</head>
<body>
<header>
<h1>Responsive Flexbox Layout</h1>
</header>
<div class="container">
<main>
<h2>Main Content</h2>
<p>This is the main content area. You can place your articles, images, or other important information here.</p>
</main>
<aside>
<h2>Sidebar</h2>
<p>This is a sidebar. You can add additional links, ads, or other content here.</p>
</aside>
</div>
<footer>
<p>© 2024 Your Website. All rights reserved.</p>
</footer>
</body>
</html>