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

Navbar design #241

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
+198 −35
Open

Navbar design #241

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
7fde2ef
A brief description of what you changed
Nishankulal03 Oct 15, 2024
f6b9053
Updated index.html
Nishankulal03 Oct 15, 2024
c980092
Updated styles.css
Nishankulal03 Oct 15, 2024
926f7da
Updated maintenance.html
Nishankulal03 Oct 15, 2024
f8870a9
Merge branch 'main' into Nav-Design
Nishankulal03 Oct 20, 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
44 changes: 34 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@
<body>

<nav class="navbar">

<a href="index.html" class="flex"><img src="images/logo.png" class="logo">

<span class="website-name tracking-tight ">Code Social</span></a>


Expand Down Expand Up @@ -46,7 +48,7 @@
<li class="community">
<a href="maintenance.html">Join Our Community</a>
<ul class="dropdown">
<li><a href="maintenance.html">WhatsApp</a></li>
<li><a href="maintenance.html">WhatsApp</a></li></br>
<li><a href="maintenance.html">Discord</a></li>
</ul>
</li>
Expand All @@ -65,21 +67,27 @@
<button class="bar"></button>
<button class="bar"></button>
</div>
<ul class="dropdown">
<li><a href="mentorship.html">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
<li class="dropdown-container">
<a href="#">More Options</a>
<ul class="dropdown">
<li><a href="mentorship.html">Meet Our Team</a></li>
<li><a href="#">Join Our Team</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Follow Us</a></li>
</ul>
</li>

</li>

<li>
<a href="maintenance.html">Follow Us</a>
</li>
<!-- Dark Mode Toggle -->
<li>
<button id="theme-toggle" class="theme-toggle-btn">
<img src="images/dark-mode.png" alt="theme-mode" id="theme-toggle-icon">

<button id="theme-toggle" class="theme-toggle-btn ">
<img src="./images/dark-mode.png" alt="theme-mode" id="theme-toggle-icon">

</button>
<!-- when light mode is active -> use "dark-mode.png" and when dark mode is active -> use "light-mode.png" -->
</li>
Expand Down Expand Up @@ -154,6 +162,7 @@ <h3>Add Event</h3>

<a href="index.html" class="flex w-full justify-center "><img src="images/logo.png" class="logo mx-auto">


<span class="website-name tracking-tight ">Code Social</span></a>

<p class="footer-text">Code Social Community is a vibrant and inclusive space for tech enthusiasts to learn, grow, and connect. Founded in 2023, our mission is to empower individuals with resources, mentorship, and
Expand Down Expand Up @@ -280,6 +289,21 @@ <h3>Add Event</h3>
});

document.addEventListener('DOMContentLoaded', generateCalendar);
const themeToggleBtn = document.getElementById('theme-toggle');
const body = document.body;

themeToggleBtn.addEventListener('click', () => {
// Toggle the 'dark-theme' class on the body
body.classList.toggle('dark-theme');

// Optionally, change the icon based on the theme
const icon = document.getElementById('theme-toggle-icon');
if (body.classList.contains('dark-theme')) {
icon.src = './images/light-mode.png'; // Change to light mode icon
} else {
icon.src = './images/dark-mode.png'; // Change to dark mode icon
}
});

</script>
<script>
Expand All @@ -296,4 +320,4 @@ <h3>Add Event</h3>
</script>
</body>

</html>
</html>
7 changes: 5 additions & 2 deletions maintenance.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
<body>
<nav class="navbar">
<a href="index.html" class="flex"
><img src="/images/logo.png" class="logo" />
><img src="./images/logo.png" class="logo" />
<span class="website-name tracking-tight">Code Social</span></a
>

Expand Down Expand Up @@ -45,7 +45,7 @@
<li class="community">
<a href="maintenance.html">Join Our Community</a>
<ul class="dropdown">
<li><a href="maintenance.html">WhatsApp</a></li>
<li><a href="maintenance.html">WhatsApp</a></li></br>
<li><a href="maintenance.html">Discord</a></li>
</ul>
</li>
Expand All @@ -62,11 +62,14 @@
<a href="maintenance.html">Follow Us</a>
</li>
<!-- Dark Mode Toggle -->

<li>
<button id="theme-toggle" class="theme-toggle-btn">
<img

src="images/dark-mode.png"


alt="theme-mode"

