ecommerce-boilerplate/public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="description" content="YOUR SITE - Your new ecommerce site">
    <!-- Facebook-->
    <meta property="og:title" content="Your Site">
    <meta property="og:description" content="YOUR SITE - Your new ecommerce site">
    <meta property="og:site_name" content="Your Site">
    <meta property="og:url" content="https://hanzo.ai">
    <meta property="og:type" content="product">
    <meta property="og:locale" content="en_US">
    <meta property="og:image">
    <meta property="fb:app_id">
    <!-- Twitter-->
    <meta name="twitter:title" content="Your Site">
    <meta name="twitter:description" content="YOUR SITE - Your new ecommerce site">
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@">
    <meta name="twitter:image">
    <meta name="twitter:url" content="https://hanzo.ai">
    <link rel="apple-touch-icon-precomposed" sizes="57x57" href="/icon/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/icon/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/icon/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/icon/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon-precomposed" sizes="60x60" href="/icon/apple-touch-icon-60x60.png">
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="/icon/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon-precomposed" sizes="76x76" href="/icon/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="/icon/apple-touch-icon-152x152.png">
    <link rel="/icon" type="image/png" href="/icon/favicon-196x196.png" sizes="196x196">
    <link rel="/icon" type="image/png" href="/icon/favicon-96x96.png" sizes="96x96">
    <link rel="/icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32">
    <link rel="/icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16">
    <link rel="/icon" type="image/png" href="/icon/favicon-128.png" sizes="128x128">
    <meta name="application-name" content="&amp;nbsp;">
    <meta name="msapplication-TileColor" content="#FFFFFF">
    <meta name="msapplication-TileImage" content="/icon/mstile-144x144.png">
    <meta name="msapplication-square70x70logo" content="/icon/mstile-70x70.png">
    <meta name="msapplication-square150x150logo" content="/icon/mstile-150x150.png">
    <meta name="msapplication-wide310x150logo" content="/icon/mstile-310x150.png">
    <meta name="msapplication-square310x310logo" content="/icon/mstile-310x310.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="/icon/favicon-32x32.png" sizes="32x32">
    <link rel="icon" type="image/png" href="/icon/favicon-16x16.png" sizes="16x16">
    <link rel="manifest" href="/manifest.json">
    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#33edc1">
    <meta name="theme-color" content="#ffffff">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700" rel="stylesheet">
    <link rel="stylesheet" href="/css/app.css" type="text/css">
    <title>Your Site
    </title><!--[if lt IE 10]>
    <script src="/js/polyfill/html5-shiv.js"></script><![endif]-->
  </head>
  <body id="index">
    <!-- Header-->
    <input id="show-mobile-menu" type="checkbox">
    <header>
      <header-menu-complex class="nav complex-menus" itemscope itemtype="WebsiteHeader">
        <meta itemprop="type" content="complex">
        <div class="left logos"><a class="logo-link" href="/" itemprop="logos" itemscope itemtype="WebsiteLogo"><span itemprop="url">YOUR SITE</span></a>
        </div>
        <div class="right secondary"><a class="fade-on-hover" href="" tabindex="0">Support</a><a class="fade-on-hover" href="/" tabindex="0">Call to Action</a>
        </div>
        <div class="center primary"><span class="menu" tabindex="0" data-menu-title="Menu 1" onmouseenter="{ showMenu }" onfocus="{ showMenu }" onmouseleave="{ hideMenu }" onblur="{ hideMenu }">
            <div class="menu-title fade-on-hover">Menu 1</div></span><span class="menu" tabindex="0" data-menu-title="Menu 2" onmouseenter="{ showMenu }" onfocus="{ showMenu }" onmouseleave="{ hideMenu }" onblur="{ hideMenu }">
            <div class="menu-title fade-on-hover">Menu 2</div></span>
        </div>
        <div class="menu-wrapper { active: menuToShow }" onmouseleave="{ hideMenu }">
          <div class="menu-bodies" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection">
            <div class="menu-body { active: &quot;Menu 1&quot; == menuToShow, from-right: slideDirection == &quot;right&quot;, from-left: slideDirection == &quot;left&quot;}" data-menu="Menu 1" itemprop="menus" itemscope itemtype="WebsiteMenu">
              <div class="menu-content">
                <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                    <div class="menu-link-text">
                      <div class="menu-link-name" itemprop="name">Link 1</div>
                      <div class="menu-link-description" itemprop="description">This is Link 1</div>
                    </div></a></div>
                <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                    <div class="menu-link-text">
                      <div class="menu-link-name" itemprop="name">Link 2</div>
                      <div class="menu-link-description" itemprop="description">This is Link 2</div>
                    </div></a></div>
                <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                    <div class="menu-link-text">
                      <div class="menu-link-name" itemprop="name">Link 1</div>
                      <div class="menu-link-description" itemprop="description">This is Link 3</div>
                    </div></a></div>
              </div>
            </div>
            <div class="menu-body { active: &quot;Menu 2&quot; == menuToShow, from-right: slideDirection == &quot;right&quot;, from-left: slideDirection == &quot;left&quot;}" data-menu="Menu 2" itemprop="menus" itemscope itemtype="WebsiteMenu">
              <div class="menu-content">
                <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                    <div class="menu-link-text">
                      <div class="menu-link-name" itemprop="name">Link 1</div>
                      <div class="menu-link-description" itemprop="description">This is Link 1</div>
                    </div></a></div>
                <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                    <div class="menu-link-text">
                      <div class="menu-link-name" itemprop="name">Link 2</div>
                      <div class="menu-link-description" itemprop="description">This is Link 2</div>
                    </div></a></div>
                <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                    <div class="menu-link-text">
                      <div class="menu-link-name" itemprop="name">Link 1</div>
                      <div class="menu-link-description" itemprop="description">This is Link 3</div>
                    </div></a></div>
              </div>
            </div>
          </div>
          <div class="menu-bodies" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection"><span class="meta-only" itemprop="menus" itemscope itemtype="WebsiteMenu">
              <meta itemprop="url" content="">
              <meta itemprop="name" content="Support"></span><span class="meta-only" itemprop="menus" itemscope itemtype="WebsiteMenu">
              <meta itemprop="url" content="/">
              <meta itemprop="name" content="Call to Action"></span>
          </div>
        </div>
      </header-menu-complex>
      <header-menu-mobile class="mobile-menus">
        <label class="show-mobile-icon fade-on-hover" for="show-mobile-menu">&#x2630;</label>
        <div class="mobile-menu-content">
          <div class="mobile-menu-wrapper">
            <label class="close-mobile-icon fade-on-hover" for="show-mobile-menu">&#215;</label>
            <div class="menu-collection" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection"><span class="menu" tabindex="0" itemprop="menus" itemscope itemtype="WebsiteMenu">
                <input type="checkbox" id="menu-1">
                <label class="menu-title fade-on-hover" for="menu-1">Menu 1</label>
                <div class="menu-body">
                  <div class="menu-content">
                    <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                        <div class="menu-link-text">
                          <div class="menu-link-name" itemprop="name">Link 1</div>
                          <div class="menu-link-description" itemprop="description">This is Link 1</div>
                        </div></a></div>
                    <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                        <div class="menu-link-text">
                          <div class="menu-link-name" itemprop="name">Link 2</div>
                          <div class="menu-link-description" itemprop="description">This is Link 2</div>
                        </div></a></div>
                    <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                        <div class="menu-link-text">
                          <div class="menu-link-name" itemprop="name">Link 1</div>
                          <div class="menu-link-description" itemprop="description">This is Link 3</div>
                        </div></a></div>
                  </div>
                </div></span><span class="menu" tabindex="0" itemprop="menus" itemscope itemtype="WebsiteMenu">
                <input type="checkbox" id="menu-2">
                <label class="menu-title fade-on-hover" for="menu-2">Menu 2</label>
                <div class="menu-body">
                  <div class="menu-content">
                    <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                        <div class="menu-link-text">
                          <div class="menu-link-name" itemprop="name">Link 1</div>
                          <div class="menu-link-description" itemprop="description">This is Link 1</div>
                        </div></a></div>
                    <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                        <div class="menu-link-text">
                          <div class="menu-link-name" itemprop="name">Link 2</div>
                          <div class="menu-link-description" itemprop="description">This is Link 2</div>
                        </div></a></div>
                    <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a href="" itemprop="url">
                        <div class="menu-link-text">
                          <div class="menu-link-name" itemprop="name">Link 1</div>
                          <div class="menu-link-description" itemprop="description">This is Link 3</div>
                        </div></a></div>
                  </div>
                </div></span>
            </div>
            <div class="menu-collection" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection"><a class="fade-on-hover" href="" tabindex="0" itemprop="url"><span itemprop="name">Support</span></a><a class="fade-on-hover" href="/" tabindex="0" itemprop="url"><span itemprop="name">Call to Action</span></a>
            </div>
          </div>
        </div>
      </header-menu-mobile>
    </header>
    <!-- The scrollable body goes here-->
    <!-- This exists to support optional css parallax-->
    <!-- import css/parallax/parallax.styl to enable it-->
    <main class="parallax">
      <hero class="hero columns">
        <div class="content column1">
          <h1>YOUR SITE</h1>
          <h3>It can sell things online</h3>
        </div>
      </hero>
      <footer>
        <div class="footer-menu">
          <div class="menu-collection" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection"><span class="menu" tabindex="0" itemprop="menus" itemscope itemtype="WebsiteMenu"><strong class="menu-title">Menu 1</strong>
              <div class="menu-body">
                <div class="menu-content">
                  <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a class="fade-on-hover" href="" tabindex="0" itemprop="url">
                      <div class="menu-link-text">
                        <div class="menu-link-name" itemprop="name">Link 1</div>
                      </div></a></div>
                  <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a class="fade-on-hover" href="" tabindex="0" itemprop="url">
                      <div class="menu-link-text">
                        <div class="menu-link-name" itemprop="name">Link 2</div>
                      </div></a></div>
                  <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a class="fade-on-hover" href="" tabindex="0" itemprop="url">
                      <div class="menu-link-text">
                        <div class="menu-link-name" itemprop="name">Link 3</div>
                      </div></a></div>
                </div>
              </div></span>
          </div>
          <div class="menu-collection" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection"><span class="menu" tabindex="0" itemprop="menus" itemscope itemtype="WebsiteMenu"><strong class="menu-title">Menu 2</strong>
              <div class="menu-body">
                <div class="menu-content">
                  <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a class="fade-on-hover" href="" tabindex="0" itemprop="url">
                      <div class="menu-link-text">
                        <div class="menu-link-name" itemprop="name">Link 1</div>
                      </div></a></div>
                  <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a class="fade-on-hover" href="" tabindex="0" itemprop="url">
                      <div class="menu-link-text">
                        <div class="menu-link-name" itemprop="name">Link 2</div>
                      </div></a></div>
                  <div class="menu-link" itemprop="links" itemscope itemtype="WebsiteMenuLink"><a class="fade-on-hover" href="" tabindex="0" itemprop="url">
                      <div class="menu-link-text">
                        <div class="menu-link-name" itemprop="name">Link 3</div>
                      </div></a></div>
                </div>
              </div></span>
          </div>
          <div class="menu-collection" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection"><a class="fade-on-hover" href="" tabindex="0" itemprop="url"><strong itemprop="name">Support</strong></a>
          </div>
          <div class="menu-collection" itemprop="menuCollections" itemscope itemtype="WebsiteMenuCollection"><a class="fade-on-hover" href="/" tabindex="0" itemprop="url"><strong itemprop="name">Call to Action</strong></a>
          </div>
        </div>
        <div class="footer-small-print">
          <div class="logos"><a class="logo-link" href="http://www.hanzo.ai" itemprop="logos" itemscope itemtype="WebsiteLogo"><img class="logo-image" src="http://hanzo.ai/img/logo.png" alt="Powered by Hanzo" itemprop="image"><span itemprop="url">Powered by Hanzo</span></a>
          </div><small class="copyright">© Your Site 2018</small>
        </div>
      </footer>
    </main>
    <privacy-popup>
    </privacy-popup><!--[if IE]>
    <div class="browserupgrade"></div>
    <p>
      You are using an strong outdated  browser. Please
      a(href='http://browsehappy.com/') upgrade your browser to improve
      your experience and security.
    </p><![endif]-->
    <script src="/js/app.js?v=#{ version }"></script>
    <script>
      !function(t,e,a){var
      r,n,c,i,o,s,l,u;if(null==t.analytics){for(r=[],r.methods=["ab","alias","group","identify","off","on","once","page","pageview","ready","track","trackClick","trackForm","trackLink","trackSubmit"],l=r.methods,c=function(t){r[t]=function(){var
      e;return
      e=Array.prototype.slice.call(arguments),e.unshift(t),r.push(e),r}},i=0,o=l.length;o>i;i++)s=l[i],c(s);return
      u=e.createElement("script"),u.async=!0,u.type="text/javascript",u.src=a,n=e.getElementsByTagName("script")[0],n.parentNode.insertBefore(u,n),t.analytics=r}}(window,document,"//cdn.hanzo.io/a/yoursite.js");
    </script>
  </body>
</html>