Welcome

- Thank You

Hello, firstly I would like to thank you for purchasing "Majesty - Responsive Restaurant HTML5 Template.".

If you have any questions that are beyond the scope of this help file, please feel free to email us.

Contact: http://themeforest.net/user/creative-wp

- About

Majesty has a professional multipurpose and one-page parallax restaurant themes that are ideal for any restaurant business like coffee shop , cafe , Asian food , American fast food , pizza , Italian cuisine , burger , bar , sushi , pasta , fish markets , and bakery . It is built with Bootstrap 3 and includes lots of awesome features.

It is fully responsive and easy to customize. It is simple and elegant looking, of full screen and full width, and with animation backgrounds. We add two options for menu, vertical and horizontal, of one-page parallax.

To easily manage recipes and menus, we put a lot of effort and time into planning, designing, and creating them for guaranteeing customer’s happiness and satisfaction.

There are many vital elements such as pages of Reservation, Events, Contact, Blogs, Menus, About, Services, Team, and much more; there are no limits to what can be achieved: we are using a variety of elements, features, personalization options, and shortcodes.

Start

- Installation

  1. Open the HTML Files Folder to find all the Templates Files.
  2. Start your FTP Client (ex: Filzilla is free) and login your server info, you will need your server name (Domain Name), username & password that you setup with the hosting company.
  3. Locate the domain folder you wish to upload your Theme files to one your server. you are going to want to click and drag every files that you have labeled .html, .css, .js, .php into your FTP client.
  4. Make sure you upload the required files/folders listed below:
    • HTML/stylesheets - Extra Stylesheets Folder
    • HTML/stylesheet/main.css - Main Stylesheet File
    • HTML/javascripts - Javacripts Folder
    • HTML/img - Images Folder
    • HTML/index01.html, index02.html or index03.html - Index File/Homepage
    • HTML/index_onepage_(choose your option).html - Index File/Homepage
    • HTML/index_(choose your option).html - Index File/Homepage
    The other files can be used according to your preferences.
  5. You can view this theme in any modern web browser from you desktop computer or local server. Because the files are written in HTML5, you do not need an internet connection in order to display or edit the theme but Google fonts & Contact forms will not display, you have not to worry because google font will display after you upload files to server and contact form which functions based on PHP coding will work on server to send you a message.
  6. One the files are done uploading, rename the file you want to be home page as (index.html).
  7. You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.

- HTML Structure

The theme has a responsive layout with a variation of column layouts depending on the page. This theme uses Bootstrap 3 system (12 column) which help streamline any customization you wish to make. if want to knew about bootstrap more please go to visit: Bootstrap Girds System

1. Main HTML Structure

<!DOCTYPE html>
<html lang="en">
<head>

	<!-- Meta Tags
    ============================================= -->



	<!-- Your Title Page
    ============================================= -->


<title>Majesty | Home Layout 1</title>


	<!-- Favicon Icons
    ============================================= -->



	<!-- Stylesheet
    ============================================= -->


</head>
<body>


	<!-- Document Wrapper
    ============================================= -->


<div id="wrapper">
  
    <header id="header">
    
        <!-- Header
        ============================================= -->
    
    
  </header>
  <!-- End Header Transparent -->
  <!-- Document Content
    ============================================= -->
  <div id="content">
    
        <!-- Content Here
        ============================================= -->
    
    
   
  </div>
  <!-- End content !-->
  <!-- Footer
    ============================================= -->
  <footer id="footer">
    
        <!-- Footer Content Here
        ============================================= -->
    
  </footer>
  <!-- End footer -->
  <!--  scroll to top of the page-->

<!-- Core JS Libraries -->

        <!-- Core JS Libraries
        ============================================= -->
    
<script src=".." type="text/javascript"></script>
</body>
</html>

2. Boostrap Layout


<div class="col-md-2 col-sm-4">
  <p>No-one has forgotten that it was France that set the pace when it came to recognising the Libyan opposition last year. That was under a different, arguably more gung-ho president - Nicolas Sarkozy.</p>
</div>
 
<div class="col-md-2 col-sm-4">
  <p>No-one has forgotten that it was France that set the pace when it came to recognising the Libyan opposition last year. That was under a different, arguably more gung-ho president - Nicolas Sarkozy.</p>
</div>
 
<div class="col-md-2 col-sm-4">
  <p>No-one has forgotten that it was France that set the pace when it came to recognising the Libyan opposition last year. That was under a different, arguably more gung-ho president - Nicolas Sarkozy.</p>
</div>
 
<div class="col-md-2 col-sm-4">
  <p>No-one has forgotten that it was France that set the pace when it came to recognising the Libyan opposition last year. That was under a different, arguably more gung-ho president - Nicolas Sarkozy.</p>
</div>
 
<div class="col-md-2 col-sm-4">
  <p>No-one has forgotten that it was France that set the pace when it came to recognising the Libyan opposition last year. That was under a different, arguably more gung-ho president - Nicolas Sarkozy.</p>
</div>
 
<div class="col-md-2 col-sm-4">
  <p>No-one has forgotten that it was France that set the pace when it came to recognising the Libyan opposition last year. That was under a different, arguably more gung-ho president - Nicolas Sarkozy.</p>
</div>

you can view more example, please go to file name (shortcodes_columns.html).

- CSS Structure

I'm using one main css file name main.css in this theme which you are free to modify depending on the customization you require. There are also one additional style sheet name font.css as i explained you at HTML Strcuture.

There folder name themes is for changing the theme skins.

There are also some additional styles that i dont recommend changing. those style sheet are :

					
<!-- Bootstrap Links
     ============================================= -->

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


<!-- Plugins
     ============================================= -->

<!-- Owl Carousal -->
<link rel="stylesheet" href="stylesheets/owl.carousel.css">
<link rel="stylesheet" href="stylesheets/owl.theme.css">
<!-- Animate -->
<link rel="stylesheet" href="stylesheets/animate.css">
<!-- Date Picker -->
<link rel="stylesheet" href="stylesheets/jquery.datetimepicker.css">
<!-- Pretty Photo -->
<link rel="stylesheet" href="stylesheets/prettyPhoto.css">
<!-- Font awsome icons -->
<link rel="stylesheet" href="stylesheets/font-awesome.min.css">

<!-- General Stylesheet
    ============================================= -->

<!-- Custom Fonts Setup via Font-face CSS3 -->
<link href="fonts/fonts.css" rel="stylesheet">
<!-- Main Template Styles -->
<link href="stylesheets/main.css" rel="stylesheet">
<!-- Main Template Responsive Styles -->
<link href="stylesheets/main-responsive.css" rel="stylesheet">
<!--[if lt IE 9]>
      <script src="javascripts/libs/html5shiv.js"></script>
      <script src="javascripts/libs/respond.min.js"></script>
    <![endif]-->

you can view more example, please go to file name (shortcodes_columns.html).

- Color Schemes

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

               <!--[if lt IE 9]>
      <script src="javascripts/libs/html5shiv.js"></script>
      <script src="javascripts/libs/respond.min.js"></script>
    <![endif]-->

<!-- Here goes your colors.css -->

<link href="stylesheets/themes/color.css" rel="stylesheet">

