latemic / arta-landing Goto Github PK

<!-- 
  I don't like layout complexity, please make it more simple
-->
<!-- 
  Why <nav> ? Not <header>?
-->
<nav class="navbar navbar-fixed-top">
  <!-- 
    Why do we container and row together? Maybe it's better to use container-fluid? 
  -->
  <div class="container">
    <div class="row">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
            <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="logo" href="#">
          <!-- 
            Please move arta-logo to logo background instead of empty <div>
          -->
          <div class="arta-logo"></div>
          <!-- 
            Please use text-transform: uppercase, or bootstrap .text-uppercase
          -->
          <h1>ARTA</h1>
        </a>
      </div>
      <div class="header_right pull-right  ">
        <!-- 
          Please use text-transform: uppercase, or bootstrap .text-uppercase
        -->
        <a href="#" class="btn" data-toggle="modal" data-target="#signinModal">SIGN IN</a>
        <!-- 
          Please use text-transform: uppercase, or bootstrap .text-uppercase
        -->
        <a href="#" class="btn btn_blue_bg" data-toggle="modal" data-target="#signupModal">START FREE</a>
      </div>
      <!-- 
        Vertical align is incorrect - look in design. How did you calculate offset?
      -->
      <div class="collapse navbar-collapse col-lg-4 col-lg-offset-2" id="bs-example-navbar-collapse-1">
        <!-- 
          <nav> inside <nav> ? Please use <ul>
        -->
        <nav class="menu">
          <li>
            <a href="#" class="dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">Products</a>
            <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
              <div class="menu_close"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNCIgaGVpZ2h0PSIxNCIgdmlld0JveD0iMCAwIDE0IDE0Ij4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0tNS01aDI0djI0SC01eiIvPiAgICAgICAgPGcgc3Ryb2tlPSIjMTg1ODk5IiBzdHJva2Utd2lkdGg9IjIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xLjA1MyAxLjA1M0wxMy4wOSAxMy4wOU0xLjA1MyAxMy4wODlMMTMuMDkgMS4wNTMiLz4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==" alt=""></div>
              <div class="triangle-with-shadow"></div>
              <li>
                <a href="#">
                  <div class="menu_img"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyOCIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDI4IDMyIj4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSI2MS4yNDUlIiB4Mj0iMTguOTQ3JSIgeTE9IjE0Mi40ODclIiB5Mj0iMTkuMzc2JSI+ICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM1OTFDOSIvPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4NTg5OSIvPiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4gICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeDE9IjUwJSIgeDI9IjUwJSIgeTE9Ii03MC4xNzclIiB5Mj0iMTAwJSI+ICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM1OTFDOSIvPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4NTg5OSIvPiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4gICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjUwJSIgeDI9IjE5LjE0MSUiIHkxPSIwJSIgeTI9IjgyLjA2MyUiPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiMzNTkxQzkiLz4gICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMxODU4OTkiLz4gICAgICAgIDwvbGluZWFyR3JhZGllbnQ+ICAgIDwvZGVmcz4gICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxwYXRoIGQ9Ik0tMTEtOWg0OXY0OWgtNDl6Ii8+ICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNMzMuMTggMTQuMjIzbDEzLjM1IDcuNzA4LTYuNzMyIDMuOTUzLTYuNjc1LTMuODU0LTYuNjQyIDMuNzk1LTYuODM0LTMuOTQ1eiIgdHJhbnNmb3JtPSJyb3RhdGUoNjAgMzUuMzgzIDYuMDI4KSIvPiAgICAgICAgPHBhdGggZmlsbD0idXJsKCNiKSIgZD0iTTI0Ljg1NSAyOC43MzdsMTMuMzk3IDcuNzA4LTYuNzkgMy44NTQtNi42MDctMy44NTRMMTguMjUgNDAuM2wtNi43OS0zLjg1NHoiIHRyYW5zZm9ybT0ibWF0cml4KDEgMCAwIC0xIC0xMSA2MC4wMzYpIi8+ICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNMTYuNjYzIDE0LjIyM2wxMy4zNSA3LjcwOC02LjczMyAzLjk1NC02LjY3NS0zLjg1NC02LjY0IDMuNzk0TDMuMTMgMjEuODh6IiB0cmFuc2Zvcm09InNjYWxlKC0xIDEpIHJvdGF0ZSg2MCAxMy4yOTQgLTMuNjIzKSIvPiAgICA8L2c+PC9zdmc+" alt=""></div>
                  <div class="menu_info">
                    <!-- 
                      Please use text-transform: uppercase, or bootstrap .text-uppercase
                    -->
                    <span>ARTA MOBILE SDK</span>
                    <p>Make a realistic preview of your<br> products at people homes</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="menu_img"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNSIgaGVpZ2h0PSIzNSIgdmlld0JveD0iMCAwIDI1IDM1Ij4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIwJSIgeTE9IjAlIiB5Mj0iMTAwJSI+ICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUxQkRGNSIvPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4ODhFOCIvPiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4gICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeDE9IjEwMCUiIHgyPSItOS44OCUiIHkxPSIxMDAlIiB5Mj0iLTkuMzYyJSI+ICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUxQkRGNSIvPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI4ODhFOCIvPiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4gICAgICAgIDxsaW5lYXJHcmFkaWVudCBpZD0iYyIgeDE9IjUwJSIgeDI9IjUwJSIgeTE9IjAlIiB5Mj0iMTAwJSI+ICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM1OTFDOSIvPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE4NTg5OSIvPiAgICAgICAgPC9saW5lYXJHcmFkaWVudD4gICAgPC9kZWZzPiAgICA8ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPHBhdGggZD0iTS0xMS03aDQ5djQ5aC00OXoiLz4gICAgICAgIDxwYXRoIGZpbGw9InVybCgjYSkiIGQ9Ik01Ljk1MyAwbDUuOTU0IDMuNTF2Ny4wMjNMNS45NTMgNy4wMjJ6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMi44MTMgNy4xOTYpIi8+ICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2IpIiBkPSJNMCAwbDUuOTUzIDMuNTF2Ny4wMjNMMCA3LjAyMnoiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDE4Ljc2NiA3LjE5NikiLz4gICAgICAgIDxwYXRoIGZpbGw9InVybCgjYykiIGQ9Ik01Ljk1MyA2Ljg3bDUuOTU0IDMuNDM0LTUuOTU0IDMuNDM0TDAgMTAuMzA0eiIgdHJhbnNmb3JtPSJtYXRyaXgoLTEgMCAwIDEgMjQuNzIgNy4xOTYpIi8+ICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNNS45NTMgMGw1Ljk1NCAzLjUxdjcuMDIzTDUuOTUzIDcuMDIyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLjkwNyAuNzg1KSIvPiAgICAgICAgPHBhdGggZmlsbD0idXJsKCNiKSIgZD0iTTAgMGw1Ljk1MyAzLjUxdjcuMDIzTDAgNy4wMjJ6IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSA2Ljg2IC43ODUpIi8+ICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNNS45NTMgNi44N2w1Ljk1NCAzLjQzNC01Ljk1NCAzLjQzNEwwIDEwLjMwNHoiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDEyLjgxMyAuNzg1KSIvPiAgICAgICAgPGc+ICAgICAgICAgICAgPHBhdGggZmlsbD0idXJsKCNhKSIgZD0iTTUuOTUzIDBsNS45NTQgMy41MXY3LjAyM0w1Ljk1MyA3LjAyMnoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuODYgMTAuODYpIi8+ICAgICAgICAgICAgPHBhdGggZmlsbD0idXJsKCNiKSIgZD0iTTAgMGw1Ljk1MyAzLjUxdjcuMDIzTDAgNy4wMjJ6IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxMi44MTMgMTAuODYpIi8+ICAgICAgICAgICAgPHBhdGggZmlsbD0idXJsKCNjKSIgZD0iTTUuOTUzIDYuODdsNS45NTQgMy40MzQtNS45NTQgMy40MzRMMCAxMC4zMDR6IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAxOC43NjYgMTAuODYpIi8+ICAgICAgICA8L2c+ICAgICAgICA8Zz4gICAgICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2EpIiBkPSJNNS45NTMgMGw1Ljk1NCAzLjUxdjcuMDIzTDUuOTUzIDcuMDIyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTIuODEzIDIwLjkzNSkiLz4gICAgICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2IpIiBkPSJNMCAwbDUuOTUzIDMuNTF2Ny4wMjNMMCA3LjAyMnoiIHRyYW5zZm9ybT0ibWF0cml4KC0xIDAgMCAxIDE4Ljc2NiAyMC45MzUpIi8+ICAgICAgICAgICAgPHBhdGggZmlsbD0idXJsKCNjKSIgZD0iTTUuOTUzIDYuODdsNS45NTQgMy40MzQtNS45NTQgMy40MzRMMCAxMC4zMDR6IiB0cmFuc2Zvcm09Im1hdHJpeCgtMSAwIDAgMSAyNC43MiAyMC45MzUpIi8+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=" alt=""></div>
                  <div class="menu_info">
                    <!-- 
                      Please use text-transform: uppercase, or bootstrap .text-uppercase
                    -->
                    <span>ARTA AR CLOUD</span>
                    <p>Store and manage access to your<br> 3D assets</p>
                  </div>
                </a>
              </li>
              <li>
                <a href="#">
                  <div class="menu_img"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNCIgdmlld0JveD0iMCAwIDMwIDM0Ij4gICAgPGRlZnM+ICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImEiIHgxPSIzMC4zNjIlIiB4Mj0iLTIwLjE4NyUiIHkxPSItMTIuNzY3JSIgeTI9Ijc5LjYxNyUiPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM4QUIxRTMiLz4gICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzRDVEOTUiLz4gICAgICAgIDwvbGluZWFyR3JhZGllbnQ+ICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImIiIHgxPSIxNDAuMTc4JSIgeDI9Ii0xMC45MDQlIiB5MT0iLTE5LjkxNCUiIHkyPSI2Ny43OCUiPiAgICAgICAgICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM5M0M0RjYiLz4gICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzRDVEOTUiLz4gICAgICAgIDwvbGluZWFyR3JhZGllbnQ+ICAgICAgICA8bGluZWFyR3JhZGllbnQgaWQ9ImMiIHgxPSI1MCUiIHgyPSI1MCUiIHkxPSIxODkuMTczJSIgeTI9IjAlIj4gICAgICAgICAgICA8c3RvcCBvZmZzZXQ9IjAlIiBzdG9wLWNvbG9yPSIjOTNDNEY2Ii8+ICAgICAgICAgICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjM0Q1RDk1Ii8+ICAgICAgICA8L2xpbmVhckdyYWRpZW50PiAgICA8L2RlZnM+ICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8cGF0aCBkPSJNLTktOGg0OXY0OUgtOXoiLz4gICAgICAgIDxwYXRoIGZpbGw9InVybCgjYSkiIGQ9Ik0xMy43MzguMjM0TDI3LjI5MSA3LjkzdjE1LjM5NGwtMTMuNTUzLTcuNjU2eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS41MzMgMS42MTcpIi8+ICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2IpIiBkPSJNMTMuNzM4LjIzNEwuMTg2IDcuOTMxdjE1LjM5M2wxMy41NTItNy42OTd6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjUzMyAxLjYxNykiLz4gICAgICAgIDxwYXRoIHN0cm9rZT0iIzk1QzNGMiIgc3Ryb2tlLXdpZHRoPSIxLjM1IiBkPSJNMTUuMjcxIDEuM2wxMy4yNyA3LjQ4Ni0xMy4yNyA3LjQ4NS0xMy4yNy03LjQ4NUwxNS4yNyAxLjN6Ii8+ICAgICAgICA8cGF0aCBmaWxsPSJ1cmwoI2MpIiBkPSJNMTMuNzM4IDE1LjUyM0wuMTg2IDIzLjE2OGwxMy41NTIgNy42NDQgMTMuNTUzLTcuNjQ0eiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS41MzMgMS42MTcpIi8+ICAgICAgICA8cGF0aCBzdHJva2U9IiM3RUFFREUiIHN0cm9rZS13aWR0aD0iMS4zNSIgZD0iTTEuMzE2IDkuOTU0bDEzLjI0NyA3LjUyM1YzMi41NEwxLjMxNiAyNS4wNTdWOS45NTR6Ii8+ICAgICAgICA8cGF0aCBzdHJva2U9IiM4OEMyRkQiIHN0cm9rZS13aWR0aD0iMS4zNSIgZD0iTTI5LjIyNiA5Ljk1NFYyNS4wMkwxNS45OCAzMi41NDNWMTcuNDc3bDEzLjI0Ny03LjUyM3oiLz4gICAgPC9nPjwvc3ZnPg==" alt=""></div>
                  <div class="menu_info">
                    <!-- 
                      Please use text-transform: uppercase, or bootstrap .text-uppercase
                    -->
                    <span>ARTA 3D VISUALISATION</span>
                    <p>Build your own inventory of the<br> AR-compatible 3D assets</p>
                  </div>
                </a>
              </li>
            </ul>
          </li>

          <li><a href="#">Pricing</a></li>
          <li><a href="#">Support</a></li>
          <li><a href="#">Blog</a></li>
          <li class="nav_sign"><a href="#">Sign in</a></li>
          <li class="nav_start">
            <!-- 
              Please use text-transform: uppercase, or bootstrap .text-uppercase
            -->
            <a href="#" class="btn btn_blue_bg">START FREE</a>
          </li>
        </nav>


      </div>
      

    </div>
    
  </div>

</nav>

<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="ru"> <!--<![endif]-->