css :

@import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,200);

*{
margin: 0;
padding: 0;
outline: none;
border: none;
box-sizing: border-box;
}
*:before,
*:after{
box-sizing: border-box;
}
html{
width: 122%;
background: #004050;
}
.wrap,.wrap2{
width: 830px;
height: auto;
margin: 70px 100px;
float: left;
}
.wrap2{
width: 410px !important;
}
div[class^="metro"]{
float: left;
margin: 0 10px 10px 0;
height: 95px;
position: relative;
cursor: pointer;
transition: all .4s ease;
user-drag: element;
border: solid 2px transparent;
}
div[class^="metro"]:hover{
border: solid 2px mintcream;
}
div[class^="metro"]:active{
transform: scale(.98,.98);
}
.metro-big{width: 200px;}
.metro-small{width: 95px;}
.last{margin-right: 0 !important;}
.Start{
color: white;
font: normal 50px 'Yanone Kaffeesatz', sans-serif;
margin-bottom: 50px;
cursor: pointer;
user-select: none;
display: inline-block;
transition: all .3s ease;
}
.Start:hover{
text-shadow: 0 0 4px white;
}
.space{
margin-bottom: 110px;
}
.label{
position: absolute;
color: white;
font: 500 12px sans-serif;
left: 10px;
user-select: none;
}
.bottom{bottom: 5px;}
.top{top: 5px;}
.chat{background: #df0024;}
.calendar{
background: #00a9ec;
}
.store{background: #ff9000;}
.ie{background: #00abdc;}
.people{background: #0e5d30;}
.video{background: #8b0189;}
.chrome{background: #ce4e4e;}
.photo{
background: url('https://lorempixel.com/200/95/people');
background-position: -2px -2px;
}
.music{
background: #5f5f5f;
animation: flip 6s linear infinite;
transform: rotateX(0deg);
}
.games{background: #00ff00;}
.twitter{background: #19bfe5;}
.gp{background: #d64136;}
.fb{background: #3b5998;}
.cnn{background: #fe0000;}
.ps{background: #0c5fa1;}
.bt{background: #2546e9;}
.cc{background: #d20808;}
.wmp{background: #f68935;}
.tube{background: #c8312b;}
.skype{background: #10bef2;}

div[class^="icon"]{
width: 45px;
height: 45px;
margin: 20px auto;
background-size: 45px 45px;
}
.icon-calendar{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Apps-Calendar-Metro-icon.png');}
.icon-chat{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Other-Mail-alt-Metro-icon.png');}
.icon-store{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Web-Microsoft-Store-Metro-icon.png');}
.icon-ie{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Web-Browsers-Internet-Explorer-10-Metro-icon.png');}
.icon-people{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Folders-OS-User-No-Frame-Metro-icon.png');}
.icon-video{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Folders-OS-My-Videos-Metro-icon.png');}
.icon-chrome{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Web-Browsers-Google-Chrome-Metro-icon.png');}
.icon-music{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/256/Apps-Google-Music-Metro-icon.png');}
.icon-games{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Folders-OS-Games-alt-Metro-icon.png');}
.icon-twitter{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Web-Twitter-alt-2-Metro-icon.png');}
.icon-gp{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Web-Google-plus-Metro-icon.png');}
.icon-fb{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Web-Facebook-alt-1-Metro-icon.png');}
.icon-cnn{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Web-CNN-Metro-icon.png');}
.icon-ps{background: url('https://icons.iconarchive.com/icons/dakirby309/windows-8-metro/128/Apps-Adobe-Photoshop-Metro-icon.png');}
ادامه در بعدی