Skip to content

Commit

Permalink
Merge pull request #3895 from Arghya-Chakraborty0812/events/navbar
Browse files Browse the repository at this point in the history 
Fix/events navbar
  • Loading branch information
@sailaja-adapa
sailaja-adapa authored Oct 24, 2024
2 parents b3ae405 + 5159a27 commit 1bf60ae
Showing 1 changed file with 175 additions and 12 deletions.
187 changes: 175 additions & 12 deletions assets/html/event.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,12 @@

header {
width: 100%;
background-color: #fff;
padding: 1em 0;
background:white;
padding: 0.5em 0;
display: flex;
align-items: center;
}


nav ul {
list-style: none;
Expand All @@ -32,6 +33,7 @@
display: flex;
align-items: center;
gap: 45px;

}

nav ul li {
Expand All @@ -56,7 +58,7 @@
bottom: 0;
width: 100%;
height: 3px;
background-color: #fcb0b480;
background-color: #fcb0b480;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.6s ease;
Expand Down Expand Up @@ -201,21 +203,175 @@
border-style: solid;
border-color: #000 transparent transparent transparent;
}
/* Styles for devices with a width of 600px or less */
@media (max-width: 600px) {
body {
padding: 10px;
flex-direction: column;
}

header {
flex-direction: column;
padding: 1em;
}

.logopic {
margin-left: 0;
width: 10rem;
}

nav ul {
flex-direction: column;
margin-left: 0;
gap: 20px;
}

nav ul li a {
font-size: 16px;
padding-left: 0;
padding-right: 0;
}

main {
max-width: 100%;
padding: 1em;
}

.calendar-header {
flex-direction: column;
gap: 10px;
}

.row {
justify-content: space-between;
}

.day {
width: 40px;
height: 40px;
}

.footer {
font-size: 0.7em;
padding: 20px;
}
}

/* Styles for tablets and devices up to 1024px */
@media (max-width: 1024px) {
nav ul {
gap: 20px;
margin-left: 50px;
}

.logopic {
width: 12rem;
}

.calendar-header {
flex-direction: row;
}

.day {
width: 45px;
height: 45px;
}
}
/* Hamburger menu for small screens */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
margin-right: 20px;
}

.hamburger div {
width: 25px;
height: 3px;
background-color: #000;
margin: 5px;
}

@media (max-width: 600px) {
.hamburger {
display: flex;
}

nav ul {
display: none;
flex-direction: column;
width: 100%;
text-align: center;
}

nav ul.active {
display: flex;
}
}
/* .logopic {
width: 100%;
max-width: 15rem; /* Maximum width for larger screens */
/* height: auto; */
*/



</style>
</head>

<body>
<header>
<a href="../../index.html"><img src="http://127.0.0.1:56445/SwapReads/assets/images/final.png"
class="logopic"></a>
<a href="index.html" onclick="lenis.scrollTo('index.html');" class="logo" style="display:flex;">
<img src="./assets/images/final.png" class="logopic" style=" width: 15rem; margin:0px 0px 0px -10px;">
</a>
<div class="hamburger">
<div></div>
<div></div>
<div></div>
</div>
<nav>
<ul>
<li><a href="../../index.html"><i class="fas fa-home"></i>Home</a></li>
<li><a href="./about.html"><i class="fas fa-info-circle"></i>About Us</a></li>
<li><a href="../../index.html#contact"><i class="fas fa-envelope"></i>Contact</a></li>
<li><a href="#authors"><i class="fas fa-user"></i>Authors</a></li>
<li><a href="../../comsp.html"><i class="fas fa-users"></i> Community</a></li>
</ul>
<ul class="navbar-list">
<li class="navbar-item">
<a href="index.html" class="navbar-link">
<lord-icon
src="https://cdn.lordicon.com/qeltvbrs.json"
trigger="hover"
colors="primary:#e88c30,secondary:#a30f17"
style="width: 25px; height: 25px">
</lord-icon>Home</a>
</li>
<li class="navbar-item">
<a href="books.html" class="navbar-link">
<lord-icon
src="https://cdn.lordicon.com/bhmovrlt.json"
trigger="hover"
state="morph-open"
colors="primary:#a30f17,secondary:#e88c30"
style="width: 25px; height: 25px">
</lord-icon>Books</a>
</li>
<li class="navbar-item">
<a href="./index.html#genre" class="navbar-link">
<script src="https://cdn.lordicon.com/lordicon.js"></script>
<lord-icon
src="https://cdn.lordicon.com/lcvlsnre.json"
trigger="hover"
colors="primary:#a30f17,secondary:#e88c30"
style="width: 25px; height: 25px">
</lord-icon>Genres</a>
</li>
<li class="navbar-item">
<a href="./assets/html/about.html" class="navbar-link">
<lord-icon
src="https://cdn.lordicon.com/fozsorqm.json"
trigger="hover"
stroke="bold"
state="hover-up"
colors="primary:#a30f17,secondary:#e88c30"
style="width: 30px; height: 25px">
</lord-icon>About</a>
</li>
</ul>
</nav>
</header>
<main>
Expand All @@ -239,6 +395,8 @@ <h3 id="monthAndYear"></h3>
</footer>

<script>


const eventCalendar = {
events: [
{ date: '2024-10-07', title: 'Book Club Meeting' },
Expand Down Expand Up @@ -319,7 +477,12 @@ <h3 id="monthAndYear"></h3>
eventCalendar.currentYear = (eventCalendar.currentMonth === 0) ? eventCalendar.currentYear + 1 : eventCalendar.currentYear;
generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
});
const hamburger = document.querySelector('.hamburger');
const navMenu = document.querySelector('nav ul');

hamburger.addEventListener('click', () => {
navMenu.classList.toggle('active');
});
generateCalendar(eventCalendar.currentMonth, eventCalendar.currentYear);
</script>
</body>
Expand Down

0 comments on commit 1bf60ae

Please sign in to comment.