Glanz - Wedding Template

Created: June 03, 2017
Latest Update: June 03, 2017
By: starkethemes
https://themeforest.net/user/starkethemes
Email: starkethemes@gmail.com@gmail.com

Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to email via the user page contact form on this page. https://themeforest.net/user/starkethemes Thanks so much!

HTML Structure

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including ipad and iphone. See for yourself (resize your browser).

If you would like to read more about bootstrap framework click here :
Bootstrap Documentation

Body Styles

                <body class="gla_middle_titles body_no_height">
There are some styles in body:
gla_middle_titles - Middle Titles - 44px
gla_great_titles - Great Titles - 80px
body_no_height - Please use this class for pages with passpartu (like 01_04_creative1.html)
If you want use passpartu, please add this HTML: 
                <!-- passpartu -->
                <div class="gla_border_top hidden-sm hidden-xs"></div>
                <div class="gla_border_bottom hidden-sm hidden-xs"></div>
                <div class="gla_border_left hidden-sm hidden-xs"></div>
                <div class="gla_border_right hidden-sm hidden-xs"></div>
                <!-- passpartu end-->

Intro (Slider)

Example: 
<!-- Slider -->
<div class="gla_slider gla_image_bck gla_fixed gla_wht_txt" data-stellar-background-ratio="0.2" data-image="images/corporate2/shutterstock_327359981.jpg">


    <div class="gla_over" data-color="#000" data-opacity="0.5"></div>

    <div class="container">

        <!-- vertical text -->
        <div class="gla_slider_copyright" data-0="opacity:1; bottom:100px" data--400-bottom="opacity:0; bottom:150px">© Enhance 2016.</div>

        <!-- Slider Texts -->
        <div class="gla_slide_txt gla_slide_center_middle text-center" data-0="opacity:1; margin-top:0px" data--400-bottom="opacity:0; margin-top:-100px">
            <div class="gla_slide_title">We're All Working <br>Together</div>
            <div class="gla_slide_subtitle">That's the Secter</div>
        </div>
        <!-- Slider Texts End -->
    
    </div>
    <!-- container end -->

    <!-- Slide Down -->
    <a class="gla_scroll_down gla_go" href="#gla_content" data-0="opacity:1; bottom:40px;" data--400-bottom="opacity:0; bottom:80px;">
        <b data-0="height:40px" data--400-bottom="height:55px"></b>
        Scroll
    </a>


</div>
<!-- Slider End -->
gla_slide_title - Great Title, also can be (gla_slide_title_great, gla_slide_title_middle)
gla_slide_subtitle - Great SubTitle

Titles alignment
gla_slide_right_middle - Right Middle
gla_slide_right_top - Right Top
gla_slide_right_bottom - Right Bottom
gla_slide_left_middle - Left Middle
gla_slide_left_top - Left Top
gla_slide_left_bottom - Left Bottom
gla_slide_center_middle - Center Middle
gla_slide_center_top - Center Top
gla_slide_center_bottom - Center Bottom

Sections classes

                    <section class="gla_section gla_image_bck" data-color="#f2f2f2">
                    <section id="services" class="gla_section gla_section_sml_padding gla_image_bck gla_wht_txt gla_fixed" data-stellar-background-ratio="0.2" data-image="images/corporate2/shutterstock_327359807.jpg">
gla_wht_txt - White Text
gla_section_sml_padding - Section Small Padding
gla_image_bck - Color or Image background
gla_fixed - Fixed Class for Parallax Effect br data-stellar-background-ratio="0.2" - Parallax Speed
data-image="images/corporate2/shutterstock_327359807.jpg" - Background Image
data-color="#f2f2f2" - Background Color 

                    <!-- Over -->
                    <div class="gla_over" data-color="#292929" data-opacity="0.9"></div>
gla_over - Overlay
data-color="#292929" - overlay color
data-opacity="0.9" - overlay opacity

Logo

You can edit all texts in logo.

<!-- Logo -->
<a href="/" class="gla_logo gla_logo_animation">Enhance</a>

Themify Icons

Themify Icons Official Page - http://themify.me/themify-icons
You can choose from 320+ available icons :

HTML markup:

<!-- Themify Icons -->
<i class="ti ti-time"></i>

CSS Files & Structure

All of the specific stylings for the page are in style.css ("theme"/css/gla_style.css) file.

<!-- Theme CSS -->
<link href="css/gla_style.css" rel="stylesheet">

The file is separated into sections using:

01. Main Styles
    01.1 White Text
    01.2 Titles
