Flashuser

  • Pin It

Atolo – Free Responsive Single Page Template

Today’s freebie is a fully responsive HTML / CSS single page template that you can use to showcase your projects. It has a minimal layout but you can modify it to fit your needs. I’ll give you some hints about the elements I used and also explain the whole process in a short tutorial.

Atolo Single Page Template works great on smartphones and tablet devices thanks to Twitter Boostrap Framework. This free template is suitable for personal portfolios and small businesses. Download it and use it as you want.

atolo-image

Before we get started, make sure you download the archive and open the following files: index.html, style.css and css/colors.css . The style.css is for general elements customization while the colors.css file is for modifying the elements colors.

Step 1: Header Section

atolo-header

This section is pretty simple. Here we’ll have the logo and the navigation menu. What you need to know is that each section has a unique id so when you click a menu link you’ll be transferred to the corresponding section. This is done with some Javascript code that you’ll find below.

 <header>
 <div id="inner-header">
 <div id="logo"><a href="#top"><img src="images/logo.png" alt=""/></a></div>
 <ul class="menu">
 <li><a href="#top">Home</a></li>
 <li><a href="#about">About</a></li>
 <li><a href="#portfolio">Portfolio</a></li>
 <li><a href="#services">Services</a></li>
 <li><a href="#blog">Blog</a></li>
 <li><a href="#contact">Contact</a></li>
 </ul>
 </div>

</header>

The part CSS is easy. The position for the header container is fixed as you can see in the code below.

header{
display: block;
height: 60px !important;
position: fixed;
top: 0 !important;
width: 100%;
z-index:100;
}

#inner-header{width:550px;
margin:0 auto;
height:30px;
}

.menu{font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
margin-top:20px;}
.menu li{padding: 0px 30px 0px 0px; float: left;}
.menu li:nth-child(3){padding: 0px 135px 0px 0px;}
.menu li:last-child{padding:0px;}

#logo{margin:0px;
position:absolute;
top:-10px;
left:242px;}

You’ll find the Javascript code in the js/init.js file.

	$('.menu li a[href^="#"]').bind('click.smoothscroll',function (e) {
	    e.preventDefault();

	    var target = this.hash,
	    $target = $(target);

	    $('html, body').stop().animate({
	        'scrollTop': $target.offset().top
	    }, 1000, 'easeInOutQuart');
	});

Step 2: Slider Section

I used the Flexslider plugin for this section.


<section id="home" class="mutualWrap">
<div class="flexslider-home">
  <ul class="slides">
    <li><img src="images/home/img1.jpg" alt="" /></li>
    <li><img src="images/home/img2.jpg" alt="" /></li>
    <li><img src="images/home/img3.jpg" alt="" /></li>
 </ul>

  </div><!--end flexslider-->

</section><!--end-home-->

To initialize and make changes to it go to init.js file.

 $('.flexslider-home').flexslider({
			animation: "slide",
			slideshow: true,
			slideshowSpeed: 5000,
			animationSpeed: 600,
			controlNav: false,
			prevText: "Previous",    
			nextText: "Next",     
			useCSS: false
			});

Step 3: About Section

atolo-about

In this section I want to talk about how to create with the help of CSS3 the diamond shape. This shape is also used in the portfolio section.

<div class="diamond">
<div class="diamond-content">
<img src="images/team-member.jpg" alt="" />
</div>
</div><!--end diamond-->

The diamond class is used as a mask. We’ll create a square 160×160 an rotate it -45 degrees. Than we’ll set the overflow property to hidden so that any content loaded here doesn’t exceed the boundaries. Now for the diamond-content class we’ll rotate it again but in the opposite direction (+45 degrees) so we can see the image inside normally.

.diamond{
width:160px;
height:160px;
margin-left:35px;
display:block;
overflow:hidden;
-moz-background-clip: padding;    
-webkit-background-clip: padding;  
background-clip: padding-box; 

-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}

.diamond-content{
width:240px;
height:240px;
margin:-50px 0 0 -50px;  

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);}

Step 4: Portfolio Section

For this section we have used the prettyPhoto lightbox plugin. In order to work make sure the rel attribute is set to prettyPhoto[ gallery ] .

<a href="images/portfolio/proj1.jpg" rel="prettyPhoto[gallery]"><div class="work-more"><div class="mask-elem"><img src="images/more-img.png" alt="Project 1" title="Project 1" />
</div>
</div><!--end work-more-->
</a>

The Javascript to enable the prettyPhoto lightbox.

$(".work-item a[rel^='prettyPhoto']").prettyPhoto({
						animation_speed: 'normal',
						autoplay_slideshow: false,
						slideshow: 3000
					});

Step 5: Contact Section

Is a simple and working contact form with AJAX validation. Below that are the social media buttons and copyright text, where you can put your own urls.

<div class="contact-form">
<form method="post" id="my-form" action='include/contact-process.php'>

  		<label for="author">Name*</label>
		<p><input type="text" name="author" class="comm-field"/></p>
  		<label for="email">Email*</label>
		<p><input type="text" name="email" class="comm-field" size="30"/></p>
   		<label for="title">Subject*</label>
		<p><input type="text" name="title" class="comm-field" size="30"/></p>
  		<label for="message">Message*</label>
        <p> <textarea name="message" id="message2" cols="48" rows="10" tabindex="4"></textarea></p>
		<p><input type="submit" value="Send message" id="submit" /></p>
	</form>

<div id="output"></div>
</div>

<footer>
 <div id="inner-footer">
 <ul class="social">
 <li><a class="facebook" href="#">Facebook</a></li>
 <li><a class="twitter" href="#">Twitter</a></li>
 <li><a class="gplus" href="#">GPlus</a></li>
 <li><a class="dribbble" href="#">Dribbble</a></li>
 <li><a class="linkedin" href="#">Linkedin</a></li>
 <li><a class="stumble" href="#">Stumbleupon</a></li>

 </ul>
 </div>
 </footer>

Hope you like what you see and come back for more awesome free HTML template files. You can also share it with your friends. If you have any comments, suggestions please write them below.

Download – Atolo Responsive Single Page Template

You can also check the premium WordPress theme version with Admin Panel and more features to customize.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+