diff --git a/Glassmorphism login page/index.html b/Glassmorphism login page/index.html index f0059470..4beea7f8 100644 --- a/Glassmorphism login page/index.html +++ b/Glassmorphism login page/index.html @@ -3,119 +3,93 @@ - Welcome to the Login Page + Glassmorphism Login & Sign Up -
-
-
- Sign Up - + + +
+ + + +
+ +
-
Create an Account
- -
Continue with Google
-
OR
-
-
- - -
-
- - -
-
- - -
-
- - -
+ +
+ +
+
Create Account
+
Continue with Facebook
+
Continue with Google
+
OR
+ +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + +
+

Already have an account?

+
+
+ + +
+
Welcome Back
+
Continue with Facebook
+
Continue with Google
+
OR
+ +
+ + +
+
+ + +
+ + +
+

Don’t have an account?

+
+
-
Sign Up
+ +
✅ Sign Up Successful! You can now Login.
diff --git a/Piano/index.html b/Piano/index.html index 52ca32f4..f60dcda3 100644 --- a/Piano/index.html +++ b/Piano/index.html @@ -1,12 +1,202 @@ + - Piano - + @@ -14,7 +204,7 @@

Piano

- +
@@ -41,6 +231,5 @@

Piano

- diff --git a/Piano/piano.css b/Piano/piano.css deleted file mode 100644 index f9903639..00000000 --- a/Piano/piano.css +++ /dev/null @@ -1,91 +0,0 @@ -html { - box-sizing: border-box; -} - -*, *::before, *::after { - box-sizing: inherit; -} - -body { - background-color:bisque; -} - -#piano { - background-color: #63369a; - width: 992px; - height: 290px; - margin: 100px auto; - padding: 90px 20px 0 20px; - position: relative; - border-radius: 10px; -} - -.keys { - background-color: #040404; - width: 949px; - height: 180px; - padding-left: 2px; - overflow: hidden; -} - -.key { - background-color: #ffffff; - position: relative; - width: 41px; - height: 175px; - margin: 2px; - float: left; - border-radius: 0 0 3px 3px; -} - -.key.black-key::after { - background-color: #1d1e22; - content: ""; - position: absolute; - left: -18px; - width: 32px; - height: 100px; - border-radius: 0 0 3px 3px; -} - -.head { - display: flex; - align-items: center; - flex-direction: row; -} - -.title { - width: 400px; - position: absolute; - top: 23px; - margin-top: 0px; - font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; - letter-spacing: 1px; -} - -.logo { - width: 30px; -} - -@media (max-width: 768px) { - #piano { - width: 358px; - } - - .keys { - width: 318px; - } - - .logo { - width: 150px; - } -} - -@media (max-width: 1199px) and (min-width: 769px) { - #piano { - width: 675px; - } - .keys { - width: 633px; - } -} diff --git a/misc/todo-1.html b/misc/todo-1.html index d3b63741..f2a017c0 100644 --- a/misc/todo-1.html +++ b/misc/todo-1.html @@ -1,519 +1,571 @@ - - - - - No JS Demo - - - - - - - - -
- - - - - - - - - - - - - - - - - - - - - - - - - -
-

Todos

-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
- -
-
- -
-
- -
-
-
-
- - + .save-btn:hover { + transform: translateY(-3px) scale(1.05); + box-shadow: 0 8px 25px rgba(102, 126, 234, 0.5); + animation: none; + } + + .save-btn:active { + transform: translateY(0) scale(0.98); + } + + .save-btn::before { + content: ''; + position: absolute; + top: 0; + left: -100%; + width: 100%; + height: 100%; + background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); + transition: left 0.5s; + } + + .save-btn:hover::before { + left: 100%; + } + + .save-btn::after { + content: '💫'; + position: absolute; + top: -10px; + right: -10px; + font-size: 1.2rem; + animation: sparkle 2s ease-in-out infinite; + } + + @keyframes sparkle { + 0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); } + 50% { opacity: 1; transform: scale(1) rotate(180deg); } + } + + /* Celebration when all done */ + .all-done-message { + color: #764ba2; + font-weight: bold; + animation: celebration 1s ease-in-out infinite; + display: inline-block; + } + + @keyframes celebration { + 0%, 100% { + transform: scale(1) rotate(0deg); + color: #764ba2; + } + 25% { + transform: scale(1.2) rotate(5deg); + color: #667eea; + } + 50% { + transform: scale(1.3) rotate(-5deg); + color: #f093fb; + } + 75% { + transform: scale(1.2) rotate(5deg); + color: #667eea; + } + } + + /* Progress bar animation */ + .todo-container::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + height: 3px; + background: linear-gradient(90deg, #667eea, #764ba2); + width: 0%; + animation: progressBar 3s ease-in-out infinite; + } + + @keyframes progressBar { + 0% { width: 0%; left: 0; } + 50% { width: 100%; left: 0; } + 100% { width: 0%; left: 100%; } + } + + /* Responsive design */ + @media (max-width: 600px) { + body { + padding: 10px; + } + + .todo-container { + padding: 20px; + } + + .todo-header { + font-size: 1.8rem; + } + + .todo-item { + padding: 12px 15px; + } + + .todo-text { + font-size: 1rem; + } + } + + + +
+

+ Todo List + 0/10 +

+ +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ +
+ +
+
+ + + + \ No newline at end of file