475 lines
26 KiB
HTML
475 lines
26 KiB
HTML
<!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">
|
||
<div class="logo">
|
||
<a href="index.html"><img src="images/lg3.png" alt="" class="img-responsive"></a>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-9">
|
||
<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 class="slider">
|
||
<div>
|
||
<div id="mainslider">
|
||
<div class="item">
|
||
<img src="images/slide-1.jpg" alt="" class="img-responsive">
|
||
</div>
|
||
<div class="item">
|
||
<img src="images/slide-2.jpg" alt="" class="img-responsive">
|
||
</div>
|
||
</div>
|
||
<div class="onslidername">
|
||
<div class="on-slider-ct">
|
||
<div class="slidernav">
|
||
<div class="slidernav-inner">
|
||
<div class="prev"></div>
|
||
<div class="next"></div>
|
||
<div class="clearfix"></div>
|
||
</div>
|
||
</div>
|
||
<div class="div-table">
|
||
<div class="div-table-cell">
|
||
<ul>
|
||
<li><i class="fa fa-heart"></i>10 likes</li>
|
||
<li><i class="fa fa-comment"></i>7 comments</li>
|
||
<li><i class="fa fa-eye"></i>69 views</li>
|
||
</ul>
|
||
<h1>travel with my love</h1>
|
||
<div class="excerpt">
|
||
<p>There is only one happiness in this life, to love and be loved. Be happy with what you have and are, be generous with both, and you won't have to hunt for happiness... </p>
|
||
<a href="#" class="btn btn-link">VIEW MORE</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div><!-- header -->
|
||
|
||
<section id="home-about" class="wow fadeInUp">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="main-title">
|
||
<h2><span>my travel experience</span></h2>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="excerpt">
|
||
<p>Now more than ever do I realize that I will never be content with a sedentary life, that I will always be haunted by thoughts of a sun-drenched elsewhere.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="quotesliders">
|
||
<div class="container">
|
||
<h2 class="hide">validate</h2>
|
||
<div class="quoteslider">
|
||
<div class="row div-table">
|
||
<div class="col-md-4 div-table-cell">
|
||
<div class="onquote-slider-wrapper">
|
||
<div class="onquote-slider-inner">
|
||
<div id="onquote" class="onquote-slider-items">
|
||
<div class="item">
|
||
<img src="images/qs1.jpg" alt="" class="img-responsive">
|
||
<div class="stext">
|
||
A great photograph is one that fully expresses what one feels, in the deepest sense, about what is being photographed.
|
||
</div>
|
||
</div>
|
||
<div class="item">
|
||
<img src="images/qs1.jpg" alt="" class="img-responsive">
|
||
<div class="stext">
|
||
A great photograph is one that fully expresses what one feels.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-8 div-table-cell big-text">
|
||
<div class="text-center">
|
||
<div class="excerpt">
|
||
<a href=""><img src="images/play.png" alt="" class="img-resposive"></a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="travel" class="wow fadeInUp">
|
||
<div class="container">
|
||
<h2 class="hide">validate</h2>
|
||
<div class="row">
|
||
<div class="col-md-4">
|
||
<div class="travel-item">
|
||
<img src="images/travel1.jpg" alt="" class="img-responsive">
|
||
<div class="travel-ct">
|
||
<div class="div-table-column">
|
||
I read, I travel, I become
|
||
</div>
|
||
<div class="div-table-column">
|
||
USA
|
||
</div>
|
||
<div class="div-table-column">
|
||
<a href="" class="btn btn-link">VIEW MORE</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="travel-item">
|
||
<img src="images/travel1.jpg" alt="" class="img-responsive">
|
||
<div class="travel-ct">
|
||
<div class="div-table-column">
|
||
I read, I travel, I become
|
||
</div>
|
||
<div class="div-table-column">
|
||
USA
|
||
</div>
|
||
<div class="div-table-column">
|
||
<a href="" class="btn btn-link">VIEW MORE</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-4">
|
||
<div class="travel-item">
|
||
<img src="images/travel1.jpg" alt="" class="img-responsive">
|
||
<div class="travel-ct">
|
||
<div class="div-table-column">
|
||
I read, I travel, I become
|
||
</div>
|
||
<div class="div-table-column">
|
||
USA
|
||
</div>
|
||
<div class="div-table-column">
|
||
<a href="" class="btn btn-link">VIEW MORE</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section id="p-blog" class="wow fadeInUp">
|
||
<div class="container">
|
||
<div class="text-center">
|
||
<div class="main-title">
|
||
<h2><span>my travel experience</span></h2>
|
||
</div>
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="excerpt">
|
||
<p>Now more than ever do I realize that I will never be content with a sedentary life, that I will always be haunted by thoughts of a sun-drenched elsewhere.</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="row masonry-container">
|
||
<div class="col-md-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w1.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-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w2.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-6 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w3.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 water. She knows nothing of borders and cares nothing for rules...</a></h3>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w2.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-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w2.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-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w2.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-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w1.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-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w1.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-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w2.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-3 mitem">
|
||
<div class="p-blog-item">
|
||
<a href=""><img src="images/w2.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>
|
||
<div class="btn-cover">
|
||
<a href="" class="btn btn-link">
|
||
<span>SHOW</span>
|
||
<span><i></i></span>
|
||
<span>MORE</span>
|
||
</a>
|
||
</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 it’s 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> |