Asli

# Base 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>Asli – AJAX Portfolio HTML5 Template</title>
    <link rel="preconnect" href="https://fonts.googleapis.com"/>
    <link rel="preconnect" href="https://fonts.gstatic.com"/>
    <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"/>
    <meta name="description" content="Asli – AJAX Portfolio HTML5 Template"/>
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&amp;display=swap" rel="stylesheet"/>
    <!-- Local Fonts -->
    <link href="css/custom-fonts.css" rel="stylesheet"/>
    <!-- Vendor styles -->
    <link rel="stylesheet" type="text/css" href="css/vendor.css"/>
    <!-- Template main styles -->
    <link rel="stylesheet" type="text/css" href="css/main.css"/>
    <!-- Favicons & App Icons -->
    <link rel="apple-touch-icon" sizes="57x57" href="./img/favicon/apple-icon-57x57.png"/>
    <link rel="apple-touch-icon" sizes="60x60" href="./img/favicon/apple-icon-60x60.png"/>
    <link rel="apple-touch-icon" sizes="72x72" href="./img/favicon/apple-icon-72x72.png"/>
    <link rel="apple-touch-icon" sizes="76x76" href="./img/favicon/apple-icon-76x76.png"/>
    <link rel="apple-touch-icon" sizes="114x114" href="./img/favicon/apple-icon-114x114.png"/>
    <link rel="apple-touch-icon" sizes="120x120" href="./img/favicon/apple-icon-120x120.png"/>
    <link rel="apple-touch-icon" sizes="144x144" href="./img/favicon/apple-icon-144x144.png"/>
    <link rel="apple-touch-icon" sizes="152x152" href="./img/favicon/apple-icon-152x152.png"/>
    <link rel="apple-touch-icon" sizes="180x180" href="./img/favicon/apple-icon-180x180.png"/>
    <link rel="icon" type="image/png" sizes="192x192" href="./img/favicon/android-icon-192x192.png"/>
    <link rel="icon" type="image/png" sizes="32x32" href="./img/favicon/favicon-32x32.png"/>
    <link rel="icon" type="image/png" sizes="96x96" href="./img/favicon/favicon-96x96.png"/>
    <link rel="icon" type="image/png" sizes="16x16" href="./img/favicon/favicon-16x16.png"/>
    <link rel="manifest" href="./img/favicon/manifest.json"/>
    <meta name="msapplication-TileColor" content="#060707"/>
    <meta name="msapplication-TileImage" content="./img/favicon/ms-icon-144x144.png"/>
    <meta name="theme-color" content="#060707"/>
  </head>
  <body>
    <!-- PAGE PRELOADER -->
    <div class="preloader section-fullheight bg-dark-4 text-center" id="js-preloader" data-arts-color-theme="dark" data-arts-component-name="Preloader" data-arts-os-animation="true">
      ...
    </div>
    <!-- - PAGE PRELOADER -->
    <div data-barba="wrapper">
      <!-- PAGE HEADER -->
      <header class="header header_overlay-logo-center-burger-right js-header" id="page-header" data-arts-component-name="Header">
        ...
      </header>
      <!-- - PAGE HEADER -->
      <!-- PAGE MAIN CONTAINER -->
      <main class="page-wrapper bg-gray-3" id="page-wrapper" data-barba="container" data-arts-color-theme="dark">
        <div class="page-wrapper__content" id="page-wrapper__content">
          <!-- PAGE CONTENT -->
          ...
          <!-- - PAGE CONTENT -->
          <!-- PAGE FOOTER -->
          ...
          <!-- - PAGE FOOTER -->
        </div>
      </main>
      <!-- Cursor Follower -->
      <div class="arts-cursor" data-arts-cursor-follower="cursor">
        ...
      </div>
      <!-- - Cursor Follower -->
      <!-- Mobile Loading Spinner -->
      <svg class="spinner" id="loading-indicator" viewBox="25 25 50 50">
        ...
      </svg>
      <!-- - Mobile Loading Spinner -->
      <div class="blocking-curtain" id="page-blocking-curtain"></div>
      <!-- Curtain shape holder -->
      <svg class="curtain-svg" width="1px" height="1px" viewBox="0 0 1 1" version="1.1" xmlns="http://www.w3.org/2000/svg">
        ...
      </svg>
      <!-- - Curtain shape holder -->
    </div>
    <!-- TEMPLATE SCRIPTS -->
    <script src="js/vendor.js"></script>
    <script src="js/framework.js"></script>
    <script src="js/app.js"></script>
    <!-- - TEMPLATE SCRIPTS -->
  </body>
</html>

← Need jQuery? →