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

feat: Login Page Responsive #1347

Merged
merged 6 commits into from
Aug 9, 2024
Merged

feat: Login Page Responsive #1347

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7373a51
Adventure page footer
TBorundia Jul 29, 2024
b7e3503
Merge branch 'main' of https://github.com/TBorundia/Travel_Website
TBorundia Aug 4, 2024
406b489
Login Page Responsive
TBorundia Aug 5, 2024
e6c44e5
Login Page Responsive
TBorundia Aug 8, 2024
4ecb83d
Revert "Adventure page footer"
TBorundia Aug 8, 2024
fd5c4d7
Merge branch 'main' of https://github.com/TBorundia/Travel_Website
TBorundia Aug 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
99 changes: 32 additions & 67 deletions Adventure.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,6 @@
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
.newNav{
opacity:1 !important;
translate: none !important;
rotate: none !important;
scale: none !important;
transform: none !important;
}



.top-btn {
display: none;
Expand Down Expand Up @@ -275,79 +266,53 @@
}
</style>

<!-- sticky animation -->
<script type="text/javascript">
window.addEventListener("scroll", function () {
var header = document.querySelector("nav");
header.classList.toggle("sticky", window.scrollY > 50)
})
</script>

</head>

<body>
<!-- <nav>
<div class="nav__logo">Tourguide<span>.</span></div>
<ul class="nav__links">
<li class="link"><a href="./index.html">Home</a></li>
<li class="link"><a href="/index.html" >AboutUs</a></li>
<li class="link"><a href="./index.html">Destinations</a></li>
<li class="link"><a href="/index.html">Pricing</a></li>
<li class="link"><a href="/index.html">Testimonials</a></li>
<li class="link"><a href="/index.html">Reviews</a></li>

<li class="link"><a href="login.html">Login</a></li>
</ul>
<a href="/index.html"><button class="btn">Contact Us</button></a>
</nav> -->
<div id="progress-container">
<div id="progress-bar"></div>
</div>

<div class="nav-container" id="top">
<nav class="newNav">
<div style="display: flex; flex-direction: row; align-items: center;">
<img src="./img/tour1.png" class="sitelogo">

<a href="#" class="nav__logo aos-init aos-animate" data-aos="fade-right">Tourguide<span>.</span></a>
</div>
<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>

<ul class="navLinks">
<li class="link aos-init aos-animate" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
<li class="link aos-init aos-animate" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
<li class="link aos-init aos-animate" data-aos=""><a href="#Home">Home</a></li>
<li class="link aos-init aos-animate" data-aos=""><a href="#AboutUs">About</a></li>
<li class="link dropdown aos-init aos-animate" data-aos="">
<a href="#Services" class="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a href="#Destinations">Destination</a></li>
<li><a href="#trip">Prices</a></li>
<li><a href="#ReviewGallery">Trip Gallery</a></li>
<li><a href="#tourist">Tourist Guide</a></li>
<li><a href="#hotel">Hotel &amp; Resort</a></li>
</ul>
<li class="link" id="View-link" data-aos=""><a href="mapa.html">View</a></li>
<li class="link" id="LogIn-link" data-aos=""><a href="newLogin.html">Log In</a></li>
<li class="link" data-aos=""><a href="#Home">Home</a></li>
<li class="link" data-aos=""><a href="#AboutUs">About</a></li>
<li class="link dropdown" data-aos="">
<a href="#Services" class="dropdown">Services</a>
<ul class="dropdown-menu">
<li><a href="#Destinations">Destination</a></li>
<li><a href="#trip">Prices</a></li>
<li><a href="#ReviewGallery">Trip Gallery</a></li>
<li><a href="#tourist">Tourist Guide</a></li>
<li><a href="#hotel">Hotel & Resort</a></li>
</ul>
</li>
<li class="link aos-init aos-animate" data-aos=""><a href="#testimonials">Testimonial</a></li>
<li class="link aos-init aos-animate" data-aos=""><a href="feedback.html">Rate Us?</a></li>
<li class="link aos-init aos-animate" data-aos=""><a href="#cnt-form">Contact Us</a></li>
</ul>

<a href="newLogin.html" class="contact-btn" id="nav-login-btn"><button class="btn login aos-init aos-animate" id="btn-style" data-aos="fade-down" style="display: block;">Login/SignUp</button></a>
<a href="mapa.html" class="contact-btn" id="nav-view-btn"><button class="btn aos-init aos-animate" id="btn-style" style="margin: 0;" data-aos="fade-down">view <map name=""></map></button></a>

<a href="loginPage.html" class="contact-btn"><button class="btn aos-init aos-animate" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled="">Log Out</button></a>

<!-- <a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
style="margin: 0; box-shadow:1.5px 1.5px 6px red;" data-aos="fade-down">Login</button></a> -->
<li class="link" data-aos=""><a href="#testimonials">Testimonial</a></li>
<li class="link" data-aos=""><a href="feedback.html">Rate Us?</a></li>
<li class="link" data-aos=""><a href="#cnt-form">Contact Us</a></li>
</ul>

