Scribd
Upload
12 views2 pages

index

The document is an HTML template for a modern login and sign-up page. It includes forms for user registration and sign-in, social media login options, and a toggle feature to switch between the two forms. The page is styled with external CSS and utilizes Font Awesome for social media icons.

Uploaded by

vermasanchit86031
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
12 views2 pages

index

The document is an HTML template for a modern login and sign-up page. It includes forms for user registration and sign-in, social media login options, and a toggle feature to switch between the two forms. The page is styled with external CSS and utilizes Font Awesome for social media icons.

Uploaded by

vermasanchit86031
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

<!

DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="style.css">
<title>Modern Login Page | AsmrProg</title>
</head>

<body>

<div class="container" id="container">


<div class="form-container sign-up">
<form>
<h1>Create Account</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-google-plus-
g"></i></a>
<a href="#" class="icon"><i class="fa-brands
fa-facebook-f"></i></a>
<a href="#" class="icon"><i class="fa-brands
fa-github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin-
in"></i></a>
</div>
<span>or use your email for registeration</span>
<input type="text" placeholder="Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button>Sign Up</button>
</form>
</div>
<div class="form-container sign-in">
<form>
<h1>Sign In</h1>
<div class="social-icons">
<a href="#" class="icon"><i class="fa-brands fa-google-plus-
g"></i></a>
<a href="#" class="icon"><i class="fa-brands
fa-facebook-f"></i></a>
<a href="#" class="icon"><i class="fa-brands
fa-github"></i></a>
<a href="#" class="icon"><i class="fa-brands fa-linkedin-
in"></i></a>
</div>
<span>or use your email password</span>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<a href="#">Forget Your Password?</a>
<button>Sign In</button>
</form>
</div>
<div class="toggle-container">
<div class="toggle">
<div class="toggle-panel toggle-left">
<h1>Welcome Back!</h1>
<p>Enter your personal details to use all of site features</p>
<button class="hidden" id="login">Sign In</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Hello, Friend!</h1>
<p>Register with your personal details to use all of site
features</p>
<button class="hidden" id="register">Sign Up</button>
</div>
</div>
</div>
</div>

<script src="script.js"></script>
</body>

</html>

You might also like