Windows 8 Start Screen

Developer
Keith Pickering
Size
5,520 Kb
Views
36,432
  1. Windows 8 Start Screen Previews
  2. Windows 8 Start Screen HTML Codes
  3. Windows 8 Start Screen CSS Codes
  4. Windows 8 Start Screen JS Codes

How do I make an windows 8 start screen?

Uses TileJS. Not anywhere near complete enough to use for anything :P. What is a windows 8 start screen? How do you make a windows 8 start screen? This script and codes were developed by Keith Pickering on 10 August 2022, Wednesday.

Windows 8 Start Screen Previews
IQ Test

Windows 8 Start Screen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Windows 8 Start Screen</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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/4.0.3/css/font-awesome.css);
*, *:before, *:after { box-sizing: border-box;
}
html { font-family: 'Segoe UI', sans-serif; font-size: 12px; min-height: 100%; background: url(http://www.dazzlingwallpaper.com/image/1355224279_hd_quality_wallpaper_of_windows_8_hq.png) no-repeat; background-size: cover;
}
.tiles { margin: 200px 100px;
}
.tiles__group { display: inline-block; min-height: 512px; max-height: 640px; margin-right: 56px;
}
.tiles__col { display: inline-block; vertical-align: top; margin-right: -0.25em; width: 256px;
}
.tiles__tile { position: relative; display: inline-block; vertical-align: top; height: 120px; width: 120px; margin: 0 4px 8px 0; margin: 0 calc(8px - 0.25em) 8px 0; /* Fix whitespace issue with calc */ color: white !important; box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.4);
}
.tiles__tile > i, .tiles__tile > span { pointer-events: none;
}
.tiles__tile > i { display: block; font-size: 48px; text-align: center; margin-top: 24px;
}
.tiles__tile > span { position: absolute; left: 16px; bottom: 8px;
}
.tiles__tile:hover { box-shadow: 0 0 0 3px #363636, inset 0 0 1px rgba(255, 255, 255, 0.4);
}
.tiles__tile--wide,
.tiles__tile--large { width: 248px;
}
.tiles__tile--large { height: 248px;
}
.tiles__tile--large > i { margin-top: 90px;
}
.small-wrap { display: inline-block; width: 120px; height: 120px; margin-bottom: 8px;
}
.tiles__tile--small { width: 56px; height: 56px;
}
.tiles__tile--small > i { font-size: 28px; margin-top: 14px;
}
.tiles__tile--small > span { display: none;
}
.tiles__tile--small:nth-child(even) { margin-right: 0; float: right;
}
.tiles__tile--gray { background: linear-gradient(to right, #444 0%, #5e5e5e 100%);
}
.tiles__tile--sky { background: linear-gradient(to right, #2672ec 0%, #5590f0 100%);
}
.tiles__tile--red { background: linear-gradient(to right, #ac193d 0%, #d91f4d 100%);
}
.tiles__tile--teal { background: linear-gradient(to right, #008299 0%, #00adcc 100%);
}
.tiles__tile--blue { background: linear-gradient(to right, #094ab2 0%, #0b5ee3 100%);
}
.tiles__tile--green { background: linear-gradient(to right, #008a00 0%, #00bd00 100%);
}
.tiles__tile--purple { background: linear-gradient(to right, #8c0095 0%, #bc00c8 100%);
}
.tiles__tile--indigo { background: linear-gradient(to right, #5133ab 0%, #6848c9 100%);
}
.tiles__tile--orange { background: linear-gradient(to right, #d24726 0%, #df684c 100%);
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="tiles"> <section class="tiles__group"> <div class="tiles__col"> <a href="#" class="tiles__tile tiles__tile--wide tiles__tile--teal"> <i class="fa fa-envelope"></i> <span>Mail</span> </a> <a href="#" class="tiles__tile tiles__tile--wide tiles__tile--orange"> <i class="fa fa-envelope"></i> <span>People</span> </a> <a href="#" class="tiles__tile tiles__tile--indigo"> <i class="fa fa-envelope"></i> <span>OneDrive</span> </a> <div class="small-wrap"> <a href="#" class="tiles__tile tiles__tile--small tiles__tile--red"> <i class="fa fa-envelope"></i> </a> <a href="#" class="tiles__tile tiles__tile--small tiles__tile--orange"> <i class="fa fa-envelope"></i> </a> <a href="#" class="tiles__tile tiles__tile--small tiles__tile--green"> <i class="fa fa-envelope"></i> </a> <a href="#" class="tiles__tile tiles__tile--small tiles__tile--purple"> <i class="fa fa-envelope"></i> </a> </div> </div> <div class="tiles__col"> <a href="#" class="tiles__tile tiles__tile--wide tiles__tile--purple"> <i class="fa fa-calendar"></i> <span>Calendar</span> </a> <a href="#" class="tiles__tile tiles__tile--large tiles__tile--blue"> <i class="fa fa-calendar"></i> <span>Weather</span> </a> </div> <div class="tiles__col"> <a href="#" class="tiles__tile tiles__tile--sky"> <i class="fa fa-picture-o"></i> <span>Photos</span> </a> </div> </section>
</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 Start Screen - Script Codes CSS Codes

@import url(http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
*, *:before, *:after { box-sizing: border-box;
}
html { font-family: 'Segoe UI', sans-serif; font-size: 12px; min-height: 100%; background: url(http://www.dazzlingwallpaper.com/image/1355224279_hd_quality_wallpaper_of_windows_8_hq.png) no-repeat; background-size: cover;
}
.tiles { margin: 200px 100px;
}
.tiles__group { display: inline-block; min-height: 512px; max-height: 640px; margin-right: 56px;
}
.tiles__col { display: inline-block; vertical-align: top; margin-right: -0.25em; width: 256px;
}
.tiles__tile { position: relative; display: inline-block; vertical-align: top; height: 120px; width: 120px; margin: 0 4px 8px 0; margin: 0 calc(8px - 0.25em) 8px 0; /* Fix whitespace issue with calc */ color: white !important; box-shadow: inset 0 0 1px rgba(255, 255, 255, 0.4);
}
.tiles__tile > i, .tiles__tile > span { pointer-events: none;
}
.tiles__tile > i { display: block; font-size: 48px; text-align: center; margin-top: 24px;
}
.tiles__tile > span { position: absolute; left: 16px; bottom: 8px;
}
.tiles__tile:hover { box-shadow: 0 0 0 3px #363636, inset 0 0 1px rgba(255, 255, 255, 0.4);
}
.tiles__tile--wide,
.tiles__tile--large { width: 248px;
}
.tiles__tile--large { height: 248px;
}
.tiles__tile--large > i { margin-top: 90px;
}
.small-wrap { display: inline-block; width: 120px; height: 120px; margin-bottom: 8px;
}
.tiles__tile--small { width: 56px; height: 56px;
}
.tiles__tile--small > i { font-size: 28px; margin-top: 14px;
}
.tiles__tile--small > span { display: none;
}
.tiles__tile--small:nth-child(even) { margin-right: 0; float: right;
}
.tiles__tile--gray { background: linear-gradient(to right, #444 0%, #5e5e5e 100%);
}
.tiles__tile--sky { background: linear-gradient(to right, #2672ec 0%, #5590f0 100%);
}
.tiles__tile--red { background: linear-gradient(to right, #ac193d 0%, #d91f4d 100%);
}
.tiles__tile--teal { background: linear-gradient(to right, #008299 0%, #00adcc 100%);
}
.tiles__tile--blue { background: linear-gradient(to right, #094ab2 0%, #0b5ee3 100%);
}
.tiles__tile--green { background: linear-gradient(to right, #008a00 0%, #00bd00 100%);
}
.tiles__tile--purple { background: linear-gradient(to right, #8c0095 0%, #bc00c8 100%);
}
.tiles__tile--indigo { background: linear-gradient(to right, #5133ab 0%, #6848c9 100%);
}
.tiles__tile--orange { background: linear-gradient(to right, #d24726 0%, #df684c 100%);
}

Windows 8 Start Screen - Script Codes JS Codes

/* https://github.com/tholman/tileJs */
function Tile(d){var g=d;var c="perspective( 800px ) rotateX( 0deg ) rotateY( 0deg ) translateZ( 0px )";var e=function(){g.style.webkitTransformOrigin="50% 50%";g.style.MozTransformOrigin="50% 50%";g.style.msTransformOrigin="50% 50%";g.style.oTransformOrigin="50% 50%";g.style.transformOrigin="50% 50%";g.parentElement.style.webkitTransformStyle="preserve-3d";g.parentElement.style.MozTransformStyle="preserve-3d";g.parentElement.style.msTransformStyle="preserve-3d";g.parentElement.style.oTransformStyle="preserve-3d";g.parentElement.style.transformStyle="preserve-3d";g.style.webkitTransition="-webkit-transform 0.08s";g.style.MozTransition="-moz-transform 0.08s";g.style.msTransition="-ms-transform 0.08s";g.style.oTransition="-o-transform 0.08s";g.style.transition="transform 0.08s";g.style.outline="1px solid transparent";g.style.webkitFontSmoothing="antialiased";g.addEventListener("mousedown",h,false);};var f=function(l,o){var m=g.offsetWidth;var k=g.offsetHeight;var n="perspective( 800px ) ";if(l>m/4&&l<(m/4*3)&&o>k/4&&o<(k/4*3)){n+="rotateX( 0deg ) rotateY( 0deg ) translateZ( -30px )";}else{if(Math.min(l,m-l)<Math.min(o,k-o)){if(l<m-l){n+="rotateX( 0deg ) rotateY( -20deg ) translateZ( 0px )";}else{n+="rotateX( 0deg ) rotateY( 20deg ) translateZ( 0px )";}}else{if(o<k-o){n+="rotateX( 20deg ) rotateY( 0deg ) translateZ( 0px )";}else{n+="rotateX( -20deg ) rotateY( 0deg ) translateZ( 0px )";}}}g.style.webkitTransform=n;g.style.MozTransform=n;g.style.msTransform=n;g.style.oTransform=n;g.style.transform=n;document.addEventListener("mouseup",a,false);};var h=function(m){if(m.offsetX){f(m.offsetX,m.offsetY);return;}var l=b(g);var k=m.pageX-l.x;var n=m.pageY-l.y;f(k,n);};var a=function(k){g.style.webkitTransform=c;g.style.MozTransform=c;g.style.msTransform=c;g.style.oTransform=c;g.style.transform=c;document.removeEventListener("mouseup",a,false);};var j=function(k,l){return parseInt(k.getPropertyValue(l),10);};var b=function(n){var q=0,p=0;var s=true;do{q+=n.offsetLeft;p+=n.offsetTop;var k=getComputedStyle(n,null);var m=j(k,"border-top-width");var o=j(k,"border-left-width");p+=m;q+=o;if(s){var r=j(k,"padding-top");var l=j(k,"padding-left");p+=r;q+=l;}s=false;}while(n=n.offsetParent);return{x:q,y:p};};e();}var tileElements=document.getElementsByClassName("tiles__tile");var i;for(i=0;i<tileElements.length;i++){Tile(tileElements[i]);}
Windows 8 Start Screen - Script Codes
Windows 8 Start Screen - Script Codes
Home Page Home
Developer Keith Pickering
Username keithpickering
Uploaded August 10, 2022
Rating 3
Size 5,520 Kb
Views 36,432
Do you need developer help for Windows 8 Start Screen?

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!

Keith Pickering (keithpickering) Script Codes
Name
Smooth, Semantic Tab Box
A Pen by Keith Pickering
Delicious SASS Buttons
Material Inspired Menu
Easy Container-Breaking Sidebar
Notifications
Metro Interactive Live Tiles
Reusable Styles
Sliding Navigation Menu
Image with inset shadow
Create amazing captions 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!