Skip to content

Commit

Permalink
Merge pull request #1029 from RadhikaMalpani1702/main
Browse files Browse the repository at this point in the history 
feat: Added a Back-To Home Button on The Login Page
  • Loading branch information
@apu52
apu52 authored Jul 19, 2024
2 parents afba26b + a13d5a0 commit c503159
Show file tree
Hide file tree
Showing 2 changed files with 108 additions and 97 deletions.
50 changes: 31 additions & 19 deletions newLogin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@
align-items: center;
}

.back-to-home {
display: flex;
align-items: center;
text-decoration: none;
color: white;
}

.back-to-home svg {
margin-right: 8px;
margin-left: 500px;
}

.form-container {
display: flex;
gap: 2rem;
Expand All @@ -31,7 +43,7 @@
color: white;
backdrop-filter: blur(8px);
padding: 2rem 1rem;
background-color: rgba(44, 57, 104,0.2);
background-color: rgba(44, 57, 104, 0.2);
border-radius: 20px;
}

Expand All @@ -49,9 +61,10 @@
.content1 h1 {
font-weight: 700;
font-size: 4rem;
text-shadow: 0px 0px 20px #010618 , 0px 0px 40px #010618;
text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618;
text-align: center;
position: relative;

}

.content1 p {
Expand All @@ -60,7 +73,7 @@
color: white;
opacity: 1;
font-weight: 600;
text-shadow: 0px 0px 20px #010618 , 0px 0px 40px #010618;
text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618;
}

.content1 button {
Expand Down Expand Up @@ -94,7 +107,7 @@
.content2 h1 {
font-size: 3rem;
font-weight: 700;
text-shadow: 0px 0px 20px #010618 , 0px 0px 40px #010618;
text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618;
text-align: center;
position: relative;
}
Expand All @@ -115,7 +128,7 @@
color: white;
font-weight: 600;
text-align: center;
text-shadow: 0px 0px 20px #010618 , 0px 0px 40px #010618;
text-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618;
}

.icon-section a {
Expand All @@ -132,19 +145,19 @@
border-radius: 3px;
width: 50%;
left: 50%;
transform: translate(-50% , -50%);
transform: translate(-50%, -50%);
bottom: 0;
background-color: #6cffb8;
}

