<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/ibrahimozturkme/pen/ZQLzOP?depth=everything&limit=all&order=popularity&page=5&q=os&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'><link rel='stylesheet prefetch' href='//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'><link rel='stylesheet prefetch' href='https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css'>
<style class="cp-pen-styles">#bar{background:rgba(0,0,0,0.5); border:none; color:#FFF; padding:0; max-height:56px;}
#bar #logo{width:56px; height:56px; color:#FFF; padding:0; text-align:center; line-height:4.3}
#bar #logo i{font-size:32px;}
#bar #apps{}
#bar #apps{margin:0;}
#bar #apps li{}
#bar #logo:hover, #bar #apps li:hover > a{background:rgba(255,255,255,0.2);}
#bar #apps li a{width:56px; height:56px; ; color:#FFF; display:block; line-height:5; padding:0; text-align:center;}
#bar #apps li a i{font-size:22px;}
#desktop{width:100%; height:100%; position:fixed; top:0; left:0; background:#F33 url(https://24.media.tumblr.com/623ce1b9c183778d872c234e4fa46a71/tumblr_mg5pr3Sg8U1qejlelo3_r3_1280.gif) center top no-repeat; background-size:cover; padding:56px 0 0 0;}
#window{width:auto; background:#FFF; box-shadow:0 0 10px rgba(0,0,0,0.1); display:inline-block; position:relative; z-index:1;}
#window, #window .body{min-width:280px; min-height:100px;}
#window .header{padding:16px 20px; box-shadow:0 0 10px rgba(0,0,0,0.1); cursor:all-scroll}
#window .header .title{float:left; font:500 16px/1.5 'Roboto',sans-serif;}
#window .header .title i{font-size:22px; float:left; margin-right:10px;}
#window .header .right{float:right;}
#window .header .right ul{margin:0; padding:0;}
#window .header .right ul li{float:left;}
#window .header .right ul li a{padding:0 6px; margin:-8px 5px; text-align:center; display:inline-block; color:#333;}
#window .header .right ul li a:hover{background:#EAEAEA;}
#window .header .right ul li a i{font-size:22px; line-height:1.8;}
#window .body{padding:20px; min-width:320px;}
#window.fullWidth{width:100%; height:100%; display:block;}
