css_gradient_border_tests/index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Site | Page</title>
  <link href="base.css" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800" rel="stylesheet">
</head>

<body>

  <header>
    <h1 class="primary-heading">CSS Gradient Border examples</h1>
    <nav></nav>
  </header>

  <main>

    <div class="grad-border">
      This is a div with rounded gradient border.
    </div>

    <div class="grad-bar">
      <p> See the CSS file to see how this works.</p>
    </div>

    <div class="outer-ring"></div>
    <div class="inner-ring"></div>

    <div class="flow-container">
      <div class="flow-line flow-line--left"></div>
      <div class="flow-line flow-line--right"></div>

      <div class="flow-ball-clip-wrapper">
        <div class="flow-ball-animation-wrapper">
          <div class="flow-ball"></div>
        </div>
      </div>
    </div>

    <a class="grad-btn" href="">Get started</a>

  </main>

  <footer>
  </footer>

</body>

</html>