Windows 8 metro UI

index.html

  <div class="container">
		<h1>Start</h1>
		
		<img src="https://graph.facebook.com/freakout.jq/picture?type=small" width="50px" class="prof"/>
		<div class="right">
			<h2>Martabak</h2>
			<p>Gosong</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>

script.js

//Windows 8 Metro UI By Martabak

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.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;
}

windows-8-metro-ui.markdown

Windows 8 metro UI

Other version Windows 8 Metro UI Like @ashx89 for icon i use FontAwesome, i can't find IE logo and any stuff logo in FontAwesome make bad :p

A Pen by Patrick BIYAGA on CodePen.

License.