Get Started

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>