Note You can change HEX color code from Generate your color at Generate Your Color, after it copy the color.css file and replace on stylesheets/themes/

- Changing Font

Change your Fonts on the Fly as we have included a stylesheet/main.css file to manage the custom fonts you include with ease. By default, Majesty uses 3 Fonts namely: Fjala One, Open Sans & Courgette from the Google Fonts Library. You can find the Linking to the Font Files in the head tag of all the .html files. 


/* ----------------------------------------------------------------
    Fonts
-----------------------------------------------------------------*/
/* Google Web fonts */


@import url('https://fonts.googleapis.com/css?family=Fjalla+One|Courgette|Open+Sans:300,400,600|Herr+Von+Muellerhoff');

Then you have to change font names from stylesheet/main.css at:


/* Primary Main Font:: Open Sans */

.font3,
body p,
.btn-gold,
.btn-white,
.btn-black,
.btn.btn-black,
#main-menu ul ul a,
.slider-content p,
.video-content p,
.welcome-block p,
.slider-parallax .slider-content p,
.skipper-slider .slider-content p {
    font-family: 'Open Sans', sans-serif;
}


/* Secondary Main Font:: Fjalla One */

.font1,
h1,
h2,
h3,
h4,
h5,
h6,
#logo,
#menu_carousel .item h2,
#main-menu ul li a,
#main-menu ul li .mega-menu-content.style-dropdown > ul > li.mega-menu-title > a,
.slider-content h1,
.video-content h1,
#menu-fillter a,
#menu-scroll li,
.vertical-menu ul a,
table.table-cart tr th,
.countdown-section,
.fc th,
.price_head,
#accordion_majesty .panel-default a.panel-link,
.majesty_tab .nav-tabs > li > a,
.price_head,
#accordion_majesty .panel-default a.panel-link,
.majesty_tab .nav-tabs > li > a,
.majesty_pagination > li > a,
.pagination-gold > li > a,
.majesty_pagination > li > span,
.pagination-gold > li > span,
.dark #main-menu:not(.not-dark) ul li .mega-menu-content.style-dropdown > ul > li.mega-menu-title > a,
.dark #main-menu:not(.not-dark) ul li .mega-menu-content.style-dropdown > ul > li.mega-menu-title:hover > a,
#main-menu.dark ul li .mega-menu-content.style-dropdown > ul > li.mega-menu-title > a,
#main-menu.dark ul li .mega-menu-content.style-dropdown > ul > li.mega-menu-title:hover > a,
.menu_tabs div.tab-menu div.list-group > a,
.latest_news figure p,
.masonary_blog figure p,
.blog figure p,
.the-comment .fn.n,
#shop_cart .shop_checkout_price {
    font-family: 'Fjalla One', sans-serif;
}

/* Slogans and others, Third Font:: Courgette */

.font2,
.yt-bg-player .slider-content p,
.interactive-bg .wrapper-bg p,
.swiper-wrapper .slider-content h4,
.swiper-wrapper .slider-content p,
.menu_today figure p,
.masonary_blog figure p,
.blog figure p,
.latest_news figure p,
.video b,
span.welcome,
.blog_single .blockquote p,
.banner .banner-content p,
.blockquote p,
.blockquote article {
    font-family: 'Courgette', cursive;
}

/* Signature and Fun Font, Forth Font:: Herr Von Muellerhoff */

.font4,
.signature {
    font-family: 'Herr Von Muellerhoff', cursive;
}

Note you can visit google font web Link and choose your font collection then go to main.css from CSS folder then put the @import link from google fonts then change the name of font family as font-family: NewFont;

- Loading Page

You can change your loading pages Website's . You simply need to change the html structure in the index01.html or index02.html or index03.html files & you are good to go. Follow these quick steps to get going:

1. Loader Style #1


<!-- Loader
    ============================================= -->

<div id="loader">
  <div class="loader-item"> <img src="img/logo_intro.png" alt="">
    <div class="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
  </div>
</div>

2. Loader Style #2


<!-- Loader
    ============================================= -->

<div id="loader2">
  <div class="loader-item"> <img src="img/logo_intro_dark.png" alt="">
    <div class="sk-spinner sk-spinner-wave">
      <div class="sk-rect1"></div>
      <div class="sk-rect2"></div>
      <div class="sk-rect3"></div>
      <div class="sk-rect4"></div>
      <div class="sk-rect5"></div>
    </div>
  </div>
</div>

3. Loader Style #3


<!-- Loader
    ============================================= -->

<div id="loader3">
  <div class="loader-item"> <img src="img/logo_intro.png" alt="">
    <div class="spinner">
      <div class="dot1"></div>
      <div class="dot2"></div>
    </div>
  </div>
</div>

Header

- Header Types

You can choose between 4 Types of headers while creating your Pages. Simply adding the Header Type CSS class to the Header Element will activate the Header Type with adding his HTML structure. The list of Header Type Classes & its descriptions are provided below for your reference:

Type Class Features Code Example
Transparent Transparent Header without Background & White text. 
<header id="header" class="header-transparent"> 
	...
</header>
Center Header Center Header without Background & White text. 
<header id="header" class="center-header"> 
	...
</header>
Dark Header Dark Header with Dark Background & White text. 
<header id="header" class="dark-header"> 
	...
</header>
White Header White Header White Background & Dark text. 
<header id="header" class="white-header"> 
	...
</header>

- Mega Menu

You can start using the Mega Menu with set the column numbers in 2,3,4 & 5 Columns. Try using the Following code:

                
<!-- Mega Menu
                    ============================================= -->
                
<li class="mega-menu"><a href="#">
  <div>Menu</div>
  </a>
  <div class="mega-menu-content  col-4 clearfix">
    <ul>
      ...
    </ul>
    <ul>
      ...
    </ul>
    <ul>
      ...
    </ul>
    <ul>
      ...
    </ul>
  </div>
</li>

- Menu Styles

You can use from a variety of two Menu Styles:

Style Class Features Code Example
dark Dark Menu with Dark Background & White text. 
<nav id="main-menu" class="dark"> 
	...
</nav>
white White Menu with White Background & Drk text. 
<nav id="main-menu" class="white"> 
	...
</nav>

- Carousal Menu

You can use carousal menu from mega menu, try to using the following code:

<li class="mega-menu"><a href="#">
  <div>Menu</div>
  </a>
  <div class="mega-menu-content  col-1 clearfix">
    <ul>
      <li class="mega-menu-title">
        <div id="menu_carousel">
          <div class="item"> <a href="..."> <img class="img-responsive" src="..."  alt=""> ... </div>
        </div>
      </li>
    </ul>
  </div>
</li>

- Page Sub Menu

You can use an Additional Sub Menu on any Page for Intra Navigation purposes:

