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

Add files via upload #21

Open
wants to merge 1 commit into
base: Login-&-Signup
Choose a base branch
from
Open

Add files via upload #21

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
Binary file added icon/letter-b.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
46 changes: 46 additions & 0 deletions login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href="icon\letter-b.png" type="image/x-icon">
<link rel="stylesheet" href="style.css">
<title>Login To Booking.com</title>

</head>
<body>
<div id="navbar">
<h3>Booking.com</h3>

<img src="https://q-xx.bstatic.com/backend_static/common/flags/new/48-squared/in.png" alt="help_icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" fill="rgba(255,255,255,1)"/></svg>

</div>

<div id="main_container">
<h2>Login To Your Account</h2>
<!-- <p id="email_font">Enter Details Here</p> -->
<!-- <input type="text" class="input_box" placeholder="Enter First Name">
<input type="text" class="input_box" placeholder="Enter Last Name ">
<input type="tell" class="input_box" placeholder="Mobile"> -->
<input type="email" name="" class="input_box" placeholder="Enter Email">
<input type="password" name="" class="input_box" placeholder="Password">
<button id="register_button">SignUp</button>
<p>New To Booking.com ? <span><a href="signup.html">Create New Account</a></span></p>
<!-- <a href=""><p>Already have an Account ?</p></a>
<p class="tc">By signing in or creating an account, you agree with our <span><a href="https://www.booking.com/content/terms.en-gb.html?aid=304142">Terms & conditions</a></span> and <span><a href="https://www.booking.com/content/privacy.en-gb.html?aid=304142">Privacy statement</a></span></p> -->
<p class="tc">All rights reserved.</p>
<p class="tc1">Copyright (2006 - 2022) - Booking.com™</p>

</div>

</body>
</html>
<script src="login.html"></script>
Empty file added login.js
View file
Open in desktop
Empty file.
47 changes: 47 additions & 0 deletions signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!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">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxygen:wght@700&display=swap" rel="stylesheet">
<title>Signup to Booking.com</title>
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="icon\letter-b.png" type="image/x-icon">
<style>

</style>
</head>
<body>
<div id="navbar">
<h3>Booking.com</h3>

<img src="https://q-xx.bstatic.com/backend_static/common/flags/new/48-squared/in.png" alt="help_icon">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm0-2a8 8 0 1 0 0-16 8 8 0 0 0 0 16zm-1-5h2v2h-2v-2zm2-1.645V14h-2v-1.5a1 1 0 0 1 1-1 1.5 1.5 0 1 0-1.471-1.794l-1.962-.393A3.501 3.501 0 1 1 13 13.355z" fill="rgba(255,255,255,1)"/></svg>

</div>

<div id="main_container">
<h2>Sign in or create an account</h2>
<!-- <p id="email_font">Enter Details Here</p> -->
<input id="firstName" type="text" class="input_box" placeholder="Enter First Name">
<input id="lastName" type="text" class="input_box" placeholder="Enter Last Name ">
<input id="mobile" type="tell" class="input_box" placeholder="Mobile">
<input id="email" type="email" name="" class="input_box" placeholder="Enter Email">
<input id="password" type="password" name="" class="input_box" placeholder="Password">
<button id="register_button" onclick="register()">SignUp</button>
<a href="login.html"><p>Already have an Account ?</p></a>
<p class="tc">By signing in or creating an account, you agree with our <span><a href="https://www.booking.com/content/terms.en-gb.html?aid=304142">Terms & conditions</a></span> and <span><a href="https://www.booking.com/content/privacy.en-gb.html?aid=304142">Privacy statement</a></span></p>
<p class="tc">All rights reserved.</p>
<p class="tc1">Copyright (2006 - 2022) - Booking.com™</p>

</div>

</body>
</html>
<script src="signup.html"></script>
17 changes: 17 additions & 0 deletions signup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@


function register() {
e.preventDefault();
let userData_arr = localStorage.getItem(JSON.parse(userData_arr)) || [] ;
let userData = {
firstName : document.getElementById("firstName").value,
lastName : document.getElementById("lastName").value,
mobile : document.getElementById("mobile").value,
email : document.getElementById("email").value,
password : document.getElementById("password").value
}
userData.push(userData_arr);
console.log(userData)
localStorage.setItem(JSON.stringify(userData_arr));

}
160 changes: 160 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@

/* ------------------------------------------------------------- login page --------------------------------------------------------------- */


#navbar {
display: flex;
margin: 0;
padding: 0;
box-sizing: border-box;
width: auto;
/* height: 70px; */
background-color: #003680 ;
justify-content: space-around;
align-items: center;
font-family: 'Oxygen', sans-serif;

}
#navbar>h3{
color: white;
}
#navbar>img{
width: 20px;
height: 20px;
}
#main_container{
display: grid;
width: 25%;
/* height: 600px; */
/* border: 1px solid blue; */
margin: auto;
margin-top: 10px;
text-align: center;
grid-template-columns: 400px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 50px;
font-family: 'Oxygen', sans-serif;

}
.input_box{
height: 38px;
color: black;
font-family: 'Oxygen', sans-serif;
}
#register_button{
color: white;
background-color: #0070c2;
height: 46px;
border: 0px;
border-radius: 3px;
font-family: 'Oxygen', sans-serif;
}
#register_button:hover{
color: white;
background-color: #00487a;
height: 46px;
border: 0px;
border-radius: 3px;
font-family: 'Oxygen', sans-serif;
cursor: pointer;
}

#email_font{
margin-bottom: -5px;
margin-right: 297px;
}
.tc{
font-size: small;
}
.tc1{
font-size: small;
margin-top: -22px;
}
#navbar>img{
border-radius: 50%;
margin-left: 700px;
margin-right: -250px;
}

/* ----------------------------------------------------signup page --------------------------------------------------------- */




#navbar {
display: flex;
margin: 0;
padding: 0;
box-sizing: border-box;
width: auto;
/* height: 70px; */
background-color: #003680 ;
justify-content: space-around;
align-items: center;
font-family: 'Oxygen', sans-serif;

}
#navbar>h3{
color: white;
}
#navbar>img{
width: 20px;
height: 20px;
}
#main_container{
display: grid;
width: 25%;
/* height: 600px; */
/* border: 1px solid blue; */
margin: auto;
margin-top: 10px;
text-align: center;
grid-template-columns: 400px;
align-items: center;
justify-content: center;
gap: 10px;
padding: 50px;
font-family: 'Oxygen', sans-serif;

}
.input_box{
height: 38px;
color: black;
font-family: 'Oxygen', sans-serif;
}
#register_button{
color: white;
background-color: #0070c2;
height: 46px;
border: 0px;
border-radius: 3px;
font-family: 'Oxygen', sans-serif;
}
#register_button:hover{
color: white;
background-color: #00487a;
height: 46px;
border: 0px;
border-radius: 3px;
font-family: 'Oxygen', sans-serif;
cursor: pointer;
}

#email_font{
margin-bottom: -5px;
margin-right: 297px;
}
.tc{
font-size: small;
}
.tc1{
font-size: small;
margin-top: -22px;
}
#navbar>img{
border-radius: 50%;
margin-left: 700px;
margin-right: -250px;
}