From 9a2bdf60b013916c8c0af99bc372d54dfccedced Mon Sep 17 00:00:00 2001
From: 2sandeep7 <ssandeep8696@gmail.com>
Date: Sat, 14 Oct 2023 14:48:40 -0500
Subject: [PATCH 1/2] Enhancing the UI

---
 index.html      |  4 ++--
 login_style.css |  1 +
 style.css       | 17 ++++++++++++++---
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index e9128c2..ac3642b 100644
--- a/index.html
+++ b/index.html
@@ -20,8 +20,8 @@ <h6 id="menu_list_active_button">
             <div class="logo">
                 <img src="geetlogo.png" alt="">
             </div>
-            <div class="playlist">
-                <h4 class="active"><span></span><i class="bi bi-music-note-beamed"></i>Playlist</h4>
+            <div id="playlist" class="playlist">
+                <h4><span></span><i class="bi bi-music-note-beamed"></i>Playlist</h4>
                 <h4><span></span><i class="bi bi-music-note-beamed"></i>Create playlist</h4>
                 <h4><span></span><i class="bi bi-music-note-beamed"></i>Recommended</h4>
             </div>
diff --git a/login_style.css b/login_style.css
index aaf8134..98f9e3e 100644
--- a/login_style.css
+++ b/login_style.css
@@ -1,3 +1,4 @@
+
 body{
     margin: 0;
     padding: 0;
diff --git a/style.css b/style.css
index ec258dc..3b2b011 100644
--- a/style.css
+++ b/style.css
@@ -46,12 +46,23 @@ body {
     width: 100vw;
     height: 100vh;
     background-color: var(--body-bg);
-    font-family: 'Baloo Bhai', cursive;
+    font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     display: flex;
     justify-content: center;
     align-items: center;
     /* font-size:4rem; */
 }
+#playlist h4{
+    font-size: 1.2rem;
+    color: #090f1f;
+    text-transform: uppercase;
+    font-weight:bold;
+}
+#playlist h4:hover{
+    transform: translateY(-0.5rem);
+    color: #4c5262;
+}
+
 
 header {
     width: 85%;
@@ -149,7 +160,7 @@ header .menu_slide .playlist h4 span::before {
     position: absolute;
     width: 4px;
     height: 4px;
-    border: 2px solid grey;
+    border: 2px solid red;
     border-radius: 50%;
     top: -4px;
     transition: .3s linear;
@@ -516,7 +527,7 @@ header .song_slide nav ul label {
     font-size: 27px;
     margin-right: 25px;
     cursor: pointer;
-    color: grey;
+    color: #090f1f;
     transition: .3s linear;
 }
 

From c07647d061f5c4ff880101b623508d0c1d605c9e Mon Sep 17 00:00:00 2001
From: 2sandeep7 <ssandeep8696@gmail.com>
Date: Sat, 14 Oct 2023 15:17:50 -0500
Subject: [PATCH 2/2] Designed Login Button

---
 index.html |  2 +-
 style.css  | 57 +++++++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/index.html b/index.html
index ac3642b..e8812e5 100644
--- a/index.html
+++ b/index.html
@@ -138,7 +138,7 @@ <h5>
                 </div>
                 
                 <div class="login-link">
-                    <a href="login.html">LOGIN</a>
+        <a href="login.html"><button>LOGIN</button></a>
                 </div>
              
               
diff --git a/style.css b/style.css
index 3b2b011..0187adb 100644
--- a/style.css
+++ b/style.css
@@ -637,19 +637,50 @@ header .song_slide nav .search input {
     font-size: 12px;
     height : 26px ;
 }
-
-/* this is for login link */
-header .song_slide nav .login-link{
-padding:2px 10px;
-text-decoration: none;
-border-radius: 40px;
-background-color: rgb(158, 153, 153);
-height : 26px ;
-}
-header .song_slide nav .login-link a {
-text-decoration: none;
-
-}
+.login-link button {
+    --color:var(--wave);
+    font-family: inherit;
+    display: inline-block;
+    width: 5em;
+    height: 2.3em;
+    line-height: 2em;
+    overflow: hidden;
+    background-color: var(--li-hover);
+    margin: 20px;
+    font-size: 15px;
+    z-index: 1;
+    font-weight: bold;
+    color: var(--color);
+    border: 2px solid var(--color);
+    border-radius: 6px;
+    position: relative;
+  }
+  
+.login-link  button::before {
+    position: absolute;
+    content: "";
+    background: var(--color);
+    width: 150px;
+    height: 200px;
+    z-index: -1;
+    border-radius: 50%;
+  }
+  
+ .login-link button:hover {
+    color: var(--li-hover);
+  }
+  
+ .login-link button:before {
+    top: 100%;
+    left: 100%;
+    transition: .3s all;
+  }
+  
+ .login-link button:hover::before {
+    top: -30px;
+    left: -30px;
+  }
+ 
 
 /* css for toggling the daek mode starts */