"Time-Travel CSS Template"
Bootstrap 3.3.0 Snippet by TechSoul

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

Related: See More


Questions / Comments: