From 45c41312c211ca5f12716a51e5bcae50273382ee Mon Sep 17 00:00:00 2001
From: 3a7e7ca <10c07punitha.n@gmail.com>
Date: Wed, 6 Nov 2024 02:14:23 +0530
Subject: [PATCH] added search bar

---
 Finveda/index.html | 104 ++++++++++++++++++++++++++++++++++++++++++++-
 finance.html       |  96 +++++++++++++++++++++++++++++++++++++++++
 2 files changed, 198 insertions(+), 2 deletions(-)

diff --git a/Finveda/index.html b/Finveda/index.html
index 6f3d3bed..e2f17ec2 100644
--- a/Finveda/index.html
+++ b/Finveda/index.html
@@ -228,9 +228,109 @@
       document.getElementById("progressBar").style.width = scrolled + "%";
     };
   </script>
-  <button id="scrollBtn" class="scroll-btn" onclick="scrollToNextSection()">
+  <div class="search-container">
+    <input type="text" class="search-bar" placeholder="  Search...">
+    <button class="search-button">🔍</button>
+</div>
+
+<style>
+.search-container {
+    position: fixed; /* Keeps the search bar visible while scrolling */
+    top: 20px; /* Adjust as necessary */
+    right: 20px; /* Adjust as necessary */
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000; /* Ensure it is above other elements */
+}
+
+/* Existing styles for search-bar and search-button remain unchanged */
+.search-bar {
+    padding: 10px 40px 10px 20px;
+    font-size: 16px;
+    border: 2px solid #fff;
+    border-radius: 30px;
+    background-color: transparent;
+    color: white;
+    outline: none;
+    width: 250px; /* Adjust width */
+}
+
+.search-button {
+    margin-left: 10px; 
+    padding: 10px 16px;
+    font-size: 18px;
+    background-color: #2e2ef3; 
+    border-radius: 30px; 
+    color: white; }
+   /* Mobile responsiveness */
+   @media (max-width: 768px) {
+    .search-container {
+      top: 10px;
+      right: 10px;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    .search-bar {
+      width: 200px; /* Smaller width for mobile */
+    }
+
+    .search-button {
+      margin-top: 10px;
+    }
+  }
+  .search-bar {
+    padding: 10px 40px 10px 20px; /* Padding for the text and icon */
+    font-size: 16px;
+    border: 2px solid #fff;
+    border-radius: 30px; /* Rounded corners */
+    background-color: transparent;
+    color: white;
+    outline: none;
+    width: 250px; /* Adjust width */
+    transition: border-color 0.3s ease;
+    background-image: url('https://img.icons8.com/ios-filled/50/ffffff/search.png'); /* Search icon */
+    background-position: 10px center; /* Icon position inside the input */
+    background-repeat: no-repeat;
+    background-size: 18px;
+  }
+  .search-button {
+    margin-left: 10px; /* Space between input and button */
+    padding: 10px 16px;
+    font-size: 18px;
+    background-color: #ececee; /* Button background */
+    border: 2px solid #8686bb;
+    border-radius: 30px; /* Rounded corners */
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  /* Button hover effect */
+  .search-button:hover {
+    background-color: #fff;
+    color: #2e2ef3;
+    transform: translateY(-2px); /* Subtle hover effect */
+  }
+
+  /* Placeholder text style */
+  .search-bar::placeholder {
+    color: #ddd;
+    opacity: 1; /* Ensure placeholder text is visible */
+  }
+</style>
+
+<button id="scrollBtn" class="scroll-btn" onclick="scrollToNextSection()">
     <i class="lni-chevron-down"></i>
-  </button>
+</button>
+
+
+  
+  
 
   <script>
     document.addEventListener('DOMContentLoaded', () => {
diff --git a/finance.html b/finance.html
index 4925af08..992cec48 100644
--- a/finance.html
+++ b/finance.html
@@ -168,14 +168,110 @@
     <div class="second-header">
       <h1>Let's Start Your Journey in World of Finance</h1>
       <p>Learn the basics of finance with these curated video lessons. Click "Watch Now" to view each course.</p>
+    
+      <!-- Search Bar and Button -->
+      <div class="search-container">
+        <input type="text" class="search-bar" placeholder="   Search...">
+        <button class="search-button">🔍</button>
+      </div>
     </div>
+    
     <style>
+      /* Header styling */
       .second-header {
         background: linear-gradient(135deg, #8598e7, #2e2ef3);
         border: 5px solid white;
         margin-bottom: 30px;
+        position: relative;
+        padding: 20px;
+        color: white;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+      }
+    
+      /* Container for search bar and button */
+      .search-container {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    
+      /* Search bar styling */
+      .search-bar {
+        padding: 10px 40px 10px 20px; /* Padding for the text and icon */
+        font-size: 16px;
+        border: 2px solid #fff;
+        border-radius: 30px; /* Rounded corners */
+        background-color: transparent;
+        color: white;
+        outline: none;
+        width: 250px; /* Adjust width */
+        transition: border-color 0.3s ease;
+        background-image: url('https://img.icons8.com/ios-filled/50/ffffff/search.png'); /* Search icon */
+        background-position: 10px center; /* Icon position inside the input */
+        background-repeat: no-repeat;
+        background-size: 18px;
+      }
+    
+      /* Search bar focus effect */
+      .search-bar:focus {
+        border-color: #9999df; /* Highlight border on focus */
+      }
+    
+      /* Search button styling */
+      .search-button {
+        margin-left: 10px; /* Space between input and button */
+        padding: 10px 16px;
+        font-size: 18px;
+        background-color: #ececee; /* Button background */
+        border: 2px solid #8686bb;
+        border-radius: 30px; /* Rounded corners */
+        color: white;
+        cursor: pointer;
+        transition: background-color 0.3s ease, transform 0.3s ease;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+    
+      /* Button hover effect */
+      .search-button:hover {
+        background-color: #fff;
+        color: #2e2ef3;
+        transform: translateY(-2px); /* Subtle hover effect */
+      }
+    
+      /* Placeholder text style */
+      .search-bar::placeholder {
+        color: #ddd;
+        opacity: 1; /* Ensure placeholder text is visible */
+      }
+    
+      /* Mobile responsiveness */
+      @media (max-width: 768px) {
+        .search-container {
+          top: 10px;
+          right: 10px;
+          flex-direction: column;
+          align-items: flex-start;
+        }
+    
+        .search-bar {
+          width: 200px; /* Smaller width for mobile */
+        }
+    
+        .search-button {
+          margin-top: 10px;
+        }
       }
     </style>
+    
+    
 
     <main>
       <div class="course" data-aos="slide-right">