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

fixed #241 Improve the UI of the Navbar #245 #270

Merged
merged 4 commits into from
Oct 8, 2024
Merged

fixed #241 Improve the UI of the Navbar #245 #270

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9181f9c
improved the UI of navbar and elements alignment
Aradhya-005 Oct 7, 2024
1093c49
Resolved merge conflicts in index.html and style.css
Aradhya-005 Oct 8, 2024
3c0cb26
fixed the logo alignment
Aradhya-005 Oct 8, 2024
d99305c
fixed navbar hover
Aradhya-005 Oct 8, 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
130 changes: 77 additions & 53 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,46 +109,50 @@
color:rgb(230, 166, 17); /* Green hover effect */
}
.chatbot-container {
position: fixed;
bottom: 20px; /* Adjust as needed */
right: 20px; /* Adjust as needed */
z-index: 1000; /* Ensure it appears above other elements */
position: fixed;
bottom: 20px; /* Adjust as needed */
right: 20px; /* Adjust as needed */
z-index: 1000; /* Ensure it appears above other elements */
}

.chatbot-button {
background-color: #007bff; /* Change to your preferred color */
border: none;
border-radius: 50%;
padding: 5px; /* Smaller padding */
cursor: pointer;
position: relative;
width: 50px; /* Adjusted size */
height: 50px; /* Adjusted size */
background-color: #007bff; /* Change to your preferred color */
border: none;
border-radius: 50%;
padding: 5px; /* Smaller padding */
cursor: pointer;
position: relative;
width: 50px; /* Adjusted size */
height: 50px; /* Adjusted size */
}

.chatbot-button img {
width: 30px; /* Adjusted image size */
height: 30px; /* Adjusted image size */
width: 30px; /* Adjusted image size */
height: 30px; /* Adjusted image size */
}

.tooltip-text {
display: none; /* Hide by default */
position: absolute;
bottom: 100%; /* Position above the button */
right: 200%;
transform: translateX(50%);
background-color: #333; /* Background color for tooltip */
color: #fff; /* Tooltip text color */
padding: 5px;
border-radius: 5px;
white-space: nowrap; /* Prevent text from wrapping */
display: none; /* Hide by default */
position: absolute;
bottom: 100%; /* Position above the button */
right: 50%;
transform: translateX(50%);
background-color: #333; /* Background color for tooltip */
color: #fff; /* Tooltip text color */
padding: 5px;
border-radius: 5px;
white-space: nowrap; /* Prevent text from wrapping */
}

.chatbot-button:hover .tooltip-text {
display: block; /* Show on hover */
display: block; /* Show on hover */
}
</style>

.logo{
display: flex;
flex-direction: row;
align-items: center;
}
</style>
</head>
<body class="light-mode">
<button id="scrollTopBtn" class="scroll-top-btn">
Expand Down Expand Up @@ -198,37 +202,46 @@
<script src="script.js"></script>
<header class="main-head">
<nav>
<img src="img\logo.png" id="logo-web">
<div class="logo" >
<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>

