Navigation

Fuuny Boxes

  1. Home
  2. Funny Boxes
Funny Boxes

Funny Boxes

These boxes can created just only applying class .funny-box with this markup


<div class="col-sm-4 funny-box primary">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is primary Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>

.primary can be replaced with other color classes like .success, .info, .warning, .danger, .default etc

Funny Box

This is basic Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is primary Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is success Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is info Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is warning Funny BoxLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is danger Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam


Animated Funny Boxes

These boxes can created just only applying some animated classes like .float to the container have class .funny-box

Funny Box

This is basic funny box made by using class .float Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is primary Funny Box made by using class .hover Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is success Funny Box made by using class .float-shadow Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is info funny box made by using class .hover-shadow Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is warning Funny Box made by using class .circular and .hover Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam

Funny Box

This is danger Funny Box made by using class .circular and .float-shadow Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam 


		  	
<!-- Funny Boxes --> 
								  	
<div class="col-sm-4 funny-box">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is basic Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box primary">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is primary Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box success">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is success Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box info">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is info Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box warning">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is warning Funny BoxLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam  </p>
</div>
<div class="col-sm-4 funny-box danger">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is danger Funny Box Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
								  	
<!-- Animated Funny Boxes -->
								  	
<div class="col-sm-4 funny-box float">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is basic funny box made by using class <code>.float</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box primary hover">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is primary Funny Box made by using class <code>.hover</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box success float-shadow">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is success Funny Box made by using class <code>.float-shadow</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box info hover-shadow">
	<div class="icon"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is info funny box made by using class <code>.hover-shadow</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box warning hover">
	<div class="icon circular"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is warning Funny Box made by using class <code>.circular and .hover</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>
<div class="col-sm-4 funny-box danger float-shadow">
	<div class="icon circular"><span class="fa fa-newspaper-o"></span></div>
	<h3 class="heading">Funny Box</h3>
	<p>This is danger Funny Box made by using class <code>.circular and .float-shadow</code> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam </p>
</div>