background

Author: dduicoder

css/components/clock.css

@@ -7,7 +7,7 @@
   position: relative;
   width: 80px;
   height: 80px;
-  border: 2px solid #dfdfdf;
+  border: 2px solid #858585;
   border-radius: 50%;
   margin-bottom: 1rem;
 }
@@ -40,15 +40,15 @@
   left: 9.25px;
   height: 2px;
   width: 31px;
-  background-color: #a78277;
+  background-color: #6f6f6f;
 }
 .second-hand {
   top: 39.25px;
   left: 6px;
   height: 1.5px;
   width: 34px;
-  background-color: #a28282;
+  background-color: #414141;
 }
 #electronic-watch {
-  color: #ebebeb;
+  color: #616161;
 }

css/components/components.css

@@ -1,4 +1,4 @@
-body {
+.background {
   width: 100vw;
   display: flex;
   justify-content: center;

css/components/login-form.css

@@ -3,40 +3,30 @@
     opacity: 1;
   }
   to {
-    display: none;
-    box-shadow: none;
     opacity: 0;
   }
 }
 @keyframes blur {
   from {
-    filter: blur(10px);
+    filter: blur(1rem);
   }
   to {
     filter: blur(0);
   }
 }
-.border {
-  animation: border-off 1.5s ease-in-out forwards;
+.blur {
+  filter: blur(1rem);
 }
 .disappear {
   animation: disappear 1.5s ease-in-out forwards;
 }
-.hidden {
-  display: none;
-  box-shadow: none;
-  opacity: 0;
-}
-.blur {
-  filter: blur(10px);
-}
 .blur-off {
   animation: blur 1.5s ease-in-out forwards;
 }
 #login-div {
   position: absolute;
-  height: 98vh;
-  width: 98vw;
+  height: 100vh;
+  width: 100vw;
   display: flex;
   justify-content: center;
   align-items: center;

css/style.css

@@ -4,14 +4,12 @@
 @import "components/quote.css";
 @import "components/day.css";
 @import "components/greeting.css";
-@import "img/images.css";
 @import "components/todo.css";
 @import "components/weather.css";
+@import "img/images.css";
 
 * {
   font-family: "SamsungOne 400", "SamsungOne 700";
-}
-body {
   margin: 0;
 }
 body::-webkit-scrollbar {

index.html

@@ -16,40 +16,42 @@
             <input type="submit" value="Log In" />
         </form>
     </div>
-    <main class="blur">
-        <section class="component watch">
-            <div id="clock">
-                <div id="watch-dot"></div>
-                <div class="hand hour-hand"></div>
-                <div class="hand minute-hand"></div>
-                <div class="hand second-hand"></div>
-            </div>
-            <span id="electronic-watch"></span>
-        </section>
-        <section class="component day">
-            <span id="dayOfWeek"></span>
-            <span id="day"></span>
-        </section>
-        <section class="component greet">
-            <span id="greeting"></span>
-        </section>
-        <section class="component todo">
-            <div id="todo-list"></div>
-            <form autocomplete="off" id="todo-form">
-                <input id="todo-input" type="text" placeholder="Write a To Do here" required />
-            </form>
-        </section>
-        <section class="component weather">
-            <span></span>
-            <span></span>
-        </section>
-        <section class="component quotes">
-            <div id="quote">
+    <div class="background blur">
+        <main>
+            <section class="component watch">
+                <div id="clock">
+                    <div id="watch-dot"></div>
+                    <div class="hand hour-hand"></div>
+                    <div class="hand minute-hand"></div>
+                    <div class="hand second-hand"></div>
+                </div>
+                <span id="electronic-watch"></span>
+            </section>
+            <section class="component day">
+                <span id="dayOfWeek"></span>
+                <span id="day"></span>
+            </section>
+            <section class="component greet">
+                <span id="greeting"></span>
+            </section>
+            <section class="component todo">
+                <div id="todo-list"></div>
+                <form autocomplete="off" id="todo-form">
+                    <input id="todo-input" type="text" placeholder="Write a To Do here" required />
+                </form>
+            </section>
+            <section class="component weather">
                 <span></span>
                 <span></span>
-            </div>
-        </section>
-    </main>
+            </section>
+            <section class="component quotes">
+                <div id="quote">
+                    <span></span>
+                    <span></span>
+                </div>
+            </section>
+        </main>
+    </div>
     <script src="js/greetings.js"></script>
     <script src="js/clock.js"></script>
     <script src="js/quotes.js"></script>

js/background.js

@@ -1,6 +1,6 @@
 const images = ["img1", "img2", "img3", "img4", "img5", "img6", "img7", "img8", "img9", "img10", "img11", "img12", "img13", "img14", "img15", "img16", "img17", "img18"];
 
 const chosenImage = images[Math.floor(Math.random() * images.length)];
-
-document.body.classList.add("bg");
-document.body.classList.add(chosenImage);
+const main = document.querySelector(".background");
+main.classList.add("bg");
+main.classList.add(chosenImage);