info box about copying hexcode

index.html

@@ -15,6 +15,12 @@
         <img src="./public/images/color-palette_logo.png" alt="">
     </header>
 
+    <div class="info_box">
+        <div class="info_text">
+            <p>Click on palette to copy it's hex code!</p>
+        </div>
+            <button id="cross_info_btn"><i class="fa-solid fa-circle-xmark fa-shake" style="color: #b500ac;"></i></button>
+    </div>
     <div class="left_social_box">
         <a href="https://www.instagram.com/sagar._.sharma._.7/" target="_blank">
             <i class="fa-brands fa-instagram" style="color: #ffffff;"></i>

public/css/style.scss

@@ -53,6 +53,7 @@ html {
 body{
     background-color: rgb(0, 0, 0);
     font-family: 'Nunito', sans-serif;
+    overflow-x: hidden;
 }
 
 header{
@@ -63,6 +64,37 @@ header{
     }
 }
 
+.info_box{
+    @include dimension(100vw, 100vh);
+    background-color: rgba(0, 0, 0, 0.9);
+    z-index: 99999;
+    position: fixed;
+    top: 0;
+    display: none !important;
+    @include flex(center, center);
+    flex-direction: column;
+    gap:50px;
+    transition: 600ms;
+    .info_text{
+        color: black;
+        background-color: #3eff21;
+        font-size: 20px;
+        font-weight: 600;
+        text-align: center;
+        padding: 40px;
+        border-radius: 10px;
+    }
+    button{
+        font-size: 50px;
+        background: transparent;
+        box-shadow: none;
+        border: none;
+        &:hover{
+            cursor: pointer;
+        }
+    }
+}
+
 .left_social_box{
     background: #161616;
     font-size: 20px;