Skip to content

Commit

Permalink
new changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Sneha6003
Sneha6003 committed Jan 17, 2024
1 parent 9c9c13b commit 03b318e
Show file tree
Hide file tree
Showing 2 changed files with 287 additions and 0 deletions.
133 changes: 133 additions & 0 deletions login.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Registration Page </title>
<meta name="viewport" content="width=device-width, initial-scale=
1.0", maximum-scale="1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<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="stylesheet" href="style.css">
</head>
<body>
<header class="registration-header">
<div class="container">
<div class="logo">
<a href="index.html">Back to Home</a>
</div>

</div>
<main>
<section class="user-container login-section--display">
<div class="registration">
<div class="grid-two--column">
<div class="form-text">
<h2>Welcome Back!</h2>
<p>To keep connected with us please login with your personal information.</p>
<button class="login-btn">Login Here</button>
</div>
<div class="registration-form">
<h2>Create Account</h2>
<div class="social-icons">
<a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank">
<i class="fa-brands fa-google"></i></a>
<a href="" target="_blank">
<i class="fa-brands fa-github"></i></a>
<a href="" target="_blank">
<i class="fa-brands fa-facebook"></i>

</a>
<a href="" target="_blank">
<i class="fa-brands fa-instagram"></i>

</a>


</div>
<p>or</p>
<form action="#">
<div class="input-field">
<label for="username">
<input type="text" name="#" id="username" placeholder="Name">
</label></div>
<div class="input-field">
<label for="Email">
<input type="email" name="#" id="Email" placeholder="Email">
</label></div>
<div class="input-field">
<label for="Password">
<input type="password" name="#" id="Password" placeholder="Password">
</label>
</div>
<div class="input-field">
<input type="submit" value="register">
</div>
</form>
</div>
</div>
</div>
<div class="login">
<div class="grid-two--column">
<div class="form-text">
<h2>Hello, Friend!</h2>
<p>Enter your personal details and start journey with us</p>
<button class="registration-btn">Register Here</button>
</div>
<div class="login-form">
<h2>Sign In</h2>
<div class="social-icons">
<a href="https://accounts.google.com/v3/signin/identifier?ifkv=ASKXGp3o7JbWY-Xl_hjXMSHncDJR5Bg1tJjR-AcPnUkBcdPTNTLi-oYd-rV3dgIaufZcXA-T1n6HuQ&flowName=GlifWebSignIn&flowEntry=ServiceLogin&dsh=S604814220%3A1705302051981588&theme=glif" target="_blank">
<i class="fa-brands fa-google"></i></a>
<a href="" target="_blank">
<i class="fa-brands fa-github"></i></a>
<a href="" target="_blank">
<i class="fa-brands fa-facebook"></i>

</a>
<a href="" target="_blank">
<i class="fa-brands fa-instagram"></i>

</a>


</div>
<p>or</p>
<form action="#">

<div class="input-field">
<label for="Email1">
<input type="email" name="#" id="Email1" placeholder="Email" >
</label></div>
<div class="input-field">
<label for="Password1">
<input type="password" name="#" id="Password1" placeholder="Password">
</label>
</div>
<div class="input-field">
<input type="submit" value="Log In">
</div>
</form>
</div>
</div>
</div>
</div>

</section>
</main>
</header>
<script>
const user_con=document.querySelector('.user-container');
const regis_btn=document.querySelector('.registration-btn');
const login_btn=document.querySelector('.login-btn');

regis_btn.addEventListener('click',()=>{
user_con.classList.add('login-section--display')

})
login_btn.addEventListener('click',()=>{
user_con.classList.remove('login-section--display')
})
</script>

</body>
</html>
154 changes: 154 additions & 0 deletions style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,154 @@
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family:'Urbanist', sans-serif;
}
:root{
--var-primary-color: #2888E8FF
}
html{
font-size:62.5%;

}
h1,h2,h3,h4{
font-family:'Lexend Deca', sans-serif;
}
h1{
font-size:4.8rem;
}
h2{
font-size:3rem;
}
p{
font-size: 1.6rem;
letter-spacing: 0.08rem;
}
button, input[type="submit"]{
border: .1rem solid #fff;
outline: none;
padding: .6rem 1.2rem;
font-size: 1.7rem;
text-transform: capitalize;
letter-spacing: 0.01rem;
background-color: transparent;
color: #fff;
cursor: pointer;
}

.registration-header{
height: 100vh;
background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),url("img/img1.jpeg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.container{
height:10vh;
width: 80%;
margin:auto;
display: flex;
justify-content: space-between;
align-items: center;

}
.logo a{
font-size: 2.4rem;
font-weight: bold;
color: #fff;
text-decoration: none;
}

main{
min-height: 80vh;
display: flex;
justify-content: center;
align-items: center;
}
.registration, .login{
min-height: 30rem;
min-width: 40vw;
background-color: aqua;
}
.grid-two--column{
display: grid;
grid-template-columns: repeat(2,1fr);
}
.form-text{
height: inherit;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-image:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.3)),url("img/img2.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
color: #fff;
padding: 3rem 2rem;
}
.form-text p{
width: 30ch;
text-align: center;
margin: 2rem 0 3rem 0;
}
.form-text button{
background-color:#fff;
color: #000;

}
.form-text button:hover{
background-color: transparent;
color: #fff;
}
.registration-form, .login-form{
width: 100%;
min-height: 45vh;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.registration-form p, .login-form p{
margin: 1rem 0 .7rem 0;
}
.social-icons{
display: flex;
gap: 1.4rem;
margin: 1.6rem 0 .6rem 0;
}
.fa-brands{
width:4rem;
height: 4rem;
border-radius: 50%;
border: 0.1rem solid #ccc;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 1.6rem;
}
input{
width: 20rem;
margin: .7rem 0;
border: none;
background-color: #e8e8e8;
padding: 1rem 1.8rem;
letter-spacing: 0.1rem;
}
input[type="submit"]{
margin-top: 1rem;
min-width: 10rem;
background-color: var(--var-primary-color);
color:#fff;
}
.registration:not(.login-section--display){
display: none;
}
.login-section--display .registration{
display: block;
}
.login-section--display .login{
display: none;
}

0 comments on commit 03b318e

Please sign in to comment.