Modern Windows XP

index.html

<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>

modern-windows-xp.markdown

Modern Windows XP

Playing around of creating a modern, flat colour design of windows XP

A Pen by Ashley Taylor on CodePen.

License.

script.js

$(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!');
      });
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

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