diff --git a/winxp/error.ico b/winxp/error.ico
new file mode 100644
index 0000000..a6986d9
Binary files /dev/null and b/winxp/error.ico differ
diff --git a/winxp/fissh.jpeg b/winxp/fissh.jpeg
new file mode 100644
index 0000000..773fc5a
Binary files /dev/null and b/winxp/fissh.jpeg differ
diff --git a/winxp/index.html b/winxp/index.html
new file mode 100644
index 0000000..e4da269
--- /dev/null
+++ b/winxp/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <title>7.css example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://unpkg.com/xp.css" />
+  <style>
+    #fissh,
+    #sonic {
+      position: absolute;
+      z-index: 9;
+    }
+
+    #fissh-header,
+    #sonic-header {
+      cursor: move;
+      z-index: 10;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="window" id="fissh">
+    <div class="title-bar" id="fissh-header">
+      <div class="title-bar-text">WARNING</div>
+      <div class="title-bar-controls">
+        <button aria-label="Close" disabled></button>
+      </div>
+    </div>
+    <div class="window-body">
+      <div style="display: flex;">
+        <img src="./error.ico" alt="warning" height="36px">
+        <p style="margin-left: 10px; margin-top: 5px;">fissh</p>
+        <img src="./fissh.jpeg" alt="fissh" width="180px" style="margin: 18px 52px 10px -12px;">
+      </div>
+      <section class="field-row" style="justify-content: space-evenly">
+        <button>ok</button>
+        <button>ok</button>
+        <button>dont</button>
+      </section>
+    </div>
+  </div>
+
+  <div class="window" id="sonic">
+    <div class="title-bar" id="sonic-header">
+      <div class="title-bar-text">Error</div>
+      <div class="title-bar-controls">
+        <button aria-label="Close" disabled></button>
+      </div>
+    </div>
+    <div class="window-body">
+      <div style="display: flex;">
+        <img src="./sonic.png" alt="sonic" width="50px" height="62px">
+        <p style="margin-left: 10px; margin-top: 5px; margin-right: 10px;">Sonic is hacking your computer</p>
+      </div>
+      <section class="field-row" style="justify-content: flex-end">
+        <button style="margin-right: 50px;">WTF</button>
+      </section>
+    </div>
+  </div>
+
+  <script>
+    //Make the DIV element draggable:
+    dragElement(document.getElementById("fissh"));
+    dragElement(document.getElementById("sonic"));
+
+    function dragElement(elmnt) {
+      var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
+      if (document.getElementById(elmnt.id + "header")) {
+        /* if present, the header is where you move the DIV from:*/
+        document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;
+      } else {
+        /* otherwise, move the DIV from anywhere inside the DIV:*/
+        elmnt.onmousedown = dragMouseDown;
+      }
+
+      function dragMouseDown(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // get the mouse cursor position at startup:
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        document.onmouseup = closeDragElement;
+        // call a function whenever the cursor moves:
+        document.onmousemove = elementDrag;
+      }
+
+      function elementDrag(e) {
+        e = e || window.event;
+        e.preventDefault();
+        // calculate the new cursor position:
+        pos1 = pos3 - e.clientX;
+        pos2 = pos4 - e.clientY;
+        pos3 = e.clientX;
+        pos4 = e.clientY;
+        // set the element's new position:
+        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
+        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
+      }
+
+      function closeDragElement() {
+        /* stop moving when mouse button is released:*/
+        document.onmouseup = null;
+        document.onmousemove = null;
+      }
+    }
+  </script>
+
+</body>
+
+</html>
\ No newline at end of file
diff --git a/winxp/sonic.png b/winxp/sonic.png
new file mode 100644
index 0000000..b92710a
Binary files /dev/null and b/winxp/sonic.png differ