</div>
<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>
<div>
<button class="mode-toggle" id="modeToggle">
<span class="sun-icon glow">☀️</span>
</button>
</div>
</nav>
</header>
<div id="progress-bar"></div>
<!-- funcioning of progress bar -->
<script>
window.addEventListener('scroll', function() {
// Calculate the scroll progress
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight;
const scrollPercent = (scrollTop / scrollHeight) * 100;

// Update the width of the progress bar
document.getElementById('progress-bar').style.width = scrollPercent + '%';
window.addEventListener("scroll", function () {
// Calculate the scroll progress
const scrollTop =
document.documentElement.scrollTop || document.body.scrollTop;
const scrollHeight =
document.documentElement.scrollHeight -
document.documentElement.clientHeight;
const scrollPercent = (scrollTop / scrollHeight) * 100;

// Update the width of the progress bar
document.getElementById("progress-bar").style.width =
scrollPercent + "%";
});
</script>
</script>
<main>
<section class="hero">
<h2>Travel Beyond Limits</h2>
Expand Down Expand Up @@ -756,18 +769,17 @@ <h3 class="reviewer-name">Aditi Patel</h3>
<a href="chatbot.html">
<div class="fixed bottom-0 right-2 chatbot-container">
<button class="chatbot-button group">
<img class="h-20" src="chatbot.gif" alt="chatbot">
<img class="h-20" src="chatbot.gif" alt="chatbot" />
<span class="tooltip-text">
Welcome to Buddytrail! <br>
How can I help You? ^_^
Welcome to Buddytrail! <br />
How can I help You? ^_^
</span>
</button>
</div>
</a>

<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>


<footer>
<div class="footer-container">
<div class="footer-column">
Expand Down Expand Up @@ -823,6 +835,18 @@ <h2>Exclusive Deals and Offers!</h2>
<!-- this script is for twitter icon ends -->
<script>
// script.js

// change the color of navbar while scrolling to make it visible

window.addEventListener("scroll", function () {
const navbar = document.querySelector(".main-head");
if (window.scrollY > 0) {
navbar.classList.add("sticky"); // Add class when scrolled
} else {
navbar.classList.remove("sticky"); // Remove class when at the top
}
});

window.onscroll = function () {
toggleScrollTopButton();
};
Expand Down
133 changes: 60 additions & 73 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,66 +83,75 @@ button {
}
/**** MAIN PAGE ****/


/* Header Styles */
.main-head {
background: #131c27;
position: fixed; /* Fixed position at the top */
top: 0; /* Align to the top */
left: 0; /* Align to the left */
right: 0; /* Align to the right */
z-index: 5; /* Ensure it stays above other elements */
padding: 15px;
background-color: transparent; /* Set background to transparent */
color: white;
position: sticky;
top: 0%;
z-index: 5;
display: flex;
justify-content: space-between;
align-items: center;
transition: background-color 0.3s ease; /* Smooth transition for background change */
}

nav {
display: flex;
width: 90%;
margin: auto;
padding: 2rem;
min-height: 10vh;
width: 100%;
align-items: center;
flex-wrap: wrap;
justify-content: space-between; /* Distributes space between logo and menu items */
}

nav ul {
display: flex;
flex: 1 1 40rem;
justify-content: space-around;
justify-content: space-around; /* Space around the menu items */
align-items: center;
list-style: none;
margin: 0; /* Remove default margin */
padding: 0; /* Remove default padding */
gap: 20px; /* Space between menu items */
}
nav ul a{
position: relative;
text-decoration:none;
letter-spacing:0.5px;
color:#a0a0a0;


#logo {
font-family: "Pattaya", sans-serif;
font-weight: 500;
}
nav ul a:after
{
content: "";
position: absolute;
background-color: white;
height: 3px;
width: 0;
left: 0;
bottom: -10px;
transition: 0.

.mode-toggle {
display: inline-block;
margin-left: 20px; /* Space between menu items and toggle button */
background: none; /* Remove background */
border: none; /* Remove border */
cursor: pointer; /* Change cursor to pointer */
color: white; /* Text color */
font-size: 1.5em; /* Increase font size */
padding: 0; /* Remove padding */
align-self: center; /* Center align the button vertically */
}
nav ul a:hover{
color: #ffffff;

.main-head ul li {
display: inline;
}
nav ul a:hover:after{
width: 100%;

.main-head ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

#logo {
flex: 2 1 40rem;
font-family: "Pattaya", sans-serif;
font-weight: 400;
/* Optional: Add a class to change background on scroll */
.sticky {
background-color: rgba(0, 0, 0, 0.9); /* Dark background on scroll */
}

.hero {
min-height: 90vh;
min-height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.8), transparent),
url("/img/landing-page.jpg");
background-repeat: no-repeat;
Expand All @@ -158,46 +167,24 @@ nav ul a:hover:after{

.hero button {
border-radius: 1rem;

padding: 1.5rem 4rem;
background: #4c6e97;
border: none;
color: white;
font-size: 1.8rem;
cursor: pointer;
transition: background 0.6s ease-in-out;

}

.hero h3 {
font-size: 25px;
line-height: 40px;
letter-spacing: 0.7px;
padding: 5rem;
}
/* Header Styles */
.main-head {
padding: 15px;
background-color: #2C3E50;/* Header background */
color: white;
display: flex;
justify-content: space-between;
align-items: center;
}

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

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

.main-head ul li a {
color: white;
text-decoration: none;
font-weight: bold;
}

.mode-toggle {
background: none;
border: none;
cursor: pointer;
font-size: 1.5em;
color: white;
}

/* Section Styles */
.content-section {
Expand Down Expand Up @@ -1305,10 +1292,10 @@ justify-content: center;
transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

/* .navhover:hover { */
/* background-color: #3498db; Adds a blue background on hover */
/* color: white; Changes text color on hover */
/* } */
.navhover:hover {
border: 1px solid #3498db;
color: white; /* Changes text color on hover */
}

#social-icons {
display: inline-block;
Expand Down
Loading