# 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>Cassio – Architect Creative Portfolio AJAX 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"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:100,400,400i,700,700i%7CPlayfair+Display:400,400i,700,700i%7CMaterial+Icons&display=swap"/>
<link rel="stylesheet" type="text/css" href="css/vendor.css"/>
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<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 js-preloader">
<div class="preloader__curtain preloader__curtain_outer bg-dark"></div>
<div class="preloader__content">
<div class="preloader__curtain preloader__curtain_inner bg-accent-primary-1"></div>
<div class="preloader__wrapper-logo"><a class="logo" href="homepage-slider-4.html">
<div class="logo__text"><span class="logo__text-title">Cassio</span></div></a>
</div>
</div>
</div>
<!-- - PAGE PRELOADER -->
<!-- PAGE HEADER -->
<header class="header header_fixed js-sticky-header" data-header-animation="" data-header-sticky-theme="bg-white">
<div class="container-fluid header__controls">
<div class="row justify-content-between align-items-center">
<div class="col text-left header__col-left"><a class="logo" href="homepage-slider-4.html">
<div class="logo__text"><span class="logo__text-title">Cassio</span></div></a>
</div>
<div class="col-auto text-center">
<div class="header__burger" id="js-burger">
<div class="header__burger-line"></div>
<div class="header__burger-line"></div>
</div>
</div>
<div class="col d-none d-md-block text-right header__col-right">
<ul class="social">
<li class="social__item"><a class="fa fa-facebook-f" href="#"></a></li>
<li class="social__item"><a class="fa fa-twitter" href="#"></a></li>
<li class="social__item"><a class="fa fa-instagram" href="#"></a></li>
<li class="social__item"><a class="fa fa-behance" href="#"></a></li>
</ul>
</div>
</div>
<div class="header__overlay-menu-back material-icons" id="js-submenu-back">arrow_back</div>
<!-- - back button -->
</div>
<div class="header__wrapper-overlay-menu container-fluid bg-white">
<div class="header__wrapper-menu">
<!-- menu... -->
</div>
<!-- - menu overlay -->
<div class="header__wrapper-overlay-widgets">
<div class="container-fluid">
<div class="row justify-content-between">
<div class="col-lg-4 text-center d-lg-none">
<ul class="social">
<li class="social__item"><a class="fa fa-facebook-f" href="#"></a></li>
<li class="social__item"><a class="fa fa-twitter" href="#"></a></li>
<li class="social__item"><a class="fa fa-instagram" href="#"></a></li>
<li class="social__item"><a class="fa fa-behance" href="#"></a></li>
</ul>
</div>
<div class="col-lg-4 text-left">
<p class="split-text js-split-text" data-split-text-type="lines" data-split-text-set="lines">4967 Poe Lane<br>Lenexa, KS 66215</p>
</div>
<div class="col-lg-4 text-center">
<p class="split-text js-split-text" data-split-text-type="lines" data-split-text-set="lines"><a href="mailto:support@artemsemkin.com">support@artemsemkin.com</a></p>
</div>
<div class="col-lg-4 text-right">
<p class="split-text js-split-text" data-split-text-type="lines" data-split-text-set="lines">+1 913 522 5256</p>
</div>
</div>
</div>
</div>
<!-- - information -->
<div class="header__circle-letters">
<div class="header__circle-letters-inner">
<!-- morphing letters... -->
</div>
</div>
<!-- - letters -->
<div class="header__curtain bg-ornament"></div>
</div>
</header>
<!-- - PAGE HEADER -->
<div class="page-wrapper js-smooth-scroll" data-barba="container">
<main class="page-wrapper__content">
<!-- content... -->
</main>
</div>
<div class="transition-curtain bg-white"></div>
</div>
<!-- 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?key=AIzaSyDNq0ueciTt6V_9F8Uhce_15ReMqETLWtU"></script>
<!-- PAGE SCRIPTS-->
<!-- - PAGE SCRIPTS-->
</body>
</html>