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

Jump to bottom

Changed the hover effect of navbar menu in features, team , contact … #920

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Changed the hover effect of navbar menu in features, team , contact … #920

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
97 changes: 56 additions & 41 deletions Feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,51 +80,66 @@
/* Change logo color in dark mode */
}

.menu ul {
. ul {
list-style-type: none;
padding: 0;
padding: menu0;
display: flex;
}

.menu li {
margin-right: 20px;
}

.menu a {
color: black;
/* Light mode link color */
border: 1px solid black;
/* Black border */
padding: 5px 10px;
text-decoration: none;
transition: all 0.3s;
}

.menu a:hover {
background-color: blue;
/* Blue background on hover */
color: white;
/* White text on hover */
}

.dark-mode .menu a {
color: white;
/* Dark mode link color */
border: 1px solid lightgrey;
/* Light grey border in dark mode */
}

.dark-mode {
background-color: rgba(50, 50, 50, 0.95);
/* Slightly gray background with high opacity */
}

.dark-mode .menu a:hover {
background-color: white;
/* White background on hover in dark mode */
color: black;
/* Black text on hover in dark mode */
}
.menu ul {
list-style-type: none;
padding: 0;
display: flex;
}

.menu li {
margin-right: 20px;
position: relative; /* Required for the ::after pseudo-element */
}

.menu a {
color: black; /* Light mode link color */
padding: 5px 10px;
text-decoration: none;
position: relative; /* Needed for the animated underline */
transition: color 0.3s ease-in-out; /* Smooth text color change */
}

.menu a::after {
content: '';
position: absolute;
width: 0; /* Hidden underline initially */
height: 2px; /* Height of the underline */
left: 0; /* Start the underline from the left */
bottom: 0; /* Position the underline at the bottom of the text */
background-color: #007BFF; /* Blue underline */
transition: width 0.4s ease-in-out; /* Animate the width for sliding effect */
}

.menu a:hover::after {
width: 100%; /* Expand the underline from left to right on hover */
}

.menu a:hover {
color: #007BFF; /* Blue text color on hover */
}

/* Dark Mode Styling */
.dark-mode .menu a {
color: white; /* Dark mode link color */
}

.dark-mode .menu a::after {
background-color: white; /* White underline in dark mode */
}

.dark-mode .menu a:hover::after {
width: 100%; /* Expand the underline in dark mode */
}

.dark-mode .menu a:hover {
color: rgb(102, 98, 98); /* Dark grey text color on hover */
}

.light-dark-btn {
background-color: transparent;
Expand Down
96 changes: 53 additions & 43 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,50 +79,60 @@
}

.menu ul {
list-style-type: none;
padding: 0;
display: flex;
}

.menu li {
margin-right: 20px;
}

.menu a {
color: black;
/* Light mode link color */
border: 1px solid black;
/* Black border */
padding: 5px 10px;
text-decoration: none;
transition: all 0.3s;
}
list-style-type: none;
padding: 0;
display: flex;
}

.menu li {
margin-right: 20px;
position: relative; /* Required for the ::after pseudo-element */
}

.menu a {
color: black; /* Light mode link color */
padding: 5px 10px;
text-decoration: none;
position: relative; /* Needed for the animated underline */
transition: color 0.3s ease-in-out; /* Smooth text color change */
}

.menu a::after {
content: '';
position: absolute;
width: 0; /* Hidden underline initially */
height: 2px; /* Height of the underline */
left: 0; /* Start the underline from the left */
bottom: 0; /* Position the underline at the bottom of the text */
background-color: #007BFF; /* Blue underline */
transition: width 0.4s ease-in-out; /* Animate the width for sliding effect */
}

.menu a:hover::after {
width: 100%; /* Expand the underline from left to right on hover */
}

.menu a:hover {
color: #007BFF; /* Blue text color on hover */
}

/* Dark Mode Styling */
.dark-mode .menu a {
color: white; /* Dark mode link color */
}

.dark-mode .menu a::after {
background-color: white; /* White underline in dark mode */
}

.dark-mode .menu a:hover::after {
width: 100%; /* Expand the underline in dark mode */
}

.dark-mode .menu a:hover {
color: rgb(102, 98, 98); /* Dark grey text color on hover */
}

.menu a:hover {
background-color: rgb(10, 61, 212);
/* Blue background on hover */
color: white;
/* White text on hover */
}

.dark-mode .menu a {
color: white;
/* Dark mode link color */
border: 1px solid lightgrey;
/* Light grey border in dark mode */
}

.dark-mode {
background-color: rgba(30, 29, 29, 0.95);
/* Slightly gray background with high opacity */
}

.dark-mode .menu a:hover {
background-color: white;
/* White background on hover in dark mode */
color: black;
/* Black text on hover in dark mode */
}

.light-dark-btn {
background-color: transparent;
Expand Down
Loading