diff options
| -rw-r--r-- | css/layouts.css | 41 | ||||
| -rw-r--r-- | index.html | 12 |
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; +} @@ -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">×</span> + </div> + </header> + <div class="windowContents"></div> + </div> + </section> <!-- Scripts --> <script src="js/createAccount.js"></script> <script src="js/acountLogin.js"></script> |