02. Bootstrap
    02.1 Align Center
    02.2 Tabs
    02.3.Buttons
    02.4 Labels
    02.5 Alerts
    02.6 Lightbox
    02.7 Pagination
    02.8 Progress Bars
03. Sidebars
    03.1 Content
    03.2 Main Sidebar
    03.3 Section
04. Header
    04.1 Logo Animation
    04.2 Logo Img
    04.3 Tranparency Menu
    04.4 Full Width Submenu
    04.5 Horizontal Menu
    04.6 Language Menu
    04.7 Mobile Menu
    04.8 Header Animation
    04.9 Passpartu
05. Slider
    05.1 Slider Text
    05.2 Slider Aligns
    05.3 Scroll Down
06. Shortcodes
    06.1 Icon Boxes
    06.2 Animation Blocks
        06.2.01 Iphone Animations
        06.2.02 Macbook Animation
    06.3 Browsers Images
    06.4 Team
    06.5 Sliders
    06.6 News Block
    06.7 Around Block
    06.8 Price
    06.9 Services Block
07. Footer
    07.1 To Top
    07.2 Map
08. Inside Pages
    08.1 Portfolio
    08.2 Pages Title
    08.3 Breadcrumbs
    08.4 Demos
    08.5 One Page Nav
    08.6 Blog
    08.7 Widgets
    08.8 Comments
    08.9 Masonry
    08.10 Projects
    08.11 Shop
    08.12 Tags
    08.13 Related Products
    08.14 Checkout
    08.15 Cart
    08.16 Single Products
    08.17 Restaurant
09. Mobile, Tablet
    09.1 Mobile
    09.2 Tablet

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Javascript

All javascripts are placed in folder "theme"/js. In gla_script.js file we implement all functions calls. This theme uses following Javascript files:

  • Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
  • jQuery v1.11.3 (A fast javascript library that Foodtruckifies how to traverse HTML documents, handle events, perform animations.)
  • OWL Carousel - Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.
    Documentation:http://owlgraphic.com/owlcarousel/#how-to
  • magnific-popup - A lightweight customizable lightbox plugin for jQuery
    Documentation:http://dimsemenov.com/plugins/magnific-popup/
  • prefixfree -prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed.
  • JQuery CountDown - A jQuery plugin that sets a div or span to show a countdown to a given time.
    Documentation:http://www.keith-wood.name/countdown.html
  • JQuery UI - jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library.
    Documentation:http://jqueryui.com/
  • Masonry - Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet.
    Documentation:http://masonry.desandro.com/
  • imagesloaded.pkgd.min.js - Images Loaded for Masonry.
    Documentation:http://imagesloaded.desandro.com/
  • jquery.appear.js - jQuery plugin for tracking element's appearance in browser viewport
    Documentation:https://github.com/morr/jquery.appear
  • jquery.countTo.js - A jQuery plugin that will count up (or down) to a target number at a specified speed.
    Documentation:https://github.com/mhuggins/jquery-countTo
  • jquery.lettering.js - A jQuery plugin for radical web typography
    Documentation:http://letteringjs.com/
  • jquery.stellar.min.js - Parallax has never been easier
    Documentation:http://markdalgleish.com/projects/stellar.js/
  • modernizr.js - Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.
    Documentation:https://modernizr.com/
  • skrollr.min.js - Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).
    Documentation:https://github.com/Prinzhorn/skrollr
  • twitterfetcher.min.js - A jQuery plugin to fetch tweets from a person or it's list.
    Documentation:https://github.com/jaysonsantos/jquery-twitter-fetcher

OWL Carousel

Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider.

You don't need any special markup. All you need is to wrap your divs(owl works with any type element) inside the container element <div class="owl-carousel">. Class "owl-carousel" is mandatory to apply proper styles that come from owl.carousel.css file.

<div id="owl-example" class="owl-carousel">
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
<div> Your Content </div>
...
</div>

Now call the Owl initializer function and your carousel is ready.

$("#owl-example").owlCarousel();

Typography

We use google font service to include fonts or font face sets.

Booking Form

Template comes with ready to use Booking Form.

To configure form just edit your html gile and change e-mail to your own at these lines : 

...
The Booking Form used http://formspree.io/ script and doesn't need PHP.
The Booking Form doesn't work on 'localhost'. Works only on host.

Sources & Credits

The following sources and files have been used to build up this theme

Photos:
Flickr.com
graphicburger.com
dollarphotoclub.com
Pixabay
Unsplash
stocksnap.io
shutterstock.com

Once again, thank you so much for purchasing this theme. If you have any questions, feel free to email me via my user page contact form.