Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Windows 8 metro UI
<div class="container">
<h1>Start</h1>
<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
@import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
@import url(http://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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.