<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 ---------->
<body > <article id="container">
<section class="header" id="header">
</section>
<section id="main">
</section>
<section class="footer" id="footer">
<iframe allowtransparency="true" frameborder="0" scrolling="no"
src="//platform.twitter.com/widgets/follow_button.html?screen_name=rayanthonyrcc"
style="width:236px; height:20px;" class="twitter-follow-button twitter-follow-button">
</iframe>
<p class="footer" >copyright 2014,2015 <a href="http://rayanthony.io/">ray anthony </a> © all applicable rights reserved all liabilities waived
open source, free, and made with<i class="fi-heart" alt="made with love icon font ♡ "></i><a href="//codepen.io/rayrc/">@ codepen.io</a> <a href="//github.com/rayantony/">Github</a> <a href="//deadflowers.githhub.io/">gihub.io</a></p>
</section>
</article></body></html>
html{height:100%;width:100%;background:white;}
body{
margin:0px;
padding:0px;
font-family: 'Typewriter','Courier New',sans;
font-size: 16px;
font-weight:400;
background: white;
/* top, transparent grey, faked with gradient */
flex:1;
color:#444;
z-index: 5;
text-decoration: none;
text-rendering: optimizeLegibility;
/*-webkit-font-feature-settings: "liga"; Currently broken in Chrome >= v22. Falls back to text-rendering. Safari is unaffected. */
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
}
#header{
height: 25px;
width: 100%;
}
#main{
position: absolute;
top: 25px; /* Header Height */
bottom: 15px; /* Footer Height */
width: 100%;
height:auto;
background:
/* top, transparent grey, faked with gradient */
linear-gradient(
rgba(96,96,96,0.4),
rgba(255, 255, 255,0.1),#fff,#f0f0f0,#f6f7f6,#f9f7f0,#fff),url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/167883/sammy-404.gif) no-repeat;
background-attach:cover;
backround-size:100% cover;
}
#footer, .twitter-follow-button{
height: 15px;
width: 100%;
position: absolute;
bottom: 0;
color:#666;
background-color:transparent;
/* background:-webkit-linear-gradient(center 15%,left,transparent 15%,rgba(0,0,0,0.139) 15%,white 15%;white 15%,rgba(0,0,0,0.139) 15%,transparent 15%);
/* background: radial-gradient(center 20px, circle, #616161 0%, #616161 20%, #282828 100%);*/
text-align:center;
}
