Windows 8 metro UI

Developer
Haeman
Size
4,213 Kb
Views
34,408
  1. Windows 8 metro UI Previews
  2. Windows 8 metro UI HTML Codes
  3. Windows 8 metro UI CSS Codes
  4. Windows 8 metro UI JS Codes

How do I make an 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. What is a windows 8 metro ui? How do you make a windows 8 metro ui? This script and codes were developed by Haeman on 29 August 2022, Monday.

Windows 8 metro UI Previews
IQ Test

Windows 8 metro UI - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Windows 8 metro UI</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @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;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="container">	<h1>Start</h1>	<img src="http://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 src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Windows 8 metro UI - Script Codes CSS Codes

@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;
}

Windows 8 metro UI - Script Codes JS Codes

//Windows 8 Metro UI By Martabak
Windows 8 metro UI - Script Codes
Windows 8 metro UI - Script Codes
Home Page Home
Developer Haeman
Username pedox
Uploaded August 29, 2022
Rating 4.5
Size 4,213 Kb
Views 34,408
Do you need developer help for Windows 8 metro UI?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Haeman (pedox) Script Codes
Name
Martabak Box
Instagrabber
IOS 7 Icon
Loading Hourglass
The Yosemite
Mac
Handbook CSS3
Custom Select Checkbox
Pure CSS3 Button
Terminal
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!