Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improved the styling of drop-down on products link #213

Closed
wants to merge 2 commits into from
Closed

improved the styling of drop-down on products link #213

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
04bc7e0
did changes on font,search bar,footer
Deepikajyothi007 Oct 7, 2024
f564d41
Update style.css
Deepikajyothi007 Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 24 additions & 3 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,8 +34,8 @@
<li class="dropdown">
<a href="#">Products</a>
<ul class="dropdown-content">
<li><a href="mens.html">Mens</a></li>
<li><a href="womens.html">Womens</a></li>
<li><a href="mens.html">Men</a></li>
<li><a href="womens.html">Women</a></li>
</ul>
</li>
<li class="nav-link border" style="margin-left: 15px;">
Expand All @@ -57,10 +57,31 @@
</a>
</li>
<li class="nav-link">

<input type="text" id="search-input" placeholder="Search..." aria-label="Search" />
<button id="search-button" class="btn">
<a href="search.html" class="btn" id="search-button">
<i class="fa-solid fa-magnifying-glass"></i>
</a>


</button>

</li>
</ul>
</nav>
<script>
document.getElementById("search-button").addEventListener("click", function() {
const query = document.getElementById("search-input").value.trim();
if (query) {
// Redirect to a search results page with the query as a parameter
window.location.href = `search.html?query=${encodeURIComponent(query)}`;
} else {
alert("Please enter a search term.");
}
});
</script>

</header>

<!-- banner area -->
Expand All @@ -69,7 +90,7 @@
<div class="slide">

<div class="slide-details" data-aos="fade-up" data-aos-easing="ease-in-out">
<h1>Discover Tomorrow’s Trends Today with TrendTrove!</h1>
<h1>Discover Tomorrow's Trends Today with TrendTrove!</h1>
<p>
At TrendTrove, we bring you the most stylish and trendy fashion items, all in one place!
</p>
Expand Down
27 changes: 27 additions & 0 deletions search.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Search Results</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<h1>Search Results</h1>
</header>

<section id="results"></section>

<script>
// Get the query parameter from the URL
const params = new URLSearchParams(window.location.search);
const query = params.get('query');

// Display the query
document.getElementById('results').innerText = `You searched for: ${query}`;
// Here you can implement the logic to fetch and display actual search results
console.log(window.location.search)
</script>
</body>
</html>
98 changes: 95 additions & 3 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@
flex-direction: column;
align-items: flex-start;
row-gap: 25px;
text-shadow: 2px 2px 8px#780e0e;

}

Expand Down Expand Up @@ -458,8 +459,8 @@

.footer {
width: 100%;
padding: 30px 20%;
background-color: #f6f5fa;
padding: 30px 5%;
background-color: #f6f5faf0;
font-family: 'futura';
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -553,6 +554,7 @@
width: auto;
padding: 10px 20px;
font-size: 14px;
margin: auto;
}

.sub .btn:hover {
Expand Down Expand Up @@ -732,9 +734,12 @@ input {
}

.post-image {
width: 49%;

margin:10%;


}


.footer {
padding: 30px 5%;
Expand Down Expand Up @@ -1002,9 +1007,12 @@ main{
width: 85px;
}
.dropdown-content {

display: none;
position: absolute;
background-color:#f1f1f1;
min-width: 160px;
box-shadow:0px 8px 16px 0px rgba(0,0,0,0,2);
z-index: 1;
}

Expand All @@ -1021,3 +1029,87 @@ main{
.dropdown:hover .dropdown-content {
display: block;
}

.navigation {
background-color: #f8f9fa; /* Background color for navigation */
padding: 10px 20px; /* Padding for the navigation */
}

.nav-links {
list-style: none; /* Remove default list styles */
display: flex; /* Align items in a row */
}

.nav-link {
position: relative; /* Position for dropdown */
margin: 0 15px; /* Spacing between links */
}

.nav-link a {
text-decoration: none; /* Remove underline from links */
padding: 10px; /* Padding for links */
color: #333; /* Link color */
transition: color 0.3s; /* Transition for color change */
}

.nav-link a:hover {
color: #007bff; /* Color change on hover */
}

/* Dropdown styling */
.dropdown {
cursor: pointer; /* Change cursor to pointer */
}

.dropdown-content {
display: none; /* Hide dropdown by default */
position: absolute; /* Position dropdown relative to parent */
background-color: rgb(142, 225, 241); /* Background color for dropdown */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow for dropdown */
z-index: 1; /* Ensure it appears above other elements */
overflow-y: auto; /* Enable vertical scrolling */
max-height: 100px;
padding: 5px 0;

}

.dropdown:hover .dropdown-content {
display: block; /* Show dropdown on hover */
}

/* Square box for links */
.dropdown-content li {
border: 1px solid #100c0c; /* Border around items */
/* margin: 5px 0; Margin for spacing */
border-radius: 5px; /* Rounded corners */
max-width:400px;
}

.dropdown-content li a {
display: block;
padding: 10px;
color: #333;
text-align: center;
}

/* Arrow indicator */
.dropdown a:after {
content: " ▼";
font-size: 12px;
margin-left: 5px;
transition: transform 0.3s;
}
.dropdown:hover a:after {
transform: rotate(180deg);
}
.dropdown-content::-webkit-scrollbar {
width: 9px;
}

.dropdown-content::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 4px;
}
.dropdown-content::-webkit-scrollbar-thumb:hover {
background-color: #282626;
}