# 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&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>