‎

Author: faisalAkhtar

assets/btn1.png

@@ -77,6 +77,7 @@ body {
     padding: 2px 25px 6px 10px;
     text-shadow: 1px 1px 3px #222;
     border-radius: 0px 8px 8px 0px;
+    margin-right: 16px;
     cursor: pointer;
 }
 
@@ -86,6 +87,41 @@ body {
     transform: translateY(4px);
 }
 
+.open-tab {
+    width: 150px;
+    height: 26px;
+    margin: 3px 0;
+    float: left;
+    background-color: #4892F7;
+    background: url(btn1.png) no-repeat 0 0;
+    border: 1px solid #306FD9;
+    border-radius: 2px;
+    font-family: calibri, monospace;
+    font-size: 14px;
+    line-height: 14px;
+    padding: 8px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    word-wrap: break-word;
+    cursor: pointer;
+}
+
+.open-tab:hover {
+    background: url(btn2.png) no-repeat 0 0;
+}
+
+.open-tab.active {
+    background: url(btn3.png) no-repeat 0 0;
+}
+
+.open-tab img {
+    height: 18px;
+    float: left;
+    transform: translateY(-3px);
+    margin-right: 5px;
+}
+
 .time {
     height: 100%;
     float: right;

assets/btn2.png

@@ -30,7 +30,17 @@
         </div>
     </div>
     <div class="taskbar">
+        <!-- Start Button -->
         <div class="start-button"><img src="assets/logo.svg"> start</div>
+
+        <!-- Open Tabs -->
+        <div class="open-tab"><img src="assets/documents.png"> Faisal Akhtar opened</div>
+        <div class="open-tab"><img src="assets/computer.png"> My Computer</div>
+        <div class="open-tab"><img src="assets/network.png"> My Network</div>
+        <div class="open-tab active"><img src="assets/notepad.png"> ReadME.txt</div>
+        <div class="open-tab"><img src="assets/recycle.png"> Recycle Bin</div>
+
+        <!-- System Tray -->
         <div class="time">11:20 PM</div>
     </div>