Version: 1.1 | Release Date: 17th April 2016

Follow the steps below to get started with your Site Template:

  1. Open the Package/HTML Folder to find all the Template Files
  2. Make sure you upload the required files/folders listed below:
    • HTML/css - Extra Stylesheets Folder
    • HTML/fonts - in fonts folder we add 2500+ font icons
    • HTML/images - Images Folder
    • HTML/js - Javacripts Folder
    • HTML/ajax-lightbox-gallery - load More Projects in work.html page
    • HTML/architecture.css - Main Stylesheet File you can also rename it to style.css (for wordpress)
    • HTML/index.html - Index File/Homepage
    The other files can be used according to your preferences.
  3. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

HTML Structure

Architecture follows a simple coding structure. here is the sample:


<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<base href="" >

<!-- Basic Page Needs

     ================================================== > 
	 <meta charset="utf-8">
	 
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    
     <title>Architecture</title>
    
     <meta name="description" content="">
    
     <meta name="keywords" content="">
    
     <meta name="author" content="">

	 
	 <!-- Mobile Specific Metas
    
     ================================================== -->
    
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    
     
	 
	 
    <!-- CSS
    
     ================================================== -->



	...

</head>
<body>

	<!-- The Main Wrapper
	============================================= -->
	<div id="wrap">

		<!-- Custom Menu {Mobile Menu}
		============================================= -->
		<div class="cd-header">

			...

		</div>
		
		<!-- Main Header
		============================================= -->
		<header class="header-one cb-header">

			...

		</header>
		
		<!-- Sticky Header
		============================================= -->
		<header class="header-two cb-header">

			...

		</header>

		<!-- Site Content
		============================================= -->
		<div class="content">

					<!-- Sections inner content goes here -->

		</div>

		<!-- Footer
		============================================= -->
		<footer class="footer">

			<div class="container">

				<!-- Footer Inner
				============================================= -->
			

			</div>

		</footer>

	</div>

</body>
</html>

Page Loading Transitions

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable the Transition, you can simply remove id="preloader" right after the start tag of <body>. Also you need to remove javascript code written in scripts.js file placed in js folder.

<div id="preloader"><div class="pulse"></div></div>

How to use CSS / JS files

CSS and JS both are important part of the website. we've included all the plugins css/js inside architecture.css and custom.js files with proper commenting.

architecture.css Inside HTML > CSS you can find architecture.css which contains all the css.

<link rel="stylesheet" href="css/architecture.css">

Bootstrap.css Inside HTML > CSS you can find bootstrap.css which is the main part of the website as architecture based on bootstrap 3 it is recommended to include bootstrap.css file right after architecture.css file.

<link rel="stylesheet" href="css/bootstrap.css">

default-color.css Inside HTML > CSS you can find default-color.css which is compulsory for website's color scheming. To understand more please refer color schemes section.

<link rel="stylesheet" href="css/default-color.css">

main banner css Inside HTML > css you can find extralayers.css and settings.css both are files the part of index.html and index2.html banner.

<link rel="stylesheet" href="css/settings.css">

custom.js Inside HTML > JS you can find custom.js which contains all the plugins files's code we've used in website.

<script src="js/custom.js"></script>

main banner js Inside HTML > JS you can find jquery.themepunch.revolution.min.js and jquery.themepunch.tools.min.js both are files the part of index.html and index2.html banner.

<script src="js/jquery.themepunch.tools.min.js"></script>
<script src="js/jquery.themepunch.revolution.min.js"></script>

Color Schemes

You can change your Website's Color Scheme in an instant. You simply need to change the Color Code in the css/default-color.css file & you are good to go. Follow these quick steps to get going:

Note Please refer README.txt file inside css > theme-colors for color css.

  1. Make sure you add the fonts/architecture-icons.css stylesheet in your head after the bootstrap.css stylesheets.

    <head>

	...

	<link rel="stylesheet" href="fonts/architecture-icons.css" type="text/css" />


	<!-- Here goes your colors.css
	============================================= -->
	<link rel="stylesheet" href="css/default-color.css" type="text/css" />

	...

</head>
  2. Now simply change the Codes according to your requirements.

Changing Fonts

Change your Fonts on the Fly as we have included fonts in architecture.css uses 3 Fonts namely: Montserrat & Roboto Slab from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files.

@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,300,700);

In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.

Smooth Scroll

you can easly change the scroll Speed and Distance view the bottom image we point out the Scroll Speed Time and Scroll Distance. you can find this script in custom.js file.

js files for smooth scroll

<script src="js/scroll-desktop-smooth.js"></script>

Header Types

You can choose between 2 Types of headers while creating your Pages. Simply if you want indes2.html header in index.html you can just replace index2.html header code woth index.html header.

Type Class Features Code Example
Black Header Header Boxed with black Background-color. 
<header class="header-one">
	...
</header>
White Header Header full-width with White background-color. 
<header class="header-two-main">
	...
</header>

How you use Black Header

We added 2 headers in HTML File header-one for satiable menu and header-two for stick menu on scroll

Columns & Grid

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Helper Classes

We have created some really useful helper classes for you. You can see all of them in architecture.css starting from line #21.

Slider Types & their Options

Architecture includes 2 Unique Sliders for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:

  • Revolution Slider
  • Owl Slider

Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs

OWL Carousel

You can read the OWL Carousel Detail here.

Read OWL Carousel Detail

Work Setup

Architecture provides a very elegant way to showcase your work. Setting up Portfolio is simple. Please use the following codes:

Setting up Portfolio Filter:

<div id="js-filters-lightbox-gallery2" class="cbp-l-filters-button cbp-l-filters-center">

	<div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
	<div data-filter=".design" class="cbp-filter-item">Design</div>
	<div data-filter=".featured" class="cbp-filter-item">Featured</div>
	<div data-filter=".housing" class="cbp-filter-item">Housing</div>
	<div data-filter=".museum" class="cbp-filter-item">Museum</div>
	<div data-filter=".residential" class="cbp-filter-item">Residential</div>

</div>

Setting up Portfolio Items:

<div id="js-grid-lightbox-gallery" class="cbp">
	
	
			<!-- For Image ================================================== > 
			<div class="cbp-item featured housing">
			    <a href="work-detail.html">
				  <div class="cbp-caption">
				    <div class="cbp-caption-defaultWrap">
					 <div class="work">
					  
					  <figure class="effect-sadie">
						<div class="image"> <img src="images/work/work-1.jpg" alt="" width="100%"> </div>
						<figcaption>
						  <h2> <img src="images/plus.png" alt=""> </h2>
						</figcaption>
					  </figure>
					  
					</div>
				    </div>
				  </div>
				</a>
			</div>
			
	
</div>

Version 1.1

Released on 17th April, 2016 

- Released Architecture Template

HTML Structure