web-html5-scripts/template-blooger-page/index.html
2020-01-06 13:40:18 +01:00

184 lines
7.2 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Blooger</title>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="./css/all.css">
<!-- Owl-Carousel -->
<link rel="stylesheet" href="./css/owl.carousel.min.css">
<link rel="stylesheet" href="./css/owl.theme.default.min.css">
<!-- Css Style -->
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<!-- Navigation
=============================================== -->
<nav class="navigation">
<div class="nav-menu flex-row">
<div class="nav-brand">
<a href="#" class="text-gray">Blooger</a>
</div>
<div class="toggle-collapse">
<div class="toggle-icons">
<i class="fas fa-bars"></i>
</div>
</div>
<div>
<ul class="nav-items">
<li class="nav-link">
<a href="#">Home</a>
</li>
<li class="nav-link">
<a href="#">Category</a>
</li>
<li class="nav-link">
<a href="#">Archive</a>
</li>
<li class="nav-link">
<a href="#">Pages</a>
</li>
<li class="nav-link">
<a href="#">Contact Us</a>
</li>
</ul>
</div>
<div class="social text-gray">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-youtube"></i></a>
</div>
</div>
</nav>
<!-- End Navigation
=============================================== -->
<!-- Main Site Section
=============================================== -->
<main>
<!-- Site Title
=========================================== -->
<section class="site-title">
<div class="site-background">
<h3>Tours & Travels</h3>
<h1>Amazing Place on Earth</h1>
<button class="btn">Explore</button>
</div>
</section>
<!-- End Site Title
=========================================== -->
<!-- Blog Carousel
=========================================== -->
<section>
<div class="blog">
<div class="container">
<div class="owl-carousel owl-theme blog-post">
<div class="blog-content">
<img src="./assets/Blog-post/post-1.jpg" alt="post-1">
<div class="blog-title">
<h3>London Fashion week's continued the evolution</h3>
<button class="btn btn-blog">Fashion</button>
<span>2 minutes</span>
</div>
</div>
<div class="blog-content">
<img src="./assets/Blog-post/post-3.jpg" alt="post-1">
<div class="blog-title">
<h3>London Fashion week's continued the evolution</h3>
<button class="btn btn-blog">Fashion</button>
<span>2 minutes</span>
</div>
</div>
<div class="blog-content">
<img src="./assets/Blog-post/post-2.jpg" alt="post-1">
<div class="blog-title">
<h3>London Fashion week's continued the evolution</h3>
<button class="btn btn-blog">Fashion</button>
<span>2 minutes</span>
</div>
</div>
<div class="blog-content">
<img src="./assets/Blog-post/post-5.png" alt="post-1">
<div class="blog-title">
<h3>London Fashion week's continued the evolution</h3>
<button class="btn btn-blog">Fashion</button>
<span>2 minutes</span>
</div>
</div>
</div>
<div class="owl-navigation">
<span class="owl-nav-prev"><i class="fas fa-long-arrow-alt-left"></i></span>
<span class="owl-nav-next"><i class="fas fa-long-arrow-alt-right"></i></span>
</div>
</div>
</div>
</section>
<!-- End Blog Carousel
=========================================== -->
<!-- Site Content
=========================================== -->
<section class="container">
<div class="site-content">
<div class="posts">
<div class="post-content">
<div class="post-image">
<div>
<img src="./assets/Blog-post/blog1.png" class="img" alt="blog1">
</div>
<div class="post-info flex-row">
<span><i class="fas fa-user text-gray"></i>&nbsp;&nbsp;Admin</span>
<span><i class="fas fa-calendar-alt text-gray"></i>&nbsp;&nbsp;January 14, 2019</span>
<span>2 Comments</span>
</div>
</div>
<div class="post-title">
<a href="#">Why should boys have all the fun? it's the women who are making india an alcohol-loving country</a>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique corporis amet incidunt, nostrum quasi mollitia cumque, expedita voluptatem porro tempore ut nobis ducimus perspiciatis voluptate voluptatibus deserunt ad placeat magnam. Libero dolore expedita eaque incidunt tempore quia sequi, quis placeat.</p>
<button class="btn post-btn">Read More &nbsp;<i class="fas fa-arrow-right"></i></button>
</div>
</div>
</div>
<aside class="sidebar">
<h1>Sidebar</h1>
</aside>
</div>
</section>
<!-- End Site Content
=========================================== -->
</main>
<!-- End Main Site Section
=============================================== -->
<!-- Jquery Library file -->
<script src="./js/jquery3.4.1.min.js"></script>
<!-- Owl-Carousel js -->
<script src="./js/owl.carousel.min.js"></script>
<!-- Javascript -->
<script src="./js/main.js"></script>
</body>
</html>