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

Followed same design of navbar in all webpages and resolved navbar conflicts #1121

Merged
merged 1 commit into from
Oct 30, 2024
Merged

Followed same design of navbar in all webpages and resolved navbar conflicts #1121

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
20 changes: 12 additions & 8 deletions Feedback.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@
filter: brightness(0) invert(1);
/* Change logo color in dark mode */
}

/*
.menu ul {
list-style-type: none;
padding: 0;
Expand All @@ -96,13 +96,13 @@

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

} */
/*
.menu a {
color: black;
/* Light mode link color */
Light mode link color
border: 1.5px solid black;
/* Black border */
Black border
border-radius: 7px;
padding: 3px 5px;
text-decoration: none;
Expand All @@ -113,10 +113,10 @@

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

.dark-mode .menu a {
color: white;
Expand Down Expand Up @@ -450,6 +450,10 @@
<span>Feedback</span>
</a>
</li>
<li>
<a href="nearby.html" id="contact-link" class="menu_links" data-link="Nearby">
<span>Nearby</span></a>
</li>
</ul>
</nav>

Expand Down
76 changes: 15 additions & 61 deletions features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
/* Change logo color in dark mode */
}

.menu ul {
/* .menu ul {
list-style-type: none;
padding: 0;
display: flex;
Expand All @@ -60,7 +60,7 @@

.menu a {
color: black;
/* Light mode link color */
Light mode link color
border: 2px solid black;
border-radius:7px;
padding: 3px 7px;
Expand All @@ -70,32 +70,32 @@

.menu ul li a:hover {
background-color: rgb(255, 255, 255);
/* Blue background on hover */
Blue background on hover
color: white;
/* White text on hover */
}
White text on hover
} */
a:hover {
color: blue !important;
}

.dark-mode .menu a {
/* .dark-mode .menu a {
color: white;
/* Dark mode link color */
Dark mode link color
border: 1px solid lightgrey;
/* Light grey border in dark mode */
}
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 {
/* .dark-mode .menu a:hover {
background-color: white;
/* White background on hover in dark mode */
White background on hover in dark mode
color: black;
/* Black text on hover in dark mode */
}
Black text on hover in dark mode
} */

.light-dark-btn {

Expand Down Expand Up @@ -196,7 +196,7 @@
/* Change the color of letters in this class to red */
}

.menu ul {
/* .menu ul {
list-style-type: none;
padding: 0;
}
Expand All @@ -221,7 +221,7 @@
.menu ul li a.active {
color: white;
background-color: #000;
}
} */



Expand Down Expand Up @@ -386,52 +386,6 @@
</div>
<!-- ------------------------------Added a navbar---------------------------------- -->

<header class="navbar">
<div class="container">

<div class="logo">
<div class="brand-name">
<span class="letter red" style="--letter-index: 1;">A</span>
<span class="letter red" style="--letter-index: 2;">m</span>
<span class="letter red" style="--letter-index: 3;">b</span>
<span class="letter red" style="--letter-index: 4;">u</span>
<span class="letter" style="--letter-index: 5;">F</span>
<span class="letter" style="--letter-index: 6;">l</span>
<span class="letter" style="--letter-index: 7;">o</span>
<span class="letter" style="--letter-index: 8;">w</span>
</div>
<a href="./index.html">
<img src="images/logo2-w.webp" alt="Ambulance Monitoring System Logo" style="width: 50px; height: auto" />
</a>
</div>

<nav class="menu">
<ul>
<li><a href="index.html" id="home-link" onclick="changeContent('home')"><i

class="fa-solid fa-house"></i> Home</a></li>
<li><a href="features.html" id="features-link" onclick="changeContent('features')"><i
class="fa-solid fa-file"></i> Features</a></li>
<li><a href="team.html" id="team-link" onclick="changeContent('team')"><i
class="fa-solid fa-user-group"></i> Team</a></li>
<li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
class="fa-solid fa-phone"></i> Contact</a></li>
<li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i

class="fa-solid fa-clipboard"></i> Feedback</a></li>
</ul>
</nav>
<div class="buttons">


<a href="login.html" class="login">Log in</a>
<a href="up.html" class="get-started">Get started</a>

<button class="light-dark-btn dark-mode-toggle" id="dark-mode-toggle">
<i class="fa-solid fa-moon"></i>
</button>


<div class="container" id="container">

<div class="logo">
Expand Down
3 changes: 2 additions & 1 deletion src/css/navbar.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ body {

.logo {
display: flex;
align-items: center;
/* margin-right: 60rem; */
margin-top: 0.7rem;
animation: logoAnimation 1s ease forwards;
}
Expand Down Expand Up @@ -225,6 +225,7 @@ body {
position: fixed;
width: 100%;
bottom: 1rem;
/* bottom: 38rem; */
z-index: 1000;
}

Expand Down
39 changes: 10 additions & 29 deletions team.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
}


.menu ul {
/* .menu ul {
list-style-type: none;
padding: 0;
display: flex;
Expand All @@ -48,9 +48,9 @@

.menu a {
color: black;
/* Light mode link color */
Light mode link color
border: 1px solid black;
/* Black border */
Black border
padding: 5px 10px;
text-decoration: none;
transition: all 0.3s;
Expand All @@ -59,17 +59,17 @@

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

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


.dark-mode {
Expand Down Expand Up @@ -101,7 +101,7 @@
/* end */



/*
.menu ul li a {
padding: 10px 15px;
color: black;
Expand All @@ -113,7 +113,7 @@
.menu ul li a.active {
color: white;
background-color: #000;
}
} */


.content {
Expand Down Expand Up @@ -287,11 +287,7 @@
</div>
</div>
</div>


<header class="navbar">
<div class="container">

<div class="logo">
<div class="brand-name">
<span class="letter red" style="--letter-index: 1;">A</span>
Expand All @@ -308,21 +304,6 @@
style="width: 50px; height: auto" />
</a>
</div>

<nav class="menu">
<ul>
<li><a href="index.html" id="home-link" onclick="changeContent('home')"><i
class="fa-solid fa-house"></i> Home</a></li>
<li><a href="features.html" id="features-link" onclick="changeContent('features')"><i
class="fa-solid fa-file"></i> Features</a></li>
<li><a href="team.html" id="team-link" onclick="changeContent('team')"><i
class="fa-solid fa-user-group"></i> Team</a></li>
<li><a href="contact.html" id="contact-link" onclick="changeContent('contact')"><i
class="fa-solid fa-phone"></i> Contact</a></li>
<li><a href="Feedback.html" id="feedback-link" onclick="changeContent('feedback')"><i
class="fa-solid fa-clipboard"></i> Feedback</a></li>
</ul>
</nav>
<div class="buttons">
<a href="login.html" class="login">Log in</a>
<a href="up.html" class="get-started">Get started</a>
Expand Down