The light layout has a light color navbar, navigation menu and footer.

CSS Classes

In this page you can experience it. If you want to create a light version template you can use this layout.

This table contains classes related to the light layout. This is a custom layout classes for light layout page requirements.

Classes Description
.layout-light To set layout light you need to add .layout-light class in body <body> tag. Refer HTML markup line no 6.

HTML Markup

This section contains HTML Markup to create light layout. This markup define where to add css classes to make navbar, navigation & footer light.

  • Line no 6: Just add layout-light class in body <body> tag as shown as below HTML markeup for light layout.

<!DOCTYPE html>
<html lang="en">
<head></head>
<body class="layout-light">
  <!-- Start Page Loading -->
  <div id="loader-wrapper">
  </div>
  <!-- End Page Loading -->
  
  <!-- //////////////////////////////////////////////////////////////////////////// -->
  
  <!-- START HEADER -->
  <header id="header" class="page-topbar">
  </header>
  <!-- END HEADER -->
  
  <!-- //////////////////////////////////////////////////////////////////////////// -->
  
  <!-- START MAIN -->
  <div id="main">
    <!-- START WRAPPER -->
    <div class="wrapper">
	
      <!-- START LEFT SIDEBAR NAV-->
      <aside id="left-sidebar-nav" class="nav-expanded nav-lock nav-collapsible">
      </aside>
      <!-- END LEFT SIDEBAR NAV-->
	  
      <!-- //////////////////////////////////////////////////////////////////////////// -->
	  
      <!-- START CONTENT -->
      <section id="content">
      </section>
      <!-- END CONTENT -->
	  
      <!-- //////////////////////////////////////////////////////////////////////////// -->
	  
      <!-- START RIGHT SIDEBAR NAV-->
      <aside id="right-sidebar-nav">
      </aside>
      <!-- LEFT RIGHT SIDEBAR NAV-->
	  
    </div>
      <!-- END WRAPPER -->
   </div>
   <!-- END MAIN -->
	  
      <!-- //////////////////////////////////////////////////////////////////////////// -->
      <!-- START FOOTER -->
      <footer class="page-footer gradient-45deg-purple-deep-orange">
      </footer>
      <!-- END FOOTER -->
</body>
</html>