Skip to content

Commit

Permalink
Merge pull request #2834 from PunithaNarasegowda/main
Browse files Browse the repository at this point in the history 
added search bar
  • Loading branch information
@sampadatiwari30
sampadatiwari30 authored Nov 6, 2024
2 parents 4242229 + 45c4131 commit 78b8972
Show file tree
Hide file tree
Showing 2 changed files with 198 additions and 2 deletions.
104 changes: 102 additions & 2 deletions Finveda/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down
96 changes: 96 additions & 0 deletions finance.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down

0 comments on commit 78b8972

Please sign in to comment.