<!DOCTYPE html>
<!--[if IE 8 ]><html class="ie ie8" class="no-js" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Dreamz Responsive Multipurpose Template</title>
<meta name="description" content="">
<!-- CSS FILES -->
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" data-name="skins">
<link rel="stylesheet" href="css/layout/wide.css" data-name="layout">
<link rel="stylesheet" type="text/css" href="css/switcher.css" media="screen" />
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--Start Header-->
<header id="header">
<!-- Start info-bar -->
<div id="info-bar">
<div class="container">
<div class="row">
<div class="col-sm-8 top-info hidden-xs">
<span><i class="fa fa-phone"></i>Phone: (123) 456-7890</span>
<span><i class="fa fa-envelope"></i>Email: mail@example.com</span>
</div>
<div class="col-sm-4 top-info hidden-xs">
<ul>
<li><a href="" class="my-tweet"><i class="fa fa-twitter"></i></a></li>
<li><a href="" class="my-facebook"><i class="fa fa-facebook"></i></a></li>
<li><a href="" class="my-skype"><i class="fa fa-skype"></i></a></li>
<li><a href="" class="my-pint"><i class="fa fa-pinterest"></i></a></li>
<li><a href="" class="my-rss"><i class="fa fa-rss"></i></a></li>
<li><a href="" class="my-google"><i class="fa fa-google-plus"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
<!--/#info-bar -->
<div id="logo-bar">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3">
<div id="logo">
<h1><a href="index.html"><img src="images/logo.png"/></a></h1>
</div>
</div>
<div class="col-md-9">
<!-- Navigation
================================================== -->
<div class="navbar navbar-default navbar-static-top" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a href="index.html">Home</a>
<ul class="dropdown-menu">
<li><a href="index_2.html">Home 2</a></li>
<li><a href="index_3.html">Home 3</a></li>
<li><a href="index_4.html">Home 4</a></li>
<li><a href="index_5.html">Home 5</a></li>
</ul>
</li>
<li><a href="#">Shortcodes</a>
<ul class="dropdown-menu">
<li><a href="elements.html">Elements</a></li>
<li><a href="columns.html">Columns</a></li>
<li><a href="typography.html">Typography</a></li>
<li><a href="pricing-tables.html">Pricing Tables</a></li>
<li><a href="icons.html">Icons</a></li>
</ul>
</li>
<li><a href="#">Pages</a>
<ul class="dropdown-menu">
<li>
<a href="about.html">About</a>
<ul class="dropdown-menu">
<li><a href="about.html">About Us 1</a></li>
<li><a href="about-2.html">About Us 2</a></li>
</ul>
</li>
<li><a href="services.html">Services</a></li>
<li><a href="faq.html">FAQ</a></li>
<li><a href="sidebar-right.html">Right Sidebar</a></li>
<li><a href="sidebar-left.html">Left Sidebar</a></li>
<li><a href="404-page.html">404 Page</a></li>
</ul>
</li>
<li><a href="#">Portfolio</a>
<ul class="dropdown-menu">
<li>
<a href="#">Portfolio Classic</a>
<ul class="dropdown-menu">
<li><a href="portfolio_2.html">Portfolio 2</a></li>
<li><a href="portfolio_3.html">Portfolio 3</a></li>
<li><a href="portfolio_4.html">Portfolio 4</a></li>
</ul>
</li>
<li>
<a href="portfolio_masonry_3.html">Portfolio Masnory</a>
<ul class="dropdown-menu">
<li><a href="portfolio_masonry_2.html">Masonry portfolio 2</a></li>
<li><a href="portfolio_masonry_3.html">Masonry portfolio 3</a></li>
<li><a href="portfolio_masonry_4.html">Masonry portfolio 4</a></li>
</ul>
</li>
<li>
<a href="portfolio_single.html">Portfolio Single</a>
<ul class="dropdown-menu">
<li><a href="portfolio_single.html">Portfolio Single 1</a></li>
<li><a href="portfolio_single_2.html">Portfolio Single 2</a></li>
<li><a href="portfolio_single_3.html">Portfolio Single 3</a></li>
</ul>
</li>
</ul>
</li>
<li class="active"><a href="#">Blog</a>
<ul class="dropdown-menu">
<li class="active">
<a href="portfolio_masonry_3.html">Masnory Blog Style</a>
<ul class="dropdown-menu">
<li class="active"><a href="blog-masonry-two.html">Blog Masonry 2</a></li>
<li><a href="blog-masonry-three.html">Blog Masonry 3</a></li>
<li><a href="blog-masonry-four.html">Blog Masonry 4</a></li>
</ul>
</li>
<li>
<a href="portfolio_masonry_3.html">Classic Blog Style</a>
<ul class="dropdown-menu">
<li><a href="blog-large-image.html">Large Image</a></li>
<li><a href="blog-medium-image.html">Medium Image</a></li>
</ul>
</li>
<li><a href="blog-post.html">Single Post</a></li>
</ul>
</li>
<li><a href="#">Contact</a>
<ul class="dropdown-menu">
<li><a href="contact_1.html">Contact 1</a></li>
<li><a href="contact_2.html">Contact 2</a></li>
<li><a href="contact_3.html">Contact 3</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!--/.container -->
</div>
<!--/#logo-bar -->
</header>
<!--End Header-->
<!--start wrapper-->
<section class="wrapper">
<section class="page_head">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12">
<nav id="breadcrumbs">
<ul>
<li>You are here:</li>
<li><a href="index.html">Home</a></li>
<li>blog</li>
</ul>
</nav>
<div class="page_title">
<h2>Blog Masonry two</h2>
<!--<span class="sub_heading">We are here for you 24/7</span>-->
</div>
</div>
</div>
</div>
</section>
<section class="content blog masonry_blog">
<div class="container">
<div class="mixed-container masonry_wrapper_blog row wow fadeInUp">
<div class="item">
<div class="blog-item">
<div class="ImageWrapper">
<img src="images/blog/blog_1.png" alt="" class="img-responsive">
</div>
<div class="metaInfo">
<span><i class="fa fa-calendar"></i> <a href="#">May 11, 2015</a> </span>
<span><i class="fa fa-tag"></i> <a href="#">News</a> </span>
<span><i class="fa fa-comments"></i> <a href="#">12 Comments</a></span>
</div><!-- end meta -->
<div class="blog-title">
<h2><a href="blog-post.html" title="">perferendis doloribus asperiores ut labore.</a></h2>
</div><!-- end title -->
<div class="blog-desc">
<p>Lorem ipsum door sit amet, fugiat deicata avise id cum, no quo maiorum intel ogrets geuiat operts elicata libere avisse id cumlegebat, liber regione eu sit.... </p>
</div><!-- end desc -->
<div class="blog-button">
<a class="btn btn-small btn-default" href="blog-post.html">Read More</a>
</div><!-- end button --><!-- end button -->
</div><!-- end blog -->
</div><!-- end item -->
<div class="item">
<div class="blog-item">
<div class="ImageWrapper">
<img src="images/blog/blog_2.png" alt="" class="img-responsive">
</div>
<div class="metaInfo">
<span><i class="fa fa-calendar"></i> <a href="#">Nov 20, 2015</a> </span>
<span><i class="fa fa-tag"></i> <a href="#">Design</a> </span>
<span><i class="fa fa-comments"></i> <a href="#">28 Comments</a></span>
</div><!-- end meta -->
<div class="blog-title">
<h2><a href="blog-post.html" title="">Lorem ipsum dolor sit amet.</a></h2>
</div><!-- end title -->
<div class="blog-desc">
<p>Lorem ipsum door sit amet, fugiat deicata avise id cum, no quo maiorum intel ogrets geuiat operts elicata libere avisse id cumlegebat, liber regione eu sit.... </p>
</div><!-- end desc -->
<div class="blog-button">
<a class="btn btn-small btn-default" href="blog-post.html">Read More</a>
</div><!-- end button --><!-- end button -->
</div><!-- end blog -->
</div><!-- end item -->
<div class="item">
<div class="blog-item">
<div class="ImageWrapper">
<img src="images/blog/blog_3.png" alt="" class="img-responsive">
</div>
<div class="metaInfo">
<span><i class="fa fa-calendar"></i> <a href="#">Nov 10, 2015</a> </span>
<span><i class="fa fa-tag"></i> <a href="#">News</a> </span>
<span><i class="fa fa-comments"></i> <a href="#">20 Comments</a></span>
</div><!-- end meta -->
<div class="blog-title">
<h2><a href="blog-post.html" title="">Lorem ipsum dolor sit amet</a></h2>
</div><!-- end title -->
<div class="blog-desc">
<p>Lorem ipsum door sit amet, fugiat deicata avise id cum, no quo maiorum intel ogrets geuiat operts elicata libere avisse id cumlegebat, liber regione eu sit.... </p>
</div><!-- end desc -->
<div class="blog-button">
<a class="btn btn-small btn-default" href="blog-post.html">Read More</a>
</div><!-- end button --><!-- end button -->
</div><!-- end blog -->
</div><!-- end item -->
<div class="item">
<div class="blog-item">
<figure class="post_video">
<div class="video">
<iframe src="http://player.vimeo.com/video/3365942?title=0&byline=0&portrait=0" width="100%" height="320" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</figure>
<div class="metaInfo">
<span><i class="fa fa-calendar"></i> <a href="#">Nov 28, 2015</a> </span>
<span><i class="fa fa-tag"></i> <a href="#">Design</a> </span>
<span><i class="fa fa-comments"></i> <a href="#">22 Comments</a></span>
</div><!-- end meta -->
<div class="blog-title">
<h2><a href="blog-post.html" title="">Mauris rutrum id libero in ornare</a></h2>
</div><!-- end title -->
<div class="blog-desc">
<p>Lorem ipsum door sit amet, fugiat deicata avise id cum, no quo maiorum intel ogrets geuiat operts elicata libere avisse id cumlegebat, liber regione eu sit.... </p>
</div><!-- end desc -->
<div class="blog-button">
<a class="btn btn-small btn-default" href="blog-post.html">Read More</a>
</div><!-- end button --><!-- end button -->
</div><!-- end blog -->
</div><!-- end item -->
<div class="item">
<div class="blog-item">
<div class="ImageWrapper">
<img src="images/blog/blog-4.png" alt="" class="img-responsive">
</div>
<div class="metaInfo">
<span><i class="fa fa-calendar"></i> <a href="#">Nov 01, 2015</a> </span>
<span><i class="fa fa-tag"></i> <a href="#">News</a> </span>
<span><i class="fa fa-comments"></i> <a href="#">33 Comments</a></span>
</div><!-- end meta -->
<div class="blog-title">
<h2><a href="blog-post.html" title="">Mauris rutrum id libero in ornare</a></h2>
</div><!-- end title -->
<div class="blog-desc">
<p>Lorem ipsum door sit amet, fugiat deicata avise id cum, no quo maiorum intel ogrets geuiat operts elicata libere avisse id cumlegebat, liber regione eu sit.... </p>
</div><!-- end desc -->
<div class="blog-button">
<a class="btn btn-small btn-default" href="blog-post.html">Read More</a>
</div><!-- end button --><!-- end button -->
</div><!-- end blog -->
</div><!-- end item -->
<div class="item">
<div class="blog-item">
<div class="ImageWrapper">
<img src="images/blog/blog_6.png" alt="" class="img-responsive">
</div>
<div class="metaInfo">
<span><i class="fa fa-calendar"></i> <a href="#">Nov 11, 2015</a> </span>
<span><i class="fa fa-tag"></i> <a href="#">Design</a> </span>
<span><i class="fa fa-comments"></i> <a href="#">01 Comments</a></span>
</div><!-- end meta -->
<div class="blog-title">
<h2><a href="blog-post.html" title="">Vivamus gravida vitae turpis nec tempor. </a></h2>
</div><!-- end title -->
<div class="blog-desc">
<p>Lorem ipsum door sit amet, fugiat deicata avise id cum, no quo maiorum intel ogrets geuiat operts elicata libere avisse id cumlegebat, liber regione eu sit.... </p>
</div><!-- end desc -->
<div class="blog-button">
<a class="btn btn-small btn-default" href="blog-post.html">Read More</a>
</div><!-- end button --><!-- end button -->
</div><!-- end blog -->
</div><!-- end item -->
</div><!-- end masonry_wrapper -->
<div class="col-sm-12 text-center">
<ul class="pagination">
<li><a href="#">«</a></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><a href="#">5</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div> <!--/.container-->
</section>
</section>
<!--end wrapper-->
<!--start footer-->
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>About Us</span></h4>
</div>
<div class="widget_content">
<p>Donec earum rerum hic tenetur ans sapiente delectus, ut aut reiciendise voluptat maiores alias consequaturs aut perferendis doloribus asperiores.</p>
<ul class="contact-details-alt">
<li><i class="fa fa-map-marker"></i> <p><strong>Address</strong>: #2021 Lorem Ipsum</p></li>
<li><i class="fa fa-user"></i> <p><strong>Phone</strong>:(+91) 9000-12345</p></li>
<li><i class="fa fa-envelope"></i> <p><strong>Email</strong>: <a href="#">mail@example.com</a></p></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Recent Posts</span></h4>
</div>
<div class="widget_content">
<ul class="links">
<li><i class="fa fa-caret-right"></i> <a href="#">Aenean commodo ligula eget dolor<span>November 07, 2015</span></a></li>
<li><i class="fa fa-caret-right"></i> <a href="#">Temporibus autem quibusdam <span>November 05, 2015</span></a></li>
<li><i class="fa fa-caret-right"></i> <a href="#">Debitis aut rerum saepe <span>November 03, 2015</span></a></li>
<li><i class="fa fa-caret-right"></i> <a href="#">Et voluptates repudiandae <span>November 02, 2015</span></a></li>
</ul>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Twitter</span></h4>
</div>
<div class="widget_content">
<ul class="tweet_list">
<li class="tweet_content item">
<i class="fa fa-twitter"></i>
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2015</span>
</li>
<li class="tweet_content item">
<i class="fa fa-twitter"></i>
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2015</span>
</li>
<li class="tweet_content item">
<i class="fa fa-twitter"></i>
<p class="tweet_link"><a href="#">@jquery_rain </a> Lorem ipsum dolor et, consectetur adipiscing eli</p>
<span class="time">29 September 2015</span>
</li>
</ul>
</div>
<div class="widget_content">
<div class="tweet_go"></div>
</div>
</div>
<div class="col-sm-6 col-md-3 col-lg-3">
<div class="widget_title">
<h4><span>Flickr Gallery</span></h4>
</div>
<div class="widget_content">
<div class="flickr">
<ul id="flickrFeed" class="flickr-feed"></ul>
</div>
</div>
</div>
</div>
</div>
</footer>
<!--end footer-->
<section class="footer_bottom">
<div class="container">
<div class="row">
<div class="col-sm-6">
<p class="copyright">© Copyright 2015 Dreamz | Powered by <a href="http://www.jqueryrain.com/">jQuery Rain</a></p>
</div>
<div class="col-sm-6 ">
<div class="footer_social">
<ul class="footbot_social">
<li><a class="fb" href="#." data-placement="top" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
<li><a class="twtr" href="#." data-placement="top" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
<li><a class="dribbble" href="#." data-placement="top" data-toggle="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
<li><a class="skype" href="#." data-placement="top" data-toggle="tooltip" title="Skype"><i class="fa fa-skype"></i></a></li>
<li><a class="rss" href="#." data-placement="top" data-toggle="tooltip" title="RSS"><i class="fa fa-rss"></i></a></li>
</ul>
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/retina-1.1.0.min.js"></script>
<script type="text/javascript" src="js/jquery.cookie.js"></script> <!-- jQuery cookie -->
<script type="text/javascript" src="js/styleswitch.js"></script> <!-- Style Colors Switcher -->
<script type="text/javascript" src="js/jquery.smartmenus.min.js"></script>
<script type="text/javascript" src="js/jquery.smartmenus.bootstrap.min.js"></script>
<script type="text/javascript" src="js/jquery.jcarousel.js"></script>
<script type="text/javascript" src="js/jflickrfeed.js"></script>
<script type="text/javascript" src="js/jquery.magnific-popup.min.js"></script>
<script type="text/javascript" src="js/jquery.isotope.min.js"></script>
<script type="text/javascript" src="js/swipe.js"></script>
<script src="js/main.js"></script>
<script>
(function ($) {
var $container = $('.masonry_wrapper_blog'),
colWidth = function () {
var w = $container.width(),
columnNum = 1,
columnWidth = 0;
if (w > 1200) {
columnNum = 2;
} else if (w > 900) {
columnNum = 2;
} else if (w > 600) {
columnNum = 2;
} else if (w > 300) {
columnNum = 1;
}
columnWidth = Math.floor(w/columnNum);
$container.find('.item').each(function() {
var $item = $(this),
multiplier_w = $item.attr('class').match(/item-w(\d)/),
multiplier_h = $item.attr('class').match(/item-h(\d)/),
width = multiplier_w ? columnWidth*multiplier_w[1]-4 : columnWidth-4,
height = multiplier_h ? columnWidth*multiplier_h[1]*0.5-4 : columnWidth*0.5-4;
$item.css({
width: width,
height: height
});
});
return columnWidth;
}
function refreshWaypoints() {
setTimeout(function() {
}, 1000);
}
$('nav.portfolio-filter ul a').on('click', function() {
var selector = $(this).attr('data-filter');
$container.isotope({ filter: selector }, refreshWaypoints());
$('nav.portfolio-filter ul a').removeClass('active');
$(this).addClass('active');
return false;
});
function setPortfolio() {
setColumns();
$container.isotope('reLayout');
}
isotope = function () {
$container.isotope({
resizable: true,
itemSelector: '.item',
masonry: {
columnWidth: colWidth(),
gutterWidth: 0
}
});
};
isotope();
$(window).smartresize(isotope);
}(jQuery));
</script>
<!-- Start Style Switcher -->
<div class="switcher"></div>
<!-- End Style Switcher -->
</body>
</html>