Scribd
Upload
19 views

HTML

Uploaded by

kriti.2428cs2521
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
19 views

HTML

Uploaded by

kriti.2428cs2521
Copyright
© © All Rights Reserved
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 Form in HTML and CSS | CodingNepal</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="login_form">
<!-- Login form container -->
<form action="#">
<h3>Log in with</h3>

<div class="login_option">
<!-- Google button -->
<div class="option">
<a href="#">

<span>Google</span>
</a>
</div>

<!-- Apple button -->


<div class="option">
<a href="#">
<span>Apple</span>
</a>
</div>
</div>
<!-- Login option separator -->
<p class="separator">
<span>or</span>
</p>

<!-- Email input box -->


<div class="input_box">
<label for="email">Email</label>
<input type="email" id="email" placeholder="Enter email address" required />
</div>

<!-- Paswwrod input box -->


<div class="input_box">
<div class="password_title">
<label for="password">Password</label>
<a href="#">Forgot Password?</a>
</div>

<input type="password" id="password" placeholder="Enter your password" required />


</div>

<!-- Login button -->


<button type="submit">Log In</button>

<p class="sign_up">Don't have an account? <a href="#">Sign up</a></p>


</form>
</div>
</body>
</html>
CSS
/* Google Fonts Link */

@import url('https://fonts.googleapis.com/css2?
family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

*{

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Montserrat", sans-serif;

body {

width: 100%;

min-height: 100vh;

padding: 0 10px;

display: flex;

background: #626cd6;

justify-content: center;

align-items: center;

.login_form {

width: 100%;

max-width: 435px;

background: #fff;

border-radius: 6px;

padding: 41px 30px;

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);

.login_form h3 {

font-size: 20px;

text-align: center;

}
.login_form .login_option {

display: flex;

width: 100%;

justify-content: space-between;

align-items: center;

.login_form .login_option .option {

width: calc(100% / 2 - 12px);

.login_form .login_option .option a {

height: 56px;

display: flex;

justify-content: center;

align-items: center;

gap: 12px;

background: #F8F8FB;

border: 1px solid #DADAF2;

border-radius: 5px;

margin: 34px 0 24px 0;

text-decoration: none;

color: #171645;

font-weight: 500;

transition: 0.2s ease;

.login_form .login_option .option a:hover {

background: #ededf5;

border-color: #626cd6;

.login_form .login_option .option a img {


max-width: 25px;

.login_form p {

text-align: center;

font-weight: 500;

.login_form .separator {

position: relative;

margin-bottom: 24px;

.login_form .separator span {

background: #fff;

z-index: 1;

padding: 0 10px;

position: relative;

.login_form .separator::after {

content: '';

position: absolute;

width: 100%;

top: 50%;

left: 0;

height: 1px;

background: #C2C2C2;

display: block;

form .input_box label {

display: block;

font-weight: 500;
margin-bottom: 8px;

form .input_box input {

width: 100%;

height: 57px;

border: 1px solid #DADAF2;

border-radius: 5px;

outline: none;

background: #F8F8FB;

font-size: 17px;

padding: 0px 20px;

margin-bottom: 25px;

transition: 0.2s ease;

form .input_box input:focus {

border-color: #626cd6;

form .input_box .password_title {

display: flex;

justify-content: space-between;

text-align: center;

form .input_box {

position: relative;

a{

text-decoration: none;

color: #626cd6;

font-weight: 500;
}

a:hover {

text-decoration: underline;

form button {

width: 100%;

height: 56px;

border-radius: 5px;

border: none;

outline: none;

background: #626CD6;

color: #fff;

font-size: 18px;

font-weight: 500;

text-transform: uppercase;

cursor: pointer;

margin-bottom: 28px;

transition: 0.3s ease;

form button:hover {

background: #4954d0;

You might also like