Your IP : 216.73.216.26
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>PATROS - HTML5 FREE TEMPLATE</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- Custom CSS -->
<link rel="stylesheet" href="css/patros.css" >
<!-- HTML5 Shim and Respond.js 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/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll">
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="company logo"/></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right custom-menu">
<li><a href="index.html#home">Home</a></li>
<li><a href="index.html#about">About</a></li>
<li><a href="index.html#services">Services</a></li>
<li><a href="index.html#meet-team">Team</a></li>
<li><a href="index.html#portfolio1">Portofolio</a></li>
<li><a href="index.html#contact">Contact</a></li>
<li class="active"><a href="blog.html">Blog</a></li>
<li><a href="single-post.html">Single</a></li>
</ul>
</div>
</div>
</nav>
<!-- Page Content -->
<section class="container blog">
<div class="row">
<!-- Blog Column -->
<div class="col-md-8">
<h1 class="page-header sidebar-title">
Company Blog
</h1>
<!-- First Blog Post -->
<div class="row blogu">
<div class="col-sm-4 col-md-4 ">
<div class="blog-thumb">
<a href="#">
<img class="img-responsive" src="images/blog-photo1.jpg" alt="photo">
</a>
</div>
</div>
<div class="col-sm-8 col-md-8">
<h2 class="blog-title">
<a href="#">Post title 1</a>
</h2>
<p><i class="fa fa-calendar-o"></i> August 28, 2013
<span class="comments-padding"></span>
<i class="fa fa-comment"></i> 0 comments
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
</div>
</div>
<hr>
<!-- Second Blog Post -->
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="blog-thumb">
<a href="#">
<img class="img-responsive" src="images/blog-photo2.jpg" alt="photo">
</a>
</div>
</div>
<div class="col-sm-8 col-md-8">
<h2 class="blog-title">
<a href="#">Post title 2</a>
</h2>
<p><i class="fa fa-calendar-o"></i> August 28, 2013
<span class="comments-padding"></span>
<i class="fa fa-comment"></i> 3 comments
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
</div>
</div>
<hr>
<!-- Third Blog Post -->
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="blog-thumb">
<a href="#">
<img class="img-responsive" src="images/blog-photo3.jpg" alt="photo">
</a>
</div>
</div>
<div class="col-sm-8 col-md-8">
<h2 class="blog-title">
<a href="#">Post title 3</a>
</h2>
<p><i class="fa fa-calendar-o"></i> August 28, 2013
<span class="comments-padding"></span>
<i class="fa fa-comment"></i> 1 comment
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
</div>
</div>
<hr>
<!-- Fourth Blog Post -->
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="blog-thumb">
<a href="#">
<img class="img-responsive" src="images/blog-photo1.jpg" alt="photo">
</a>
</div>
</div>
<div class="col-sm-8 col-md-8">
<h2 class="blog-title">
<a href="#">Post title 4</a>
</h2>
<p><i class="fa fa-calendar-o"></i> August 28, 2013
<span class="comments-padding"></span>
<i class="fa fa-comment"></i> 3 comments
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
</div>
</div>
<hr>
<!-- Fifth Blog Post -->
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="blog-thumb">
<a href="#">
<img class="img-responsive" src="images/blog-photo2.jpg" alt="photo">
</a>
</div>
</div>
<div class="col-sm-8 col-md-8">
<h2 class="blog-title">
<a href="#">Post title 5</a>
</h2>
<p><i class="fa fa-calendar-o"></i> August 28, 2013
<span class="comments-padding"></span>
<i class="fa fa-comment"></i> 3 comments
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
</div>
</div>
<hr>
<!-- Six Blog Post -->
<div class="row">
<div class="col-sm-4 col-md-4">
<div class="blog-thumb">
<a href="#">
<img class="img-responsive" src="images/blog-photo3.jpg" alt="photo">
</a>
</div>
</div>
<div class="col-sm-8 col-md-8">
<h2 class="blog-title">
<a href="#">Post title 6</a>
</h2>
<p><i class="fa fa-calendar-o"></i> August 28, 2013
<span class="comments-padding"></span>
<i class="fa fa-comment"></i> 3 comments
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, veritatis, tempora, necessitatibus inventore nisi quam quia repellat ut tempore laborum possimus eum dicta id animi corrupti debitis ipsum officiis rerum.</p>
</div>
</div>
<hr>
<div class="text-center">
<ul class="pagination">
<li class="active"> <a href="#">1</a> </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> <a href="#">Next</a> </li>
</ul>
</div>
</div>
<!-- Blog Sidebar Column -->
<aside class="col-md-4 sidebar-padding">
<div class="blog-sidebar">
<div class="input-group searchbar">
<input type="text" class="form-control searchbar" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Search</button>
</span>
</div><!-- /input-group -->
</div>
<!-- Blog Categories -->
<div class="blog-sidebar">
<h4 class="sidebar-title"><i class="fa fa-list-ul"></i> Categories</h4>
<hr>
<ul class="sidebar-list">
<li><a href="#">Applications</a></li>
<li><a href="#">Photography</a></li>
<li><a href="#">Art Design</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Category Name</a></li>
</ul>
</div>
<!-- Recent Posts -->
<div class="blog-sidebar">
<h4 class="sidebar-title"><i class="fa fa-align-left"></i> Recent Posts</h4>
<hr style="margin-bottom: 5px;">
<div class="media">
<a class="pull-left" href="#">
<img class="img-responsive media-object" src="images/blog1.jpg" alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#">Post title 1</a></h4>
This is some sample text. This is some sample text. This is some sample text.
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="img-responsive media-object" src="images/blog2.jpg" alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#">Post title 2</a></h4>
This is some sample text. This is some sample text. This is some sample text.
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="img-responsive media-object" src="images/blog3.jpg" alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#">Post title 3</a></h4>
This is some sample text. This is some sample text. This is some sample text.
</div>
</div>
<div class="media">
<a class="pull-left" href="#">
<img class="img-responsive media-object" src="images/blog1.jpg" alt="Media Object">
</a>
<div class="media-body">
<h4 class="media-heading"><a href="#">Post title 4</a></h4>
This is some sample text. This is some sample text. This is some sample text.
</div>
</div>
</div>
<div class="blog-sidebar">
<h4 class="sidebar-title"><i class="fa fa-comments"></i> Recent Comments</h4>
<hr style="margin-bottom: 5px;">
<ul class="sidebar-list">
<li><h5 class="blog-title">Author Name</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</li>
<li><h5 class="blog-title">Author Name</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</li>
<li><h5 class="blog-title">Author Name</h5><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
</li>
</ul>
</div>
</aside>
</div>
</section>
<section id="contact">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-lg-12">
<div class="text-center color-elements">
<h2>Contact Us</h2>
</div>
</div>
<div class="col-lg-6 col-md-8">
<form class="inline" id="contactForm" method="post" >
<div class="row">
<div class="col-sm-6 height-contact-element">
<div class="form-group">
<input type="text" name="first_name" class="form-control custom-labels" id="name" placeholder="FULL NAME" required data-validation-required-message="Please write your name!"/>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-6 height-contact-element">
<div class="form-group">
<input type="email" name="email" class="form-control custom-labels" id="email" placeholder="EMAIL" required data-validation-required-message="Please write your email!"/>
<p class="help-block text-danger"></p>
</div>
</div>
<div class="col-sm-12 height-contact-element">
<div class="form-group">
<input type="text" name="message" class="form-control custom-labels" id="message" placeholder="WHAT'S ON YOUR MIND" required data-validation-required-message="Please write a message!"/>
</div>
</div>
<div class="col-sm-3 col-xs-6 height-contact-element">
<div class="form-group">
<input type="submit" class="btn btn-md btn-custom btn-noborder-radius" value="Send It"/>
</div>
</div>
<div class="col-sm-3 col-xs-6 height-contact-element">
<div class="form-group">
<button type="button" class="btn btn-md btn-noborder-radius btn-custom" name="reset">RESET
</button>
</div>
</div>
<div class="col-sm-3 col-xs-6 height-contact-element">
<div class="form-group">
<div id="response_holder"></div>
</div>
</div>
<div class="col-sm-12 contact-msg">
<div id="success"></div>
</div>
</div>
</form>
</div>
<div class="col-lg-5 col-md-3 col-lg-offset-1 col-md-offset-1">
<div class="row">
<div class="col-md-12 height-contact-element">
<div class="form-group">
<i class="fa fa-2x fa-map-marker"></i>
<span class="text">LOCATION</span>
</div>
</div>
<div class="col-md-12 height-contact-element">
<div class="form-group">
<i class="fa fa-2x fa-phone"></i>
<span class="text">0051 768622115</span>
</div>
</div>
<div class="col-md-12 height-contact-element">
<div class="form-group">
<i class="fa fa-2x fa-envelope"></i>
<span class="text">info@company.com</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="follow-us">
<div class="container">
<div class="text-center height-contact-element">
<h2>FOLLOW US</h2>
</div>
<img class="img-responsive displayed" src="images/short.png" alt="short" />
<div class="text-center height-contact-element">
<ul class="list-unstyled list-inline list-social-icons">
<li class="active"><a href="#"><i class="fa fa-facebook social-icons"></i></a></li>
<li><a href="#"><i class="fa fa-twitter social-icons"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus social-icons"></i></a></li>
<li><a href="#"><i class="fa fa-linkedin social-icons"></i></a></li>
</ul>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="row myfooter">
<div class="col-sm-6"><div class="pull-left">
© Copyright Company 2015 | <a href="#">Privacy Policy</a> | <a href="#">Terms of Use</a>
</div></div>
<div class="col-sm-6">
<div class="pull-right">Designed by <a href="http://www.atis.al">ATIS</a></div>
</div>
</div>
</div>
</footer>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!--Jquery Smooth Scrolling-->
<script>
$(document).ready(function(){
$('.custom-menu a[href^="#"], .intro-scroller .inner-link').on('click',function (e) {
e.preventDefault();
var target = this.hash;
var $target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
$('body').append('<div id="toTop" class="btn btn-primary color1"><span class="glyphicon glyphicon-chevron-up"></span></div>');
$(window).scroll(function () {
if ($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function(){
$("html, body").animate({ scrollTop: 0 }, 700);
return false;
});
});
</script>
</body>
</html>