all done

sadaiprince · Feb 26, 2024 · 826a519 · 826a519
1 parent 31b304a
commit 826a519
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 17 deletions.
diff --git a/valentineProject1/bg.mp4 b/valentineProject1/bg.mp4
diff --git a/valentineProject1/heart-493_512.gif b/valentineProject1/heart-493_512.gif
diff --git a/valentineProject1/heart-6317_512.gif b/valentineProject1/heart-6317_512.gif
diff --git a/valentineProject1/index.html b/valentineProject1/index.html
@@ -12,32 +12,42 @@
 <body>
     <div class="container-fluid main">
         <div class="container wrapper">
-                
-                    <h1>Do you like me?</h1>
-                
-                <div class="buttonSection">
+
+            <h1>Do you like me?</h1>
+
+            <div class="buttonSection">
                 <button class="yes">Yes</button>
                 <button class="no">No</button>
-                </div>
+            </div>
+        </div>
+        <div class="congrates">
+
+            <h1>You Must Like Me! <br> Because I am Your PRinCE 😎</h1>
+
         </div>
-    </div>
     </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
     <script>
-        let no=document.querySelector(".no");
-        let yes=document.querySelector(".yes");
-        let parentBlock=no.parentElement;
-        no.addEventListener('mouseover', ()=>{
+        let no = document.querySelector(".no");
+        let yes = document.querySelector(".yes");
+        let parentBlock = no.parentElement;
+        yes.addEventListener('click', () => {
+            document.querySelector(".wrapper").style.display = "none";
+            document.querySelector(".congrates").style.display = "block";
+            document.querySelector(".congrates").style.display = "flex";
+
+        })
+        no.addEventListener('mouseover', () => {
             const positionX = Math.floor(Math.random() * (parentBlock.clientWidth - no.clientWidth));
             console.log(positionX)
             const positionY = Math.floor(Math.random() * (parentBlock.clientHeight - no.clientHeight));
             console.log(positionY)
             no.style.position = "absolute";
-            no.style.left=`${positionX}px`;
-            no.style.top=`${positionY}px`;
-           
+            no.style.left = `${positionX}px`;
+            no.style.top = `${positionY}px`;
+
         })
-    
+
     </script>
 </body>
 

diff --git a/valentineProject1/style.css b/valentineProject1/style.css
@@ -29,7 +29,7 @@
     -webkit-backdrop-filter: blur(10px);
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.18);
-
+    
 }
 
 h1 {
@@ -49,11 +49,39 @@ button {
     margin: 4px;
     padding: 9px 25px;
     border-radius: 9px;
-    background: rgba(134, 223, 144, 0.447);
+    background: rgba(40, 213, 60, 0.447);
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
     backdrop-filter: blur(6px);
     -webkit-backdrop-filter: blur(6px);
     border-radius: 10px;
     border: 1px solid rgba(255, 255, 255, 0.761);
     font-size: 1.1rem;
-}
+    transition: ease-out .15s;
+    cursor: pointer;
+}
+
+.congrates{
+    background: url(heart-493_512.gif) repeat;
+    background-size: contain;
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    font-size: 2.5rem;
+    color: rgb(0, 0, 0);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0 auto;
+    display: none;
+
+}
+.congrates h1{
+    background: rgba(255, 255, 255, 0.447);
+    box-shadow: 0 8px 32px 0 rgba(191, 192, 206, 0.684);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    border-radius: 10px;
+    border: 1px solid rgba(157, 71, 71, 0.761)
+}
+
+