Skip to content

Commit

Permalink
fixed issue #276
Browse files Browse the repository at this point in the history
  • Loading branch information
Nimit1775 committed Oct 8, 2024
1 parent 95b7b28 commit 53b2987
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 34 deletions.
44 changes: 27 additions & 17 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -198,24 +198,34 @@
<script src="script.js"></script>
<header class="main-head">
<nav>
<img src="img\logo.png" id="logo-web">
<h1 id="logo">BuddyTrail</h1>
<ul >
<li><a href="#home" class='navhover '>Home</a></li>
<li><a href="#locations" class='navhover '>Location</a></li>
<li><a href="#itineraries " class='navhover'>Travel Itineraries</a></li>
<li><a href="#reviews" class='navhover'>Reviews</a></li>
<li><a href="#benefits" class='navhover'>Benefits</a></li>
<li><a href="#contact" class='navhover'>Contact</a></li>
<li><a href="signUp.html" class='navhover'>Sign In</a></li>

</ul>
<!-- Toggle Button -->
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow">☀️</span>
</button>
<img src="img/logo.png" id="logo-web" alt="Logo">
<h1 id="logo">BuddyTrail</h1>
<button class="menu-toggle" aria-label="Toggle menu"></button>
<ul class="nav-list">
<li><a href="#home" class="navhover">Home</a></li>
<li><a href="#locations" class="navhover">Location</a></li>
<li><a href="#itineraries" class="navhover">Travel Itineraries</a></li>
<li><a href="#reviews" class="navhover">Reviews</a></li>
<li><a href="#benefits" class="navhover">Benefits</a></li>
<li><a href="#contact" class="navhover">Contact</a></li>
<li><a href="signUp.html" class="navhover">Sign In</a></li>
</ul>
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow">☀️</span>
</button>
</nav>
</header>
<script>
// JavaScript for toggling the navigation menu
document.addEventListener('DOMContentLoaded', () => {
const menuToggle = document.querySelector('.menu-toggle');
const navList = document.querySelector('.nav-list');

menuToggle.addEventListener('click', () => {
navList.classList.toggle('active'); // Toggle the 'active' class
});
});
</script>
</header>
<div id="progress-bar"></div>
<!-- funcioning of progress bar -->
<script>
Expand Down
111 changes: 94 additions & 17 deletions style.css
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,7 @@ nav ul a:hover:after{
justify-content: center;
align-items: center;
text-align: center;

}

.hero button {
Expand All @@ -166,26 +167,32 @@ nav ul a:hover:after{
/* Header Styles */
.main-head {
padding: 15px;
background-color: #2C3E50;/* Header background */
background-color: #2C3E50; /* Header background */
color: white;
display: flex;
justify-content: space-between;
align-items: center;
position: relative; /* Ensure it can be positioned */

}

#logo-web {
height: 50px; /* Adjust logo size as needed */
}

.main-head ul {
.nav-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: 20px;
}

.main-head ul li {
.nav-list li {
display: inline;
}

.main-head ul li a {
.nav-list li a {
color: white;
text-decoration: none;
font-weight: bold;
Expand All @@ -199,6 +206,42 @@ nav ul a:hover:after{
color: white;
}

/* Responsive Styles */
@media (max-width: 768px) {
.nav-list {
display: none; /* Hide the navigation links initially */
flex-direction: column; /* Stack vertically */
position: absolute; /* Position absolutely */
top: 75px; /* Below the header */
left: 0; /* Align to the left */
background-color: #2C3E50; /* Match header background */
width: 100%; /* Full width */
padding: 15px 0; /* Add padding */
z-index: 1000;
}

.nav-list.active {
display: flex; /* Show when active */
}

.menu-toggle {
display: block; /* Show hamburger icon on smaller screens */
font-size: 2em;
background: none;
border: none;
color: white;
z-index: 1001; /* Ensure it appears on top */
}
}

/* Hide the menu toggle on larger screens */
@media (min-width: 769px) {
.menu-toggle {
display: none; /* Hide hamburger icon on larger screens */
}
}


/* Section Styles */
.content-section {
padding: 40px;
Expand Down Expand Up @@ -600,6 +643,25 @@ body.dark-mode {
text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
.mode-toggle {
font-size: 1.2em; /* Reduce icon size */
padding: 10px; /* Reduce padding */
top: 5px; /* Adjust top position */
right: 5px; /* Adjust right position */
}
}

@media (max-width: 480px) {
.mode-toggle {
font-size: 1em; /* Further reduce icon size */
padding: 8px; /* Further reduce padding */
top: 5px;
right: 5px;
}
}

/* Section styling */
.map-section {
padding: 40px;
Expand Down Expand Up @@ -1120,7 +1182,7 @@ justify-content: center;

/* deals */
.deals-section {
padding: 90px 50px; /* modified padding */
padding: 90px 50px;
background-color: #f8f9fa;
}

Expand All @@ -1141,30 +1203,30 @@ justify-content: center;
justify-content: center;
padding: 40px 0;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 300px); /* Three equal columns */
grid-template-rows: repeat(2, auto); /* Two rows with automatic height */
gap: 30px; /* Space between grid items */
display: grid;
grid-template-columns: repeat(3, 300px); /* Default for larger screens */
gap: 30px;
}

.deal-item {
background-color: #fff;
padding: 25px 30px; /* added padding left and right*/
padding: 25px 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
max-width: 300px;
text-align: center;
color: #090f15;
transition: transform 0.4s cubic-bezier(0.30, 0.1, 0.25, 1); /* for smooth hover tranform animation*/
transition: transform 0.4s cubic-bezier(0.30, 0.1, 0.25, 1);
}

/* added hover effect */
.deal-item:hover {
transform: translateY(-10px);
cursor: pointer;
}

.deal-item h3 {
font-size: 1.5em;
font-weight: 600; /* made heading bold */
font-weight: 600;
margin-bottom: 15px;
color: #090f15;
}
Expand Down Expand Up @@ -1196,15 +1258,30 @@ justify-content: center;
.deal-item button:hover {
background-color: #218838;
}

/* Responsive adjustments */
@media (max-width: 1024px) {
.deals-list {
grid-template-columns: repeat(2, 1fr); /* Two columns for medium screens */
}
}

@media (max-width: 768px) {
.deals-list {
grid-template-columns: 1fr; /* Single column for smaller screens */
}
}

#deals {
background-color: #f9f9f9; /* Light background */
border: 1px solid #007bff; /* Blue border */
background-color: #f9f9f9;
border: 1px solid #007bff;
}

.dark-mode #deals {
background-color: #1e1e1e; /* Dark background */
border: 1px solid #0056b3; /* Darker blue border */
background-color: #1e1e1e;
border: 1px solid #0056b3;
}

/* recommendations */
.recommendations-section {
padding: 50px;
Expand Down

0 comments on commit 53b2987

Please sign in to comment.