"Visual-CSS Template"
Bootstrap 3.3.0 Snippet by TechSoul

Post to Facebook Tweet this

<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> <div class="tripple"> <div class="boximg"> <img src="https://templated.co/items/demos/visualize/images/thumbs/06.jpg" /> <p>Lorem ipsum dolor sit amet</p> </div> <div class="boximg"> <img src="https://templated.co/items/demos/visualize/images/thumbs/07.jpg"/> <p>Lorem ipsum dolor sit amet</p> </div> </div> <div class="tripple"> <div class="boximg"> <img src="https://templated.co/items/demos/visualize/images/thumbs/03.jpg" /> <p>Lorem ipsum dolor sit amet</p> </div> <div class="boximg"> <img src="http://netdna.coolthings.com/wp-content/uploads/2014/09/stacked-hong-kong-peter-stewart-1.jpg" /> <p>Lorem ipsum dolor sit amet</p> </div> <div class="boximg"> <img src="https://templated.co/items/demos/visualize/images/thumbs/02.jpg" /> <p>Lorem ipsum dolor sit amet</p> </div> </div> <hr /> <p class="footer" align="center">© Untitled. All rights reserved. Design: SIIT. Demo Images: Google.</p> </body> </html>
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; }

Related: See More

Light Bootstrap Dashboard Angular
Responsive Invoice template
BS4 clean & simple invoice template
Elegant Bootstrap 4 message chat box template

Questions / Comments: