Dashboard

by halirgb

HTML

<div class="nav">
       <div class="center">Hello, username! Today you spent 200 Ron</div>
</div>
<div class="clearfix"></div>
<div class="container center">
    <a href="" class="btn btn-green">in</a>
    <a href="" class="btn btn-blue">out</a>  
    <a href="" class="btn btn-red">View Statistics</a>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600);
body{
    margin:0;
    padding:0;
    border:none;
    font-family: 'Open Sans', sans-serif;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	visibility: hidden;
	line-height: 0;
	height: 0;
}
 
.clearfix {
	display: inline-block;
}
 
html[xmlns] .clearfix {
	display: block;
}
 
* html .clearfix {
	height: 1%;
}
.nav{
    background-color:#C24D1B;
    height:40px;
    line-height:40px;
    vertical-align:middle;
    width:100%;
    position:fixed;
    top:0;
    color:#ffffff;
    font-size:14px;
}
.center{
    text-align:center;
}
.container{
    width:95%;
    display: block;
    margin: 45px auto 0 auto;
}
.btn{
    padding:10px 20px;
    color:#ffffff;
    text-decoration:none;
    font-size:18px;
    text-align:center;
}
.btn-red{
    background-color:#C24D1B;
}
.btn-green{
    background-color:#1BC263;
}
.btn-blue{
    background-color:#1B90C2;
}

JavaScript

var viewport = document.createElement("viewport");
viewport.setAttribute('content','width=device-width, initial-scale=1');
document.getElementsByTagName('head')[0].appendChild(viewport);