Added Window Styles

2 files changed, 52 insertions, 1 deletions

diff --git a/css/layouts.css b/css/layouts.css
index 50a78ae..414f7b6 100644
--- a/css/layouts.css
+++ b/css/layouts.css
@@ -139,3 +139,44 @@
   background-position: center;
   background-repeat: no-repeat;
 }
+
+.window {
+  background-color: #eeeeee;
+  position: absolute;
+}
+
+.non-resizable {
+  width: 720px;
+  height: 480px;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.window header {
+  background-color: #3c3cc7;
+  color: white;
+  padding: 20px 0px;
+}
+
+.title {
+  font-size: 14px;
+  font-family: 'Chicago';
+  position: absolute;
+  left: 50%;
+  top: 10px;
+  transform: translateX(-50%);
+}
+
+.buttons {
+  font-size: 14px;
+  font-family: 'Chicago';
+  position: absolute;
+  right: 5px;
+  top: 9px;
+}
+
+.close {
+  padding: 9px 15px 14px 15px;
+  background-color: red;
+}
diff --git a/index.html b/index.html
index e8a3c4c..3e99fee 100644
--- a/index.html
+++ b/index.html
@@ -113,7 +113,17 @@
         </div>
       </div>
     </section>
-    <section id="desktop" class="fullscreen bg-skyblue wallpaper"></section>
+    <section id="desktop" class="fullscreen bg-skyblue wallpaper">
+      <div class="window non-resizable draggable">
+        <header>
+          <span class="title">Preferences</span>
+          <div class="buttons">
+            <span class="close" id="closePreferences">&times;</span>
+          </div>
+        </header>
+        <div class="windowContents"></div>
+      </div>
+    </section>
     <!-- Scripts -->
     <script src="js/createAccount.js"></script>
     <script src="js/acountLogin.js"></script>