GAPURA HTML Documentation by Themes Awesome v1.0
GAPURA - Single Property HTML Template
Created: 2 October 2015
By: Themes Awesome
Support: Ask support access HERE
Thank you for purchasing GAPURA HTML. If you have any questions that aren't covered in the documentation, then please send me a PM and I'll be happy to help. Thanks again!
Table of Contents
GAPURA HTML - top
GAPURA
GAPURA is
Tips
Use Firebug or Chrome Developer Tools.
Do not start from scratch, use an existing page from the demo and modify it to learn how it works.
Getting an error message? Someone might have seen it too, try a google search for a quick fix.
Explore the live demo for pages ideas and sample code.
Files Structure
- css (Template CSS) - fonts (All Fonts & Icons) - img (All Images) - js (Template JS) - views (JS to run in specific pages. I.E: Home or Contact Us)
Html Structure
The template is based on Bootstrap Framework - http://twitter.github.com/bootstrap/
The default Bootstrap grid system utilizes 12 columns, making for a 1170px wide depending on your viewport. Below 767px viewports, the columns become fluid and stack vertically.
Create a .row and add the appropriate number of .span* columns.
HTML Markup
<div class="row"> <div class="span12"> Level 1 column <div class="row"> <div class="span6">Level 2</div> <div class="span6">Level 2</div> </div> </div> </div>
If you need more information, please visit this site: http://getbootstrap.com/2.3.2/scaffolding.html#gridSystem
Head Script (Default)
<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- Google Fonts ============================================= --> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'> <!-- Stylesheets ============================================= --> <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" /> <link rel="stylesheet" href="css/plugin.css" type="text/css" /> <link rel="stylesheet" href="css/style.css" type="text/css" /> <link rel="stylesheet" href="css/responsive.css" type="text/css" /> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> <!-- JavaScripts ============================================= --> <script type="text/javascript" src="js/jquery.js"></script> <title>Gapura | Single Property HTML Themes</title> </head>
Header Markup
<!-- HEADER
============================================= -->
<header id="header" class="site-header transparent-header clearfix">
<div class="header-navigation">
<div class="container">
<div class="row">
<div class="logo col-md-3">
<div class="logo-image">
<a href="index.html"><img src="img/logo.png" alt=""></a>
</div>
</div>
<!-- MOBILE MENU START
============================================= -->
<div class="mobile-menu">
<button id="slide-buttons" class="icon icon-navicon-round"></button>
</div>
<nav id="c-menu--slide-right" class="c-menu c-menu--slide-right">
<button class="c-menu__close icon icon-remove-delete"></button>
<ul class="menus-mobile">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="property-details.html">Property Details</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact Agent</a></li>
</ul>
</nav>
<div id="slide-overlay" class="slide-overlay"></div>
<!-- MOBILE MENU END -->
<div class="navigation col-md-9">
<nav id="main-menu" class="menu">
<ul id="menu-top-menu" class="menus">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="property-details.html">Property Details</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact Agent</a></li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</header>
<!-- HEADER END -->
Template
GAPURA have 9 template
- Home
- Property Details
- Blog
- Single Post
- Contact
Footer Script Markup
<!-- FOOTER START
============================================= -->
<footer id="footer" class="wrapper clearfix" style="background-color: #f3f3f3;">
<div class="footer-text text-center">
<h1>Want More Information?</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt.</p>
<a href="contact.html" class="button-normal yellow">Contact Agent</a>
</div>
<div class="footer-copyright text-center">
<div class="container">
<div class="copyright">
<ul class="footer-social">
<li><a href="http://twitter.com"><i class="icon icon-twitter"></i></a></li>
<li><a href="http://facebook.com"><i class="icon icon-facebook"></i></a></li>
<li><a href="http://googleplus.com"><i class="icon icon-googleplus"></i></a></li>
<li><a href="http://skype.com"><i class="icon icon-skype"></i></a></li>
<li><a href="http://dribble.com"><i class="icon icon-dribble"></i></a></li>
</ul>
<p>Copyright 2015 Gapura Single Property. All Right Reserved. By Themes Awesome</p>
</div>
</div>
</div>
</footer>
<!-- FOOTER END -->
CSS Structure
The organization of the CSS is one of our priorities.
These are the CSS file we're using in the template:
- style.css - (Generic styles, resets & normalization) - bootstrap.min.css - (Responsive grid styles) - plugin.css - (This stylesheet contains any js plug-in.) - responsive.css ( for media query)
Javascript
jQuery - is a Javascript library that greatly reduces the amount of code that you must write.
For more information, please visit http://www.jquery.com/
The initialization of the elements, libs and features is made by the file theme.js, in the JS folder.
Take a look at the "build" function to see what it does.
Customization & Styles
Fonts
To change the embedded font, please take a look in the head part of the website and you will find this tag:
We use oswald font family in GAPURA. You can check the font at root > css > fonts
To change the font, first go to http://www.google.com/webfonts choose a font and use the generated code. Or install it manually with convert the download zipped font to fontsquirel.com
Slider
Flexslider is the slider you'll find in the content.
Flexslider is a simple slideshow script but with lots of options. You can find more documentation here http://www.woothemes.com/flexslider/
We included in the template CSS/JS a few customizations in order to show it's variations.
The variations of the slider is defined by the CSS Class and in the "data-plugin-options" attribute, which extends the default plugin options.
You can add the following classes:
- flexslider-simple
- flexslider-top-title
- flexslider.unstyled
HTML Markup: Home Slider
<!-- SLIDER START
============================================= -->
<section id="slider" class="flexslider-wrap fullscreen clearfix">
<div class="flexslider clearfix">
<ul class="slides">
<li data-thumb="img/content/slider/slide-sm-1.jpg">
<img src="img/content/slider/slide-lg-1.jpg" alt="" />
</li>
<li data-thumb="img/content/slider/slide-sm-2.jpg">
<img src="img/content/slider/slide-lg-2.jpg" alt="" />
</li>
<li data-thumb="img/content/slider/slide-sm-3.jpg">
<img src="img/content/slider/slide-lg-3.jpg" alt="" />
</li>
<li data-thumb="img/content/slider/slide-sm-4.jpg">
<img src="img/content/slider/slide-lg-4.jpg" alt="" />
</li>
<li data-thumb="img/content/slider/slide-sm-5.jpg">
<img src="img/content/slider/slide-lg-5.jpg" alt="" />
</li>
</ul>
</div>
<div class="slider-text-wrap vertical-center">
<div class="container">
<div class="col-md-8">
<div class="slider-text wow fadeIn" data-wow-delay="0.5s">
<h1 class="wow fadeInLeft" data-wow-delay="1s">Gapura Villas</h1>
<p class="wow fadeIn" data-wow-delay="1.5s">123, Near Shammer Lake, New York - 10001</p>
<h2 class="wow fadeIn" data-wow-delay="2s">$1,799,000</h2>
<a href="contact.html" class="button-normal yellow wow fadeIn" data-wow-delay="2.5s">Schedule a Showing</a>
</div>
</div>
<div class="col-md-4" style="display:none;">
<div class="slider-form wow fadeIn" data-wow-delay="0.5s">
<form method="post" action="contact.php">
<input type="text" name="name" id="name" placeholder="Name" />
<input type="text" name="email" id="email" placeholder="Email" />
<textarea name="message" id="message" cols="10" rows="2" placeholder="Message"></textarea>
<input type="text" id="datepicker" placeholder="Date">
<button class="submit">Send</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- SLIDER END -->
JS: Home Slider
$('.fullscreen .flexslider').flexslider({
animation: "fade",
directionNav: "false",
controlNav: "thumbnails"
});
var windowHeight;
var windowWidth;
windowHeight = $(window).height();
windowWidth = $(window).width();
$(".flexslider-wrap .slides").each(function() {
var h = $(this).height();
var w = $(this).width();
var ratA = w / h;
var ratI = windowWidth / windowHeight;
if (ratA > ratI) {
var r = w / h;
$(this).css('height', windowHeight);
$(this).css('width', windowHeight * r);
var m = ((windowHeight * r) - windowWidth) / 2;
$(this).css('margin-left', -m);
$(this).attr("rat", 1);
$(this).attr("mar", m);
} else {
var r = h / w;
$(this).css('width', windowWidth);
$(this).css('height', windowWidth * r);
var m = ((windowWidth * r) - windowHeight) / 2;
$(this).css('margin-top', -m);
$(this).attr("rat", 0);
$(this).attr("mar", m);
}
});
var windowHeight;
var windowWidth;
windowHeight = $(window).height();
windowWidth = $(window).width();
$(".fullscreen").css('height', windowHeight);
$('.flexslider-wrap .slides li').css('height', window.innerHeight - 0);
HTML Markup: Gallery
<!-- GALLERY START
============================================= -->
<div class="gallery wrapper clearfix">
<div class="container">
<div class="row">
<div class="title text-center wow fadeIn">
<h2><span class="bold">Room</span> Dimension</h2>
</div>
<div class="gallery-item col-md-3">
<a title="Living Room" href="img/content/gallery/image1-lg.jpg" >
<img src="img/content/gallery/image1.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Living Room</h4>
<p>Dimension 35 x 25</p>
</div>
</div>
<div class="gallery-item col-md-3">
<a title="Dining Room" href="img/content/gallery/image2-lg.jpg">
<img src="img/content/gallery/image2.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Dining Room</h4>
<p>Dimension 50 x 30</p>
</div>
</div>
<div class="gallery-item col-md-3">
<a title="Kitchen" href="img/content/gallery/image3-lg.jpg">
<img src="img/content/gallery/image3.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Kitchen</h4>
<p>Dimension 25 x 14</p>
</div>
</div>
<div class="gallery-item col-md-3">
<a title="Chat Room" href="img/content/gallery/image4-lg.jpg">
<img src="img/content/gallery/image4.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Chat Room</h4>
<p>Dimension 30 x 25</p>
</div>
</div>
<div class="gallery-item col-md-3">
<a title="Master Bedroom" href="img/content/gallery/image5-lg.jpg">
<img src="img/content/gallery/image5.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Master Bedroom</h4>
<p>Dimension 25 x 20</p>
</div>
</div>
<div class="gallery-item col-md-3">
<a title="Bathroom" href="img/content/gallery/image6-lg.jpg">
<img src="img/content/gallery/image6.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Bathroom</h4>
<p>Dimension 35 x 25</p>
</div>
</div>
<div class="gallery-item col-md-3">
<a title="Reading Room" href="img/content/gallery/image7-lg.jpg">
<img src="img/content/gallery/image7.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Reading Room</h4>
<p>Dimension 25 x 20</p>
</div>
</div>
<div class="gallery-item col-md-3">
<a title="Garage" href="img/content/gallery/image8-lg.jpg">
<img src="img/content/gallery/image8.jpg" alt="" />
</a>
<div class="item-detail">
<h4>Garage</h4>
<p>Dimension 40 x 25</p>
</div>
</div>
</div>
</div>
</div>
<!-- GALLERY END -->
JS: Gallery
$('.gallery').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1] // Will preload 0 - before current, and 1 after the current image
},
image: {
tError: 'The image #%curr% could not be loaded.',
}
});
Responsive
The template supports a handful of media queries to help make your projects more appropriate on different devices and screen resolutions.
Here's what's included:
Label: Large display
Layout width: 1200px and up
Column width: 70px
Gutter width: 30px
Label: Default
Layout width: 980px and up
Column width: 60px
Gutter width: 20px
Label: Portrait tablets
Layout width: 768px and above
Column width: 42px
Gutter width: 20px
Label: Phones to tablets
Layout width: 767px and below
Column width: Fluid columns, no fixed widths
Label: Phones
Layout width: 480px and below
Column width: Fluid columns, no fixed widths
If you need more information, please visit this site: http://twitter.github.com/bootstrap/scaffolding.html#responsive
Source & Credits
The images included in preview are for demonstration purposes and should always be replaced with your own work.
- Resources Used:
- Modernizr
- Respond
- WOW
- SmoothScroll
- Flexslider (GPLv2 License)
- Bootstrap v2.3.2 (Apache License v2.0)
- Magnific Popup
- Slide Menu Right
Once again, thank you for purchasing this theme. Customer satisfaction is our #1 priority, which is why we always endeavour to provide the best service we can. We’re only an email away if you ever need us!
Themes Awesome Team