<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Product | UNITS</title>
  <link rel="canonical" href="https://example.com/">
  <meta name="description" content="">
  <meta name="author" content="">
  <meta property="og:type" content="website">
  <meta property="og:site_name" content="">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:url" content="https://example.com/">
  <meta property="og:image" content="">
  <meta name="twitter:site" content="@">
  <meta name="twitter:creator" content="@">
  <meta name="twitter:url" content="https://example.com/">
  <meta name="twitter:title" content="">
  <meta name="twitter:description" content="">
  <meta name="twitter:card" content="summary">
  <meta name="format-detection" content="telephone=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="">
  <link rel="shortcut icon" href="/assets/share/favicon.ico">

  <!-- Required -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300:500">
  <link rel="stylesheet" href="/css/units.css">
  <!-- /Required -->

  <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/atom-one-dark.min.css" rel="stylesheet">
  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
</head>
<body class="_theme-product _theme-light">

  <!-- Header -->
  <header class="uc-header _ghost">
    <h1 class="uc-header-logo"><a href="/">Product</a></h1>
    <div class="uc-header-menu _hide-small _hide-medium">
      <a href="#">Feature</a>
      <a href="#">Usage</a>
      <a href="#">Support</a>
      <div class="uc-btn-unit">
        <div class="uc-btn _ghost"><a href="#">SIGN IN</a></div>
        <div class="uc-btn"><a href="#">SIGN IN</a></div>
      </div>
    </div>
    <div class="uc-menu-btn _hide-large" data-open-target="#menu">
      <button><i class="uc-menu-btn-icon"></i></button>
    </div>
  </header>
  <!-- /Header -->

  <!-- Menu -->
  <nav class="uc-menu _slide _black" id="menu">
    <div class="uc-menu-wrap">
      <div class="uc-menu-list">
        <a href="#">Feature</a>
        <a href="#">Usage</a>
        <a href="#">Support</a>
      </div>
    </div>
  </nav>
  <!-- /Menu -->

  <!-- Hero -->
  <div class="uc-hero">
    <div class="uc-hero-bg" style="background-image: url(https://source.unsplash.com/random)"></div>
    <div class="uc-hero-title">Lorem ipsum dolor sit amet.</div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore, quam.</p>
  </div>
  <!-- /Hero -->

  <!-- Content -->
  <main class="uc-content">

    <!-- Section -->
    <section class="uc-section _center">
      <h2 class="uc-section-title">Lorem ipsum dolor.</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, iste.</p>
      <div class="uc-photo-unit">
        <figure class="uc-photo _shadow">
          <img src="https://camo.githubusercontent.com/dccc58fa6ba58e5072abaf1cdaa9b25147ab244b/68747470733a2f2f756e6974736373732e636f6d2f2f696d672f7468656d65732f6c696768742e706e67" alt="">
        </figure>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur.</p>
      <div class="uc-btn-unit">
        <div class="uc-btn _primary"><a href="#">Download</a></div>
        <div class="uc-btn"><a href="#">Document</a></div>
      </div>
    </section>
    <!-- /Section -->

    <!-- Section -->
    <section class="uc-section _gray _center">
      <div class="uc-section-inner">
        <h2 class="uc-section-title">Feature</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta, iste.</p>
        <div class="uc-grid-unit">
          <div class="uc-grid _col-3 _medium-col-2 _small-col-full _gutter">
            <div class="uc-grid-cell">
              <div class="uc-card">
                <h3>Lorem ipsum dolor sit amet.</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quas, maxime, consectetur facilis nam odit tenetur pariatur cum ea nostrum!</p>
              </div>
            </div>
            <div class="uc-grid-cell">
              <div class="uc-card">
                <h3>Lorem ipsum dolor sit amet.</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quas, maxime, consectetur facilis nam odit tenetur pariatur cum ea nostrum!</p>
              </div>
            </div>
            <div class="uc-grid-cell">
              <div class="uc-card">
                <h3>Lorem ipsum dolor sit amet.</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque quas, maxime, consectetur facilis nam odit tenetur pariatur cum ea nostrum!</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- /Section -->

    <!-- Section -->
    <section class="uc-section">
      <div class="uc-section-inner">
        <h2 class="uc-section-title _center">Usage</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <div class="uc-grid-unit">
          <div class="uc-grid _col-2 _small-col-full _gutter">
            <div class="uc-grid-cell">
              <figure class="uc-photo">
                <img src="https://camo.githubusercontent.com/dccc58fa6ba58e5072abaf1cdaa9b25147ab244b/68747470733a2f2f756e6974736373732e636f6d2f2f696d672f7468656d65732f6c696768742e706e67" alt="">
              </figure>
            </div>
            <div class="uc-grid-cell">
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsum ex dolore commodi deserunt error ipsam modi, et architecto quos tenetur, mollitia nobis, ea eos expedita eius corporis voluptatum magni pariatur enim. Veritatis voluptates ratione, vero facilis ex tempore vitae!</p>
            </div>
          </div>
        </div>
        <div class="uc-grid-unit">
          <div class="uc-grid _col-2 _small-col-full _gutter">
            <div class="uc-grid-cell">
              <figure class="uc-photo">
                <img src="https://camo.githubusercontent.com/dccc58fa6ba58e5072abaf1cdaa9b25147ab244b/68747470733a2f2f756e6974736373732e636f6d2f2f696d672f7468656d65732f6c696768742e706e67" alt="">
              </figure>
            </div>
            <div class="uc-grid-cell">
              <h3>Lorem ipsum dolor sit amet.</h3>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ipsum ex dolore commodi deserunt error ipsam modi, et architecto quos tenetur, mollitia nobis, ea eos expedita eius corporis voluptatum magni pariatur enim. Veritatis voluptates ratione, vero facilis ex tempore vitae!</p>
            </div>
          </div>
        </div>
        <div class="uc-btn-unit _center">
          <div class="uc-btn _primary"><a href="#">Learn more</a></div>
        </div>
      </div>
    </section>
    <!-- /Section -->


    <!-- Section -->
    <section class="uc-section _gray">
      <div class="uc-section-inner">
        <h2 class="uc-section-title _center">Support</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora nemo molestias fugit!</p>

        <h3>Lorem ipsum dolor sit amet.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptatum possimus deserunt, dolorem quisquam officiis. Repellendus animi ea tempora dignissimos.</p>
        <h3>Lorem ipsum dolor sit amet.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptatum possimus deserunt, dolorem quisquam officiis. Repellendus animi ea tempora dignissimos.</p>
        <h3>Lorem ipsum dolor sit amet.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptatum possimus deserunt, dolorem quisquam officiis. Repellendus animi ea tempora dignissimos.</p>
        <h3>Lorem ipsum dolor sit amet.</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ratione voluptatum possimus deserunt, dolorem quisquam officiis. Repellendus animi ea tempora dignissimos.</p>
      </div>
    </section>
    <!-- /Section -->

    <!-- Section -->
    <section class="uc-section _center">
      <h2 class="uc-section-title">Get started</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. <br>Saepe incidunt nobis mollitia nulla quis rem animi voluptatibus eaque porro architecto.</p>
      <div class="uc-btn-unit">
        <div class="uc-btn _primary"><a href="https://github.com/kokushin/unitscss" target="_blank">GitHub</a></div>
        <div class="uc-btn"><a href="https://unitscss.com/" target="_blank">UNITS</a></div>
      </div>
    </section>
    <!-- /Section -->

  </main>
  <!-- /Content -->

  <!-- Footer -->
  <footer class="uc-footer _black">
    <div class="uc-footer-menu">
      <a href="#">Feature</a>
      <a href="#">Usage</a>
      <a href="#">Support</a>
    </div>
    <div class="uc-footer-logo"><cite>Product</cite></div>
    <p>Made by <a href="https://twitter.com/kokushing" target="_blank">@kokushing</a>,
    Licensed under MIT license.<br>
    Photo by <a href="https://unsplash.com/" target="_blank">unsplash.com.</a></p>
    <small>&copy; 2017 UNITS</small>
  </footer>
  <!-- /Footer -->


  <!-- Required -->
  <script src="https://unpkg.com/unitscss@latest/dist/units.min.js"></script>
  <!-- /Required -->
</body>
</html>

