Bootstrap Snippet Visual-CSS Template using HTML CSS

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 ---------->
<!DOCTYPE HTML>
<head>
    <title>Visual-Bakerlang-Shillong</title>
  
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,400" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<img class="image" src="https://templated.co/items/demos/visualize/images/avatar.jpg"/>
<h1>This is <strong>Visualize</strong>, a responsive site template designed by Bakerlang a Student of SIIT under TechSoul.</h1>
<div class="socialmedia">
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-instagram"></i></a>
<a href="#"><i class="fa fa-tumblr"></i></a>
</div>
<div class="tripple">
<div class="boximg">
<img src="http://25.media.tumblr.com/tumblr_m411ji0JVd1qib5bvo1_500.jpg" />
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="boximg">
<img src="https://templated.co/items/demos/visualize/images/thumbs/05.jpg" />
<p>Lorem ipsum dolor sit amet</p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
body{ background: url('https://templated.co/items/demos/visualize/images/bg.jpg'); background-repeat: no-repeat; background-size: cover; background-attachment: fixed; text-align: center; color: #C7C7D0;  
font-family: Source Sans Pro, sans-serif;font-weight:200; padding-bottom:50px; }
.image { background-color:rgba(255, 255, 255, 0.075);  border-radius: 50%; margin: 20px auto; padding:10px; border: 1px solid #C7C7D0; margin-top:50px;}
h1 {  font-family: Source Sans Pro, sans-serif; color: #C7C7D0; font-weight:200; margin:10px auto; width:70%; line-height:1.5;}
.socialmedia a { background-color:rgba(255, 255, 255, 0.075); text-decoration: none; font-size:16pt; transition:.5s all;
color:#C7C7D0; border:1px solid #C7C7D0; width:50px; height:50px; display: inline-block; padding:10px; border-radius:50%; }
.socialmedia a:hover,strong { color: #FFFFFF; border-color:#FFF; font-weight: 200; }
div.tripple { width:364px; display: inline-block; text-align: center; vertical-align: top; }
.boximg { color:#FFF; background-color:rgba(255, 255, 255, 0.075); width:346px; height:auto; margin:20px auto; border:1px solid #C7C7D0; border-radius:5px; overflow: hidden;  transition: 0.5s all;}
.boximg img { width:346px; height:auto;  }
.boximg p { min-height:50px; display:block; padding-top:20px; text-align:center;  }
.boximg:hover { box-shadow:0 0 20px #333333; border:1px solid #FFF;}
.footer { color: #FFFFFF; font-size:11pt; }
hr { width:10%;background-color:rgba(255, 255, 255, 0.075); margin-top:70px; margin-bottom:70px; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Visual-CSS Template"
Bootstrap 3.3.0 Snippet by TechSoul

Related: See More

Questions / Comments:

"Visual-CSS Template" Bootstrap 3.3.0 Snippet by TechSoul

Related: See More

Questions / Comments:

"Visual-CSS Template"
Bootstrap 3.3.0 Snippet by TechSoul