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

Improvement done in the login page image #731

Closed
wants to merge 1 commit into from
Closed

Improvement done in the login page image #731

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ <h1>TourGuide . . .</h1>



<a href="login-modified.html" class="contact-btn"><button class="btn" id="btn-style"
<a href="newLogin.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" data-aos="fade-down">
Expand Down
11 changes: 8 additions & 3 deletions newLogin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@
.main-container {
min-height: 100vh;
min-width: 100vw;
margin-top: 50px;
background-image: url('./img/img1.jpeg');
background-position: center;
background-size: cover;
Expand All @@ -23,6 +22,8 @@
align-items: center;
}



.form-container {
display: flex;
gap: 2rem;
Expand Down Expand Up @@ -64,7 +65,6 @@
}

.content1 button {
cursor: pointer;
font-size: 1.5rem;
padding: 1rem 2rem;
border-radius: 0.5rem;
Expand All @@ -83,6 +83,11 @@
transition: all 0.2s ease-in-out;
}

.content1 .img{
width: 300px;
box-shadow: 8px 7px #0000005c;
}

.content2 {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -248,4 +253,4 @@ form > input:focus {
font-size: 1.5rem;
}

}
}
304 changes: 82 additions & 222 deletions newLogin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,149 +1,31 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Login Page</title>

<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
rel="icon"
href="img/A T logo with a white background and a square shape, connected to nature for a travel company.png"
type="image/x-icon" />
<link rel="stylesheet" href="./newLogin.css" />
<link rel="stylesheet" href="style_.css" />
<link rel="stylesheet" href="styles.css" />
</head>

<body>
<div class="main-container">
<div class="nav-container">
<nav class="newNav">
<a href="#" class="nav__logo" data-aos="fade-right"
>Tourguide<span>.</span></a
>

<ul class="navLinks">
<li class="link home" data-aos="fade-down">
<a href="index.html#Home" target="_blank"> Home</a>
</li>
<li class="link" data-aos="fade-down">
<a href="./index.html#AboutUs" target="_blank">AboutUs</a>
</li>
<li class="link" data-aos="fade-down">
<a href="./index.html#Destinations" target="_blank"
>Destinations</a
>
</li>
<li class="link" data-aos="fade-down">
<a href="./index.html#trip" target="_blank">Pricing</a>
</li>
<li class="link" data-aos="fade-down">
<a href="./index.html#ReviewGallery" target="_blank"
>Trip Gallery</a
>
</li>
<li class="link" data-aos="fade-down">
<a href="./index.html#testimonials" target="_blank"
>Testimonials</a
>
</li>
<li class="link" data-aos="fade-down">
<a href="./index.htmlfeedback.html" target="_blank">Rate Us?</a>
</li>
<li class="link" data-aos="fade-down">
<a href="./index.html#contact">Contact Us</a>
</li>
</ul>

<a href="newLogin.html" class="contact-btn"
><button
class="btn"
id="btn-style"
style="margin: 0"
data-aos="fade-down">
Login
</button></a
>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<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 rel="icon"
href="img/A T logo with a white background and a square shape, connected to nature for a travel company.png"
type="image/x-icon" />
<link rel="stylesheet" href="./newLogin.css">
<link rel="stylesheet" href="style_.css">
</head>

<div class="toggle-container" data-aos="fade-down">
<input id="themeToggle" class="toggle" type="checkbox" />
</div>
<div class="hamburger" data-aos="fade-down">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
</nav>
</div>
<div class="form-container">
<div class="content1">
<h1>Welcome Back !</h1>
<img src="\img\image.png" />
<p>
To keep connected with us please login with your personal
information.
</p>
<button type="submit">Login</button>
</div>
<div class="content2">
<h1>Create Account</h1>
<div class="icon-section">
<a
href=""
target="_blank"
style="
color: white;
text-shadow: 0px 0px 30px rgb(52, 168, 83),
0px 0px 60px rgb(52, 168, 83);
cursor: pointer;
"
><i class="fa-brands fa-google"></i
></a>
<a
href=""
target="_blank"
style="
color: #010618;
text-shadow: 0px 0px 30px #fff, 0px 0px 60px #fff;
">
<i class="fa-brands fa-github"></i
></a>
<a
href=""
target="_blank"
style="
color: rgb(19, 19, 183);
text-shadow: 0px 0px 30px #fff, 0px 0px 60px #fff;
">
<i class="fa-brands fa-facebook"></i>
</a>
<a
href=""
target="_blank"
style="
color: rgb(255, 25, 64);
text-shadow: 0px 0px 30px rgb(174, 0, 29),
0px 0px 60px rgb(174, 0, 29);
">
<i class="fa-brands fa-instagram"></i>
</a>
</div>
<p>OR</p>
<body>