<li><a href="..">
  <div>Home</div>
  </a>
  <ul>
    <li><a href="#">
      <div>Layout</div>
      </a>
      <ul>
        <li><a href="index01.html">
          <div>Layout 1</div>
          </a></li>
        <li><a href="index02.html">
          <div>Layout 2</div>
          </a></li>
        <li><a href="index03.html">
          <div>Layout 3</div>
          </a></li>
      </ul>
    </li>
    <li><a href="#">
      <div>One Page</div>
      </a>
      <ul>
        <li> <a href="..">
          <div>..</div>
          </a> </li>
        <li> <a href="..">
          <div>..</div>
          </a> </li>
        <li> <a href="..">
          <div>..</div>
          </a> </li>
        <li> <a href="..">
          <div>..</div>
          </a> </li>
      </ul>
    </li>
    <li><a href="#">
      <div>Styles</div>
      </a>
      <ul>
        <li> <a href="..">
          <div>..</div>
          </a> </li>
        <li> <a href="..">
          <div>..</div>
          </a> </li>
        <li> <a href="..">
          <div>..</div>
          </a> </li>
      </ul>
    </li>
    <li><a href="..">
      <div>..</div>
      </a></li>
  </ul>
</li>

Sliders

- Slider Types

Majesty includes 9 Unique Sliders , Full Screen Backgrounds & Video Options. The List of all the Sliders, Full Screen Backgrounds & Videos included are mentioned as follows:

  • mb bgndGallery Slider
  • Swiper Slider
  • Fade Slider Background
  • Animation Background
  • Youtube Background
  • Vimeo Background
  • HTM5 Video Background
  • Parallax Background
  • Interactive Background

01- mb bgndGallery Slider

You have to change images from img/background, or you can change the images path or names from the js file at js files javascripts/custom/mbBgGallery_init.js and edit by the following:

 images:[
                 "img/background/bg_1.jpg",
                 "img/background/bg_2.jpg",
                 "img/background/bg_12.jpg"
                 ],

You can change the effects by the following:

