# Basic HTML Markup

The general template markup is the same throughout the files. Please make sure that you have the correct HTML markup first before doing any customizations.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Rhye – AJAX Portfolio HTML5 Template</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta content="telephone=no" name="format-detection" />
  <meta name="HandheldFriendly" content="true" />
  <!-- Google Fonts -->
  <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Cinzel:400,700%7CRaleway:500,500i,600,700%7CMaterial+Icons&amp;display=swap" />
  <!-- Template Vendor's Stylesheet -->
  <link rel="stylesheet" type="text/css" href="css/vendor.css" />
  <!-- Template Main Stylesheet -->
  <link rel="stylesheet" type="text/css" 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 text-center" id="js-preloader" data-arts-theme-text="light">
      ...
    </div>
    <!-- - PAGE PRELOADER -->

    <!-- 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>
    <!-- - Loading Spinner -->

    <!-- TRANSITION CURTAINS -->
    
    <!-- page curtain AJAX transition -->
    <div class="curtain transition-curtain" id="js-page-transition-curtain">
      ...
    </div>
    <!-- - page curtain AJAX transition -->
    <!-- header curtain show/hide -->
    <div class="header-curtain curtain" id="js-header-curtain">
      ...
    </div>
    <!-- - header curtain show/hide -->
    <!-- header curtain AJAX transition -->
    <div class="header-curtain header-curtain_transition curtain" id="js-header-curtain-transition">
      ...
    </div>
    <!-- - header curtain AJAX transition -->

    <!-- - TRANSITION CURTAINS -->

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

    <!-- PAGE HEADER -->
    <header class="header header_menu-right js-header-sticky header_fixed container-fluid" id="page-header" data-arts-theme-text="dark" data-arts-header-sticky-theme="bg-white" data-arts-header-logo="primary" data-arts-header-sticky-logo="primary" data-arts-header-overlay-theme="light" data-arts-header-overlay-background="#fff">
      ...
    </header>
    <!-- - PAGE HEADER -->
    
    <!-- PAGE MAIN -->
    <div class="js-smooth-scroll bg-dark-1" id="page-wrapper" data-barba="container">
      <main class="page-wrapper__content">
        ...
        <!-- PAGE FOOTER -->
        <footer class="footer container-fluid" id="page-footer" data-arts-theme-text="dark" data-arts-footer-logo="primary">
          ...
        </footer>
        <!-- - PAGE FOOTER -->
      </main>
    </div>
    <!-- - PAGE MAIN -->
  </div>
  <canvas id="js-webgl"></canvas>
  <!-- List Hover Shaders -->
  <script id="list-hover-vs" type="x-shader/x-vertex">...</script>
  <script id="list-hover-fs" type="x-shader/x-fragment">...</script>
  <!-- - List Hover Shaders -->
  <!-- Slider Textures Shaders -->
  <script id="slider-textures-vs" type="x-shader/x-vertex">...</script>
  <script id="slider-textures-horizontal-fs" type="x-shader/x-fragment">...</script>
  <script id="slider-textures-vertical-fs" type="x-shader/x-fragment">...</script>
  <!-- - Slider Textures Shaders -->
  <!-- PhotoSwipe -->
  <div class="pswp" tabindex="-1" role="dialog" aria-hidden="true" data-arts-theme-text="light">
    ...
  </div>
  <!-- - PhotoSwipe -->
  <!-- VENDOR SCRIPTS -->
  <script src="js/vendor.js"></script>
  <!-- - VENDOR SCRIPTS -->
  <!-- COMPONENTS -->
  <script src="js/components.js"></script>
  <!-- - COMPONENTS -->
  <script src="https://maps.googleapis.com/maps/api/js?callback=Function.prototype&key=AIzaSyBpOoWz6kPLs14kPNO8FEzP3rzaHVpZ8nw" async></script>
</body>
</html>