<div class="main-container">
<div class="form-container">
<div class="content1">
<h1>Welcome Back !</h1>
<img src="\img\image.png">
<p>To stay connected with us, kindly login with you personal information.</p>
<a href="login-modified.html"><button type="submit">Login</button></a>
<img src="\img\image.png"style="width: 300px;box-shadow: 8px 7px #0000005c;">
<p>To keep connected with us please login with your personal information.</p>
<button type="submit">Login</button>
</div>
<div class="content2">
<h1>Create Account</h1>
Expand All @@ -161,99 +43,77 @@ <h1>Create Account</h1>
</div>
<p>OR</p>

<form action="">
<input type="text" name="" id="" placeholder="First Name" required>
<input type="text" name="" id="" placeholder="Last Name" required>
<input type="email" name="" id="" placeholder="Email" required>
<input type="password" name="" id="" placeholder="Password" required>
<input type="password" name="" id="" placeholder="Confirm Password" required>
<button type="submit" class=".content2_button">Register</button>

<form action="">
<input
type="text"
name=""
id=""
placeholder="First Name"
required />
<input type="text" name="" id="" placeholder="Last Name" required />
<input type="email" name="" id="" placeholder="Email" required />
<input
type="password"
name=""
id=""
placeholder="Password"
required />
<input
type="password"
name=""
id=""
placeholder="Confirm Password"
required />
<button type="submit" class=".content2_button">Register</button>
</form>

</form>
</div>
</div>
</div>
</div>

<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"
integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg=="
crossorigin="anonymous"
referrerpolicy="no-referrer"></script>
<script>
var tl = gsap.timeline();

tl.from(".form-container", {
opacity: 0,
delay: 0.8,
duration: 0.5,
});
tl.from(".content1 h1 , .content2 h1", {
opacity: 0,
y: 20,
duration: 0.5,
});
tl.from(".content1 p , .icon-section", {
opacity: 0,
y: 20,
duration: 0.5,
});
tl.from(".content2 p", {
opacity: 0,
y: 20,
duration: 0.5,
});
tl.from("form input", {
opacity: 0,
x: -20,
duration: 0.5,
});
tl.from("form button", {
opacity: 0,
duration: 0.5,
});
document
.getElementById("registerButton")
.addEventListener("click", function (event) {
event.preventDefault();
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
var tl = gsap.timeline();

var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var password = document.getElementById("passWord").value;
tl.from(".form-container" ,{
opacity:0,
delay:0.8,
duration:0.5,
})
tl.from(".content1 h1 , .content2 h1" , {
opacity:0,
y:20,
duration:0.5,
})
tl.from(".content1 p , .icon-section" , {
opacity:0,
y:20,
duration:0.5,
})
tl.from(".content2 p" , {
opacity:0,
y:20,
duration:0.5,
})
tl.from("form input" , {
opacity:0,
x:-20,
duration:0.5,
})
tl.from("form button" , {
opacity:0,
duration:0.5,
})
document.getElementById('registerButton').addEventListener('click', function(event) {
event.preventDefault();

if (
name.trim() === "" ||
email.trim() === "" ||
password.trim() === ""
) {
alert("Please fill out all fields.");
} else {
var emailPattern =
/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if (!emailPattern.test(email)) {
alert("Please enter valid email!");
return;
} else {
alert("Registration Successfully completed!");
window.location.href = "./index.html";
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var password = document.getElementById('passWord').value;

if (name.trim() === '' || email.trim() === '' || password.trim() === '') {
alert('Please fill out all fields.');
}
else{
var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
if(!emailPattern.test(email)){
alert("Please enter valid email!");
return;
}
else{
alert("Registration Successfully completed!");
window.location.href = './index.html';
}
}
}
});

</script>
</body>
</html>
</body>

</html>
Loading