hoily grail style code example

Example: 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>

Tags:

Misc Example

Recent Posts