From 539f3def4037d91995e279978a559e045ed23a52 Mon Sep 17 00:00:00 2001
From: anup <anupsimha2@gmail.com>
Date: Sat, 8 Jun 2024 09:50:47 +0530
Subject: [PATCH] Added changes to gradient Selector Box

---
 index.html | 54 +++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 51 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 8f33c9a..4d710cf 100644
--- a/index.html
+++ b/index.html
@@ -57,12 +57,15 @@
             position: absolute;
             top: 10px;
             right: 10px;
-            background-color: rgba(0,0,0,0.4);
+            background-color: rgba(201, 179, 39, 0.8);
+            border: 5px solid black;
             padding: 10px;
             border-radius: 8px;
             display: none;
             flex-direction: column;
-            color: whitesmoke
+            color: whitesmoke;
+            font-size: 400;
+            box-sizing: border-box;
         }
 
         .gradient-selector-container label,
@@ -71,6 +74,19 @@
             margin: 5px 0;
         }
 
+        .gradient-selector-container select{
+           border-radius: 5px;
+           font-weight: 200; 
+           background-color: #fce7b0;
+           box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+
+        .gradient-selector-container select:hover{
+            transition: 0.5s ease-in-out;
+            background-color: #FFEA7E;
+            transform: scale(1.1);
+        }
+
         .gradient-button {
             position: absolute;
             top: 10px;
@@ -86,9 +102,41 @@
             outline: none;
         }
       
+        .apply_btn{
+            background-color: #ff9b54;
+            border-radius: 5px;
+            transition: transform 0.5s ease-in-out;
+        }
+
+        .apply_btn:hover{
+            background-color: #FFEA7E;
+            transform: scale(1.075);
+        }
+
+        #color1 ,#color2{
+            width: auto;
+            text-align: center;
+            border-radius: 5px;
+            transition: transform 0.5s ease-in-out;
+        }
+
+        #color1:hover{
+            transform: scale(1.075);
+        }
+
+        #color2:hover{
+            transform: scale(1.075);
+        }
+
         #v{
                 border-radius: 0px 0px 25px 25px;
+        }
+
+        @media (min-width:365px) and (max-width: 768px){
+            .gradient-selector-container{
+                background-color: rgb(236, 195, 72);
             }
+        }
 
     </style>
 </head>
@@ -112,7 +160,7 @@
             <option value="to left">To Left</option>
             <option value="to right">To Right</option>
         </select>
-        <button onclick="applyGradient()">Apply Gradient</button>
+        <button class="apply_btn" onclick="applyGradient()">Apply Gradient</button>
     </div>
 
 </div>