Skip to content

Commit

Permalink
Login Page Responsive
Browse files Browse the repository at this point in the history
  • Loading branch information
@TBorundia
TBorundia committed Aug 5, 2024
2 parents b7e3503 + 17e0587 commit 406b489
Show file tree
Hide file tree
Showing 44 changed files with 3,273 additions and 521 deletions.
50 changes: 43 additions & 7 deletions Adventure.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,7 @@
<title>Arpan Codes | Tourguide</title>

<style>
html {
scroll-behavior: smooth;
}


.top-btn {
display: none;
width: 50px;
Expand Down Expand Up @@ -168,9 +165,9 @@
<style>
/* Toggle button styles */
.toggle-container {
position: fixed; /* Change this as needed for positioning */
top: 10px;
right: 10px;
/* position: fixed; Change this as needed for positioning */
/* top: 10px; */
/* right: 10px; */
}

.toggle {
Expand Down Expand Up @@ -225,6 +222,38 @@
background-color: #002152;
color: #ffffff;
}


@media screen and (max-width:390px) {
.nav__logo {
position: relative;
right: 1.9rem;
}

.contact-btn {
position: relative;
right: 2.5rem;
}

.toggle-container {
position: relative;
right: 2.5rem;

}

.toggle {
width: 130%;
}

.line {
width: 150%;
}

.hamburger {
position: relative;
right: 1rem;
}
}
</style>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
Expand All @@ -233,6 +262,13 @@
emailjs.init("WB9rAyWwwLZube-er");
})();
</script>

<style>
html {
scroll-behavior: smooth;
}
</style>

</head>

<body>
Expand Down
70 changes: 51 additions & 19 deletions Cultural_Exp.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,13 @@
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 @@ -114,6 +121,14 @@
}
</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>
Expand All @@ -131,33 +146,50 @@
</ul>
<a href="/index.html"><button class="btn">Contact Us</button></a>
</nav> -->
<div class="nav-container">
<nav class="newNav">
<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
<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>

<ul class="navLinks">
<li class="link" data-aos="fade-down"><a href="./index.html#Home">Home</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#AboutUs">AboutUs</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#Destinations">Destinations</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#trip">Pricing</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#testimonials">Testimonials</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#ReviewGallery">Reviews</a></li>
<li class="link" data-aos="fade-down"><a href="./feedback.html">Rate Us?</a></li>
<li class="link" data-aos="fade-down"><a href="./login.html">Login</a></li>
</ul>
<a href="./index.html#contact" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
data-aos="fade-down">Contact Us</button></a>
<div class="hamburger" data-aos="fade-down">
<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>
<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> -->

<div class="toggle-container aos-init aos-animate" 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="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
65 changes: 50 additions & 15 deletions HoneyMoon.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,13 @@
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 @@ -106,6 +113,13 @@
emailjs.init("WB9rAyWwwLZube-er");
})();
</script>
<!-- sticky animation -->
<script type="text/javascript">
window.addEventListener("scroll", function () {
var header = document.querySelector("nav");
header.classList.toggle("sticky", window.scrollY > 50)
})
</script>

<style>
html {
Expand All @@ -130,29 +144,50 @@
</ul>
<a href="/index.html"><button class="btn">Contact Us</button></a>
</nav> -->
<div class="nav-container">
<nav class="newNav">
<a href="#" class="nav__logo" data-aos="fade-right">Tourguide<span>.</span></a>
<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>

<ul class="navLinks">
<li class="link" data-aos="fade-down"><a href="./index.html#Home">Home</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#AboutUs">AboutUs</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#Destinations">Destinations</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#trip">Pricing</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#testimonials">Testimonials</a></li>
<li class="link" data-aos="fade-down"><a href="./index.html#ReviewGallery">Reviews</a></li>
<li class="link" data-aos="fade-down"><a href="./feedback.html">Rate Us?</a></li>
<li class="link" data-aos="fade-down"><a href="./login.html">Login</a></li>
</ul>
<a href="./index.html#contact" class="contact-btn"><button class="btn" id="btn-style" style="margin: 0;"
data-aos="fade-down">Contact Us</button></a>
<div class="hamburger" data-aos="fade-down">
<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>
<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> -->

<div class="toggle-container aos-init aos-animate" 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="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
</div>
<section class="trip" id="trip">
<div class="section__container trip__container">
<h2 class="section__title">HoneyMoon Travel</h2>
Expand Down
2 changes: 1 addition & 1 deletion Image-Gallery/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ body {
}

.footer__col h4 {
color: var(--footer-text-color);
color: #123456;
}

.footer__col p {
Expand Down
32 changes: 31 additions & 1 deletion Licensing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,12 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Licensing Page</title>

<link rel="stylesheet" href="./tnc.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Lato', sans-serif;
Expand Down Expand Up @@ -141,6 +146,31 @@ <h2 class="section-title">MIT License</h2>
SOFTWARE.</p>
</div>
<hr>
<button class="top-btn" id="goToTopBtn" onclick="goToTop()"><i class="fa-solid fa-chevron-up"
style="color: #ffffff;"></i></button>
<script>
// Get the button
var mybutton = document.getElementById("goToTopBtn");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
mybutton.style.display = "block";
} else {
mybutton.style.display = "none";
}
}

// When the user clicks on the button, scroll to the top of the document
function goToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
</script>
<footer class="copyright-footer">
<p>&copy; 2023 Arpan Chowdhury. All rights reserved.</p>
</footer>
Expand Down
Loading

0 comments on commit 406b489

Please sign in to comment.