<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="sumit kumar">
<title>blog</title>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css">
<link href="css/font-awesome.css" rel="stylesheet" type="text/css">
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="https://use.fontawesome.com/07b0ce5d10.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="https://lh3.googleusercontent.com/-N4NB2F966TU/WM7V1KYusRI/AAAAAAAADtA/fPvGVNzOkCo7ZMqLI6pPITE9ZF7NONmawCJoC/w185-h40-p-rw/logo.png"></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li><a href="#">Home</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Page 1-1</a></li>
<li><a href="#">Page 1-2</a></li>
<li><a href="#">Page 1-3</a></li>
</ul>
</li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<form class="navbar-form navbar-left">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search">
<div class="input-group-btn">
<button class="btn btn-default" type="submit">
<i class="glyphicon glyphicon-search"></i>
</button>
</div>
</div>
</form>
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<section id="blog-section" >
<div class="container">
<div class="row">
<div class="col-lg-8">
<div class="row">
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-ndZJOGgvYQ4/WM1ZI8dH86I/AAAAAAAADeo/l67ZqZnRUO8QXIQi38bEXuxqHfVX0TV2gCJoC/w424-h318-n-rw/thumbnail8.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-ojLI116-Mxk/WM1ZIwdnuwI/AAAAAAAADeo/4K6VpwIPSfgsmlXJB5o0N8scuI3iW4OpwCJoC/w424-h318-n-rw/thumbnail6.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-TrK1csbtHRs/WM1ZI1SIUNI/AAAAAAAADeo/OkiUjuad6skWl9ugxbiIA_436OwsWKBNgCJoC/w424-h318-n-rw/thumbnail3.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-UKfIhJSBW9M/WM1ZI8ou34I/AAAAAAAADeo/vlLGY29147AYLaxUW29ZXJlun115BhkhgCJoC/w424-h318-n-rw/thumbnail7.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-13DR8P0-AN4/WM1ZIz1lRNI/AAAAAAAADeo/XMfJ7CM-pQg9qfRuCgSnphzqhaj3SQg6QCJoC/w424-h318-n-rw/thumbnail4.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-QlnwuVgbxus/WM1ZI1FKQiI/AAAAAAAADeo/nGSd1ExnnfIfIBF27xs8-EdBdfglqFPZgCJoC/w424-h318-n-rw/thumbnail2.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-wRHL_FOH1AU/WM1ZIxQZ3DI/AAAAAAAADeo/lwJr8xndbW4MHI-lOB7CQ-14FJB5f5SWACJoC/w424-h318-n-rw/thumbnail5.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
<div class="col-lg-6 col-md-6">
<aside>
<img src="https://lh3.googleusercontent.com/-ndZJOGgvYQ4/WM1ZI8dH86I/AAAAAAAADeo/l67ZqZnRUO8QXIQi38bEXuxqHfVX0TV2gCJoC/w424-h318-n-rw/thumbnail8.jpg" class="img-responsive">
<div class="content-title">
<div class="text-center">
<h3><a href="#">Niki Postingan Sing Kepisan Njeh, Perdana Ngoten</a></h3>
</div>
</div>
<div class="content-footer">
<img class="user-small-img" src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg">
<span style="font-size: 16px;color: #fff;">Sumit Kumar</span>
<span class="pull-right">
<a href="#" data-toggle="tooltip" data-placement="left" title="Comments"><i class="fa fa-comments" ></i> 30</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Loved"><i class="fa fa-heart"></i> 20</a>
</span>
<div class="user-ditels">
<div class="user-img"><img src="https://lh3.googleusercontent.com/-uwagl9sPHag/WM7WQa00ynI/AAAAAAAADtA/hio87ZnTpakcchDXNrKc_wlkHEcpH6vMwCJoC/w140-h148-p-rw/profile-pic.jpg" class="img-responsive"></div>
<span class="user-full-ditels">
<h3>Sumit Kumar</h3>
<p>Web & Graphics Disigner</p>
</span>
<div class="social-icon">
<a href="#"><i class="fa fa-facebook" data-toggle="tooltip" data-placement="bottom" title="Facebook"></i></a>
<a href="#"><i class="fa fa-twitter" data-toggle="tooltip" data-placement="bottom" title="Twitter"></i></a>
<a href="#"><i class="fa fa-google-plus" data-toggle="tooltip" data-placement="bottom" title="Google Plus"></i></a>
<a href="#"><i class="fa fa-youtube" data-toggle="tooltip" data-placement="bottom" title="Youtube"></i></a>
<a href="#"><i class="fa fa-github" data-toggle="tooltip" data-placement="bottom" title="Github"></i></a>
</div>
</div>
</div>
</aside>
</div>
</div>
</div>
<!-- // RECENT POST===========-->
<div class="col-lg-4">
<div class="widget-sidebar">
<h2 class="title-widget-sidebar">// RECENT POST</h2>
<div class="content-widget-sidebar">
<ul>
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-ndZJOGgvYQ4/WM1ZI8dH86I/AAAAAAAADeo/l67ZqZnRUO8QXIQi38bEXuxqHfVX0TV2gCJoC/w424-h318-n-rw/thumbnail8.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
<hr>
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-ojLI116-Mxk/WM1ZIwdnuwI/AAAAAAAADeo/4K6VpwIPSfgsmlXJB5o0N8scuI3iW4OpwCJoC/w424-h318-n-rw/thumbnail6.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
<hr>
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-TrK1csbtHRs/WM1ZI1SIUNI/AAAAAAAADeo/OkiUjuad6skWl9ugxbiIA_436OwsWKBNgCJoC/w424-h318-n-rw/thumbnail3.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
<hr>
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-UKfIhJSBW9M/WM1ZI8ou34I/AAAAAAAADeo/vlLGY29147AYLaxUW29ZXJlun115BhkhgCJoC/w424-h318-n-rw/thumbnail7.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
</ul>
</div>
</div>
<div class="widget-sidebar">
<h2 class="title-widget-sidebar">// ARCHIVES</h2>
<div class="last-post">
<button class="accordion">21/4/2016</button>
<div class="panel">
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-13DR8P0-AN4/WM1ZIz1lRNI/AAAAAAAADeo/XMfJ7CM-pQg9qfRuCgSnphzqhaj3SQg6QCJoC/w424-h318-n-rw/thumbnail4.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<div class="last-post">
<button class="accordion">5/7/2016</button>
<div class="panel">
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-QlnwuVgbxus/WM1ZI1FKQiI/AAAAAAAADeo/nGSd1ExnnfIfIBF27xs8-EdBdfglqFPZgCJoC/w424-h318-n-rw/thumbnail2.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<div class="last-post">
<button class="accordion">15/9/2016</button>
<div class="panel">
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-wRHL_FOH1AU/WM1ZIxQZ3DI/AAAAAAAADeo/lwJr8xndbW4MHI-lOB7CQ-14FJB5f5SWACJoC/w424-h318-n-rw/thumbnail5.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<hr>
<div class="last-post">
<button class="accordion">2/3/2017</button>
<div class="panel">
<li class="recent-post">
<div class="post-img">
<img src="https://lh3.googleusercontent.com/-QlnwuVgbxus/WM1ZI1FKQiI/AAAAAAAADeo/nGSd1ExnnfIfIBF27xs8-EdBdfglqFPZgCJoC/w424-h318-n-rw/thumbnail2.jpg" class="img-responsive">
</div>
<a href="#"><h5>Excepteur sint occaecat cupi non proident laborum.</h5></a>
<p><small><i class="fa fa-calendar" data-original-title="" title=""></i> 30 Juni 2014</small></p>
</li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
<!--=====================
CATEGORIES
======================-->
<div class="widget-sidebar">
<h2 class="title-widget-sidebar">// CATEGORIES</h2>
<button class="categories-btn">Audio</button>
<button class="categories-btn">Blog</button>
<button class="categories-btn">Gallery</button>
<button class="categories-btn">Images</button>
</div>
<!--=====================
NEWSLATTER
======================-->
<div class="widget-sidebar">
<h2 class="title-widget-sidebar">// NEWSLATTER</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor ut .</p>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-envelope-o" aria-hidden="true"></i></span>
<input id="email" type="text" class="form-control" name="email" placeholder="Email">
</div>
<button type="button" class="btn btn-warning">Warning</button>
</div>
</div>
</div>
</div>
</section>
<script src="js/jquery-3.1.1.js"></script>
<script src="js/bootstrap.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
</script>
</body>
</html>
body{background-color:#ECF0F1;}
.navbar-inverse {
background-color: #34495E;
border-color: #34495E;
}
.navbar {
position: relative;
min-height: 50px;
margin-bottom: 20px;
border: 0px solid transparent;
border-radius:0px;
}
.navbar-brand {
float: left;
height:auto;
padding: 10px 10px;
font-size: 18px;
line-height: 20px;
}
.navbar-brand>img{ width:80%;}
.navbar-inverse .navbar-nav > li > a {
color: #F39C12;
}
.navbar-inverse .navbar-nav > li > a:hover {
background-color: #009688;
}
.btn-default {
color: #333;
background-color: #009688;
border-color: #009688;
border-radius:0px;
color:#fff;
}
#blog-section{margin-top:40px;margin-bottom:80px;}
.content-title{padding:5px;background-color:#fff;}
.content-title h3 a{color:#34495E;text-decoration:none; transition: 0.5s;}
.content-title h3 a:hover{color:#F39C12; }
.content-footer{background-color:#16A085;padding:10px;position: relative;}
.content-footer span a {
color: #fff;
display: inline-block;
padding: 6px 5px;
text-decoration: none;
transition: 0.5s;
}
.content-footer span a:hover{
color:#F39C12;
}
aside{
margin-top: 30px;
-webkit-box-shadow: 1px 4px 16px 3px rgba(199,197,199,1);
-moz-box-shadow: 1px 4px 16px 3px rgba(199,197,199,1);
box-shadow: 1px 4px 16px 3px rgba(199,197,199,1);}
aside .content-footer>img {
width: 33px;
height: 33px;
border-radius: 100%;
margin-right: 10px;
border: 2px solid #fff;
}
.user-ditels {
width: 300px;
top: -100px;
height: 100px;
padding-bottom: 99px;
position: absolute;
border: solid 2px #fff;
background-color: #34495E;
right: 25px;
display: none;
z-index: 1;
}
@media (max-width:768px){
.user-ditels {
right: 5px;
}
}
.user-small-img{cursor: pointer;}
.content-footer:hover .user-ditels {
display: block;
}
.content-footer .user-ditels .user-img{width: 100px;height:100px;float: left;}
.user-full-ditels h3 {
color: #fff;
display: block;
margin: 0px;
padding-top: 10px;
padding-right: 28px;
text-align: right;
}
.user-full-ditels p{
color: #fff;
display: block;
margin: 0px;
padding-right: 20px;
padding-top: 5px;
text-align: right;}
.social-icon {
background-color: #fff;
margin-top: 10px;
padding-right: 20px;
text-align: right;
}
.social-icon>a{font-size:20px;text-decoration:none;padding: 5px;}
.social-icon a:nth-of-type(1){color:#4E71A8;}
.social-icon a:nth-of-type(2){color:#3FA1DA;}
.social-icon a:nth-of-type(3){color:#E3411F;}
.social-icon a:nth-of-type(4){color:#CA3737;}
.social-icon a:nth-of-type(5){color:#3A3A3A;}
/*recent-post-col////////////////////*/
.widget-sidebar {
background-color: #fff;
padding: 20px;
margin-top: 30px;
}
.title-widget-sidebar {
font-size: 14pt;
border-bottom: 2px solid #e5ebef;
margin-bottom: 15px;
padding-bottom: 10px;
margin-top: 0px;
}
.title-widget-sidebar:after {
border-bottom: 2px solid #f1c40f;
width: 150px;
display: block;
position: absolute;
content: '';
padding-bottom: 10px;
}
.recent-post{width: 100%;height: 80px;list-style-type: none;}
.post-img img {
width: 100px;
height: 70px;
float: left;
margin-right: 15px;
border: 5px solid #16A085;
transition: 0.5s;
}
.recent-post a {text-decoration: none;color:#34495E;transition: 0.5s;}
.post-img, .recent-post a:hover{color:#F39C12;}
.post-img img:hover{border: 5px solid #F39C12;}
/*===============ARCHIVES////////////////////////////*/
button.accordion {
background-color: #16A085;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #F39C12;color: #fff;
}
button.accordion:after {
content: '\002B';
color: #fff;
font-weight: bold;
float: right;
margin-left: 5px;
}
button.accordion.active:after {
content: "\2212";
}
.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
/*categories//////////////////////*/
.categories-btn{
background-color: #F39C12;
margin-top:30px;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.categories-btn:after {
content: '\25BA';
color: #fff;
font-weight: bold;
float: right;
margin-left: 5px;
}
.categories-btn:hover {
background-color: #16A085;color: #fff;
}
.form-control{border-radius: 0px;}
.btn-warning {
border-radius: 0px;
background-color: #F39C12;
margin-top: 15px;
}
.input-group-addon{border-radius: 0px;}
