From 11976143a3d7296a9a438aebd1a69dacdcdcde32 Mon Sep 17 00:00:00 2001
From: Sarimoko <travis@sarimoko.com>
Date: Thu, 24 Feb 2022 07:30:10 +0000
Subject: [PATCH] Add 'www/windows.html'

---
 www/windows.html | 232 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 232 insertions(+)
 create mode 100644 www/windows.html
diff --git a/www/windows.html b/www/windows.html
new file mode 100644
index 0000000..94430fa
--- /dev/null
+++ b/www/windows.html
@@ -0,0 +1,232 @@
+<!doctype html>
+<html>
+<head>
+	<title>Coming Soon | Sarimoko</title>
+<style>
+body {
+  background-color: #C9533E;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  height: 100vh;
+  margin: 0 auto;
+  overflow: hidden;
+}
+
+.container {
+  height: 530px;
+  margin: 0 auto;
+  position: relative;
+  width: 350px;
+}
+
+.window {
+  width: 250px;
+  height: 390px;
+  background-color: #29467a; /* dark blue */
+  outline: 12px solid #2d2623; /* brown */
+  border-left: 5px solid #439abf; /* light blue */
+  border-right: 5px solid #439abf; /* light blue */
+  position: relative;
+  top: 20px;
+  left: 45px;
+}
+
+.window:before,
+.window:after {
+  content: '';
+  position: absolute;
+  background: linear-gradient(#439abf 50%, #2d2623 50%);
+}
+
+.window:before {
+  height: 15px;
+  width: 310px;
+  left: -30px;
+  bottom: -15px;
+}
+
+.window:after {
+  height: 15px;
+  width: 260px;
+  left: -5px;
+  top: 200px;
+}
+
+.mountain-1 {
+  height: 0;
+  width: 0;
+  border-bottom: 60px solid #22366d;
+  border-right: 20px solid transparent;
+  position: absolute;
+  bottom: 0;
+}
+
+.mountain-1:before,
+.mountain-1:after {
+  content: '';
+  position: absolute;
+  height: 0;
+  width: 0;
+  border-bottom: 60px solid #22366d;
+  border-right: 20px solid transparent;
+  border-left: 20px solid transparent;
+}
+
+.mountain-1:before {
+  bottom: -60px;
+  left: 5px;
+}
+
+.mountain-1:after {
+  bottom: -60px;
+  left: 35px;
+}
+
+.mountain-2 {
+  height: 0;
+  width: 0;
+  border-bottom: 60px solid #22366d;
+  border-left: 20px solid transparent;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.mountain-2:before,
+.mountain-2:after {
+  content: '';
+  position: absolute;
+  height: 0;
+  width: 0;
+  border-bottom: 60px solid #22366d;
+  border-right: 20px solid transparent;
+  border-left: 20px solid transparent;
+}
+
+.mountain-2:before {
+  bottom: -60px;
+  right: 5px;
+}
+
+.mountain-2:after {
+  bottom: -60px;
+  right: 35px;
+}
+
+.kitty {
+  background-color: #2d2623;
+  height: 140px;
+  width: 50px;
+  position: absolute;
+  bottom: -15px;
+  left: 95px;
+  border-radius: 40px 40px 0 0;
+}
+
+.kitty:before {
+  content: '';
+  position: absolute;
+  background-color: #2d2623;
+  height: 80px;
+  width: 40px;
+  border-radius: 0 80px 80px 0;
+  bottom: 0;
+  left: 43px;
+}
+
+.kitty:after {
+  content: '';
+  position: absolute;
+  background-color: #2d2623;
+  height: 80px;
+  width: 10px;
+  border-radius: 5px;
+  bottom: -70px;
+  left: 45px;
+  transform: rotate(-15deg);
+  transform-origin: top;
+  animation: tail 4s infinite;
+}
+
+@keyframes tail {
+  50% {
+    transform: rotate(10deg);
+    }
+}
+
+.ears {
+  height: 0;
+  width: 0;
+  position: absolute;
+  bottom: 100px;
+  left: 120px;
+  right: 0;
+}
+
+.ears:before {
+  content: '';
+  position: absolute;
+  height: 0;
+  width: 0;
+  border-bottom: 15px solid #2d2623;
+  border-right: 15px solid transparent;
+  bottom: 12px;
+  right: 9px;
+}
+
+.ears:after {
+  content: '';
+  position: absolute;
+  height: 0;
+  width: 0;
+  border-bottom: 15px solid #2d2623;
+  border-left: 15px solid transparent;
+  border-bottom-left-radius: 15px;
+  bottom: 12px;
+  left: 9px;
+}
+
+.moon {
+  height: 80px;
+  width: 80px;
+  border-radius: 50%;
+  background-color: transparent;
+  box-shadow: -15px 8px 0 1px #e8ae4a;
+  position: absolute;
+  left: 50px;
+  top: 60px;
+}
+
+.star {
+  background-color: #e8ae4a;
+  height: 6px;
+  width: 6px;
+  border-radius: 50%;
+  position: absolute;
+  top: 30px;
+  left: 140px;
+  box-shadow: 80px 65px #e8ae4a, -120px 150px #e8ae4a, -120px 280px #e8ae4a;
+}
+</style>
+</head>
+<body>
+<div class="container">
+
+<div class="window">
+
+<div class="mountain-1"></div>
+<div class="mountain-2"></div>
+<div class="kitty"></div>
+<div class="ears"></div>
+
+<div class="moon"></div>
+<div class="star"></div>
+
+</div>
+<!-- end window -->
+
+</div>
+<!-- end container -->
+</body>
+</html>
\ No newline at end of file
