<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 ---------->
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Raleway:100,200,300,400" rel="stylesheet">
</head>
<body>
<div class="banner">
<div class="topnav">
<div class="text ttitle">
<a href="#" >Time-Travel</a>
</div>
<div class="text nav ralign">
<a href="#" >Home</a>
<a href="#" >Genric</a>
<a href="#" >Element</a>
</div>
</div>
<h1>Welcome to Time-Travel</h1>
<p>This template is created by Paul Simon of SIIT, Shillong under TechSoul.</p>
</div>
<div class="box">
<div class="box3">
<h1>Magna tempus sed amet
aliquam veroeros</h1>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.
</p>
<a class="More" href="#" >More</a>
</div>
<div class="box3 line" >
<h1>Interdum lorem pulvinar
adipiscing vitae
</h1>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.
</p>
<a class="More" href="#" >More</a>
</div>
<div class="box3 line">
<h1>Libero purus magna sapien
sed ullamcorper</h1>
<p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.
</p>
<a class="More" href="#" >More</a>
</div>
</div>
<div class="boxp">
<div class="title">
<h1>Ipsum Feugiat</h1>
<p>Semper suscipit posuere apede</p>
</div>
<div class="boxphoto">
<img src="https://templated.co/items/demos/theory/images/pic03.jpg">
<h3>Magna</h3>
<p>Cipdum dolor</p>
</div>
<div class="boxphoto">
<img src="https://templated.co/items/demos/theory/images/pic04.jpg">
<h3>Ipsum</h3>
<p>Vestibulum comm</p>
</div>
<div class="boxphoto">
<img src="https://templated.co/items/demos/theory/images/pic05.jpg">
<h3>Tempus</h3>
<p>Fusce pellentes</p>
</div>
<div class="boxphoto">
<img src="https://templated.co/items/demos/theory/images/pic06.jpg">
<h3>Dolore</h3>
<p>Praesent placer</p>
</div>
</div>
<div class="box2p">
<div class="title">
<h1>Nunc Dignissim</h1>
<p>Aliquam erat volutpat nam dui </p>
</div>
<div class="pbox">
<div class="photo">
<img src="https://templated.co/items/demos/theory/images/pic01.jpg" width="100%">
<h3>Praesent placerat magna</h3>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p>
<a class="More" href="#" >More</a>
</div>
<div class="photo">
<img src="https://templated.co/items/demos/theory/images/pic02.jpg" width="100%">
<h3>Praesent placerat magna</h3>
<p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna non comodo sodales tempus.</p>
<a class="More" href="#" >More</a>
</div>
</div>
<hr class="line">
</div>
<div class="last">
<div class="combo lalign"><p>© Untitled. Design: SIIT. Images: Unsplash.</p></div>
<div class="combo ralign social">
<a href="#"> <i class="fa fa-facebook " aria-hidden="true"></i> </a>
<a href="#"> <i class="fa fa-twitter " aria-hidden="true"></i> </a>
<a href="#"> <i class="fa fa-linkedin " aria-hidden="true"></i> </a>
<a href="#"> <i class="fa fa-pinterest-p " aria-hidden="true"></i> </a>
<a href="#"> <i class="fa fa-vimeo " aria-hidden="true"></i> </a>
</div>
</div>
</body>
</html>
body { min-width:200px; margin: 0 auto; font-family: 'Raleway', sans-serif; background:url('http://img05.deviantart.net/86ed/i/2009/049/7/9/something_new_by_ov3rmind.jpg'); background-size: cover; background-attachment:fixed; }
.banner { height: 400px; display:block; padding-top:70px; }
.topnav { width:80%; min-width:200px; margin:0 auto; display:block; }
.text { display:inline-block; width:49%; margin:0 auto; }
.text.ttitle a { text-decoration:none; color:#fff; font-size:11pt; font-weight:bold; }
.text.nav { min-width:200px; }
.text.nav a { text-decoration:none; color:#d4e0ef; font-size:9pt; font-weight:bold; padding:6px; }
.text.nav a:hover { color:#fff; }
.banner h1 { text-decoration:none; color:#fff; font-size:40pt; font-weight:lighter; width:80%; min-width:200px; text-align:center; padding-top:85px;}
.banner p { color:#d4e0ef; font-size:10pt; font-weight:bold; text-align:center;width:80%; min-width:200px; display:block; margin:0 auto; padding: 20px; }
.box { background: white; display:block; padding:5%; }
.line { border-left:1px solid lightgray; }
.box3 { margin:0 auto; width:28%; min-width:200px ; display: inline-block; padding: .5% 2.5%; padding-bottom: 50px;}
.box3 h1{ font-weight:normal; font-size:16pt; margin:0 auto; color:#5385c1; }
.box3 p{ color:#9a9a9a; font-size:11pt; margin-bottom:30px; margin-top:20px; }
.boxp{ background:rgba(83,133,193,0.8); display: block; width:100%; margin:0 auto; text-align:center; }
.boxp h1 { color:#fff; font-size:20pt; font-weight:normal; text-align: center; }
.boxp p { color:#bacee6; font-size:11pt; font-weight:normal; text-align: center; }
.boxp h3 { color: #fff; font-weight: normal;}
.More{ background:#5385c1; color: white; text-decoration: none; padding:10px 20px; }
.More:hover { background-color:#5383c1; }
.boxphoto { display:inline-block; width:15%; min-width:200px; margin:0 auto; padding:10px; padding-top:30px; padding-bottom:30px; text-align:center; margin-top:20px; margin-bottom:40px; border:1px solid #bacee6; margin-left:2%; margin-right:2%; }
.boxphoto h3 { margin:0 auto; padding-top:30px; }
.boxphoto p{margin:0 auto; padding: 5px;}
.boxphoto img{ border-radius: 50%; }
.box2p{ background:#fff; display: block; margin:0 auto; }
.pbox { width:95%; margin:0 auto; text-align:center; }
.box2p h1 { color:#5385c1; font-size:30pt; font-weight: lighter; margin-bottom:10px; text-align:center; }
.box2p h3 { color:#5385c1; font-weight:normal; font-size: 15pt; }
.box2p p { color:#9a9a9a; font-size:11pt; font-weight:normal; margin-bottom: 30px; text-align:justify; }
.photo { display:inline-block; width:40%; min-width:200px; margin:0 auto; margin-bottom:50px; padding:1%; text-align:left; }
h1 {margin: 0 auto;}
.box2p hr { border-top: 1px solid #dbdbdb; margin:0 auto; }
.last { text-align:center; background:#fff; margin:0 auto; padding:20px; display:block; }
.last p { color:#bbb; font-size:10pt; font-weight:normal; margin:0 auto; }
hr.line { background-color:#dbdbdb; width:80%; margin:0 auto; }
.last .combo { display:inline-block; padding:2%; width:38%; min-width:200px; margin:0 auto; }
.ralign { text-align:right; }
.lalign { text-align:left; }
.calign { text-align:center; }
.social a { text-decoration:none; padding:5px; color:#5385c1; font-size: 14pt; }
.title { text-align:center; padding-top:50px; padding-bottom:20px; }
.title p {text-align:center; }
