HTML लॉगिन फॉर्म कोड

अनुशंसित

24 January 2025

ग्लासी लॉगिन और रजिस्टर पैनल TheDoc से

13 June 2025

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>HTML Login Form</title>
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"  />
</head>
<body>
  <div class="form-container">
    <p class="title">Login</p>
    <form class="form">
      <div class="input-group">
        <label for="username">Username</label>
        <input type="text" name="username" id="username" placeholder="">
      </div>
      <div class="input-group">
        <label for="password">Password</label>
        <input type="password" name="password" id="password" placeholder="">
        <div class="forgot">
          <a rel="noopener noreferrer" href="#">Forgot Password ?</a>
        </div>
      </div>
      <button class="sign">Sign in</button>
    </form>
    <div class="social-message">
      <div class="line"></div>
      <p class="message">Login with social accounts</p>
      <div class="line"></div>
    </div>
    <div class="social-icons">
      <button class="icon">
        <i class="fab fa-google"></i>
      </button>
      <button class="icon">
        <i class="fab fa-twitter"></i>
      </button>
    </div>
    <p class="signup">Don't have an account?
      <a href="#" class="">Sign up</a>
    </p>
  </div>
  </body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..700&display=swap');
body{
    font-family: 'Inter', sans-serif;
	overflow: hidden;
	background-color: #171717;
	display: flex;justify-content: center;
	align-items: center;
	height: 100vh;
}
.form-container {
	width: 320px;
	border-radius: 0.75rem;
	background-color: #1e2028;
	padding: 2rem;
	color: rgba(243, 244, 246, 1);
  }
  
  .title {
	text-align: center;
	font-size: 1.5rem;
	line-height: 2rem;
	font-weight: 700;
  }
  
  .form {
	margin-top: 1.5rem;
  }
  
  .input-group {
	margin-top: 0.25rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
  }
  
  .input-group label {
	display: block;
	color: rgba(156, 163, 175, 1);
	margin-bottom: 4px;
  }
  
  .input-group input {
	width: 90%;
	border-radius: 0.375rem;
	border: 1px solid rgba(55, 65, 81, 1);
	outline: 0;
	background-color: #1e2028;
	padding: 0.75rem 1rem;
	color: rgba(243, 244, 246, 1);
  }
  
  .input-group input:focus {
	border-color: rgba(167, 139, 250);
  }
  
  .forgot {
	display: flex;
	justify-content: flex-end;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(156, 163, 175,1);
	margin: 8px 0 14px 0;
  }
  
  .forgot a,.signup a {
	color: rgba(243, 244, 246, 1);
	text-decoration: none;
	font-size: 14px;
  }
  
  .forgot a:hover, .signup a:hover {
	text-decoration: underline rgba(167, 139, 250, 1);
  }
  
  .sign {
	display: block;
	width: 100%;
	background-color: rgba(167, 139, 250, 1);
	padding: 0.75rem;
	text-align: center;
	color: rgba(17, 24, 39, 1);
	border: none;
	border-radius: 0.375rem;
	font-weight: 600;
  }
  
  .social-message {
	display: flex;
	align-items: center;
	padding-top: 1rem;
  }
  
  .line {
	height: 1px;
	flex: 1 1 0%;
	background-color: rgba(55, 65, 81, 1);
  }
  
  .social-message .message {
	padding-left: 0.75rem;
	padding-right: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.25rem;
	color: rgba(156, 163, 175, 1);
  }
  
  .social-icons {
	display: flex;
	justify-content: center;
  }
  
  .social-icons .icon {
	border-radius: 0.125rem;
	padding: 0.75rem;
	border: none;
	background-color: transparent;
	margin-left: 8px;
	color: white;
	font-size: 20px;
	cursor: pointer;
  }

.signup {
	text-align: center;
	font-size: 0.75rem;
	line-height: 1rem;
	color: rgba(156, 163, 175, 1);
  }

HTML लॉगिन फॉर्म कोड

अनुशंसित

सहराविलौए द्वारा एक कोड

ग्लासी लॉगिन और रजिस्टर पैनल TheDoc से

मेटेहन द्वारा एक कोड

HTML

CSS

JS

अनुशंसित

सहराविलौए द्वारा एक कोड

ग्लासी लॉगिन और रजिस्टर पैनल TheDoc से

मेटेहन द्वारा एक कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS