File size: 11.48Kb
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<meta name="description" content="" />
<meta name="author" content="" />
<!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<![endif]-->
<title>Bootstrap Free Blog Template</title>
<!-- BOOTSTRAP CORE STYLE CSS -->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FONTAWESOME STYLE CSS -->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- CUSTOM STYLE CSS -->
<link href="assets/css/style.css" rel="stylesheet" />
</head>
<body >
<section class="header-section">
<div class="container">
<div class="row">
<div class="col-md-2">
<img src="assets/img/person.jpg" class="img-circle img-responsive" />
</div>
<div class="col-md-5 text-center">
<h1><strong>Jhon Alexan </strong></h1>
<h4>Blogger & Designer</h4>
</div>
<div class="col-md-5">
<h3>WHO M I :</h3>
I am a 26 years old guy who loves bloggging and designing .
I will provide all my works for free here with some good piece of information.
You can reach me at <i><strong>info@mydomain.com</strong></i>
</div>
</div>
</div>
</section>
<!--HOME SECTION END-->
<section>
<div class="container">
<div class="row">
<div class="col-md-2 spon-txt">
<span>My Sponsers: </span>
</div>
<div class="col-md-10">
<img src="assets/img/clients.png" alt="" class="img-rounded img-responsive" />
</div>
</div>
</div>
</section>
<!--SPONSORS SECTION END-->
<hr />
<section >
<div class="container">
<div class="row">
<div class="col-md-9" >
<div class="blog-main">
<div class="heading-blog">
The security is main concern while developing applications
</div>
<img src="assets/img/1.jpg" class="img-responsive img-rounded" />
<div class="blog-info">
<span class="label label-primary">Posted on 26th November 2014</span>
<span class="label label-success">In Technology</span>
<span class="label label-danger">By Jhon</span>
<span class="label label-info">
<i class="fa fa-thumbs-up"></i>+ 10
<i class="fa fa-thumbs-down"></i>-3
</span>
</div>
<div class="blog-txt">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Fusce nec tellus non diam feugiat commodo. Sed auctor mauris a tristique imperdiet.
Nullam egestas sapien non lectus suscipit, <i> tincidunt eget faucibus eget, vestibulum venenatis metus.
Praesent efficitur quam aliquam mauris sagittis, vel lacinia</i>quis tristique odio imperdiet.
Nullam elit lacus, tincidunt<strong>dolor sit amet, consectetur adipiscing elit.
Fusce nec tellus non diam</strong> eget faucibus eget, vestibulum venenatis metus.
Praesent efficitur quam aliquam mauris sagittis, vel lacinia risus luctus. Ut vitae bibendum ipsum.
</div>
<div class="blog-txt">
Lorem ipsum<strong>dolor sit amet, consectetur adipiscing elit.
Fusce nec tellus non diam</strong> feugiat commodo. Sed auctor mauris a tristique imperdiet.
Nullam egestas sapien non lectus suscipit, quis tristique odio imperdiet.
Nullam elit lacus,<i> tincidunt eget faucibus eget, vestibulum venenatis metus.
Praesent efficitur quam aliquam mauris sagittis, vel lacinia</i> risus luctus. Ut vitae bibendum ipsum.
</div>
<div class="blog-txt">
Lorem ipsum<strong>dolor sit amet, consectetur adipiscing elit.
Fusce nec tellus non diam</strong> feugiat commodo. Sed auctor mauris a tristique imperdiet.
Nullam egestas sapien non lectus suscipit, quis tristique odio imperdiet.
Nullam elit lacus,<i> tincidunt eget faucibus eget, vestibulum venenatis metus.
Praesent efficitur quam aliquam mauris sagittis, vel lacinia</i> risus luctus. Ut vitae bibendum ipsum.
</div>
</div>
<!--BLOG MAIN SECTION END-->
<h3 ><strong>Recent Comments :</strong></h3>
<hr />
<ul class="media-list">
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="assets/img/user2.png" />
</a>
<div class="media-body">
<h4 class="media-heading">Vestibulum et eros consectetur</h4>
<p>
Donec sit amet ligula enim. Duis vel condimentum massa.
Maecenas eget congue dui. Vestibulum et eros consectetur,
interdum nibh et, volutpat dolor.
</p>
</div>
</li>
<!-- COMMENT SECTION - ONE END-->
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="assets/img/user.gif" />
</a>
<div class="media-body">
<h4 class="media-heading">Lorem ipsum dolor sit amet</h4>
<p>
Donec sit amet ligula enim. Duis vel condimentum massa.
Maecenas eget congue dui. Vestibulum et eros consectetur,
interdum nibh et, volutpat dolor.
</p>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="assets/img/user2.png" />
</a>
<div class="media-body">
<h4 class="media-heading">Nulla gravida vitae neque </h4>
Donec sit amet ligula enim. Duis vel condimentum massa.
Maecenas eget congue dui. Vestibulum et eros consectetur,
interdum nibh et, volutpat dolor.
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="assets/img/user.gif" />
</a>
<div class="media-body">
<h4 class="media-heading">Donec sit amet ligula enim</h4>
Donec sit amet ligula enim. Duis vel condimentum massa.
Maecenas eget congue dui. Vestibulum et eros consectetur,
interdum nibh et, volutpat dolor.
</div>
</div>
</div>
</div>
<!-- Nested media object -->
<div class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="assets/img/user2.png" />
</a>
<div class="media-body">
<h4 class="media-heading">Vestibulum et eros consectetur</h4>
Donec sit amet ligula enim. Duis vel condimentum massa.
Maecenas eget congue dui. Vestibulum et eros consectetur,
interdum nibh et, volutpat dolor.
</div>
</div>
</div>
</li>
<!-- COMMENT SECTION - TWO END-->
<li class="media">
<a class="pull-left" href="#">
<img class="media-object img-circle" src="assets/img/user.gif" />
</a>
<div class="media-body">
<h4 class="media-heading">Vestibulum et eros consectetur</h4>
<p>
Donec sit amet ligula enim. Duis vel condimentum massa.
Maecenas eget congue dui. Vestibulum et eros consectetur,
interdum nibh et, volutpat dolor.
</p>
</div>
</li>
<!-- COMMENT SECTION - THREE END-->
</ul>
<!--COMMENTS SECTION END-->
</div>
<div class="col-md-3">
<ul class="list-group">
<li class="list-group-item">
<strong>Main Categories</strong>
</li>
<li class="list-group-item">
<span class="badge">104</span>
Technology
</li>
<li class="list-group-item">
<span class="badge">34</span>
Blogging
</li>
<li class="list-group-item">
<span class="badge">10</span>
Information
</li>
<li class="list-group-item">
<span class="badge">50</span>
Security
</li>
<li class="list-group-item">
<strong>Other Categories</strong>
</li>
<li class="list-group-item">
<span class="badge">104</span>
Technology
</li>
<li class="list-group-item">
<span class="badge">34</span>
Blogging
</li>
<li class="list-group-item">
<span class="badge">10</span>
Information
</li>
<li class="list-group-item">
<span class="badge">50</span>
Security
</li>
</ul>
<br />
<div style="padding-top:30px;">
<ul class="list-group">
<li class="list-group-item">
Advrtisements
</li>
<li class="list-group-item">
<a href="#">
<img src="assets/img/ad1.jpg" class="img-responsive" />
</a>
<br /><a href="#">
<img src="assets/img/ad2.jpg" class="img-responsive" />
</a>
</li>
</ul>
</div>
<br />
<div style="padding-top:30px;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Subscribe For Updates</h3>
</div>
<div class="panel-body">
<input type="text" class="form-control" placeholder="Your Email" />
<hr />
<a href="#" class="btn btn-info btn-sm btn-block" >subscribe</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr />
<div class="container">
<div class="row">
<div class="col-md-12 text-center" style="padding:20px 5px;" >
© 2014 jhon alexan | designed by <a href="http://www.binarytheme.com/" target="_blank">www.binarytheme.com</a>
</div>
</div>
</div>
</body>
</html>