<div class="toggle-container aos-init aos-animate" data-aos="fade-down">
<a href="newLogin.html" class="contact-btn" id="nav-login-btn">
<button class="btn login" id="btn-style" data-aos="fade-down">Login/SignUp</button>
</a>
<a href="mapa.html" class="contact-btn" id="nav-view-btn">
<button class="btn" id="btn-style" style="margin: 0;" data-aos="fade-down">view <map name=""></map></button>
</a>
<a href="loginPage.html" class="contact-btn">
<button class="btn" id="logout-btn" style="margin: 0; display: none;" data-aos="fade-down" disabled>Log Out</button>
</a>

<div class="toggle-container" data-aos="fade-down">
<input id="themeToggle" class="toggle" type="checkbox">
</div>
<div class="hamburger aos-init aos-animate" data-aos="fade-down">
<div class="hamburger" data-aos="fade-down">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
</div>
<section class="trip" id="trip">

<div class="section__container trip__container">
Expand Down
137 changes: 93 additions & 44 deletions login-modified.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,103 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login</title>
<link rel="stylesheet" href="login.css"/>
</head>
<body>
<link rel="stylesheet" href="login.css" />
</head>
<body>
<div class="container">
<div class="left-section">
<button class="back-button" onclick="window.location.href='index.html'"><img src="img/button.png" width="50px" height="50px"/></button>
<h1 class="animated-heading">Tourguide<span class="blinking-cursor">|</span></h1>
<p class="description">
Welcome to TourGuide, where we firmly believe that life's
true purpose unfolds amidst the thrill of exploration, the embrace of the unfamiliar, and the
pursuit of the extraordinary! Our mission is to embolden you, the intrepid traveler, to unveil this
purpose and elevate your journey by providing unparalleled assistance and guidance.
</p>
<form id="loginForm" class="login-form">
<input type="text" id="username" placeholder="Username" class="input-field">
<input type="password" id="password" placeholder="Password" class="input-field">
<button type="submit" class="submit-button">Login</button>
</form>
<p class="already-signed-up">
Not signed up? <a href="Signup.html">Sign In</a>
</p>
</div>
<div class="right-section">
<img src="./img/login1.jpg" alt="travel_pics" class="transition-image">
<img src="./img/login2.jpg" alt="travel_pics" class="transition-image">
<img src="./img/login3.jpg" alt="travel_pics" class="transition-image">
<img src="./img/login4.jpg" alt="travel_pics" class="transition-image">
<img src="./img/login5.jpg" alt="travel_pics" class="transition-image">
<img src="./img/login6.jpg" alt="travel_pics" class="transition-image">
<img src="./img/login7.jpg" alt="travel_pics" class="transition-image">
</div>
<div class="left-section">
<button class="back-button" onclick="window.location.href='index.html'">
<img src="img/button.png" width="50px" height="50px" />
</button>
<h1 class="animated-heading">
Tourguide<span class="blinking-cursor">|</span>
</h1>
<p class="description">
Welcome to TourGuide, where we firmly believe that life's true purpose
unfolds amidst the thrill of exploration, the embrace of the
unfamiliar, and the pursuit of the extraordinary! Our mission is to
embolden you, the intrepid traveler, to unveil this purpose and
elevate your journey by providing unparalleled assistance and
guidance.
</p>
<img
src="./img/login_small.jpg"
alt="travel_pics"
class="small-screen-image"
/>
<form id="loginForm" class="login-form">
<input
type="text"
id="username"
placeholder="Username"
class="input-field"
/>
<input
type="password"
id="password"
placeholder="Password"
class="input-field"
/>
<button type="submit" class="submit-button">Login</button>
</form>
<p class="already-signed-up">
Not signed up? <a href="Signup.html">Sign In</a>
</p>
</div>
<div class="right-section">
<img
src="./img/login1.jpg"
alt="travel_pics"
class="transition-image"
/>
<img
src="./img/login2.jpg"
alt="travel_pics"
class="transition-image"
/>
<img
src="./img/login3.jpg"
alt="travel_pics"
class="transition-image"
/>
<img
src="./img/login4.jpg"
alt="travel_pics"
class="transition-image"
/>
<img
src="./img/login5.jpg"
alt="travel_pics"
class="transition-image"
/>
<img
src="./img/login6.jpg"
alt="travel_pics"
class="transition-image"
/>
<img
src="./img/login7.jpg"
alt="travel_pics"
class="transition-image"
/>
</div>
</div>

<script>
const images = document.querySelectorAll('.transition-image');
let currentImageIndex = 0;
const images = document.querySelectorAll(".transition-image");
let currentImageIndex = 0;

function showNextImage() {
images[currentImageIndex].style.opacity = 0;
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.opacity = 1;
}
function showNextImage() {
images[currentImageIndex].style.opacity = 0;
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.opacity = 1;
}

setInterval(showNextImage, 3000);
setInterval(showNextImage, 3000);
</script>
</body>
</html>
</body>
</html>
Loading
Loading