Skip to content

Commit

Permalink
Same navbar design added to all webpages
Browse files Browse the repository at this point in the history
  • Loading branch information
@DarshanKrishna-DK
DarshanKrishna-DK committed Oct 28, 2024
1 parent 0a1abff commit f601e33
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 99 deletions.
20 changes: 12 additions & 8 deletions Feedback.html
View file
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
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
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
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

0 comments on commit f601e33

Please sign in to comment.