Content elements

Home content structure

Homepage content is structured with centered text on slides and 5 small elements which you can add to corners of page.

Slide centered content

If you want to only one text on every slides, you should add one slide content to markup and add class “slide-active”. To appear different content on each of slides, add as many slides content as count number of slides.

 
...
   <div class="home-slider-text">
      <div class="slider-text slide-active">
         <div class="slider-text">
            <h2>
               <span class="slider-text-first">Private dining at Marco’s</span> <--First line
               <span class="slider-text-second">Amaze your guests with us.</span> <--Second line
           </h2>
           BUTTON LINK
           <a class="btn btn-md btn-border-animate btn-light slider-text-third" href="private-dining.html">Private dining 
              <span class="top button-border"></span>
	      <span class="left left-bottom button-border"></span>
	      <span class="left left-top button-border"></span>
	      <span class="bottom bottom-right button-border"></span>
	      <span class="bottom bottom-left button-border"></span>
	      <span class="right button-border"></span>
          </a>
       </div>
...

Home elements

To each selected element, add two position classes (vertical and horizontal position). You can modify this appearance in a couple of ways by adding a class to selected element.

Element classes:

home-top: element will appear at the top of the homepage (vertical).
home-bottom: element will appear at the bottom of the homepage (vertical).
home-left: element will appear on the left side of the homepage (horizontal).
home-right: element will appear on the right side of the homepage (horizontal).

Slider pagination

Count number of slides with number of active slide.

...
   <div class="home-slider-pagination show-for-large home-top home-left"><div class="progress-slide"></div></div>
...

Get in touch

Basic contact information.

...
   <div class="home-contact-info show-for-large home-top home-right">
      <span class="phone">
         ... ICON (SVG) ...
         <span>+12 333 846 779</span>
         <span class="mail"><a class="link-hover link-hover-text" href="mailto:hello@marco.com">hello@marco.com</a></span>
      </span>
   </div>
...

Languages

Choice of language on pages.

...
   <ul class="home-slider-languages show-for-large home-top home-right">
      <li>
         <a href="link">LANGUAGE</a>
      </li>
   </ul>
...

Social profiles

All your social profiles in one place.

...
   <ul class="home-social-media show-for-large home-bottom home-left">
      <li>
         <a href="social profile link" class="link-hover">SOCIAL PROFILE</a>
      </li>
   </ul>
...

Button “show picture/show content” or “book now”

Click button “show picture” to hide slide content.

...
   SWITCH SHOW PICTURE/SHOW CONTENT
   <div class="btn-show-picture btn-slider-1 btn-slider-active show-for-large home-bottom home-right">
      <a href="#" class="show-img">Show picture</a>
   </div>
   <div class="btn-show-content btn-slider-1 home-bottom home-right">
      <a href="#" class="show-content">Show content</a>
   </div>

   BUTTON BOOK NOW OR ANOTHER BUTTON
   <div class="btn btn-sm btn-rounded btn-icon btn-solid btn-light  home-bottom home-right">
      <a href="#" >BUTTON NAME
         ... ICON (if you want to have button with icon) ...
      </a>
   </div>
...

Enter your email Address