<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Layout</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
color: #333;
}
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.site-header {
background: #4caf50;
padding: 20px;
text-align: center;
font-weight: bold;
}
.main-nav {
background: #ffeb3b;
padding: 15px;
text-align: center;
font-weight: bold;
}
.content-wrap {
display: flex;
flex: 1;
}
.sidebar {
background: #ff9800;
width: 25%;
padding: 20px;
font-weight: bold;
}
.content {
background: #90caf9;
flex: 1;
padding: 20px;
font-weight: bold;
}
.site-footer {
background: #e57373;
padding: 20px;
text-align: center;
font-weight: bold;
}
@media (max-width: 600px) {
.content-wrap {
flex-direction: column;
}
.sidebar {
width: 100%;
}
}
</style>
</head>
<body>
<div class="page">
<header class="site-header">
<h1>Header</h1>
</header>
<nav class="main-nav" aria-label="Main navigation">
Navigation
</nav>
<div class="content-wrap">
<aside class="sidebar">
<h2>Aside</h2>
</aside>
<main class="content">
<h2>Main Content</h2>
</main>
</div>
<footer class="site-footer">
Footer
</footer>
</div>
</body>
</html>
Comments