forked from apu52/Travel_Website
-
Notifications
You must be signed in to change notification settings - Fork 0
/
login-modified.html
103 lines (100 loc) · 2.99 KB
/
login-modified.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
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" />
<title>Login</title>
<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>
<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;
function showNextImage() {
images[currentImageIndex].style.opacity = 0;
currentImageIndex = (currentImageIndex + 1) % images.length;
images[currentImageIndex].style.opacity = 1;
}
setInterval(showNextImage, 3000);
</script>
</body>
</html>