Add item-12 Merry Christmas

jack-vo · Nov 28, 2024 · c4d0e15 · c4d0e15
1 parent 66b992e
commit c4d0e15
Show file tree

Hide file tree

Showing 4 changed files with 154 additions and 2 deletions.
diff --git a/practice-vault/beginner/item-10/index.html b/practice-vault/beginner/item-10/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
     <head>
-        <title>Item 9</title>
+        <title>Item 10</title>
         <style>
             .container {
                 display: flex;

diff --git a/practice-vault/beginner/item-11/index.html b/practice-vault/beginner/item-11/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html lang="en">
     <head>
-        <title>Item 9</title>
+        <title>Item 11</title>
         <style>
             .container {
                 display: flex;

diff --git a/practice-vault/beginner/item-12/index.html b/practice-vault/beginner/item-12/index.html
@@ -0,0 +1,152 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>Item 12</title>
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Lilita+One&display=swap');
+            body {
+                width: 100vw;
+                height: 100vh;
+                background: url('https://images.unsplash.com/photo-1511268011861-691ed210aae8?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D');
+                background-size: cover;
+                display: flex;
+                flex-direction: column;
+                text-align: center;
+                justify-content: center;
+                font-family: 'Lilita One', sans-serif;
+                font-weight: 400;
+                font-style: normal;
+            }
+            .container {
+                overflow: hidden;
+                margin-left: 100px;
+                background: url('https://wallpapers-clan.com/wp-content/uploads/2024/03/starfall-night-sky-mountains-aesthetic-gif-preview-desktop-wallpaper.gif');
+                position: relative;
+                width: 600px;
+                height: 600px;
+                display: flex;
+                flex-direction: column;
+                text-align: center;
+                border: 10px solid #ddd;
+                box-shadow:
+                    2px 2px 20px rgba(0, 0, 0, 0.5),
+                    0 0 30px inset black;
+                transform: rotate(-2deg);
+            }
+            .content {
+                width: 620px;
+                position: absolute;
+                display: flex;
+                align-items: center;
+                right: -650px;
+                top: 40px;
+                animation: moving 20s infinite;
+            }
+
+            @keyframes moving {
+                100% {
+                    right: 600px;
+                }
+            }
+
+            .santa {
+                width: 300px;
+            }
+
+            .text {
+                font-size: 30px;
+                color: crimson;
+                text-shadow:
+                    1px 1px 2px #eee,
+                    3px 3px 2px #000;
+            }
+
+            .trees {
+                position: absolute;
+                width: 880px;
+                bottom: -270px;
+                left: -118px;
+            }
+            .falling-snow {
+                position: absolute;
+                top: 0;
+                left: 0;
+                width: 100%;
+                height: 100%;
+                background: url('https://www.animationsoftware7.com/img/agifs/snow02.gif')
+                    repeat;
+                opacity: 0.2;
+            }
+
+            .pin {
+                position: absolute;
+                top: 1px;
+                right: 2px;
+                width: 60px;
+            }
+
+            /* Advanced */
+            .wavy {
+                position: relative;
+                animation: wavy 1.5s ease infinite;
+                top: 0;
+                left: 0;
+            }
+
+            @keyframes wavy {
+                0% {
+                    top: 0px;
+                }
+                50% {
+                    top: -15px;
+                }
+                100% {
+                    top: 0px;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div class="container">
+            <div class="content">
+                <img
+                    class="santa"
+                    src="https://img1.picmix.com/output/stamp/normal/3/6/8/9/2409863_0d10d.gif"
+                />
+                <span class="text">Merry Christmas 2025!</span>
+            </div>
+            <img
+                class="trees"
+                src="./winter_snowy_night_forest_landscape_15577333.png"
+            />
+            <div class="falling-snow"></div>
+            <img
+                class="pin"
+                src="https://www.pngall.com/wp-content/uploads/2/Drawing-Pin.png"
+            />
+        </div>
+        <script>
+            function applyAnimation() {
+                let delay = 200;
+                let textElement = document.querySelector('.text');
+                let textContent = textElement.textContent;
+
+                textElement.innerHTML = textContent
+                    .split('')
+                    .map((letter) => {
+                        return `<span>${letter}</span>`;
+                    })
+                    .join('');
+
+                Array.from(textElement.children).forEach((span, index) => {
+                    setTimeout(
+                        () => span.classList.add('wavy'),
+                        index * 60 + delay,
+                    );
+                });
+            }
+
+            applyAnimation();
+        </script>
+    </body>
+</html>
diff --git a/practice-vault/beginner/item-12/winter_snowy_night_forest_landscape_15577333.png b/practice-vault/beginner/item-12/winter_snowy_night_forest_landscape_15577333.png