Home main view your site


We thought it would be nice give you a choice main view into your site so we created 4 different variants home page. All of them contains navigation and header where you insert logo and information. All information about settings navigation you find here. To add own logo only need to edit one line of the markup. Other information you change as easy as logo.

Logo

<a href="#" class="logo">
  <figure class="yo-anim yo-anim-almost-visible yo-anim-fade-ttb" data-animation-delay="500">
	<img src="img/logo.png"/>
  </figure>
</a>

Your text

<div class="col-sm-6 col-sm-offset-3 col-md-8 col-md-offset-2 slide-text">
  <p class="yo-anim yo-anim-almost-visible yo-anim-fade-ttb" data-animation-delay="1500">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		Nunc porttitor, turpis eu imperdiet vestibulum, augue est vulputate elit, in molestie dui eros ut orci. 
		Donec sed magna sed massa ullamcorper consequat non mollis elit. 
  </p>
  <ul class="social-icon yo-anim yo-anim-almost-visible yo-anim-fade-ttb" data-animation-delay="2000">
	<li>
	  <a href="#">
		<i class="fa fa-facebook"></i>
	  </a>
	</li>
...

Static home page home1.php


It's the basic view with solid background color or image. If you want to change color you check the file custom.less and edit @bgColor. More information about changing styles find here.

//Colors
//-----------------------------------------

@bgColor: #0c0c0c;

Home slider home2.php / home3.php


Into home2.php and home3.php we used Superslides.

As you can see we used overlay on slides for better text visibility. We thought it looks nice but if you don't like you can remove it (class overlay-slider).

Change slides

<div id="slides">
  <div class="slides-container">
	<img src="img/fslide1.jpg" alt="">
	<img src="img/fslide2.jpg" alt="">
	<img src="img/fslide3.jpg" alt="">
  </div>
</div>

Home slider with different text home3.php


If you need to add more than one text into the slider, you can use this variant of home page. For example if you have 4 slides you can create 4 different text.

<ul class="slides-text">
  <li>
	//your first text
	<div class="slide-content-wrapper">
	  <div class="content">
		<h1 id="intro2" class="slide-header intro2">We <span class="highlight-color">change</span> the world</h1>
		<p id="intro3" class="intro3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
		  Nunc porttitor, turpis eu imperdiet vestibulum, augue est vulputate elit, in molestie dui eros ut orci. <br/>
	      Donec sed magna sed massa ullamcorper consequat non mollis elit. 
		</p>
	  </div>
	</div>                    
  </li>
  <li>
	<div class="slide-content-wrapper">
	//your second text
	  <div class="content">
		<h1 id="intro2" class="slide-header intro2"><span class="highlight-color">Simple</span> and clean</h1>
		<p id="intro3" class="intro3">
		  Donec sed magna sed massa ullamcorper consequat non mollis elit. 
		</p>
	  </div>
	</div>                    
  </li>
...

Home with fullscreen video and different text home4.php


How to change video

Find line

$('.home .video-content').tubular({videoId: 'AVJpr8SAwyM', mute: true});

and change videoId to your youtube video id. For more information about customizing Tubular Player, visit http://www.seanmccambridge.com/tubular/

If you want to use self hosted video remove tubular call from main.js and put this code into .video-content element.

<video autoplay="autoplay" loop="loop" muted="muted" style="width: 100%; height: 100%">
	<source src="your mp4 url" type="video/mp4">
	<source src="your ogg url" type="video/ogv">
</video>