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

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

BLK• Design System
Responsive Invoice template
BS4 clean & simple invoice template
Elegant Bootstrap 4 message chat box template

Questions / Comments: