gradient/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <title>Diagonal Separator [Gradient Background Image]</title>

    <link rel="stylesheet" href="style.css"/>
    <link rel="stylesheet" href="../assets/layout.css"/>
  </head>

  <body>
    <h2>Diagonal Separator [Gradient Background Image]</h2>

    <div class="demo plain">
      <section>
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section>
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo plain">
      <section class="vertical">
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section class="vertical">
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image above">
      <section>
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section>
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image above">
      <section class="vertical">
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section class="vertical">
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image below">
      <section>
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section>
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>

    <div class="demo image below">
      <section class="vertical">
        <header></header>
        <div class="separator"></div>
        <footer></footer>
      </section>

      <section class="vertical">
        <header></header>
        <div class="separator reverse"></div>
        <footer></footer>
      </section>
    </div>
  </body>
</html>