id="theme-toggle-icon"
Expand Down
182 changes: 159 additions & 23 deletions styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,48 @@ body {
transition: all 0.3s; /* Optional: Add a transition for hover effects */
}

body {
background-color: white; /* Light background for body */
color: black; /* Light text color for body */
}

.navbar {
background-color: white; /* Light background for navbar */
color: black; /* Light text color for navbar */
}

.navbar a {
color: black; /* Links color in light theme */
}

/* Dark Theme Styles */
.dark-theme {
background-color: black; /* Dark background for body */
color: white; /* Dark text color for body */
}

.dark-theme .navbar {
background-color: black; /* Dark background for navbar */
color: white; /* Dark text color for navbar */
}

.dark-theme .navbar a {
color: white; /* Links color in dark theme */
}
/* Hide dropdowns by default */
.navbar .dropdown {
display: none; /* Hide the dropdowns */
position: absolute; /* Position them absolutely */
background-color: white; /* Background for dropdowns */
border: 1px solid #ccc; /* Border for dropdowns */
z-index: 1; /* Ensure dropdowns appear above other elements */
}

/* Show dropdowns when parent li is hovered */
.navbar li:hover .dropdown {
display: block; /* Show the dropdown on hover */
}

/* Dark mode */
.dark-mode {
background-color: #2e2e2e;
Expand Down Expand Up @@ -306,7 +348,49 @@ body.dark-mode .calendar-day:hover {
white-space: nowrap; /* Keeps text in a single line */
text-overflow: ellipsis; /* Adds ellipsis for overflowed text */
}

/* Hide the dropdown initially */
.dropdown {
display: none;
position: absolute;
background-color: white;
border: 1px solid #ccc;
padding: 10px 0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
list-style: none;
top: 100%; /* Aligns the dropdown right below the link */
left: 0;
min-width:260px;
z-index: 1000;
}

.dropdown li {
padding: 10px 20px;
}

.dropdown li a {
color: black;
text-decoration: none;
}

.dropdown li a:hover {
background-color: #f1f1f1;
color: red;
}

/* Show dropdown when hovering on the parent container */
.dropdown-container:hover .dropdown {
display: block;
}

/* Dropdown link styling */
.nav-links {
position: relative;
}

.dropdown-container {
position: relative;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
.calendar-section {
Expand All @@ -319,40 +403,92 @@ body.dark-mode .calendar-day:hover {
margin: 10px 0; /* Adjust margin */
}
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
padding-top: 100px; /* Adjust this to the height of your navbar */
}
.content {
padding: 20px;
}

.section {
margin-bottom: 100px;
}

.section h1,
.section h2 {
margin-bottom: 10px;
}

.section p {
margin-bottom: 20px;
line-height: 1.6;
}
/* General Navbar Styling */
.navbar {
/* background-color: #333; */
padding: 10px 10px;
display: flex;
align-items: center;
justify-content: space-between;
/* position: fixed; */
transition: background-color 0.3s;
width: 100%;
height: 12vh;
font-weight: 400;
top: 0;
margin-top: 0px;
z-index: 1000;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
position: sticky;
position: sticky; /* Changed to sticky to allow for the alternative positioning */
top: 0;
width: 100%;
background-color: white; /* Default background color */
border-bottom: 1px solid #ccc;
z-index: 1000; /* Ensure the navbar is on top */
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
transition: background-color 0.3s;
height: 12vh;
font-weight: 400;
}

.light-mode .navbar {
background-color: white; /* White background for light mode */
color: black; /* Text color for light mode */
background-color: white; /* White background for light mode */
color: black; /* Text color for light mode */
}

.dark-mode .navbar {
background-color: #333; /* Dark background for dark mode */
color: white; /* Text color for dark mode */
background-color: #333; /* Dark background for dark mode */
color: white; /* Text color for dark mode */
}

.navbar .logo {
font-size: 24px;
font-weight: bold;
}

.navbar .nav-links {
list-style-type: none;
display: flex;
}

.navbar .nav-links li {
margin-left: 20px;
}

.navbar .nav-links li a {
text-decoration: none;
color: black;
font-size: 18px;
}

.navbar .nav-links li a:hover {
color: red;
transition: color 0.3s ease;
}

.content {
height: 2000px; /* Just for scrolling */
padding: 20px;
height: 2000px; /* Just for scrolling */
padding: 20px;
}


/* Center the menu items */
.navbar ul {
display: flex;
Expand Down