Intro section

We created 3 types of intro to all main pages (fullscreen intro, top intro and no intro). Any section we shown in "pages".

Fullscreen intro

The fullscreen intro is a place where you can add a themed photo and a description of page. To use the fullscreen intro you need to add the class "intro-fullscreen" to the body and insert to markup "section-intro" (as shown below). Example of such a section, you can see by clicking the tabbed navigation "fullscreen intro" in "pages". You can define an opacity at the start (data-opacity-start) and at the end intro position (data-opacity-end an).

		// choose an intro opacity, 0 - full opacity, 100 - no opacity
		...
		<div class="section-intro" data-opacity-start="30" data-opacity-end="100" data-background="img/your-image.jpg"> 
			<div class="pre-content">
				<div class="container">
					<div class="row">
						<div class="col-xs-12 col-sm-10 col-sm-offset-1">
							// fill information
							<h1 class="parallax-element-first">Fullscreen intro</h1>
							<p class="parallax-element-second">Scroll down to move into content section. <br/>Bottom part of this image will be your header.</p>
						</div>
					</div>
				</div>
			</div>
			// intro arrows
			<a class="arrow1 arrow-section hidden-xs" href="#">
				<i class="fa fa-angle-down"></i>
			</a> 
			<a class="arrow2 arrow-section hidden-xs" href="#" style="">
				<i class="fa fa-angle-up"></i>
			</a>	
		</div>
		...

Top header

The top intro takes only half of user window. Use this as empty header or with short content for best effect. The intro view, see by clicking the tabbed navigation "top header". To create it, add the class "top-intro" to the body and fill in markup "section-intro". 

		<div class="section-intro section-intro-half" data-opacity-start="30" data-opacity-end="100" data-background="img/your-image.jpg">
			<div class="pre-content">
				<div class="container">
					<div class="row">
						<div class="col-xs-12 col-sm-10 col-sm-offset-1">
							<h1 class="parallax-element-first">An Italian dream</h1>
							<p class="parallax-element-second">In hac habitasse platea dictumst. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum bibendum eleifend nulla quis bibendum. Sed tempus massa dolor, vel pharetra elit dictum in. </p>
						</div>
					</div>
				</div>
			</div>
		</div>
		...

No header

If you need no header in your page, add class "no-intro" to the body. 

		<body class="no-intro yo-anim-enabled show-nav"</body>
		...