Kinsey

# Basic HTML Markup

The general template markup is consistent throughout the files. Ensure that you have the correct HTML markup before making any customizations.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Kinsey – AJAX Agency HTML5 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="HandheldFriendly" content="true">
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,300;1,400;1,500&display=swap">
  <!-- Template Vendor's Stylesheet -->
  <link rel="stylesheet" href="css/vendor.css">
  <!-- Template Main Stylesheet -->
  <link rel="stylesheet" href="css/main.css">
  <!-- Favicons & App Icons -->
  <link rel="apple-touch-icon" sizes="57x57" href="img/content/apple-icon-57x57.png">
  <link rel="apple-touch-icon" sizes="60x60" href="img/content/apple-icon-60x60.png">
  <link rel="apple-touch-icon" sizes="72x72" href="img/content/apple-icon-72x72.png">
  <link rel="apple-touch-icon" sizes="76x76" href="img/content/apple-icon-76x76.png">
  <link rel="apple-touch-icon" sizes="114x114" href="img/content/apple-icon-114x114.png">
  <link rel="apple-touch-icon" sizes="120x120" href="img/content/apple-icon-120x120.png">
  <link rel="apple-touch-icon" sizes="144x144" href="img/content/apple-icon-144x144.png">
  <link rel="apple-touch-icon" sizes="152x152" href="img/content/apple-icon-152x152.png">
  <link rel="apple-touch-icon" sizes="180x180" href="img/content/apple-icon-180x180.png">
  <link rel="icon" type="image/png" sizes="192x192" href="img/content/android-icon-192x192.png">
  <link rel="icon" type="image/png" sizes="32x32" href="img/content/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="96x96" href="img/content/favicon-96x96.png">
  <link rel="icon" type="image/png" sizes="16x16" href="img/content/favicon-16x16.png">
  <link rel="manifest" href="img/content/manifest.json">
  <meta name="msapplication-TileColor" content="#ffffff">
  <meta name="msapplication-TileImage" content="img/content/ms-icon-144x144.png">
  <meta name="theme-color" content="#ffffff">
  <link rel="icon" type="image/x-icon" href="img/content/favicon.ico">
</head>
<body>
  <div data-barba="wrapper">
    <!-- PAGE PRELOADER -->
    <div class="preloader preloader_header-menu-hidden mask-reveal" id="js-preloader" data-arts-theme-text="light" data-arts-preloader-logo="secondary">
      ...
    </div>
    <!-- - PAGE PRELOADER -->

    <!-- PAGE HEADER -->
    <header class="header header_fixed container-fluid js-header-sticky" id="page-header" data-arts-theme-text="dark" data-arts-header-sticky-theme="bg-light-1" data-arts-header-logo="primary" data-arts-header-sticky-logo="primary" data-arts-header-sticky-theme-text="dark" data-arts-header-overlay-theme-text="light">
      ...
    </header>
    <!-- - PAGE HEADER -->

    <!-- PAGE MAIN CONTAINER -->
    <div class="js-smooth-scroll" id="page-wrapper" data-barba="container">
      <!-- PAGE CONTENT -->
      <main class="page-wrapper__content">
        ...
      </main>
      <!-- - PAGE CONTENT -->

      <!-- PAGE FOOTER -->
      <footer class="footer pt-medium bg-dark-1" id="page-footer" data-arts-theme-text="light" data-arts-fixed-reveal="data-arts-fixed-reveal" data-arts-fixed-reveal-from="-20vh" data-arts-fixed-reveal-from-opacity="0">
        ...
      </footer>
      <!-- - PAGE FOOTER -->
    </div>
    <!-- - PAGE MAIN CONTAINER -->
  </div>

  <canvas id="js-webgl"></canvas>

  <!-- Cursor Follower -->
  <div class="arts-cursor" id="js-arts-cursor">
    ...
  </div>
  <!-- - Cursor Follower -->

  <!-- Mobile Loading Spinner -->
  <svg class="spinner d-lg-none" id="js-spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="spinner__path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
  </svg>
  <!-- - Mobile Loading Spinner -->

  <!-- Curtain AJAX transition -->
  <div class="transition-curtain" id="js-page-transition-curtain"></div>
  <!-- - Curtain AJAX transition -->

  <!-- PhotoSwipe Lightbox Container -->
  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" data-arts-theme-text="light">
    ...
  </div>
  <!-- - PhotoSwipe Lightbox Container -->

  <!-- VENDOR SCRIPTS -->
  <script src="js/vendor.js"></script>
  <!-- - VENDOR SCRIPTS -->

  <!-- COMPONENTS -->
  <script src="js/components.js"></script>
  <!-- - COMPONENTS -->
</body>
</html>

← Uploading Logo →