.-.-.-.-.-

<!DOCTYPE html>
<html lang="en">

<title>PATROS - HTML5 FREE TEMPLATE</title>

<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="css/patros.css" >

</head>

<body data-spy="scroll">
		
		<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>

<section class="container blog">
			<div class="row">
		        
		        <div class="col-md-8">
		            <h1 class="page-header sidebar-title">
		                Company Blog
		            </h1>
		            
		            <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>
		            
		            <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>
		            
		            <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>
		            
		            <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>
		            
		            <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>
		            
		            <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>
		            
		            <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>
		                </div>
		                
		                <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>
		                
		                <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>

<script src="js/jquery.js"></script>
        
        <script src="js/bootstrap.min.js"></script>

<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>

/home2/wtmwscom/www/DOCS/../blog.html