Project Decode Part 2

Sleet827 · Dec 28, 2024 · 16aa983 · 16aa983
1 parent 2b26e63
commit 16aa983
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 29 deletions.
diff --git a/index.html b/index.html
@@ -9,15 +9,12 @@
 <body>
     <header class="header">
         <h1>Welcome to Winter Wonderland</h1>
-        <p>Enjoy the serene beauty of winter!</p>
+        <p>Step into a world of frosty enchantment!</p>
     </header>
     <main>
         <div id="snow-container"></div>
-        <button id="toggle-snow">Toggle Snow</button>
+        <button id="toggle-snow">❄ Toggle Snow ❄</button>
     </main>
-    <footer>
-        <p>© 2024 Winter Wonderland. All rights reserved.</p>
-    </footer>
     <script src="script.js"></script>
 </body>
 </html>
diff --git a/script.js b/script.js
@@ -5,14 +5,16 @@ let snowing = true;
 function createSnowflake() {
     const snowflake = document.createElement('div');
     snowflake.classList.add('snowflake');
-    snowflake.style.left = Math.random() * window.innerWidth + 'px';
-    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's'; // 2s to 5s
-    snowflake.style.opacity = Math.random();
-    snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';
+    snowflake.textContent = '❄';
+
+    // Random positioning and animation properties
+    snowflake.style.left = Math.random() * 100 + 'vw';
+    snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
+    snowflake.style.fontSize = Math.random() * 15 + 10 + 'px';
 
-    snowflake.innerHTML = '❄';
     snowContainer.appendChild(snowflake);
 
+    // Remove snowflake after animation
     setTimeout(() => {
         snowflake.remove();
     }, 5000);

diff --git a/styles.css b/styles.css
@@ -1,62 +1,87 @@
+/* General Styles */
 body {
     margin: 0;
     padding: 0;
-    font-family: Arial, sans-serif;
-    background: linear-gradient(to bottom, #87CEEB, #FFFFFF);
+    font-family: 'Poppins', sans-serif;
+    background: linear-gradient(to bottom, #a0d8ef, #d8f3fd, #ffffff);
     overflow: hidden;
     display: flex;
     flex-direction: column;
     align-items: center;
 }
 
+/* Header Section */
 .header {
     text-align: center;
-    color: #fff;
+    color: #2e4057;
     padding: 2rem;
-    background: rgba(0, 0, 0, 0.6);
-    margin-bottom: 1rem;
-    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.8);
+    margin-top: 2rem;
+    border-radius: 15px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+    max-width: 600px;
 }
 
 .header h1 {
-    font-size: 2.5rem;
+    font-size: 3rem;
     margin: 0;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }
 
 .header p {
     font-size: 1.2rem;
+    margin-top: 1rem;
 }
 
+/* Snow Container */
 #snow-container {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
+    pointer-events: none;
     z-index: -1;
 }
 
+/* Snow Toggle Button */
 button {
-    padding: 0.8rem 1.2rem;
+    padding: 0.8rem 1.5rem;
     font-size: 1rem;
     border: none;
-    border-radius: 5px;
+    border-radius: 25px;
     background-color: #4682B4;
-    color: #fff;
+    color: white;
     cursor: pointer;
-    margin-top: 1rem;
+    margin-top: 2rem;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
+    transition: all 0.3s ease;
 }
 
 button:hover {
-    background-color: #5A9BD3;
+    background-color: #5a9bd3;
+    transform: scale(1.05);
 }
 
-footer {
-    text-align: center;
-    color: #fff;
-    padding: 1rem;
-    background: rgba(0, 0, 0, 0.6);
-    width: 100%;
+/* Snowflake Style */
+.snowflake {
     position: absolute;
-    bottom: 0;
+    top: -10px;
+    color: white;
+    font-size: 20px;
+    animation-name: fall;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
+    opacity: 0.8;
+}
+
+/* Snowflake Animation */
+@keyframes fall {
+    0% {
+        transform: translateY(0) rotate(0deg);
+    }
+    100% {
+        transform: translateY(100vh) rotate(360deg);
+    }
 }