HTML
<div class="container">
<h1>Start</h1>
<div class="right">
<h2>Ilyas</h2>
<p></p>
</div>
<div class='spacer'>
<a href="javascript://" class='wide blue'>
<i class="icon-home"></i>
<h2>Show Desktop</h2>
</a>
<a href="javascript://" class='wide orange'>
<i class="icon-cog"></i>
<h2>Settings</h2>
</a>
<a href="javascript://" class='box redgay'>
<i class="icon-camera"></i>
<h2>Camera</h2>
</a>
<a href="javascript://" class='box lime'>
<i class="icon-heart"></i>
<h2>Favorite</h2>
</a>
<a href="javascript://" class='box bluefish'>
<i class="icon-twitter"></i>
<h2>Twitter</h2>
</a>
<a href="javascript://" class='box yellow'>
<i class="icon-map-marker"></i>
<h2>Places</h2>
</a>
<a href="javascript://" class='wide magenta gallery'>
<h2>Gallery</h2>
</a>
<a href="javascript://" class='box redgay'>
<i class="icon-globe"></i>
<h2>Browser</h2>
</a>
<a href="javascript://" class='box orange'>
<i class="icon-envelope-alt"></i>
<h2>E-mail</h2>
</a>
<a href="javascript://" class='wide blue cal_e'>
<h1>25</h1><p>Monday</p>
<h2 class="top cal_i">Sena Birthday Party At Jack House on 07:00 PM</h2>
<i class="icon-calendar"></i>
</a>
<a href="javascript://" class='box lime'>
<i class="icon-cloud"></i>
<h2>SkyDrive</h2>
</a>
</div>
<div class='spacer spacer3x'>
<a href="javascript://" class='box blue'>
<i class="icon-facebook"></i>
<h2>Facebook</h2>
</a>
<a href="javascript://" class='box bluefish'>
<i class="icon-facetime-video"></i>
<h2>FaceTime</h2>
</a>
<a href="javascript://" class='box redgay'>
<i class="icon-tasks"></i>
<h2>Task</h2>
</a>
<a href="javascript://" class='box magenta'>
<i class="icon-list-alt"></i>
<h2>Windows Explorer</h2>
</a>
<a href="javascript://" class='wide yellow'>
<i class="icon-play"></i>
<h2>Media</h2>
</a>
</div>
</div>
CSS
@import url(https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
* { -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased; }
body{
margin:0px;
padding:0px;
font-family: "Open Sans", arial;
background:#0f6d39;
color:#fff;
font-weight:300;
}
h1{
font-family: "Open Sans", arial;
font-weight:300;
float: left;
width: 55%;
margin-left: 5px;
font-size: 40px;
margin-bottom: 40px;
}
h2{
margin:0px;
font-family: "Open Sans", arial;
font-weight:300;
}
.container{
margin:50px;
width: 1251px;
margin-top: -30px;
margin-left:10px;
-webkit-transform:scale(0.9);
}
a.wide, a.box{
text-decoration:none;
color:#fff;
-webkit-transition: -webkit-transform 0.1s;
position:relative;
overflow:hidden;
}
a.wide h2, a.box h2{
position:absolute;
bottom:5px;
font-size:14px;
}
a.wide h2.top, a.box h2.top{
position:static;
font-size:14px;
}
a.wide i, a.box i{
font-size: 60px;
text-align: center;
display: block;
margin-top: 10px; /* outside Codepen is actually 30px */
}
a.wide:hover, a.box:hover{
-webkit-transform: scale(1.05);
}
a.wide:active, a.box:active{
-webkit-transform: scale(1);
}
.wide{
width:270px;
height:120px;
overflow:hidden;
font-size:13px;
padding:10px;
display:block;
float:left;
margin:5px;
}
.box{
width:120px;
height:120px;
overflow:hidden;
font-size:13px;
padding:10px;
display:block;
float:left;
margin:5px;
}
.lime{background:#61b812;}
.orange{background:#e76022;}
.blue{background:#1E90FF;}
.redgay{background:#DA312E;}
.yellow{background:#dbb701;}
.bluefish{background:#02b9e3;}
.magenta{background:#d22a4e;}
.spacer{
width:770px;
margin-right: 50px;
float:left;
}
.spacer3x{
width:300px;
}
@-webkit-keyframes galeri
{
1% {background-position: 0px 0px;}
10%{background-position: 0px 140px;}
20%{background-position: 0px 140px;}
30%{background-position: 0px 280px;}
40%{background-position: 0px 280px;}
50%{background-position: 0px 420px;}
60%{background-position: 0px 420px;}
70%{background-position: 0px 560px;}
80%{background-position: 0px 560px;}
100% {background-position: 0px 560px;}
}
.gallery{
background: url(https://dl.dropbox.com/u/39272011/image_metro.png);
-webkit-animation: galeri 15s infinite;
}
.right{
float:right;
text-align:right;
margin-top: 30px;
}
.right p{
margin: 5px 0px;
}
img.prof{
float: right;
margin: 10px;
margin-top: 40px;
}
.i_bot{
font-size: 30px;
text-align: left;
position: absolute;
bottom: 0px;
}
.cal_i{
margin-top: 20px;
margin-left: 15px;
width: 155px;
}
.cal_e h1{
position: absolute;
right: 0px;
width: 115px;
text-align: center;
margin: 0px;
font-size: 60px;
}
.cal_e p{
position: absolute;
right: 0px;
width: 115px;
text-align: center;
margin-top: 75px;
text-transform: uppercase;
}
.cal_e i{
text-align: left;
font-size: 25px !important;
position: absolute;
bottom: 0px;
}
