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.
<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> |
//Windows 8 Metro UI By Martabak |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@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; | |
} |
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.