ABRILLIX/template/blog.html

434 lines
27 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>ABRILLIX - Creative Photography Blog HTML Template</title>
<!-- font -->
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i,900,900i" rel="stylesheet">
<link href="css/font-awesome.css" rel="stylesheet">
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- slick -->
<link href="css/slick.css" rel="stylesheet">
<!-- prettrphoto -->
<link href="css/prettyPhoto.css" rel="stylesheet">
<!-- animate -->
<link href="css/animate.css" rel="stylesheet">
<!-- Main -->
<link href="style.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for 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.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div id="wrapper" class="homepage-3"><!-- wrapper -->
<div id="header"><!-- header -->
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-12">
<div class="logo">
<a href="index.html"><img src="images/lg3.png" alt="" class="img-responsive"></a>
</div>
</div>
<div class="col-md-9 col-xs-12">
<div class="main-navigation"><!-- menu -->
<nav class="navbar navbar-default">
<div>
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About me</a></li>
<li><a href="#">Works</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Pages</a>
<ul class="dropdown-menu">
<li><a href="home-2.html">Homepage 2</a></li>
<li><a href="home-3.html">Homepage 3</a></li>
<li><a href="blog.html">Blog 1</a></li>
<li><a href="blog2.html">Blog 2</a></li>
<li><a href="single-blog.html">Single blog 1</a></li>
<li><a href="single-blog2.html">Single blog 2</a></li>
<li><a href="404.html">404 Pages</a></li>
</ul>
</li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</nav>
</div><!-- menu -->
</div>
</div>
</div>
</div><!-- header -->
<div class="page-header">
<div class="container">
<div class="text-center">
<h2>LIFESTYLE PHOTOGRAPHY<span><i class="one-round"></i></span><span>Home / Photography / Post</span></h2>
</div>
</div>
</div>
<section id="blog" class="wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-3 col-xs-12">
<div class="sidebar">
<div class="author widget">
<h4><span>About me</span><i class="afterh4"></i></h4>
<div class="a-img">
<img src="images/ig-1.jpg" alt="" class="img-responsive">
</div>
<div class="excerpt">
<span>H E Y T H E R E.</span><br/>
I view photography the way I view life: magical and full of possibility.
</div>
</div>
<div class="srch widget">
<h4><span>Search</span><i class="afterh4"></i></h4>
<form class="form-horizontal clearfix">
<div class="form-group clearfix">
<div class="col-sm-12">
<input type="text" class="form-control" id="srch" placeholder="Search">
</div>
</div>
</form>
</div>
<div class="cat widget">
<h4><span>Categories</span><i class="afterh4"></i></h4>
<ul>
<li><a href="">Wedding (20)</a></li>
<li><a href="">Photography (35)</a></li>
<li><a href="">Best Wedding (10)</a></li>
<li><a href="">Adventure (30)</a></li>
</ul>
</div>
<div class="rnews widget">
<h4><span>Recent news</span><i class="afterh4"></i></h4>
<ul>
<li><a href="">#1. Dont stare at a blank...</a></li>
<li><a href="">#2. One can steal ideas, but...</a></li>
<li><a href="">#3. The web is the ultimate...</a></li>
<li><a href="">#4. Worst logo applied...</a></li>
</ul>
</div>
<div class="tags widget">
<h4><span>Popular tags</span><i class="afterh4"></i></h4>
<a href="">Fashion</a>
<a href="">Wedding</a>
<a href="">Travel</a>
<a href="">Video</a>
<a href="">Life</a>
<a href="">Photography</a>
<a href="">Blogger</a>
</div>
<div class="twit widget">
<h4><span>Twitter</span><i class="afterh4"></i></h4>
<div id="twitslide">
<div class="item">
<div class="username">
<span><i class="fa fa-twitter"></i> @abrilix</span>
</div>
<p>Turn on your #favorite music, take a look around, and see if my work speaks to you. Ill be living and traveling all over, mostly across the Western US.</p>
</div>
<div class="item">
<div class="username">
<span><i class="fa fa-twitter"></i> @abrilix</span>
</div>
<p>Turn on your #favorite music, take a look around, and see if my work speaks to you. Ill be living and traveling all over, mostly across the Western US.</p>
</div>
<div class="item">
<div class="username">
<span><i class="fa fa-twitter"></i> @abrilix</span>
</div>
<p>Turn on your #favorite music, take a look around, and see if my work speaks to you. Ill be living and traveling all over, mostly across the Western US.</p>
</div>
</div>
<div class="text-center">
<img src="images/3bulletsb.png" alt="" class="img-responsive">
</div>
</div>
</div>
</div>
<div class="col-md-9 col-xs-12">
<div id="p-blog" class="wow fadeInUp">
<div class="">
<div class="row masonry-container">
<div class="col-md-4 col-xs-6 mitem wow fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-1.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">A picture is a secret about a secret, the more it tells...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-2.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">I will always be haunted by thoughts of a sun-drenched...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-1.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">She is free in her wildness, she is a wanderess, a drop of free...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-2.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">I will always be haunted by thoughts of a sun-drenched...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-2.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">I will always be haunted by thoughts of a sun-drenched...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-2.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">I will always be haunted by thoughts of a sun-drenched...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-1.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">A picture is a secret about a secret, the more it tells...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-2.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">She is free in her wildness, she is a wanderess, a drop of free...</a></h3>
</div>
</div>
</div>
<div class="col-md-4 col-xs-6 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-2.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">I will always be haunted by thoughts of a sun-drenched...</a></h3>
</div>
</div>
</div>
<div class="col-md-12 mitem fadeInDown">
<div class="p-blog-item">
<a href=""><img src="images/blog-3.jpg" alt="" class="img-responsive"></a>
<div class="down-content">
<div class="date">Oct 28, 2016</div>
<h3><a href="">To my mind, the greatest reward and luxury of travel is to be able to experience everyday things as if for the first time, to be in a position in which almost nothing is so familiar it is taken for granted...</a></h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="btn-cover">
<div class="row">
<div class="col-md-2 col-xs-12">
<a href="" class="btn btn-link">
<span><i></i></span>
<span>PREV PAGE</span>
</a>
</div>
<div class="col-md-8 col-xs-12">
<ul class="pagination">
<li class="active"><span>1</span></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><span>...</span></li>
<li><a href="">13</a></li>
</ul>
</div>
<div class="col-md-2 col-xs-12">
<a href="" class="btn btn-link">
<span><i></i></span>
<span>NEXT PAGE</span>
</a>
</div>
</div>
</div>
</div>
</section>
<footer>
<div class="instagram-section wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-2 col-sm-3">
<a href="#">
<img src="images/ig-1.jpg" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-2 col-sm-3">
<a href="#">
<img src="images/ig-1.jpg" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-2 col-sm-3">
<a href="#">
<img src="images/ig-1.jpg" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-2 col-sm-3">
<a href="#">
<img src="images/ig-1.jpg" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-2 col-sm-3">
<a href="#">
<img src="images/ig-1.jpg" alt="" class="img-responsive">
</a>
</div>
<div class="col-md-2 col-sm-3">
<div class="follow">
<img src="images/ig-1.jpg" alt="" class="img-responsive">
<div class="acount">
<div class="div-table">
<div class="div-table-cell">
Follow me
@abrilix
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-logo wow fadeInUp">
<div class="container">
<div class="text-center">
<a href="index.html"><img src="images/logob.png" alt="" class="img-responsive"></a>
<ul class="ft-soc">
<li><a href=""><i class="fa fa-facebook-square"></i></a></li>
<li><a href=""><i class="fa fa-twitter-square"></i></a></li>
<li><a href=""><i class="fa fa-instagram"></i></a></li>
<li><a href=""><i class="fa fa-google-plus-square"></i></a></li>
<li><a href=""><i class="fa fa-search"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="footer-widget wow fadeInUp">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 wow fadeInUp">
<div class="text-center">
<h4>About</h4>
<ul>
<li><a href="">Our Story</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">FAQ</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInUp">
<div class="text-center">
<h4>our work</h4>
<ul>
<li><a href="">Galleries</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Testimonials</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInUp">
<div class="text-center">
<h4>Services</h4>
<ul>
<li><a href="">Wedding Photo</a></li>
<li><a href="">Shop</a></li>
<li><a href="">Fashion Photo</a></li>
</ul>
</div>
</div>
<div class="col-md-3 col-sm-6 wow fadeInUp">
<div class="text-right">
<div class="excerpt">
<p>Whenever I have an idea I write it down, even if its not a very good idea. Sometimes the bad ideas will lead to better ones.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="footer-credits wow fadeInUp">
<div class="container">
<div class="text-center">
© 2016 Copyright Abrillix
</div>
</div>
</div>
</footer>
</div><!-- wrapper -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/lib.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/jquery.prettyPhoto.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/imagesload.js"></script>
<script src="js/masonry.js"></script>
<script src="js/themescript.js"></script>
</body>
</html>