<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>
<!DOCTYPE html>
<html id="home" lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans:300,400,500">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css?family=FontAwesome:300,400,500,800">
<style>
[class*="fontawesome-"]:before{font-family:'FontAwesome',sans-serif}
*{margin:0;padding:5px;margin:auto;color:#111}
html{min-width:640px;min-height:100%;color:#fff;}
body{font-family:'Fira Sans',sans-serif;font-size:1.1rem;font-weight:400;background-color:#333;margin:auto;position:absolute;top:0;left:0;bottom:0;right:0}
.glyphicon{display:inline-block;color:white;font-size:1.6rem;font-weight:400;text-transform:uppercase;letter-spacing:1px;-webkit-transition:all .2s;transition:all .2s;opacity:1;line-height:inherit}
footer{height:100%;color:#777; background-color: rgba(0,0,0,0.1);text-align:center;vertical-align:bottom;margin-bottom:-20px;border-top:1px solid #e5e5e5;font-size:small;font-weight:400;font-family:'Roboto',sans;text-align:center}
body{z-index:1;width:410px;height:620px}
</style>
</head><body onLoad="resize();">
<script>
Response.AddHeader("X-FRAME-OPTIONS", "SAMEORIGIN");
Response.AddHeader("X-FRAME-OPTIONS", "Allow-From http://bootsnipp.com");
</script>
<script>function resize() {
var height = document.getElementsByTagName("html")[0].scrollHeight;
window.parent.postMessage(["setHeight", height], "*");
}
</script>
<script> $(window).ready(function() {
$(".connect-icons a").hover(function(){
$(".connect-box").toggleClass("color-"+ this.className );
$(".text-"+ this.className).toggleClass("show");
});