HTML5 Up! is a website that creates and shares very good-looking and free HTML5-CSS3 templates.

All the templates have responsive layouts (down to mobile) (uses Skel.js) and they are compatible with all major browsers.

There are already 10+ templates where new ones are added within time and they can be used freely under the CCA license for both personal or commercial projects.

Home page

Volume 4 of our flat icons set with a minimalist and clean style inspired by the flat design UI trend led by google and others. Note that this icons set is provided in a psd file.

Download here

Download here

In this tutorial we’ll be creating a sleek pricing table with some striking hover effects. We’ll use Bootstrap 3, it’ll make the whole thing responsive, shifting the layout at a couple of breakpoints.

HTML Markup

Lets start with html

<div class="container">
<div class="price-wrapper">

<div class="col-span-4">  
<div class="pricing-table">
  <div class="offer">
    <span>Personal</span>
    <span>Plans for everyone</span>
  </div>
  <span class="price">$79</span>
  <ul class="features">
    <li>Features</li>
    <li>Some feature</li>
    <li>One more feture...</li>    
    <li>End so on...</li> 
  </ul>

  <div class="btn-metro"><span>Sign up</span></div>
</div>
</div><!--/cols-span-3-->

<div class="col-span-4">  
<div class="pricing-table highlight">
  <div class="offer">
    <span>Business</span>
    <span>Plans for everyone</span>
  </div>
  <span class="price">$79</span>
  <ul class="features">
    <li>Features</li>
    <li>Some feature</li>
    <li>One more feture...</li>    
    <li>End so on...</li> 
  </ul>
  
  <div class="btn-metro"><span>Sign up</span></div>
</div>
</div><!--/cols-span-3-->


<div class="col-span-4">  
<div class="pricing-table">
  <div class="offer">
    <span>Custom</span>
    <span>Plans for everyone</span>
  </div>
  <span class="price">$79</span>
  <ul class="features">
    <li>Features</li>
    <li>Some feature</li>
    <li>One more feture...</li>    
    <li>End so on...</li> 
  </ul>

  
  <div class="btn-metro"><span>Sign up</span>
</div>
</div>
</div><!--/cols-span-3-->


</div>

</div>

CSS Style

.price-wrapper{
margin-top:150px;
}
.pricing-table{
background:#0F1012;
color:rgb(136, 153, 168);
padding-bottom:25px;
}
.offer{
padding:20px 0 20px 0;
background-color:rgb(37, 38, 48);
}
.offer span{
display:block;
text-align:center;
font-size:28px;
}
.offer span:last-of-type{
font-size:13px;
padding:10px 0 0 0;
}
.offer span:last-of-type{
font-size:13px;
}
.price{
display:block;
margin:15px 0 10px 0;
text-align:center;
font-size:30px;
padding:17px 0 17px 0;
color: rgb(26, 91, 151);
}
ul{
display:block;
margin:20px 0 10px 0;
padding:0;
list-style-type:none;
text-align:center;
}
li{
display:block;
margin:10px 0 10px 0;
padding:10px 0 0;
border-top:1px solid rgb(28, 28, 31);
}
.btn-metro{
border:none;
/*border-radius*/
-webkit-border-radius:5px;
   -moz-border-radius:5px;
        border-radius:5px;
background:rgb(37, 38, 48);
color:#f9f9f9;
padding:10px 0 10px;
margin:20px auto;
width:140px;
text-align:center;
font-size:16px;
margin-bottom:25px;
border-bottom:3px solid rgb(29, 29, 32);
}
.highlight .btn-metro{
background:rgb(26, 91, 151);
border-bottom: 3px solid rgb(17, 70, 119);
}
.pricing-table:hover{
/*transform*/
-webkit-transform:scale(1.05);
   -moz-transform:scale(1.05);
    -ms-transform:scale(1.05);
     -o-transform:scale(1.05);
        transform:scale(1.05);
}

Feel free to use in any personal or commercial project.

DEMO

least.js is a random & responsive HTML 5, CSS3 gallery with lazyLoad. Installation and usage is simple, and the end result is quite beautiful.

Home page               Demo

More coming soon! Stay tuned …