index.html

<!DOCTYPE html>
<html class="no-js" lang="ru">
  <head>
    <base href="#" />

    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <noscript><meta http-equiv="refresh" content="0; URL=#" /></noscript>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content=" " />
    <meta name="author" content="#" />

    <title>Имя сайта</title>

    <!--<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/apple-touch-icon-72x72-precomposed.png" />
    <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png" />
    <link rel="icon" href="/favicon.ico" type="image/x-icon" />-->

    <link rel="stylesheet" href="css/normalize.css" type="text/css" />
    <link rel="stylesheet" href="css/foundation.css" type="text/css" />
    <link rel="stylesheet" href="css/font-awesome.css" type="text/css" />
    <link rel="stylesheet" href="css/hybridauth.css" type="text/css" />
    <script type="text/javascript" src="js/vendor/modernizr.js"></script>
    <script type="text/javascript" src="https://vk.com/js/api/openapi.js"></script>
  </head>
  <body>
    <div class="off-canvas-wrap">
      <div class="inner-wrap">
        <nav class="tab-bar show-for-small">
          <section class="left-small">
            <a class="left-off-canvas-toggle menu-icon"><span></span></a>
          </section>
          <section class="right tab-bar-section">
            <h1 class="title">Название сайта</h1>
          </section>
        </nav>

        <aside class="left-off-canvas-menu">
          <ul class="off-canvas-list">
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
            <li><a href="#">Ссылка</a></li>
          </ul>
        </aside>

        <section class="main-section">
          <div class="row collapse">
            <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
              <div class="wrapper">
                <header class="hide-for-small">
                  <div class="traw">
                    <div class="row">
                      <div class="small-12 medium-6 large-6 xlarge-6 xxlarge-6 columns">
                        <div class="textdev">
                          <h1 class="fword">Название сайта</h1>
                        </div>
                      </div>
                      <div class="small-12 medium-6 large-6 xlarge-6 xxlarge-6 columns"> </div>
                    </div>
                  </div>
                  <div class="traw">
                    <div class="row collapse">
                      <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                        <nav class="top-bar" data-topbar>
                          <ul class="title-area">
                            <li class="name">
                              <h1><a href="#">Название сайта</a></h1>
                            </li>
                            <li class="toggle-topbar menu-icon"><a><span>Меню</span></a></li>
                          </ul>
                          <section class="top-bar-section">
                            <ul class="right">
                              <li class="divider"></li>
                              <li class="active"><a href="#" >Ссылка</a></li>
                              <li class="divider"></li>
                              <li class="has-dropdown">
                                <a href="#" >Ссылка</a>
                                <ul class="dropdown">
                                  <li class="divider"></li>
                                  <li><a href="#" >Ссылка</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#" >Ссылка</a></li>
                                </ul>
                              </li>
                              <li class="divider"></li>
                              <li><a href="#" >Ссылка</a></li>
                              <li class="divider"></li>
                              <li class="has-dropdown">
                                <a href="#" >Ссылка</a>
                                <ul class="dropdown">
                                  <li class="divider"></li>
                                  <li><a href="#" >Ссылка</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#" >Ссылка</a></li>
                                  <li class="divider"></li>
                                  <li><a href="#" >Ссылка</a></li>
                                </ul>
                              </li>
                              <li class="divider"></li>
                              <li><a href="#" >Ссылка</a></li>
                            </ul>
                          </section>
                        </nav>
                      </div>
                    </div>
                  </div>
                </header>

                <section class="row collapse">
                  <div class="small-12 medium-8 large-6 xlarge-6 xxlarge-6 columns">
                    <div class="row">
                      <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                        <article class="row collapse">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <div class="ar-post">
                              <div class="row">
                              <header class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                <div class="ar-date">
                                  <div class="ar-date-c text-center">
                                    <span class="r-month">October</span>
                                    <span class="r-day">8</span>
                                  </div>
                                </div>
                                <div class="t-imet">
                                  <h2><a href="#">The Myth of Inspiration and Passion</a></h2>
                                  <ul class="ar-meta inline-list">
                                    <li><i class="fa fa-user"></i> By <a href="#">Admin</a></li>
                                    <li><i class="fa fa-bookmark-o"></i> <a href="#">Freelance</a></li>
                                    <li><a href="#">READ MORE</a> <i class="fa fa-arrow-right"></i></li>
                                  </ul>
                                </div>
                              </header>
                              <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                <p><img src="http://placehold.it/200x100" class="img-left">
                                  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh
                                  euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim
                                  ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl
                                  ut aliquip ex ea commodo consequat.</p>
                              </div>
                              </div>
                            </div>
                          </div>
                        </article>
                        <article class="row collapse">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <div class="ar-post">
                              <div class="ar-thumb">
                                <img src="http://placehold.it/350x200" alt="image" />
                              </div>
                              <div class="ar-author hide-for-small">
                                <div class="ar-profile">
                                  <img src="http://placehold.it/350x350" alt="image" />
                                </div>
                              </div>
                              <div class="ar-isi">
                                <div class="row">
                                  <header class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                    <h2><a href="#">Oracle Completes Voyage to Win America’s Cup</a></h2>
                                    <ul class="ar-meta inline-list">
                                      <li><a href="#"><i class="fa fa-bookmark-o"></i> How To's</a></li>
                                      <li><a href="#"><i class="fa fa-calendar-o"></i> November 21, 2013</a></li>
                                    </ul>
                                  </header>
                                  <footer class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                    <a href="#" class="ar-rdmr">READ MORE</a>
                                    <div class="rborder">
                                      <i class="fa fa-arrow-right"></i>
                                    </div>
                                  </footer>
                                </div>
                              </div>
                            </div>
                          </div>
                        </article>
                        <article class="row collapse">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <div class="ar-post">
                              <div class="ar-thumb">
                                <img src="http://placehold.it/350x200" alt="image" />
                              </div>
                              <div class="ar-author hide-for-small">
                                <div class="ar-profile">
                                  <img src="http://placehold.it/350x350" alt="image" />
                                </div>
                              </div>
                              <div class="ar-isi">
                                <div class="row">
                                  <header class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                    <h2><a href="#">Oracle Completes Voyage to Win America’s Cup</a></h2>
                                    <ul class="ar-meta inline-list">
                                      <li><a href="#"><i class="fa fa-bookmark-o"></i> How To's</a></li>
                                      <li><a href="#"><i class="fa fa-calendar-o"></i> November 21, 2013</a></li>
                                    </ul>
                                  </header>
                                  <footer class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                    <a href="#" class="ar-rdmr">READ MORE</a>
                                    <div class="rborder">
                                      <i class="fa fa-arrow-right"></i>
                                    </div>
                                  </footer>
                                </div>
                              </div>
                            </div>
                          </div>
                        </article>
                      </div>
                    </div>
                  </div>

                  <aside class="small-12 medium-4 large-6 xlarge-6 xxlarge-6 columns">
                    <div class="row">
                      <div class="small-12 medium-12 large-6 xlarge-6 xxlarge-6 columns">
                        <div class="row collapse">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <div class="panel success">
                              <div class="row">
                                <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                  <h3><i class="fa fa-unlock"></i> <b>himyf_admin</b></h3>
                                  <p>Вы авторизованы как  Default Admin User</p>
                                </div>
                                <div class="small-4 medium-4 large-4 xlarge-4 xxlarge-4 columns">
                                  <img src="http://placehold.it/350x350" alt="himyf_admin" title="Default Admin User">
                                </div>
                                <div class="small-8 medium-8 large-8 xlarge-8 xxlarge-8 columns">
                                  <p><a href="#" class="button tiny expand">Button 1</a></p>
                                  <p><a href="#" class="button tiny expand">Button 1</a></p>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <div class="panel alert">
                              <div class="row">
                                <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                  <h3><i class="fa fa-play-circle-o"></i> Видео</h3>
                                </div>
                                <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                  <div class="row collapse">
                                    <div class="small-5 medium-5 large-4 xlarge-5 xxlarge-5 columns">
                                      <a href="#"><img src="http://placehold.it/320x180" alt="image" /></a>
                                    </div>
                                    <div class="small-7 medium-7 large-8 xlarge-7 xxlarge-7 columns">
                                      <p class="h-vid"><a href="#">Beatbox Brilliance: Tom Thum at TEDxSydney</a> <br /> <small>November 20, 2013</small></p>
                                    </div>
                                  </div>
                                  <div class="row collapse">
                                    <div class="small-5 medium-5 large-4 xlarge-5 xxlarge-5 columns">
                                      <a href="#"><img src="http://placehold.it/320x180" alt="image" /></a>
                                    </div>
                                    <div class="small-7 medium-7 large-8 xlarge-7 xxlarge-7 columns">
                                      <p class="h-vid"><a href="#">Beatbox Brilliance: Tom Thum at TEDxSydney</a> <br /> <small>November 20, 2013</small></p>
                                    </div>
                                  </div>
                                  <div class="row collapse">
                                    <div class="small-5 medium-5 large-4 xlarge-5 xxlarge-5 columns">
                                      <a href="#"><img src="http://placehold.it/320x180" alt="image" /></a>
                                    </div>
                                    <div class="small-7 medium-7 large-8 xlarge-7 xxlarge-7 columns">
                                      <p class="h-vid"><a href="#">Beatbox Brilliance: Tom Thum at TEDxSydney</a> <br /> <small>November 20, 2013</small></p>
                                    </div>
                                  </div>
                                  <div class="row collapse">
                                    <div class="small-5 medium-5 large-4 xlarge-5 xxlarge-5 columns">
                                      <a href="#"><img src="http://placehold.it/320x180" alt="image" /></a>
                                    </div>
                                    <div class="small-7 medium-7 large-8 xlarge-7 xxlarge-7 columns">
                                      <p class="h-vid"><a href="#">Beatbox Brilliance: Tom Thum at TEDxSydney</a> <br /> <small>November 20, 2013</small></p>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                      <div class="small-12 medium-12 large-6 xlarge-6 xxlarge-6 columns">
                        <div class="row collapse">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <div class="panel warning">
                              <div class="row">
                                <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                  <h3><i class="fa fa-search"></i> Поиск</h3>
                                  <form data-key="6110752068fa642e90d173ae9bbc4ecfa654e044" class="form-search msearch2" action="#" method="get">
                                    <div class="row collapse">
                                      <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                        <div class="row collapse">
                                          <div class="small-10 medium-10 large-10 xlarge-10 xxlarge-10 columns">
                                            <input type="search" name="query" placeholder="Поиск">
                                          </div>
                                          <div class="small-2 medium-2 large-2 xlarge-2 xxlarge-2 columns">
                                            <button type="submit" class="button postfix"><i class="fa fa-search"></i></button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                  </form>
                                </div>
                              </div>
                            </div>
                          </div>
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns hide-for-small">
                            <style>
                              #groups,
                              #groups iframe {
                                width: 100% !important; }
                              #groups {
                                margin-bottom: 1.25rem; }
                            </style>
                            <div id="groups" style="max-height: 400px; width: 195px; background-image: url(http://vk.com/images/upload.gif); background-color: transparent; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </aside>
                </section>

                <footer>
                  <div class="footer">
                    <div class="row">
                      <div class="fooline"></div>
                      <div class="small-12 medium-12 large-4 xlarge-4 xxlarge-4 columns foover">
                        <div class="row">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <h3>Lorem ipsum dolor sit amet</h3>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

                          </div>
                        </div>
                      </div>
                      <div class="small-12 medium-12 large-4 xlarge-4 xxlarge-4 columns foover">
                        <div class="row">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <h3><i class="fa fa-envelope-o"></i> Lorem ipsum dolor sit amet</h3>
                            <form method="post" action="">
                              <div class="row collapse">
                                <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                                  <input type="hidden" name="sx_action" value="subscribe">
                                  <button class="button small right" type="submit">Lorem!</button>
                                </div>
                              </div>
                            </form>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                          </div>
                        </div>
                      </div>
                      <div class="small-12 medium-12 large-4 xlarge-4 xxlarge-4 columns foover">
                        <div class="row">
                          <div class="small-12 medium-12 large-12 xlarge-12 xxlarge-12 columns">
                            <h3>Lorem ipsum dolor sit amet</h3>
                            <p>Lorem ipsum dolor sit amet    0.1041 s</p>
                            <p>Lorem ipsum dolor sit amet    79</p>
                            <p>Lorem ipsum dolor sit amet    0.6565 s</p>
                            <p>Lorem ipsum dolor sit amet    0.7606 s</p>
                            <p>Lorem ipsum dolor sit amet    database</p>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>

                  <div class="copyright">
                    <div class="row">
                      <div class="small-12 medium-12 large-5 xlarge-6 xxlarge-6 columns">
                        <p>
                          <span>© Copyright. SITE.RU</span><br>
                          <span>Спасибо <a target="_blank" href="http://bezumkin.ru/">Bezumkin.ru</a> и <a target="_blank" href="http://simpledream.ru/">Simple Dream</a></span>
                        </p>
                      </div>
                      <nav class="small-12 medium-12 large-7 xlarge-6 xxlarge-6 columns">
                        <ul class="inline-list right">
                          <li><a href="#">Ссылка</a></li>
                          <li><a href="#">Ссылка</a></li>
                          <li><a href="#">Ссылка</a></li>
                          <li><a href="#">Ссылка</a></li>
                          <li><a href="#">Ссылка</a></li>
                        </ul>
                      </nav>
                    </div>
                  </div>
                </footer>
              </div>
            </div>
          </div>
        </section>

        <a class="exit-off-canvas"></a>
      </div>
    </div>
    <script type="text/javascript" src="js/vendor/jquery.js"></script>
    <script type="text/javascript" src="js/vendor/fastclick.js"></script>
    <script type="text/javascript" src="js/vendor/placeholder.js"></script>
    <script type="text/javascript" src="js/vendor/jquery.cookie.js"></script>
    <!--<script type="text/javascript" src="js/foundation.min.js"></script>-->

    <script type="text/javascript" src="js/foundation/foundation.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.abide.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.accordion.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.alert.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.clearing.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.dropdown.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.interchange.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.joyride.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.magellan.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.offcanvas.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.orbit.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.reveal.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.tab.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.tooltip.js"></script>
    <script type="text/javascript" src="js/foundation/foundation.topbar.js"></script>

    <script type="text/javascript" src="js/apps.js"></script>
    <script type="text/javascript">
      //Foundation
      $(document).foundation();
      //VK
      VK.Widgets.Group("groups", {mode: 0, width: "195", height: "400", color1: '2c3e50', color2: 'ffffff', color3: '455565'}, 62529585);
    </script>
    <script type="text/javascript" async>
      //GA
      (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','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-46206329-2', 'himyf.ru');
      ga('send', 'pageview');
    </script>
  </body>
</html>