Playing around of creating a modern, flat colour design of windows XP
A Pen by Ashley Taylor on CodePen.
<div class="screen" id="screen"> | |
<div class="logo"> | |
<h1>Windows XP</h1> | |
</div> | |
<div class="menu" id="menu"> | |
<div class="menu-header"> | |
<img class="profile" src="http://ashleyjt.net/windows/images/me.png"> | |
<h2>Ashley<h2> | |
<a class="link" href="http://ashleyjt.net">ashleyjt.net</a> | |
</div> | |
<ul class="list-left"> | |
<li class="icon-ie"> | |
<img src="http://files.softicons.com/download/system-icons/windows-8-metro-invert-icons-by-dakirby309/png/64x64/Web%20Browsers/Internet%20Explorer.png"> | |
Internet Explorer | |
</li> | |
<li> | |
<img src="http://aux3.iconpedia.net/uploads/6112187091825551105.png"> | |
Windows Media Player | |
</li> | |
<li> | |
<img src="http://aux4.iconpedia.net/uploads/8064464602069157297.png"> | |
Hotmail | |
</li> | |
<li> | |
<img src="http://aux4.iconpedia.net/uploads/966220938299294847.png"> | |
Word | |
</li> | |
<li> | |
<img src="http://aux.iconpedia.net/uploads/1782753184946351111.png"> | |
Windows Video | |
</li> | |
<li> | |
<img src="http://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Paint.png"> | |
Paint | |
</li> | |
</ul> | |
<ul class="list-right"> | |
<li class="icon-ie"> | |
<img src="http://aux.iconpedia.net/uploads/17148107621185995296.png"> | |
My Documents | |
</li> | |
<li> | |
<img src="http://aux2.iconpedia.net/uploads/337139710452817747.png"> | |
My Videos | |
</li> | |
<li> | |
<img src="http://aux.iconpedia.net/uploads/1622272627868035506.png"> | |
My Music | |
</li> | |
<li> | |
<img src="http://aux2.iconpedia.net/uploads/3102146191658651327.png"> | |
My Computer | |
</li> | |
<li> | |
<img src="http://aux.iconpedia.net/uploads/14192157064307819.png"> | |
Search | |
</li> | |
<li> | |
<img src="http://aux4.iconpedia.net/uploads/785312403731165816.png"> | |
All Programs | |
</li> | |
</ul> | |
<div class="menu-footer"> | |
<img class="power" src="http://cdn2.iconfinder.com/data/icons/metro-ui-dock/128/Power_-_Standby.png"> | |
Shut Down | |
<img class="logout" src="http://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Power_-_Restart.png"> | |
<span class="ltext">Logout</span> | |
</div> | |
</div> | |
<div class="rbin"> | |
<img class="bin" src="http://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Recycle_Bin_Full.png"> | |
<span>Recycle Bin</span> | |
</div> | |
<div class="taskbar"> | |
<a href="#" class="start" id="start">Start</a> | |
<a href="#" class="time" id="time">01:40am</a> | |
</div> | |
</div> |
Playing around of creating a modern, flat colour design of windows XP
A Pen by Ashley Taylor on CodePen.
$(function() { | |
var start = $('#start'), | |
menu = $('#menu'), | |
rbin = $('.rbin'); | |
start.on('click', function() { | |
menu.toggle(); | |
}); | |
rbin.on('click', function() { | |
$(this).children('span').css({ | |
backgroundColor: '#01A4EF', | |
color: 'white' | |
}); | |
}); | |
rbin.dblclick(function() { | |
alert('Was going to make the recycle bin window, but its after 2am were I am!'); | |
}); | |
}); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
@import "compass/css3"; | |
* { box-sizing: border-box; -webkit-font-smoothing:antialiased; -moz-font-smoothing:antialiased; -ms-font-smoothing:antialiased; -o-font-smoothing:antialiased; font-smoothing:antialiased;} | |
@font-face { | |
font-family: windows; | |
src: url(http://ashleyjt.net/windows/fonts/windows-light.ttf); | |
font-weight: 300; | |
} | |
body { padding: 0; margin: 0; font-family: windows; | |
} | |
a { text-decoration: none; } | |
ul,li {list-style: none; margin: 0; padding: 0;} | |
$red: #F25222; | |
$blue: #01A4EF; | |
$green: #82BA00; | |
$yellow: #FFB900; | |
.screen { | |
position: relative; | |
height: 100%; | |
width: 100%; | |
.logo { | |
position: absolute; | |
top: 0; | |
left: 30%; | |
width: 100px; | |
height: 100px; | |
box-shadow: | |
100px 100px $red, | |
100px 210px $blue, | |
210px 100px $green, | |
210px 210px $yellow; | |
} | |
h1 { | |
position: absolute; | |
left: 110px; | |
width: 200px; | |
} | |
.taskbar { | |
position: fixed; | |
bottom: 0; | |
left:0; | |
width: 100%; | |
height: 40px; | |
background: #225CE2; | |
.start { | |
background: #209A20; | |
height: 100%; | |
width: 120px; | |
display: inline-block; | |
padding: 12px 0 0 50px; | |
color: white; | |
position: relative; | |
&:hover { | |
cursor: pointer; | |
background: darken(#209A20, 10); | |
} | |
&:before { | |
position: absolute; | |
content: ""; | |
width: 10px; | |
height: 10px; | |
top: 0; | |
left: 5px; | |
box-shadow: | |
10px 10px $red, | |
10px 22px $blue, | |
22px 10px $green, | |
22px 22px $yellow; | |
} | |
} | |
.time { | |
background: lighten($blue, 5); | |
height: 100%; | |
width: 120px; | |
display: inline-block; | |
padding: 8px 0 0 30px; | |
color: black; | |
position: absolute; | |
right: 0; | |
bottom: 0; | |
} | |
} | |
} | |
[class*='menu-'] { | |
height: 70px; | |
background: #4792EC; | |
} | |
.menu-header { | |
border-top-left-radius: 8px; | |
border-top-right-radius: 8px; | |
border-bottom: 1px solid darken($blue, 20); | |
box-shadow: 0 3px 3px orange; | |
position: relative; | |
z-index: 10; | |
} | |
.menu-footer { | |
border-top: 1px solid darken($blue, 20); | |
bottom: -10px; | |
position: absolute; | |
width: 500px; | |
text-align: right; | |
padding: 20px 30px 0 0; | |
color: white; | |
& img { | |
cursor: pointer; | |
} | |
& img.power { | |
width: 44px; | |
position: absolute; | |
right: 20px; | |
top: 8px; | |
} | |
.ltext { | |
position: relative; | |
left: -215px; | |
} | |
& img.logout { | |
width: 44px; | |
position: absolute; | |
right: 180px; | |
top: 8px; | |
} | |
} | |
.menu { | |
border-top-left-radius: 8px; | |
border-top-right-radius: 8px; | |
display: none; | |
box-shadow: 4px 0px 2px rgba(black, 0.3); | |
background: white; | |
width: 500px; | |
height: 90%; | |
bottom: 40px; | |
overflow: hidden; | |
position: fixed; | |
z-index: 20; | |
ul { | |
width: 49.6%; | |
height: 100%; | |
display: inline-block; | |
position: relative; | |
&.list-left { | |
float: left; | |
} | |
&.list-right { | |
float: right; | |
background: #D3E5FA; | |
border-left: 1px solid darken($blue, 10); | |
color: darken($blue, 20); | |
} | |
li { | |
top: 10px; | |
position: relative; | |
display: block; | |
width: 100%; | |
padding: 0 0 15px 10px; | |
&:hover { | |
background-color: darken($blue, 20); | |
color: white; | |
cursor: pointer; | |
} | |
} | |
} | |
} | |
h2{ | |
position: absolute; | |
top: -6px; | |
left: 90px; | |
color: white; | |
} | |
.link { | |
font-size: 12px; | |
color: white; | |
position: absolute; | |
top: 30px; | |
left:330px; | |
width: 100%; | |
} | |
.rbin { | |
position: fixed; | |
bottom: 80px; | |
right: 0; | |
& span { | |
position: relative; | |
top: 20px; | |
left: -72px; | |
} | |
} | |
li img { | |
position: relative; | |
top: 15px; | |
width: 20%; | |
height: auto; | |
padding: 0 10px 0 0; | |
} | |
img.profile { | |
width:13%; | |
top:8px; | |
left:20px; | |
} | |
img.bin { | |
width: 64px; | |
} |