SONEX Documentation

Project Page

Project page show information of your portfolio project. This page has next layout: title image, description, details, project images and carousel. Body of this page must have id #project-page.

Title Image

It's main image of your project located on top of page.

<div class="row">
	<div class="col-md-12">
		<div class="title-image">
			<img src="img/works/project/title.png" alt="">
		</div>
	</div>
</div>

Description

This block helps you describe your project. It contains title, categories of your project and paragraph.

<div class="col-md-9">
	<div class="description">
		<h1>Podantic</h1>
		<ul class="categories">
			<li>Typography</li>
			<li>Branding</li>
		</ul>
		<p>Integer dictum sapien ac sapien elementum tincidunt. Fusce auctor diam at lorem mollis pretium in ac dolor. Praesent iaculis nunc et velit porttitor, et venenatis enim sodales.</p>
		<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed accumsan tellus id pharetra rhoncus. Ut non tincidunt turpis, quis aliquet metus.</p>
	</div>
</div>

Details

This block contains information like date, client, budget, art director and so on.

<div class="col-md-3">
	<div class="details">
		<ul>
			<li>Date:<span>July 2016</span>
			</li>
			<li>Client:<span>Rom Mar</span>
			</li>
			<li>Budget:<span>$3000</span>
			</li>
			<li>Art Director:<span>John Doe</span>
			</li>
		</ul>
	</div>
</div>

Project Image

Any project image should be wrapped to .project-image. Also you can add .caption inside this with text. This text will shown when user hover to image.

<div class="project-image">
	<div class="caption">First Mockup</div>
	<img src="img/works/project/1.png" alt="">
</div>

Carousel

You can add many images to carousel that will be rotate them. Carousel must have id #project-carousel and next classes .carousel.slide. Also don't forget about adding carousel pagination items inside .carousel-indicators.

<div class="carousel slide" id="project-carousel">
	<ol class="carousel-indicators">
		<li class="active" data-target=".carousel" data-slide-to="0"></li>
		<li data-target=".carousel" data-slide-to="1"></li>
		<li data-target=".carousel" data-slide-to="2"></li>
	</ol>
	<div class="carousel-inner">
		<div class="item active">
			<img src="img/works/project/carousel-1.png" alt="">
		</div>
		<div class="item">
			<img src="img/works/project/carousel-2.png" alt="">
		</div>
		<div class="item">
			<img src="img/works/project/carousel-3.png" alt="">
		</div>
	</div>
</div>

If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!