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> ...