<!--
Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Aluspisan a Bootstarp Website Template | Home :: w3layouts</title>
<link href="web/css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<link href="web/css/style.css" rel="stylesheet" type="text/css" media="all" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500,700,900' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:600italic,400,700,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="web/css/flexslider.css" type="text/css" media="screen" />
<script src="web/js/jquery.min.js"></script>
</head>
<body>
<!-- header -->
<div class="banner1">
<div class="container">
<div class="logo">
<a href="index.html"><img src="web/images/logo.png" alt="" /></a>
</div>
<div class="head-nav">
<span class="menu"> </span>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">portfolio</a></li>
<li class="active"><a href="blog.html">blog</a></li>
<li><a href="contact.html">contact</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<!-- script-for-nav -->
<script>
$( "span.menu" ).click(function() {
$( ".head-nav ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- script-for-nav -->
<div class="clearfix"> </div>
<h1>blog</h1>
</div>
</div>
<!-- header -->
<div class="blog">
<div class="container">
<div class="blog-left">
<div class="blog-left-head">
<span> </span>
<h3>Recent-posts</h3>
</div>
<div class="blog-artical-grids">
<div class="blog-artical-grid">
<h3><a href="single.html">Visualizing Tweets around Emmy-nominated shows</a></h3>
<div class="blog-artical-grid-pic-info">
<div class="blog-artical-grid-pic">
<a href="single.html"><img src="web/images/device2.jpg" class="img-responsive" alt="" /></a>
</div>
<div class="blog-artical-grid-pic-info-admin">
<div class="blog-artical-grid-pic-info-admin-left">
<ul>
<li><a href="#"><img src="web/images/admin-pic1.jpg" title="name-here"></a></li>
<li><p>Written by <a href="#">Garry Walt</a></p></li>
</ul>
</div>
<div class="blog-artical-grid-pic-info-admin-right">
<h6>19/<span>09</span></h6>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!----start-artical-tags---->
<div class="artical-tags">
<ul>
<li><a href="#">Art</a></li>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Logotypes</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<!----//End-artical-tags---->
<!-----start-artical-destilas---->
<div class="artical-details">
<div class="artical-details-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
</div>
<div class="artical-details-right">
<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
</div>
<div class="clearfix"> </div>
</div>
<!-----//End-artical-destilas---->
<div class="artical-more-btn">
<a href="singlepage.html"><span>ReadMore...</span></a>
</div>
</div><!----//End-blog-artical-grid--->
<div class="blog-artical-grid">
<h3><a href="single.html">London Fashion Week drives more buzz than ever on Twitter</a></h3>
<div class="blog-artical-grid-pic-info">
<div class="blog-artical-grid-pic">
<a href="single.html"><img src="web/images/device3.jpg" class="img-responsive" alt="" /></a>
</div>
<div class="blog-artical-grid-pic-info-admin">
<div class="blog-artical-grid-pic-info-admin-left">
<ul>
<li><a href="#"><img src="web/images/admin-pic4.jpg" title="name-here"></a></li>
<li><p>Written by <a href="#">Garry Walt</a></p></li>
</ul>
</div>
<div class="blog-artical-grid-pic-info-admin-right">
<h6>19/<span>09</span></h6>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!----start-artical-tags---->
<div class="artical-tags">
<ul>
<li><a href="#">Art</a></li>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Logotypes</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<!----//End-artical-tags---->
<!-----start-artical-destilas---->
<div class="artical-details">
<div class="artical-details-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
</div>
<div class="artical-details-right">
<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
</div>
<div class="clearfix"> </div>
</div>
<!-----//End-artical-destilas---->
<div class="artical-more-btn">
<a href="single.html"><span>ReadMore...</span></a>
</div>
</div><!----//End-blog-artical-grid--->
<div class="blog-artical-grid">
<h3><a href="#">#RockInRio 2013</a></h3>
<div class="blog-artical-grid-pic-info">
<div class="blog-artical-grid-pic">
<a href="single.html"><img src="web/images/device2.jpg" class="img-responsive" alt="" /></a>
</div>
<div class="blog-artical-grid-pic-info-admin">
<div class="blog-artical-grid-pic-info-admin-left">
<ul>
<li><a href="#"><img src="web/images/admin-pic2.jpg" title="name-here"></a></li>
<li><p>Written by <a href="#">Garry Walt</a></p></li>
</ul>
</div>
<div class="blog-artical-grid-pic-info-admin-right">
<h6>19/<span>09</span></h6>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!----start-artical-tags---->
<div class="artical-tags">
<ul>
<li><a href="#">Art</a></li>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Logotypes</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<!----//End-artical-tags---->
<!-----start-artical-destilas---->
<div class="artical-details">
<div class="artical-details-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
</div>
<div class="artical-details-right">
<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
</div>
<div class="clearfix"> </div>
</div>
<!-----//End-artical-destilas---->
<div class="artical-more-btn">
<a href="#"><span>ReadMore...</span></a>
</div>
</div><!----//End-blog-artical-grid--->
<div class="blog-artical-grid">
<h3><a href="single.html">Vine videos that grew on us - Sept 13</a></h3>
<div onclick="location.href='singlepage.html';" class="blog-artical-grid-pic-info">
<div class="blog-artical-grid-pic">
<a href="single.html"><img src="web/images/device3.jpg" class="img-responsive" alt="" /></a>
</div>
<div class="blog-artical-grid-pic-info-admin">
<div class="blog-artical-grid-pic-info-admin-left">
<ul>
<li><a href="#"><img src="web/images/admin-pic3.jpg" title="name-here"></a></li>
<li><p>Written by <a href="#">Garry Walt</a></p></li>
</ul>
</div>
<div class="blog-artical-grid-pic-info-admin-right">
<h6>19/<span>09</span></h6>
</div>
<div class="clearfix"> </div>
</div>
</div>
<!----start-artical-tags---->
<div class="artical-tags">
<ul>
<li><a href="#">Art</a></li>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Logotypes</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<!----//End-artical-tags---->
<!-----start-artical-destilas---->
<div class="artical-details">
<div class="artical-details-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sollicitudin felis vitae urna auctor sodales. Donec semper justo nec mauris aliquam mattis. <a href="#">Donec faucibus</a> orci quis tortor accumsan, in iaculis ipsum euismod. Phasellus consequat tempus ipsum, in porta magna ultricies cursus. Pellentesque scelerisque orci justo, non elementum purus lacinia id.</p>
</div>
<div class="artical-details-right">
<p>Nunc id mi rutrum, sollicitudin elit eget, pretium risus. Quisque molestie nunc sed justo ornare, ipsum lorem mattis urna, eu feugiat augue justo quis risus. Sed vitae lacus dignissim, sodales justo sit amet, tristique justo. <a href="#">Proin eget erat</a> quis leo suscipit laoreet at ac diam. Integer eu interdum mauris. Aenean a aliquam turpis, eu tincidunt urna.</p>
</div>
<div class="clearfix"> </div>
</div>
<!-----//End-artical-destilas---->
<div class="artical-more-btn">
<a href="singlepage.html"><span>ReadMore...</span></a>
</div>
</div><!----//End-blog-artical-grid--->
</div>
<div class="blog-artical-pagenate">
<ul>
<li class="frist"><span> </span></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li class="more-art"><span> </span></li>
<li class="last"><span> </span></li>
</ul>
</div>
</div>
<div class="blog-right">
<div class="blog-right-head">
<span> </span>
<h3>CaTEGORIES</h3>
</div>
<!----start-accordinatio-files--->
<script src="web/js/vallenato.js" type="text/javascript" charset="utf-8"></script>
<link rel="stylesheet" href="web/css/vallenato.css" type="text/css" media="screen" charset="utf-8">
<!----start-accordinatio-files--->
<div class="blog-right-accordinations">
<h2 class="accordion-header active-header">Webdesign</h2>
<div class="accordion-content open-content" style="width: 242px; display: block;">
<ul>
<li><a href="#">adipiscing elit.</a></li>
<li><a href="#">consectetur </a></li>
<li><a href="#">Pellentesque </a></li>
<li><a href="#">sollicitudin felis </a></li>
</ul>
</div>
<h2 class="accordion-header inactive-header">Art design</h2>
<div class="accordion-content" style="width: 242px;">
<ul>
<li><a href="#">adipiscing elit.</a></li>
<li><a href="#">consectetur </a></li>
<li><a href="#">Pellentesque </a></li>
<li><a href="#">sollicitudin felis </a></li>
</ul>
</div>
<h2 class="accordion-header inactive-header">Logotypes</h2>
<div class="accordion-content" style="width: 242px;">
<ul>
<li><a href="#">adipiscing elit.</a></li>
<li><a href="#">consectetur </a></li>
<li><a href="#">Pellentesque </a></li>
<li><a href="#">sollicitudin felis </a></li>
</ul>
</div>
<h2 class="accordion-header inactive-header">Photography</h2>
<div class="accordion-content" style="width: 242px;">
<ul>
<li><a href="#">adipiscing elit.</a></li>
<li><a href="#">consectetur </a></li>
<li><a href="#">Pellentesque </a></li>
<li><a href="#">sollicitudin felis </a></li>
</ul>
</div>
<h2 class="accordion-header inactive-header">Videos</h2>
<div class="accordion-content" style="width: 242px;">
<ul>
<li><a href="#">adipiscing elit.</a></li>
<li><a href="#">consectetur </a></li>
<li><a href="#">Pellentesque </a></li>
<li><a href="#">sollicitudin felis </a></li>
</ul>
</div>
<h2 class="accordion-header inactive-header">Other</h2>
<div class="accordion-content" style="width: 242px;">
<ul>
<li><a href="#">adipiscing elit.</a></li>
<li><a href="#">consectetur </a></li>
<li><a href="#">Pellentesque </a></li>
<li><a href="#">sollicitudin felis </a></li>
</ul>
</div>
</div>
<!----start-tags---->
<div class="blog-right-head">
<span> </span>
<h3>Tag's</h3>
</div>
<div class="tags-for">
<ul>
<li><a href="#">Art</a></li>
<li><a href="#">WebDesign</a></li>
<li><a href="#">Logotypes</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Other</a></li>
<li><a href="#">WEb</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<!----//End-tags---->
<!----start-comments---->
<div class="blog-comments">
<div class="blog-right-head">
<span> </span>
<h3>Last Comments</h3>
</div>
<div class="blog-comment-grids">
<div class="blog-comment-grid">
<div class="blog-comment-grid-left">
<img src="web/images/admin-pic1.jpg" alt="">
</div>
<div class="blog-comment-grid-right">
<a href="#">Endy Brown</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-comment-grid">
<div class="blog-comment-grid-left">
<img src="web/images/admin-pic2.jpg" alt="">
</div>
<div class="blog-comment-grid-right">
<a href="#">Millana Watson</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-comment-grid">
<div class="blog-comment-grid-left">
<img src="web/images/admin-pic3.jpg" alt="">
</div>
<div class="blog-comment-grid-right">
<a href="#">Andrew Haching</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="clearfix"> </div>
</div>
<div class="blog-comment-grid">
<div class="blog-comment-grid-left">
<img src="web/images/admin-pic4.jpg" alt="">
</div>
<div class="blog-comment-grid-right">
<a href="#">Bruse Loome</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!----start-Comments---->
</div>
<div class="clearfix"> </div>
</div>
</div>
<!-- footer -->
<div class="footer">
<div class="container">
<div class="col-md-4">
<p>Template by <a href="http://w3layouts.com" target="_blank"> w3layouts</a></p>
</div>
<div class="col-md-4 policy">
<ul>
<li><a href="#">Privacy Policy</li></a>
<li><a href="#">Terms of Use</li></a>
<li><a href="#">FAQs</li></a>
<div class="clearfix"></div>
</ul>
</div>
<div class="col-md-4 social">
<ul>
<li><a href="#"><i class="fb"> </i></li></a>
<li><a href="#"><i class="twt"> </i></li></a>
<li><a href="#"><i class="goog"> </i></li></a>
<li><a href="#"><i class="in"> </i></li></a>
<li><a href="#"><i class="pp"> </i></li></a>
<div class="clearfix"></div>
</ul>
</div>
<div class="clearfix"></div>
</div>
</div>
<!-- footer -->
</body>
</html>