//BG SLIDESHOW WITH ZOOM EFFECT
    $.mbBgndGallery.buildGallery({
                containment:"body",
                timer:1000,
                effTimer:15000,
                controls:false, 
                grayScale:false,
                shuffle:true,
                preserveWidth:false,
                preserveTop: true,
                effect:"zoom",

Options

Transitions presets Description Applying transitions
fade Images will cross fade in and out. 
effect:"fade",
slideUp Images will slide up. 
effect:"slideUp",
slideDown Images will slide down. 
effect:"slideDown",
slideRight Images will slide right. 
effect:"slideRight",
slideLeft Images will slide left. 
effect:"slideLeft",
zoom Images will cross zoom in and zoom out. 
effect:"zoom",

Note You can read more about bgndGallery Documentation [Visit]

02- Swiper Slider

Here is the HTML Code for Swiper Slider:

<section id="slider" class="slider-parallax dark swiper_wrapper  clearfix">
    <div class="swiper-container swiper-parent fullheight">
      <!-- Slider Wrapper  -->
      <div class="swiper-wrapper">
        
        <!-- Slide  -->
        
        <div class="swiper-slide" style="background-image: url('img/background/bg_9.jpg');">
          <div class="slider-content">
				...
          </div>
        </div>
        
        <!-- End Slide  -->
        
        
        <!-- Slide  -->
        
        <div class="swiper-slide ">
          <div class="slider-content">
				...
          </div>
          <div class="video-wrap">
            <video poster="img/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
             ...
            </video>
            <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
          </div>
        </div>
        
        
        <!-- End Slide  -->
        
        
        
        <!-- Slide  -->
        
        <div class="swiper-slide" style="background-image: url('img/background/bg_10.jpg'); background-position: center top;">
          <div class="slider-content">
				...
          </div>
        </div>
        
        <!-- End Slide  -->
        
      </div>
      <!-- End Slider Wrapper  -->
      
      <div id="slider-arrow-left"><i class="fa fa-angle-left"></i></div>
      <div id="slider-arrow-right"><i class="fa fa-angle-right"></i></div>
      <div id="slide-number">
        <div id="slide-number-current"></div>
        <span>/</span>
        <div id="slide-number-total"></div>
      </div>
    </div>
  </section>

Note You can use the "dark" class on .swiper_wrapper element, to make the Caption Content & the Header Scheme(only on Transparent Header) "Dark".

Setting Slider Height

                 <div id="slider" class="slider-parallax swiper_wrapper clearfix" style="height: 440px;">
                    ...
                </div>

Javascript:

    <script>
        $(function(){
          var mySwiper = $('.swiper-container').swiper({
            //Your options here:
            mode:'horizontal',
            loop: true
            //etc..
          });
        });
    </script>

03- Fade Slider

Here is the HTML Code for fade Swiper Slider by adding id="slider-fade":

<section id="slider-fade" class="slider-parallax dark swiper_wrapper  clearfix">
    <div class="swiper-container swiper-parent fullheight">
      <!-- Slider Wrapper  -->
      <div class="swiper-wrapper">
        
        <!-- Slide  -->
        
        <div class="swiper-slide" style="background-image: url('img/background/bg_9.jpg');">
          <div class="slider-content">
				...
          </div>
        </div>
        
        <!-- End Slide  -->
        
        
        <!-- Slide  -->
        
        <div class="swiper-slide ">
          <div class="slider-content">
				...
          </div>
          <div class="video-wrap">
            <video poster="img/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
             ...
            </video>
            <div class="video-overlay" style="background-color: rgba(0,0,0,0.55);"></div>
          </div>
        </div>
        
        
        <!-- End Slide  -->
        
        
        
        <!-- Slide  -->
        
        <div class="swiper-slide" style="background-image: url('img/background/bg_10.jpg'); background-position: center top;">
          <div class="slider-content">
				...
          </div>
        </div>
        
        <!-- End Slide  -->
        
      </div>
      <!-- End Slider Wrapper  -->
      
      <div id="slider-arrow-left"><i class="fa fa-angle-left"></i></div>
      <div id="slider-arrow-right"><i class="fa fa-angle-right"></i></div>
      <div id="slide-number">
        <div id="slide-number-current"></div>
        <span>/</span>
        <div id="slide-number-total"></div>
      </div>
    </div>
  </section>

Note You can read more about Swipper Slider Documentation [Visit]

04- Animation Background

Javascript:

<script>
  //  Move Bg
    var scrollSpeed = 20;       // Speed in milliseconds
    var step = 1;               // How many pixels to move per step
    var current = 0;            // The current pixel row
    var imageHeight = 4300;     // Background image height
    var headerHeight = 300;     // How tall the header is.
    
    //The pixel row where to start a new loop
    var restartPosition = -(imageHeight - headerHeight);
    
    function scrollBg(){
        //Go to next pixel row.
        current -= step;
        //If at the End the image, then go to the top.
        if (current == restartPosition){
            current = 0;
        }

        //Set the CSS of the header.
        $('.move-bg').css("background-position","0 "+current+"px");
    }
    
    //Calls the scrolling function repeatedly
    var init = setInterval("scrollBg()", scrollSpeed);  

</script>

Stylesheet:

Open main.css from stylesheet folder:

.move-bg {
    background: #000000 url(../img/move-bg.jpg) repeat fixed left top;
    background-size: cover;
}

05- Youtube Background

You have too change the youtube video URL by the following:

data-video="https://www.youtube.com/watch?v=HAeWL6I25rc"

HTML Structure:

<section data-scroll-index="0" class="fullheight yt-bg-player" data-quality="hd1080" data-start="0" data-stop="40" data-video="https://www.youtube.com/watch?v=HAeWL6I25rc" >
    
    <!-- Bg transparent -->
    
    <div class="bg-transparent ">
     
      <!-- Slider content -->
      
      <div class="container dark slider-content"> <i class="icon-top-draw"></i>
      ...
      </div>
      
    <!-- End# Slider content -->
    
    
     </div>
    
    <!-- End Bg transparent -->
    
  </section>

Options:

Data Description
quality Set The High Defination (HD) Quality.
start video start by number of video seconds.
stop video stop by number of video seconds.

06- Vimeo Background

HTML Structure:

<section data-scroll-index="0" id="vimeo" class="vimeo fullheight dark clearfix" >
    <div class="video-overlay" style="background-color: rgba(0,0,0,0.3);"></div>
    <div class="slider-content  container "> 
      ...
    </div>
</section>

JavaScript:

vimeoBgVideo:function(){
             if( !MAJESTY.isMobile.any() ){
               $("#vimeo").okvideo({ source: '23851992',
                    volume: 0,
                    loop: true,
                    hd:true,
                    adproof: true,
                    annotations: false
                 });
                   
              } else{
                $('#vimeo').addClass('poster-img');
              }
        }

Note You have to change the source number from javascript for change video from vimeo website

07-Video HTML5 Background

HTML Structure:

 < section data-scroll-index="0" class="video-full dark fullheight">
    
    < !-- Slider content -->
    
    < div class="video-content">
     ...
    < /div>
    
    < !-- End slider content -->
    
    
    < !-- Video Wrap -->
    
    < div class="video-wrap">
      
      < !-- Bg Transparent -->
      
      < video poster="img/videos/explore-poster.jpg" preload="auto" loop autoplay muted>
        < source src='img/videos/explore.mp4' type='video/mp4' />
        < source src='img/videos/explore.webm' type='video/webm' />
      < /video>
      
      < div class="video-overlay" style="background-color: rgba(0,0,0,0.3);">< /div>
    < /div>
    
    < !-- End Video Wrap -->
    
  < /section>

Note You should have three format of video mp4, webm & ogg and the poster image jpg format for devices which video not supported on devices.

08-Parallax Background

HTML Structure:

  
 <!-- Bg Parallax -->
 
    <div id="bg-parallax" class="fullheight">
      <div class="bcg"
                data-center="background-position: 50% 0px;"
                data-bottom-top="background-position: 50% 100px;"
                data-top-bottom="background-position: 50% -100px;"
                data-anchor-target="#bg-parallax"
                style="background-image:url('img/background/bg_17.jpg');"
              >
        <div class="bg-transparent">
          
          <!-- Slider content -->
           
          <div class="slider-content ">
            ...
          </div>
          
          <!-- End Slider content -->
          
        </div>
        
        <span class="highlights">
        <!-- End Bg Transparent -->
        
      </div>
    </div>
    
    <!-- End Bg Parallax -->

Options:

Data Description
data-center Set the center position for parallax background.
data-bottom-top to set position from bottom to top for parallax background.
data-top-bottom to set position from top to bottom for parallax background.
style add the background image.

09-Interactive Background

HTML Structure:

  <section data-scroll-index="0" class="interactive-bg dark fullheight  clearfix" >
    
    
    <!-- Background source wrapper -->
    
    
    <div class="wrapper-bg bg" data-ibg-bg="img/background/bg_18.jpg">
      
      
      <!-- Slider content -->
      
      <div class="slider-content">
        ...
      </div>
      
      
      <!-- End slider content -->
      
      
      
      <!-- Overlay Bg -->
      
      <div class="overlay-bg"></div>
      
      <!-- End# Overlay Bg -->
      
      
    </div>
    
    <!-- End Background source wrapper -->
    
  </section>

Note You can change background from html structure by data-ibg-bg="img/nameOfImage.jpg".

Note You can read more about interactive background documentation, Cliock Here.

- Slider Captions

You can Add Captions to your Slides using a no. of Classes described below:

Caption Class Description Works on
.slider-content Creates a Caption on the Majesty Slider All Sliders, Video, Full Screen Bg, Parallax, Interactive
.owl-carousel Creates a Carousal Caption on the Majesty Video or Sliders All Sliders, Video, Full Screen Bg, Parallax, Interactive
.swiper-slide Creates a Swiper Caption on the Majesty Video or Sliders All Swiper Sliders

Page Elements

- Page Title

Majesty title default for all pages is the following :

 			
   
  <!-- Head Title -->
  
    <div class="head_title">
        <i class="icon-intro"></i>
        <h1>ART OF FOOD</h1>
        <span class="welcome">Welcome to Majesty</span>
    </div>
     
    <!-- End# Head Title -->

Note You can change font icon from shortcodes_icons.html.

- Columns & Girds

Majesty girds used by boostrap girds:

.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

HTML Structure:

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

Note You can learn more about it Bootstrap Girds

- Helper Classes

We have created some really useful helper classes for you. Here are a few of them:

  • .padding-30 - padding of 30px on the top and bottom sides.
  • .padding-50 - padding of 50px on the top and bottom sides.
  • .padding-60 - padding of 60px on the top and bottom sides.
  • .padding-80 - padding of 80px on the top and bottom sides.
  • .padding-100 - padding of 100px on the top and bottom sides.
  • .padding-150 - padding of 150px on the top and bottom sides.
  • .padding-t-20 - padding of 20px on the top sides.
  • .padding-t-40 - padding of 40px on the top sides.
  • .padding-t-50 - padding of 50pxon the top sides.
  • .padding-t-60 - padding of 60px on the top sides.
  • .padding-t-80 - padding of 80px on the top sides.
  • .padding-t-100 - padding of 100px on the top sides.
  • .padding-b-20 - padding of 20px on the bottom sides.
  • .padding-b-40 - padding of 40px on the bottom sides.
  • .padding-b-60 - padding of 60pxon the bottom sides.
  • .padding-b-70 - padding of 70px on the bottom sides.
  • .padding-b-80 - padding of 80px on the bottom sides.
  • .padding-b-100 - padding of 100px on the bottom sides.
  • .padding-b-120 - padding of 120px on the bottom sides.
  • .mrg-auto - margin of auto on all sides.
  • .margin0 - margin of 0px on all sides.
  • .mb0 - margin of 0pxon the bottom sides.
  • .mb30 - margin of 30px on the bottom sides.
  • .mb40 - margin of 40 on the bottom sides.
  • .mb60 - margin of 60px on the bottom sides.
  • .margin-tb-60 - margin of 60px on the top and bottom sides.
  • .mt0 - margin of 0px on the top sides.
  • .mt20 - margin of 20px on the top sides.
  • .mt30 - margin of 30pxon the top sides.
  • .mt40 - margin of 40px on the top sides.
  • .mt50 - margin of 50 on the top sides.
  • .mt60 - margin of 60px on the top sides.
  • .mt80 - margin of 80px on the top sides.
  • .mt-30-mb-60 - margin of 30px on the top and 60px on the bottom side.
  • .italic - italick text style.
  • .absolute - absolute of position.
  • .fl-r - float of right.
  • .icon-large - large of iconswith light grey color.
  • .underline - underline of text.
  • .bg-transparent - Background of transparent.
  • .bg-pattern - Background of Pattern
  • .color-bg - Background of Color
  • .grey-bg - Background of Grey

- Smooth Scroll

HTML Structure

          
< -- ===  THE NAV === -->
          
          
 < nav id="main-menu" class="dark">
  < ul>
    < li>< a data-scroll-goto="0" href="#">
      < div>...< /div>
      < /a>< /li>
    < li>< a data-scroll-nav="1" href="#">
      < div>...< /div>
      < /a>< /li>
    < li>< a data-scroll-nav="2" href="#">
      < div>...< /div>
      < /a> < /li>
    < li>< a data-scroll-nav="3" href="#">
      < div>...< /div>
      < /a>< /li>
    
  < /ul>
< /nav>

          
          
< -- ===  THE SECTIONS === -->
          

<section data-scroll-index="0">
	...
</section>

<section data-scroll-index="1">
	...
</section>

<section data-scroll-index="2">
	...
</section>

<section data-scroll-index="3">
	...
</section>

- Retina Ready

HTML Structure

<img src="/images/my_image200x200@2x.png" height="100" width="100" />

Note You should create two image for retina one normal size and other ONE is 2x.. read more

CSS

#logo {
  background-image: url('/images/my_image.png');
}

@media all and (-webkit-min-device-pixel-ratio: 1.5) {
  #logo {
    background-image: url('/images/my_image@2x.png');
    background-size: 200px 100px;
  }
}

