hoily grail style
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Holy Grail Layout</title>
<style>
body {
font-family: Sans-Serif;
margin: 0;
font-size: 20px;
}
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
.header,
.footer,
.main,
.sidebar-left,
.sidebar-right {
padding: 20px;
}
.header,
.footer {
background-color: #83caff;
}
.sidebar-left,
.sidebar-right {
background-color: #cb99cc;
}
.main {
background-color: #ffcccc;
}
.layout {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.content {
display: flex;
flex: 1;
}
.sidebar-left {
order: 1;
width: 30%;
}
.main {
order: 2;
}
.sidebar-right {
order: 3;
width: 20%;
}
</style>
</head>
<body>
<div class="layout">
<header class="header">
<h1>Header</h1>
</header>
<section class="content">
<main class="main">
<h2>Content</h2>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit
delectus minus error neque quam reiciendis voluptate saepe quis
accusantium! Officia ab provident doloribus aliquid perferendis
quaerat eaque iusto, dolor temporibus, recusandae vel autem, alias
laudantium optio error quam aliquam ad vero. Dolore dignissimos
laboriosam obcaecati error dolorum numquam molestias enim!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit
delectus minus error neque quam reiciendis voluptate saepe quis
accusantium! Officia ab provident doloribus aliquid perferendis
quaerat eaque iusto, dolor temporibus, recusandae vel autem, alias
laudantium optio error quam aliquam ad vero. Dolore dignissimos
laboriosam obcaecati error dolorum numquam molestias enim!
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit
delectus minus error neque quam reiciendis voluptate saepe quis
accusantium! Officia ab provident doloribus aliquid perferendis
quaerat eaque iusto, dolor temporibus, recusandae vel autem, alias
laudantium optio error quam aliquam ad vero. Dolore dignissimos
laboriosam obcaecati error dolorum numquam molestias enim!
</p>
</main>
<aside class="sidebar-left">
<h3>Menu</h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</aside>
<aside class="sidebar-right">
<h4>Ad</h4>
<h4>Ad</h4>
<h4>Ad</h4>
</aside>
</section>
<footer class="footer">
<h1>Footer</h1>
</footer>
</div>
</body>
</html>