From 57953ce8fbad99a22dd9e7f3642f7230bb0d7236 Mon Sep 17 00:00:00 2001
From: Jack Vo <jack.vo@learnosity.com>
Date: Fri, 23 Aug 2024 11:35:02 +1000
Subject: [PATCH] Add practice item 3

---
 practice-vault/beginner/item-4/index.html | 92 +++++++++++++++++++++++
 1 file changed, 92 insertions(+)
 create mode 100644 practice-vault/beginner/item-4/index.html
diff --git a/practice-vault/beginner/item-4/index.html b/practice-vault/beginner/item-4/index.html
new file mode 100644
index 0000000..7a52866
--- /dev/null
+++ b/practice-vault/beginner/item-4/index.html
@@ -0,0 +1,92 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <title>Practice Item 4</title>
+        <style>
+            @import url('https://fonts.googleapis.com/css2?family=Squada+One&display=swap');
+
+            body {
+                margin: 0;
+                width: 100vw;
+                height: 100vh;
+                background: url('https://img.freepik.com/free-photo/smooth-tan-smoke_23-2147734860.jpg?w=3000');
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-family: 'Squada One', sans-serif;
+                font-weight: 400;
+                font-style: normal;
+            }
+
+            .container {
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                width: 430px;
+                height: 750px;
+                position: relative;
+                background: white
+                    url('https://w0.peakpx.com/wallpaper/872/421/HD-wallpaper-ocean-blue-dark-night-sea-thunder-wave.jpg')
+                    no-repeat;
+                box-shadow: 0 6px 10px rgba(0, 0, 0, 0.5);
+            }
+
+            .logo {
+                position: relative;
+                width: 250px;
+                height: 250px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            .logo-bg {
+                position: absolute;
+                top: 0;
+                left: 0;
+                z-index: 0;
+                width: 100%;
+                height: 100%;
+                background-color: white;
+                animation: rotate 0.4s ease-in-out forwards 1s;
+            }
+
+            @keyframes rotate {
+                100% {
+                    transform: rotate(45deg);
+                }
+            }
+
+            .line {
+                position: absolute;
+                height: 250px;
+                border-left: 2px solid lightgray;
+            }
+
+            .logo-content {
+                position: absolute;
+                background: white;
+                text-align: center;
+                padding: 10px 0;
+                color: #333;
+            }
+
+            .logo-text {
+                font-size: 55px;
+            }
+        </style>
+    </head>
+    <body>
+        <!--https://tint.creativemarket.com/9s5PscVhoTOcHLWpvCaWIzxdGr0xj692eg93bk9No7c/width:1160/height:2192/gravity:nowe/rt:fill-down/el:1/czM6Ly9maWxlcy5jcmVhdGl2ZW1hcmtldC5jb20vaW1hZ2VzL3NjcmVlbnNob3RzL3Byb2R1Y3RzLzM3OC8zNzgyLzM3ODI3MTMvMTNfbWlsZXN0b25lX21hZ2F6aW5lX292ZXJ2aWV3LW8uanBn?1535621157-->
+        <div class="container">
+            <div class="logo">
+                <div class="logo-bg"></div>
+                <div class="line"></div>
+                <div class="logo-content">
+                    <div class="logo-text">MILESTONE</div>
+                    <div>Where Progress Meets Achievement</div>
+                </div>
+            </div>
+        </div>
+    </body>
+</html>