Note You should create two image for retina one normal size and other other is 2x.. read more

- Flickr

HTML Structure

<ul id="flickrbox" class="thumbs">

Note You should to change the Flikr ID by main.js

JS

$('#flickrbox').jflickrfeed({
    limit: 12,
    qstrings: {
        id: '7135240@N05' // Here you change
    },

- Boxed

HTML Structure

For set the layout from wide to boxed, you should to add new class name "boxed" to <body>

<body class="boxed">

Note You can add background image by the following:

<body class="boxed boxed-image">

Note You can add background color by the following:

<body class="boxed boxed-color">

Blog Types

Majesty includes 8 Variant Blogs Options. The List of all the Blogs Options included are mentioned as follows:

  • Blog Gird Full Width
  • Blog Gird Two Column
  • Blog Gird Three Column
  • Blog List Style #1
  • Blog List Style #2
  • Blog Masonry Full Width
  • Blog Masonry Two Column
  • Blog Masonry Three Column

- Blog Gird Full Width

Setup

< section class="blog blog-full text-center  padding-100">
  < div class="container-fluid">
    < div class="blog-content dark"> 
      
      
      < !-- blog item-->
      
      < div class="blog-item col-md-3 col-sm-4 col-xs-12">
      
        < figure> 
            
            < !-- The Image -->
            
        	< img class="img-responsive" src="img/blog/block13.jpg" alt="">
            
              < figcaption class="text-center">
                
                
                < !-- The Icon -->
                
                < div class="fig_container"> < i class="fa fa-picture-o">< /i>
                  
                  < !-- The Title -->
                  
                  < h3>< a href="blog_single_image.html">...< /a>< /h3>
                  
                  
                  < !-- The Type -->
                  
                  < p>Event< /p>
                  
                  
                  < !-- The Desc -->
                  
                  < div class="fig_content"> < a href="blog_single_image.html">...< /a> < /div>
                  
                < /div>
                
                
                < !-- The Button -->
                
                < span class="btn btn-gold primary-bg white">...< /span>
                
              < /figcaption>
              
        < /figure>
      < /div>
      
      < !-- End# blog item--> 
      
    < /div>
  < /div>
< /section>

- Blog Gird Two Column

Setup

< section class="blog text-center padding-100">
  < div class="container">
    < div class="blog-content dark"> 
      
      
      < !-- blog item-->
      
      < div class="blog-item col-md-6 col-sm-6 col-xs-12">
      
        < figure> 
            
            < !-- The Image -->
            
        	< img class="img-responsive" src="img/blog/block13.jpg" alt="">
            
              < figcaption class="text-center">
                
                
                < !-- The Icon -->
                
                < div class="fig_container"> < i class="fa fa-picture-o">< /i>
                  
                  < !-- The Title -->
                  
                  < h3>< a href="blog_single_image.html">...< /a>< /h3>
                  
                  
                  < !-- The Type -->
                  
                  < p>Event< /p>
                  
                  
                  < !-- The Desc -->
                  
                  < div class="fig_content"> < a href="blog_single_image.html">...< /a> < /div>
                  
                < /div>
                
                
                < !-- The Button -->
                
                < span class="btn btn-gold primary-bg white">...< /span>
                
              < /figcaption>
              
        < /figure>
      < /div>
      
      < !-- End# blog item--> 
      
    < /div>
  < /div>
< /section>

- Blog Gird Three Column

Setup

< section class="blog text-center padding-100">
  < div class="container">
    < div class="blog-content dark"> 
      
      
      < !-- blog item-->
      
      < div class="blog-item col-md-4 col-sm-6 col-xs-12">
      
        < figure> 
            
            < !-- The Image -->
            
        	< img class="img-responsive" src="img/blog/block13.jpg" alt="">
            
              < figcaption class="text-center">
                
                
                < !-- The Icon -->
                
                < div class="fig_container"> < i class="fa fa-picture-o">< /i>
                  
                  < !-- The Title -->
                  
                  < h3>< a href="blog_single_image.html">...< /a>< /h3>
                  
                  
                  < !-- The Type -->
                  
                  < p>Event< /p>
                  
                  
                  < !-- The Desc -->
                  
                  < div class="fig_content"> < a href="blog_single_image.html">...< /a> < /div>
                  
                < /div>
                
                
                < !-- The Button -->
                
                < span class="btn btn-gold primary-bg white">...< /span>
                
              < /figcaption>
              
        < /figure>
      < /div>
      
      < !-- End# blog item--> 
      
    < /div>
  < /div>
< /section>

- Blog List Style #1

Setup

<section class="blog_list text-left padding-100">
  <div class="container">
    <div class="row"> 
      
      <!-- Blog main content -->
      
      <div class="blog-main-content"> 
         
        <!-- Blog row -->
        
        <div class="blog_row"> 
          
          <!-- Blog img -->
          
          <figure class="blog-img col-md-6 col-sm-6 col-xs-12"> <a href="blog_single_image.html"><img class="img-responsive" src="img/blog/blog_list_1.jpg" alt="" /></a>
            <figcaption class="text-center"> <span class="btn btn-gold primary-bg white">30 DECEMBER 2015</span> </figcaption>
          </figure>
          
          
          <!-- Blog content -->
          
          <div class="blog-content col-md-6 col-sm-6 col-xs-12">
            <h2><a href="blog_single_image.html">Crispy Chicken for Kids</a></h2>
            
            
            <!-- Category -->
            
            <div class="category"> <i class="fa fa-picture-o"></i> EVENTS </div>
            
            
            <!--End Category -->
            
             
            <!-- Links -->
            
            <div class="links">
              <ul>
                <li> <a href="#"><i class="fa fa-user"></i> By Admin</a></li>
                <li><i class="fa fa-tags"></i> <a href="#">Food</a><span>,</span> <a href="#">Italian</a><span>,</span><a href="#">Cake </a></li>
                <li><a href="#"><i class="fa fa-heart"></i> 120</a></li>
                <li><a href="#"><i class="fa fa-comments"></i> 95</a></li>
              </ul>
            </div>
            
            
            <!-- End links -->
            
            <div class="text-content">
              <p>...</p>
              <a href="blog_single_image.html" class="btn btn-gold"  data-toggle="tooltip" data-placement="right" title="Read More"><i class="fa fa-arrow-right"></i></a> </div>
          </div>
          
          
          <!-- End Blog content --> 
          
          
          <!-- Divider -->
          
          <div class="blog-divider"> <span></span> <i class="icon-home-ico"></i> <span></span> </div>
          
          
          <!-- End# Divider -->
          
        </div>
        
        
        <!-- End Blog row --> 
        
      </div>
    </div>
  </div>
</section>

- Blog List Style #2

Setup

< section class="blog_list_2 text-left padding-100">
  < div class="container">
    < div class="row"> 
    
      
      < !-- Blog main content -->
      
      < div class="blog-main-content"> 
        
         
        < !-- Blog row -->
        
        < div class="blog_row"> 
        
           
          < !-- Blog img -->
          
          < figure class="blog-img col-md-12"> < a href="blog_single_image.html"> < img class="img-responsive" src="img/blog/blog-list.jpg" alt="" />< /a>
            < figcaption class="text-center"> < span class="btn btn-gold primary-bg white" >30 DECEMBER 2015< /span> < /figcaption>
          < /figure>
           
          < !-- Blog content -->
          
          < div class="blog-content col-md-12">
            < h2>< a href="blog_single_image.html">New Majesty Branch Now Available< /a>< /h2>
             
            < !-- Category -->
            
            < div class="category"> < i class="fa fa-picture-o">< /i> NEWS < /div>
             
            < !--End Category --> 
            
             
            < !-- Links -->
            
            < div class="links">
              < ul>
                < li> < a href="#">< i class="fa fa-user">< /i> By Admin< /a>< /li>
                < li>< i class="fa fa-tags">< /i> < a href="#">Food< /a>< span>,< /span> < a href="#">Italian< /a>< span>,< /span>< a href="#">Cake < /a>< /li>
                < li>< a href="#">< i class="fa fa-heart">< /i> 120< /a>< /li>
                < li>< a href="#">< i class="fa fa-comments">< /i> 95< /a>< /li>
              < /ul>
            < /div>
             
            < !-- End links -->
            
            < div class="text-content">
              < p>...< /p>
              < a href="blog_single_image.html" class="btn btn-gold"  data-toggle="tooltip" data-placement="right" title="Read More">< i class="fa fa-arrow-right">< /i>< /a> < /div>
          < /div>
          
           
          < !-- End Blog content -->
           
        < /div>
         
        < !-- End Blog row --> 
        
         
        < !-- Divider -->
        
        < div class="blog-divider"> < span>< /span> < i class="icon-home-ico">< /i> < span>< /span> < /div>
         
        < !-- End# Divider --> 
        
      < /div>
    < /div>
  < /div>
< /section>

- Blog Masonry Full Width

Setup

<section class="masonary_blog masonry_full_width text-center padding-100">
  <div class="container-fluid">
    <div id="menu-items" class="masonry-content menu-type dark"> 
      
      <!-- blog item-->
      
      <div class="menu-item blog-item col-md-6 col-sm-6 col-xs-12">
        <figure class="large"> <img class="img-responsive" src="img/blog/blog-large2.jpg" alt="">
          <figcaption class="text-center">
            <div class="fig_container"> <i class="fa fa-picture-o"></i>
              <h3><a href="blog_single_image.html">SWEET HONEY</a></h3>
              <p>Event</p>
              <div class="fig_content"> <a href="blog_single_image.html">Aenean commodo ligula eget dolor enean massa....</a> </div>
            </div>
            <span class="btn btn-gold primary-bg white">30 DECEMBER 2015</span> </figcaption>
        </figure>
      </div>
      
      <!-- End blog item--> 
      
      
      
      <!-- Large blog item-->
      
      <div class="menu-item blog-item col-md-6 col-sm-6 col-xs-12 ">
        <figure class="large"> <img class="img-responsive" src="img/blog/blog-large.jpg" alt="">
          <figcaption class="text-center">
            <div class="fig_container"> <i class="fa fa-video-camera"></i>
              <h3><a href="blog_single_soundclouds.html">strawberry bake</a></h3>
              <p>News</p>
              <div class="fig_content"> <a href="blog_single_soundclouds.html">Aenean commodo ligula eget dolor enean massa....</a> </div>
            </div>
            <span class="btn btn-gold primary-bg white">14 MAR4CH 2015</span> </figcaption>
        </figure>
      </div>
      
      <!-- End# Large blog item--> 
      
    </div>
  </div>
</section>

- Blog Masonry Two Column

Setup

<section class="masonary_blog masonry_two text-center padding-100">
  <div class="container">
    <div id="menu-items" class="masonry-content menu-type dark"> 
      
      <!-- blog item-->
      
      <div class="menu-item blog-item col-md-6 col-sm-6 col-xs-12">
        <figure class="large"> <img class="img-responsive" src="img/blog/blog-large2.jpg" alt="">
          <figcaption class="text-center">
            <div class="fig_container"> <i class="fa fa-picture-o"></i>
              <h3><a href="blog_single_image.html">SWEET HONEY</a></h3>
              <p>Event</p>
              <div class="fig_content"> <a href="blog_single_image.html">Aenean commodo ligula eget dolor enean massa....</a> </div>
            </div>
            <span class="btn btn-gold primary-bg white">30 DECEMBER 2015</span> </figcaption>
        </figure>
      </div>
      
      <!-- End blog item--> 
      
      
      
      <!-- blog item-->
      
      <div class="menu-item blog-item col-md-6 col-sm-6 col-xs-12">
        <figure class="large"> <img class="img-responsive" src="img/blog/blog-large2.jpg" alt="">
          <figcaption class="text-center">
            <div class="fig_container"> <i class="fa fa-picture-o"></i>
              <h3><a href="blog_single_image.html">SWEET HONEY</a></h3>
              <p>Event</p>
              <div class="fig_content"> <a href="blog_single_image.html">Aenean commodo ligula eget dolor enean massa....</a> </div>
            </div>
            <span class="btn btn-gold primary-bg white">30 DECEMBER 2015</span> </figcaption>
        </figure>
      </div>
      
      <!-- End blog item--> 
      
    </div>
  </div>
</section>

- Blog Masonry Three Column

Setup

<section class="masonary_blog masonry_three text-center padding-100">
  <div class="container">
    <div id="menu-items" class="masonry-content menu-type dark"> 
      
      <!-- blog item-->
      
      <div class="menu-item blog-item col-md-4 col-sm-6 col-xs-12">
        <figure class="large"> <img class="img-responsive" src="img/blog/blog-large2.jpg" alt="">
          <figcaption class="text-center">
            <div class="fig_container"> <i class="fa fa-picture-o"></i>
              <h3><a href="blog_single_image.html">SWEET HONEY</a></h3>
              <p>Event</p>
              <div class="fig_content"> <a href="blog_single_image.html">Aenean commodo ligula eget dolor enean massa....</a> </div>
            </div>
            <span class="btn btn-gold primary-bg white">30 DECEMBER 2015</span> </figcaption>
        </figure>
      </div>
      
      <!-- End blog item--> 
      
      
      
      <!-- blog item-->
      
      <div class="menu-item blog-item col-md-4 col-sm-6 col-xs-12">
        <figure class="large"> <img class="img-responsive" src="img/blog/blog-large2.jpg" alt="">
          <figcaption class="text-center">
            <div class="fig_container"> <i class="fa fa-picture-o"></i>
              <h3><a href="blog_single_image.html">SWEET HONEY</a></h3>
              <p>Event</p>
              <div class="fig_content"> <a href="blog_single_image.html">Aenean commodo ligula eget dolor enean massa....</a> </div>
            </div>
            <span class="btn btn-gold primary-bg white">30 DECEMBER 2015</span> </figcaption>
        </figure>
      </div>
      
      <!-- End blog item--> 
      
    </div>
  </div>
</section>

- Post Types

Majesty includes 11 Variant Blog Post Options. The List of all the Blog Post Options included are mentioned as follows:

  • Image
  • Slider
  • Gallery
  • Blockquote
  • Youtube
  • Vimeo
  • Video HTML5
  • Sound Cloud
  • Right Sidebar
  • Left Sidebar

Setup

<section class="blog_single text-left padding-100">
      <div class="container">
        <div class="row">
          
          
          <!-- Blog main content -->
          
          <div class="blog-main-content">
            
            <!-- Blog row -->
             
            <div class="blog_row">
              
              <!-- Here the option Section -->
               
              <figure class="blog-img col-md-12"> 
              	<img class="img-responsive" src="..." alt=""> 
              </figure>
              
              
              <!-- Here the option Section -->
               
              
              <!-- Blog content -->
               
              <div class="blog-content col-md-12">
                <h2>...</h2>
                
                <!-- Category -->
                 
                <div class="category"> <i class="fa fa-picture-o"></i> <span>...</span> </div>
                
                <!--End Category -->
                 
                
                <!-- Links -->
                 
                <div class="links">
                  <ul>
                    <li><i class="fa fa-calendar"></i> ...</li>
                    <li> <a href="#"><i class="fa fa-user"></i> ...</a></li>
                    <li><i class="fa fa-tags"></i> ...</li>
                    <li><i class="fa fa-heart"></i> ...</li>
                    <li><a href="#"><i class="fa fa-comments"></i> ...</a></li>
                  </ul>
                </div>
                
                <!-- End links -->
                 
                <div class="text-content">
                  <p>..</p>
                  
                  <blockquote class="blockquote">
                    <p>..</p>
                  </blockquote>
                  <p>...</p>
                  <div class="row blog-image">
                  	<div class="col-md-3 col-sm-6">
                    	<img src=".." alt="" class="img-responsive">
                    </div>
                    <div class="col-md-3 col-sm-6">
                    	<img src=".." alt="" class="img-responsive">
                    </div>
                    <div class="col-md-3 col-sm-6">
                    	<img src=".." alt="" class="img-responsive">
                    </div>
                     <div class="col-md-3 col-sm-6">
                    	<img src="..." alt="" class="img-responsive">
                    </div>
                  </div>
                   <p>..</p>
                </div>
              </div>
              
              <!-- End Blog content -->
               
              
              <!-- Post Meta -->
               
              <div class="post-meta">
                <p>tagged by</p>
                <ul class="labels">
                  <li>...</li>
                  <li>...</li>
                  <li>...</li>
                </ul>
                
                
                <!-- Social share -->
                 
                <div class="social-share pull-right">
                  <ul>
                    <li>...</li>
                    <li>...</li>
                    <li>...</li>
                  </ul>
                </div>
                
                
                <!-- Social share -->
                 
              </div>
              
              
              <!-- End Post Meta -->
               
              
              <!-- Pagination -->
               
              <ul class="pagination-gold">
                <li class="next"><a href="..."> NEXT Post <i class="fa fa-angle-double-right"></i></a></li>
                <li class="previous"><a href="..."> <i class="fa fa-angle-double-left"></i> PREVIOUS POST</a></li>
              </ul>
            </div>
            
            <!-- End Blog row -->
             
          </div>
          
          <!--End Blog main content -->
           
        </div>
      </div>
    </section>

Comment Setup


<!-- Comments -->

<div class="comment-blog">
  <h3>Comments [20]</h3>
  <div id="comments">
    <div id="comments-list-wrapper" class="comments">
      <ol id="comments-list">
        <li id="comment-1" class="comment-x byuser">
          <div class="the-comment">
            <div class="comment-author vcard"> <img src="..." class="avatar" alt=""> <span class="fn n"><a href="#">...</a></span> </div>
            <div class="comment-meta"> <span> ...</span> </div>
            <div class="comment-content">
              <p> ...</p>
            </div>
            <div class="comment-reply-link "> <a  data-placement="bottom" data-toggle="tooltip" title="" data-original-title="Replay" class="comment-reply-link" href="#"><i class="fa fa-reply"></i></a> </div>
          </div>
          
          <!--the-comment -->
          
          <ul class="children">
            <li id="comment-32" class="comment-x byuser comment-author-admin bypostauthor even depth-2 thm-c-y2013 thm-c-m05 thm-c-d19 thm-c-h14">
              <div class="the-comment">
                <div class="comment-author vcard"> <img src="..." class="avatar" alt=""> <span class="fn n"><a href="#">...</a></span> </div>
                <div class="comment-meta"> <span> ...</span> </div>
                <div class="comment-content">
                  <p> ... </p>
                </div>
                <div class="comment-reply-link"> <a  data-placement="bottom"  data-toggle="tooltip" title="" data-original-title="Replay" class="comment-reply-link" href="#"><i class="fa fa-reply"></i></a> </div>
              </div>
            </li>
          </ul>
        </li>
        
        <li id="comment-2" class="comment-x byuser">
          <div class="the-comment">
            <div class="comment-author vcard"> <img src="..." class="avatar" alt=""> <span class="fn n"><a href="#">...</a></span> </div>
            <div class="comment-meta"> <span> .../span> </div>
            <div class="comment-content">
              <p> ... </p>
            </div>
            <div class="comment-reply-link"> <a  data-placement="bottom"  data-toggle="tooltip" title="" data-original-title="Replay" class="comment-reply-link" href="#"><i class="fa fa-reply"></i></a> </div>
          </div>
          
          <!--the-comment --> 
          
        </li>
      </ol>
    </div>
  </div>
</div>

<!-- End# Comments -->

Shortcodes

- Sections

Setup content you want to stand out. You can use Light & Dark Sections, Color Sections or HTML5 Videos as Sections:

Light Section

<section>
	...
</section>

Dark Section

<section class="black-bg dark">
	...
</section>

Color Section

<section class="color-bg dark">
	...
</section>

Grey Section

<section class="grey-bg">
	...
</section>

Video Section

<section class="bg_video dark">
  <div class="content">
      ...
  </div>
  
  <!-- Video html5 source -->
  <div class="video-wrap">
    <video>
     ...
    </video>
  </div>
  <!-- End Video html5 source --> 
</section>

Genearl Note Setup your Sections outside the .container element.

- Parallax

<section id="slide" class="dark">
  <div class="bcg"
        data-center="background-position: 50% 0px;"
        data-bottom-top="background-position: 50% 100px;"
        data-top-bottom="background-position: 50% -100px;"
        data-anchor-target="#slide"
        style="background-image:url('img/img_name.jpg');"
      >
    <div class="bg-transparent">
     Content Here
    </div>
  </div>
</section>

Genearl Note Setup your Sections outside the .container element.

- Animation

Scroll to reveal Animations are latest in the Trends. You can do them too with Majesty. You can use animations on any element you want. Here is the Sample Code:

<div class="animated" data-animation="fadeInUp"></div>

You can also use delays for your Animations:

<div class="animated" data-animation="fadeInUp" data-animation-delay="400"></div>

Genearl Note Delay Duration is in milliseconds.

Here is the list of the Animation Types you can use:

  • bounce
  • flash
  • pulse
  • rubberBand
  • shake
  • swing
  • tada
  • wobble
  • bounceIn
  • bounceInDown
  • bounceInLeft
  • bounceInRight
  • bounceInUp
  • bounceOut
  • bounceOutDown
  • bounceOutLeft
  • bounceOutRight
  • bounceOutUp
  • fadeIn
  • fadeInDown
  • fadeInDownBig
  • fadeInLeft
  • fadeInLeftBig
  • fadeInRight
  • fadeInRightBig
  • fadeInUp
  • fadeInUpBig
  • fadeOut
  • fadeOutDown
  • fadeOutDownBig
  • fadeOutLeft
  • fadeOutLeftBig
  • fadeOutRight
  • fadeOutRightBig
  • fadeOutUp
  • fadeOutUpBig
  • flip
  • flipInX
  • flipInY
  • flipOutX
  • flipOutY
  • lightSpeedIn
  • lightSpeedOut
  • rotateIn
  • rotateInDownLeft
  • rotateInDownRight
  • rotateInUpLeft
  • rotateInUpRight
  • rotateOut
  • rotateOutDownLeft
  • rotateOutDownRight
  • rotateOutUpLeft
  • rotateOutUpRight
  • hinge
  • rollIn
  • rollOut
  • zoomIn
  • zoomInDown
  • zoomInLeft
  • zoomInRight
  • zoomInUp
  • zoomOut
  • zoomOutDown
  • zoomOutLeft
  • zoomOutRight
  • zoomOutUp

- Contact Form

Contact form is PHP Script for sending messages to your email to be connected with your visitors or clients, You should edit email default to your email to start recieve messages, Now go to process.php and edit the email:

//recipient - YOUR EMAIL.. or whatever
$to = 'Your Name <youremail@companyname.com>';

- Reservation Form

Reservation form is PHP Script for sending messages to your email to be connected with your visitors or clients, You should edit email default to your email to start recieve messages, Now go to reser-process.php and edit the email:

//recipient - YOUR EMAIL.. or whatever
$to = 'Your Name <youremail@companyname.com>';

- Count Down

You can add a Countdown Timer to any Page using the following setup:

<script>
$(function () {
  var austDay = new Date();
  austDay = new Date(2016, 5, 15);
  $('#defaultCountdown').countdown({until: austDay});
  $('#year').text(austDay.getFullYear());
});
</script>

Also, the date is in Javascript Format: (YYYY, M, DD) and the Javascript formats the Month as following

  • 0 as January
  • 1 as February
  • 2 as March
  • 3 as April
  • 4 as May
  • 5 as June
  • 6 as July
  • 7 as August
  • 8 as September
  • 9 as October
  • 10 as November
  • 11 as December

So if you want your Countdown Date to be setup on 15th June, 2016 then your Countdown Date in Javascript Format will be Date(2016, 5, 15).

- Google Map

you can change your lat and lang from main.js:

google.maps.event.addDomListener(window, 'load', init);
 
function init() {
    // Basic options for a simple Google Map
    // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
 
 var mapOptions = {
 
 // How zoomed in you want the map to start at (always required)
 
        zoom: 17,
        scrollwheel: false,
        // The latitude and longitude to center the map (always required)
 
        center: new google.maps.LatLng(45.088530, -64.367951), // Your Address Here
 
        // How you would like to style the map. 
        // This is where you would paste any style found on [Snazzy Maps][1].
        // copy the Styles from Snazzy maps,  and paste that style info after the word "styles:"
 
        styles: [{stylers:[{hue:'#000000'},{saturation:-100}]},{featureType:'water',elementType:'geometry',stylers:[{lightness:50},{visibility:'simplified'}]},{featureType:'road',elementType:'labels',stylers:[{visibility:'off'}]}]
    };
 
    var mapElement = document.getElementById('map');
 
            // Create the Google Map using out element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);
 
    // Define the image to use for the map marker (58 x 44 px)
 
            var image = 'img/map.png';
 
    // Define the Lattitude and Longitude for the map location
 
            var myLatLng = new google.maps.LatLng(45.088530, -64.367951);
 
    // Define the map marker characteristics
 
            var mapMarker = new google.maps.Marker({
            position: myLatLng,
            map: map,
            icon: image,
            title:  'Frostbyte Interactive'
 
            });
 
       // Following Lines are needed if you use the Info Window to display content when map marker is clicked
 
   var infowindow = new google.maps.InfoWindow({
                    content: contentString
                });
 
    // Following line turns the marker, into a clickable button and when clicked, opens the info window
 
        google.maps.event.addListener(mapMarker, 'click', function() {
            infowindow.open(map, mapMarker);
});  
 
}

you will find lang and lat numbers two times you have to change them with your code of lat and lang

center: new google.maps.LatLng(45.088530, -64.367951), // Your Address Here

And

var myLatLng = new google.maps.LatLng(45.088530, -64.367951);                                               

Credit

- jQuery

- Images

All images and videos used in the demo are not distributed with the theme. They are all licensed under Creative Commons and credited to their respective creator/owner.

Changlog

V1.4

Added on 18 April, 2018

  1. Fix Youtube Background
  2. Kindly, Update plugins.js, and video section form HTML structure. For more help please contact us via profile.

Changlog

V1.3

Added on 07 May, 2016

  1. Improvement Reservation & Contact forms with PHP and Javascript fules
  2. Kindly, Update main.css, main.js, reser-process.php and reservation form HTML structure. For more help please contact us via profile.

Changlog

V1.2

Added on 15 November, 2015

  1. Add PHP Function to Reservation Form
  2. For Details more, Please click hereReservation Form Description

Changlog

V1.1

Added on 9 June, 2015

  1. Added Boxed Version
  2. Add Boxed Description under of Page Elements, Go to Boxed Description

Initial Release V1.0

Released on 28 May, 2015