Scribd
Upload
0 views7 pages

HTML Js Css

The document outlines a simple Login/Register user interface using HTML, CSS, and JavaScript. It includes a responsive design with two forms for login and registration, along with social media login options. The JavaScript handles tab switching between the login and registration forms, enhancing user interaction.

Uploaded by

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

HTML Js Css

The document outlines a simple Login/Register user interface using HTML, CSS, and JavaScript. It includes a responsive design with two forms for login and registration, along with social media login options. The JavaScript handles tab switching between the login and registration forms, enhancing user interaction.

Uploaded by

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

HTML:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Login/Register UI</title>

<link rel="stylesheet" href="style.css"/>

</head>

<body>

<div class="container">

<div class="tabs">

<button id="loginTab" class="active">Login</button>

<button id="registerTab">Register</button>

</div>

<!-- Login Form -->

<form id="loginForm" class="form active">

<input type="email" placeholder="Email" required value="[email protected]"/>

<input type="password" placeholder="Password" required />

<button type="submit" class="btn"><i class="fa fa-sign-in-alt"></i> Login</button>

<p class="or">Or continue with</p>

<div class="socials">

<button class="social">G</button>

<button class="social">f</button>
<button class="social">t</button>

</div>

</form>

<!-- Register Form -->

<form id="registerForm" class="form">

<input type="text" placeholder="Full Name" required />

<input type="email" placeholder="Email" required />

<input type="password" placeholder="Password" required />

<input type="password" placeholder="Confirm Password" required />

<button type="submit" class="btn"><i class="fa fa-user-plus"></i> Register</button>

<p class="or">Or sign up with</p>

<div class="socials">

<button class="social">G</button>

<button class="social">f</button>

<button class="social">t</button>

</div>

</form>

</div>

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

</body>

</html>

CSS :
body {

margin: 0;

padding: 0;

font-family: 'Segoe UI', sans-serif;

background: #e0e5ec;

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

.container {

background: #e0e5ec;

padding: 30px;

border-radius: 20px;

box-shadow: 10px 10px 30px #c2c8d0, -10px -10px 30px #ffffff;

width: 300px;

.tabs {

display: flex;

justify-content: space-between;

margin-bottom: 20px;

}
.tabs button {

flex: 1;

padding: 10px;

border: none;

background: none;

font-weight: bold;

cursor: pointer;

border-radius: 10px;

transition: 0.3s;

.tabs button.active {

background: #d1d9e6;

box-shadow: inset 2px 2px 5px #bec4cb, inset -2px -2px 5px #f0f5fa;

.form {

display: none;

flex-direction: column;

.form.active {

display: flex;

}
input {

margin: 10px 0;

padding: 12px;

border-radius: 10px;

border: none;

background: #e0e5ec;

box-shadow: inset 4px 4px 6px #c8ccd1, inset -4px -4px 6px #f0f5fa;

.btn {

margin-top: 10px;

padding: 12px;

background: #e0e5ec;

border: none;

border-radius: 10px;

cursor: pointer;

font-weight: bold;

box-shadow: 6px 6px 10px #c2c8d0, -6px -6px 10px #ffffff;

transition: 0.3s;

.btn:hover {

background: #d6dce4;

}
.or {

text-align: center;

margin: 15px 0 10px;

font-size: 0.85em;

color: #666;

.socials {

display: flex;

justify-content: space-around;

.social {

width: 40px;

height: 40px;

border-radius: 50%;

border: none;

background: #e0e5ec;

box-shadow: 6px 6px 10px #c2c8d0, -6px -6px 10px #ffffff;

font-size: 1.2em;

cursor: pointer;

JAVASCRIPT:

const loginTab = document.getElementById("loginTab");


const registerTab = document.getElementById("registerTab");

const loginForm = document.getElementById("loginForm");

const registerForm = document.getElementById("registerForm");

loginTab.addEventListener("click", () => {

loginTab.classList.add("active");

registerTab.classList.remove("active");

loginForm.classList.add("active");

registerForm.classList.remove("active");

});

registerTab.addEventListener("click", () => {

registerTab.classList.add("active");

loginTab.classList.remove("active");

registerForm.classList.add("active");

loginForm.classList.remove("active");

});

Create three separate files in the same folder:

index.html

style.css

script.js

You might also like