.content1 h1::before , .content2 h1::before {
.content1 h1::before, .content2 h1::before {
position: absolute;
content: '';
height: 3px;
border-radius: 3px;
width: 60%;
left: 50%;
transform: translate(-50% , -50%);
transform: translate(-50%, -50%);
bottom: -10px;
background-color: #6cffb8;
}
Expand All @@ -162,7 +175,7 @@ form {
gap: 1rem;
}

form>input {
form > input {
font-size: 1.3rem;
padding: 0.5rem 0.5rem;
width: 20rem;
Expand Down Expand Up @@ -196,26 +209,26 @@ form > input:focus {
transition: transform 0.2s ease-in-out;
}

.content2 button:hover{
.content2 button:hover {
box-shadow: 0px 0px 0px #2c3968;
transform: translate(7px , 7px);
transform: translate(7px, 7px);
transition: all 0.2s ease-in-out;
}

@media screen and (max-width : 815px){
@media screen and (max-width: 815px) {
.form-container {
flex-direction: column;
}

.content1 , .content2 {
box-shadow: 0px 0px 20px #010618 , 0px 0px 40px #010618;
.content1, .content2 {
box-shadow: 0px 0px 20px #010618, 0px 0px 40px #010618;
padding: 2rem 0rem;
border-radius: 10px;
}
}

@media screen and (max-width : 510px){
.content1 h1 , .content2 h1 {
@media screen and (max-width: 510px) {
.content1 h1, .content2 h1 {
font-size: 2rem;
}

Expand All @@ -237,7 +250,7 @@ form > input:focus {
text-decoration: none;
}

form>input {
form > input {
font-size: 1rem;
padding: 0.5rem 0.5rem;
width: 14rem;
Expand All @@ -247,5 +260,4 @@ form > input:focus {
.content2 p {
font-size: 1.5rem;
}

}
}
155 changes: 77 additions & 78 deletions newLogin.html
View file
Original file line number Diff line number Diff line change
@@ -1,96 +1,95 @@
<!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>Tourguide</title>
<link rel="icon" type="image/x-icon" href="log/favicon.ico">
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./login/login.css">
</head>
<body>
<div class="main-container">
<div class="container" id="container">
<div class="form-container register-container">
<form action="#" id="registerForm">
<h1>Tour Guide</h1>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<div id="register-section">
<input type="password" placeholder="Password" id="registerPassword">
<button type="button" id="toggleRegisterPassword">
<i id="registerIcon" class="fas fa-eye"></i>
</button>
</div>
<button type="submit">Register</button>
<span id="registerMessage" style="display: none;">Account created successfully</span>
<div class="social-container">
<a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
<a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>

<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>TOUR GUIDE</title>
<link rel="icon" type="image/x-icon" href="log/favicon.ico">
<link href="https://cdn.lineicons.com/4.0/lineicons.css" rel="stylesheet" />
<script src="https://kit.fontawesome.com/f2e55912f8.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="./login/login.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container register-container">
<form action="#" id="registerForm">
<h1>Tour Guide</h1>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">

<div id="register-section">
<input type="password" placeholder="Password" id="registerPassword">
<button type="button" id="toggleRegisterPassword">
<i id="registerIcon" class="fas fa-eye"></i>
<div class="form-container login-container">
<form action="#" id="loginForm">

<h1><a style="margin-right: 300px;" href="index.html" class="back-to-home">

<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24" height="24" viewBox="0 0 24 24">
<path d="M19 12H5M5 12L12 19M5 12L12 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</a>Tour Guide</h1>
<input type="email" placeholder="Email">
<div id="login-section">
<input type="password" placeholder="Password" id="loginPassword">
<button type="button" id="toggleLoginPassword">
<i id="loginIcon" class="fas fa-eye"></i>
</button>
</div>

<button type="submit">Register</button>
<span id="registerMessage" style="display: none;">Account created successfully</span>
<div class="social-container">
<a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
<a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>

<div class="form-container login-container">
<form action="#" id="loginForm">
<h1>Tour Guide</h1>
<input type="email" placeholder="Email">
<div id="login-section">
<input type="password" placeholder="Password" id="loginPassword">
<button type="button" id="toggleLoginPassword">
<i id="loginIcon" class="fas fa-eye"></i>
</button>
</div>
<div class="content">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox">
<label>Remember me</label>
<div class="content">
<div class="checkbox">
<input type="checkbox" name="checkbox" id="checkbox">
<label>Remember me</label>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
</div>
</div>
<div class="pass-link">
<a href="#">Forgot password?</a>
<button type="submit">Login</button>
<span>or use your account</span>
<div class="social-container">
<a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
<a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</div>
<button type="submit">Login</button>
<span>or use your account</span>
<div class="social-container">
<a href="www.facebook.com" class="social"><i class="lni lni-facebook-fill"></i></a>
<a href="www.google.com" class="social"><i class="lni lni-google"></i></a>
<a href="www.linkedin.com" class="social"><i class="lni lni-linkedin-original"></i></a>
</div>
</form>
</div>
<!-- Back to Home Button -->

</form>
</div>

<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1 class="title">Hello <br> friends</h1>
<p>if you have an account, login here and have fun</p>
<button class="ghost" id="login">Login
<i class="lni lni-arrow-left login"></i>
</button>
</div>
<div class="overlay-panel overlay-right">
<h1 class="title">Start your <br> journey now</h1>
<p>if you don't have an account yet, join us and start your journey.</p>
<button class="ghost" id="register">Register
<i class="lni lni-arrow-right register"></i>
</button>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1 class="title">Hello <br> friends</h1>
<p>if you have an account, login here and have fun</p>
<button class="ghost" id="login">Login
<i class="lni lni-arrow-left login"></i>
</button>
</div>
<div class="overlay-panel overlay-right">
<h1 class="title">Start your <br> journey now</h1>
<p>if you don't have an account yet, join us and start your journey.</p>
<button class="ghost" id="register">Register
<i class="lni lni-arrow-right register"></i>
</button>
</div>
</div>
</div>
</div>

</div>
<script src="login\script.js"></script>
<script>
Expand All @@ -105,4 +104,4 @@ <h1 class="title">Start your <br> journey now</h1>
});
</script>
</body>
</html>
</html>

0 comments on commit c503159

Please sign in to comment.