index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>calque.js</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One" rel="stylesheet">
    <style type="text/css">

    header p {
      font-size: 1.9rem;
      letter-spacing: -0.1rem;
    }
    header p span {color: #f6f8f4;}
    .libname {
      font-family: 'Julius Sans One', sans-serif;
      color: #f6f8f4;
      font-size: 4rem;
      text-shadow: 1px 1px 1px #EC30D5, 2px 2px 2px #191715, 0px 2px 2px rgba(255, 255, 255, 0.4), 2px 1px 4px #3B4069, 0px 2px 2px #FF593E;
    }
      body {
        font-family: 'Josefin Sans', sans-serif;
        color: #444C5E;
        background: linear-gradient(to bottom right, #205374, transparent 50%, #27a09e), linear-gradient(to top right, #30ce88, transparent 50%, #7de393) #d3f5ce;
        background-repeat: no-repeat;
      }
      html {
        height: 100%;
        font-size: 21px;
      }
      a {
        text-decoration: none;
        color: #ffffff;
      }
      </style>
  </head>
  <body>
      <header>
          <h1 class='libname'>Calque</h1>
          <p>A helper library for building web interfaces using <span>🍦vanilla JavaScript</span></p>
        </header>
    <p>Click <a href="samples/main.html">here</a> to see some <i>awesome</i> samples using calque.js</p>
  </body>
</html>