index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Bootflat</title>
    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <!-- SmartAddon.com Verification --> 
    <meta name="smartaddon-verification" content="936e8d43184bc47ef34e25e426c508fe" />  
    <link rel="shortcut icon" href="favicon_16.ico"/>
    <link rel="bookmark" href="favicon_16.ico"/> 
    <!-- site css -->
    <link rel="stylesheet" href="css/site.min.css">
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
    <!-- HTML5 shim, for IE6-8 support of HTML5 elements. All other JS at the end of file. -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/site.min.js"></script>
  </head>
  <body class="home">
    <div class="docs-header header--noBackground">
      <!--nav-->
      <nav class="navbar navbar-default navbar-custom" role="navigation">
        <div class="container">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="index.html"><img src="img/logo.png" height="40"></a>
          </div>
          <div class="collapse navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
              <li><a class="nav-link" href="getting-started.html">Getting Started</a></li>
              <li><a class="nav-link" href="documentation.html">Documentation</a></li>
              <li><a class="nav-link" href="free-psd.html">Free PSD</a></li>
            </ul>
          </div>
        </div>
      </nav>
      <!--index-->
      <div class="index">
        <h1>
          <img src="img/logo-index.png" alt="Bootflat: Advanced HTML5 Hybrid Mobile App Framework">
        </h1>
        <h2>BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.0 CSS framework. <br/>And, for the designers, we offer a <a href="free-psd.html">free PSD Download</a>. <br />It provides a faster, easier and less repetitive way for web developers or designers to create elegant web apps. </h2>
        <h3>Compatible Browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.</h3>
        <p class="download-link">
          <a class="btn btn-primary" href="https://github.com/Bootflat/Bootflat.github.io/archive/master.zip">Download (Version 2.0.0)</a>
        </p>
        <p class="version-text">MIT Licensed - Version 2.0.0</p>
        <p class="learn-more Bootflat">
          <a href="#learn-more">Learn more <i class="icon" data-icon="&#xe035"></i></a>
        </p>
      </div>
      <!--social-->
      <ul class="social">
        <li class="github-watch">
          <iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=bootflat.github.io&amp;type=watch&amp;count=true" title="Star on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe>
        </li>
        <li class="github-fork">
          <iframe src="http://ghbtns.com/github-btn.html?user=bootflat&amp;repo=bootflat.github.io&amp;type=fork&amp;count=true" title="Fork on GitHub" frameborder="0" scrolling="0" width="150" height="25"></iframe>
        </li>
        <li class="twitter-follow">
            <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/follow_button.1375828408.html#_=1376720237528&amp;id=twitter-widget-1&amp;lang=en&amp;screen_name=flathemes&amp;show_count=true&amp;show_screen_name=true&amp;size=m" class="twitter-follow-button twitter-follow-button" title="Twitter Follow Button" data-twttr-rendered="true" style="width: 254px; height: 20px;"></iframe>
        </li>
        <li class="twitter-share">
            <iframe allowtransparency="true" frameborder="0" scrolling="no" src="http://platform.twitter.com/widgets/tweet_button.1375828408.html#_=1376720237525&amp;count=horizontal&amp;id=twitter-widget-0&amp;lang=en&amp;original_referer=http%3A%2F%2Fgetbootstrap.com%2F&amp;related=mdo%3ACreator%20of%20Twitter%20Bootstrap&amp;size=m&amp;text=Bootflat&amp;url=http%3A%2F%2Fflathemes.com%2F&amp;via=flathemes" class="twitter-share-button twitter-count-horizontal" title="Twitter Tweet Button" data-twttr-rendered="true" style="width: 116px; height: 20px;"></iframe>
        </li>
      </ul>
      <!--desc-->
      <div id="learn-more" class="desc container">
        <div class="desc__introduces">
          <h3>Designed for everyone, everywhere.</h3>
          <p>Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with <a href="http://sass-lang.com/" target="_blank" rel="external nofollow">Sass 3.3.3</a>.</p>
        </div>
        <div class="desc__features">
          <div class="row">
            <div class="col-md-6">
              <div class="features__photo"><img src="img/feature-bootstrap.png" /></div>
              <h4>Bootstrap 3.1.0</h4>
              <p>Bootflat is built on Bootstrap 3.1.0: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p>
            </div>
             <div class="col-md-6">
              <div class="features__photo"><img src="img/feature-css.png" /></div>
              <h4>HTML5 &amp; CSS3</h4>
              <p>Bootflat's components are built with HTML5 and CSS3. The pages use `header`, `nav` and `section` to build the layout. Bootflat also comes with several splendid color schemes built-in, and allows for easy customization.</p>
            </div> 
          </div>
          <div class="row">
            <div class="col-md-6">
              <div class="features__photo"><img src="img/feature-lightweight.png" /></div>
              <h4>Lightweight</h4>
              <p>Bootflat uses lightweight high-function plugins for maximum performance, keeping CSS and JS file sizes down.</p>
            </div>
            <div class="col-md-6">
              <div class="features__photo"><img src="img/feature-mobile.png" /></div>
              <h4>Mobile first</h4>
              <p>Bootflat is fully responsive, built for mobile-first in mind. It provides off screen navigation, and almost all the widgets are compatible with all screen sizes.</p>
            </div>
          </div>
        </div>
        <div class="desc__introduces">
          <h3>Bootflat UI Kit</h3>
          <p>Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps. <a href="free-psd.html">Go to download it</a>.</p>
          <div class="photo--responsive"><img src="img/bootflat-ui-kit.jpg" /></div>
        </div>
      </div>
      <!--footer-->
      <div class="site-footer">
        <div class="container">
          <div class="download">
            <span class="download__infos">You simply have to <b>try it</b>.</span>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="btn btn-primary" href="https://github.com/bootflat/bootflat.github.io/archive/master.zip">Download Bootflat</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <a class="btn" href="documentation.html">Read the Documentation</a>&nbsp;&nbsp;&nbsp;&nbsp;
            <!-- SmartAddon BEGIN -->
            <script type="text/javascript">
            (function() {
            var s=document.createElement('script');s.type='text/javascript';s.async = true;
            s.src='http://s1'+'.smartaddon.com/share_addon.js';
            var j =document.getElementsByTagName('script')[0];j.parentNode.insertBefore(s,j);
            })();
            </script>

            <a href="http://www.smartaddon.com/?share" title="Share Button" onclick="return sa_tellafriend('','bookmarks')"><img alt="Share" src="http://bootflat.github.io/img/share.gif" border="0" /></a>
            <!-- SmartAddon END -->
          </div>
          <hr class="dashed" />
          <div class="row">
            <div class="col-md-4">
              <h3>Get involved</h3>
              <p>Bootflat is hosted on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and open for everyone to contribute. Please give us some feedback and join the development!</p>
            </div>
            <div class="col-md-4">
              <h3>Contribute</h3>
              <p>You want to help us and participate in the development or the documentation? Just fork Bootflat on <a href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow">GitHub</a> and send us a pull request.</p>
            </div>
            <div class="col-md-4">
              <h3>Found a bug?</h3>
              <p>Open a <a href="https://github.com/bootflat/bootflat.github.io/issues" target="_blank" rel="external nofollow">new issue</a> on GitHub. Please search for existing issues first and make sure to include all relevant information.</p>
            </div>
          </div>
          <hr class="dashed" />
          <div class="row">
            <div class="col-md-6">
              <h3>Talk to us</h3>
              <ul>
                <li>Tweet us at <a href="https://twitter.com/flathemes" target="_blank">@flathemes</a>&nbsp;&nbsp;&nbsp;&nbsp;Email us at <span class="connect">info@flathemes.com</span></li>
                <li>
                  <a title="Twitter" href="https://twitter.com/flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe121"></i></a>
                  <a title="Facebook" href="https://www.facebook.com/Flathemes" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10b"></i></a>
                  <a title="Google+" href="https://plus.google.com/u/0/" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe110"></i></a>
                  <a title="Github" href="https://github.com/bootflat/bootflat.github.io" target="_blank" rel="external nofollow"><i class="icon" data-icon="&#xe10e"></i></a>
                </li>
              </ul>
            </div>
            <div class="col-md-6">
                <!-- Begin MailChimp Signup Form -->
                <link href="//cdn-images.mailchimp.com/embedcode/slim-081711.css" rel="stylesheet" type="text/css">
                <div id="mc_embed_signup">
                <h3 style="margin-bottom: 15px;">Newsletter</h3>
                <form action="http://flathemes.us3.list-manage.com/subscribe/post?u=faba9adaea2b85dc9a5c496bd&amp;id=acd08a1b0f" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
                    <input style="margin-bottom: 10px;" type="email" value="" name="EMAIL" class="email form-control" id="mce-EMAIL" placeholder="email address" required>
                    <span class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-primary"></span>
                </form>
                </div>
                <!--End mc_embed_signup-->
            </div>
          </div>
          <hr class="dashed" />
          <div class="copyright clearfix">
            <p><b>Bootflat</b>&nbsp;&nbsp;&nbsp;&nbsp;<a href="getting-started.html">Getting Started</a>&nbsp;&bull;&nbsp;<a href="documentation.html">Documentation</a>&nbsp;&bull;&nbsp;<a href="free-psd.html">Free PSD</a></p>
            <p>&copy; 2014 <a href="http://www.flathemes.com" target="_blank">FLATHEMES</a>, Inc. All rights reserved. &nbsp;&nbsp;Code licensed under <a href="http://opensource.org/licenses/mit-license.html" target="_blank" rel="external nofollow">MIT License</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/" rel="external nofollow">CC BY 3.0</a>.</p>
          </div>
        </div>
      </div>
      
    </div>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-48721682-1', 'bootflat.github.io');
      ga('send', 'pageview');

    </script>
  </body>
</html>