सिम्पल लॉगिन फॉर्म

9611 webleb

Video अपना कोड प्रकाशित करें

अनुशंसित

30 November 2025

एनिमेटेड लॉगिन फॉर्म का HTML CSS कोड

14 September 2024

ग्लासमोर्फिज्म लॉगिन फॉर्म

index.html

styles.css

@import url(https://fonts.googleapis.com/css?family=Poppins:300);

body {
  background: linear-gradient(90deg, rgb(41, 87, 214) 0%, rgb(39, 6, 138) 50%);
  font-family: "Poppins";    
  display: flex;
  justify-content: center;
  align-items: center;
  height:100vh ;
}
.form {
  position: relative;
  background: #FFFFFF;
  max-width: 360px;
  padding: 45px;
  text-align: center;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
  border-radius:15px;
}
.form input {
  outline: 0;
  background: #f2f2f2;
  width: 100%;
  border: 0;
  margin: 0 0 15px;
  padding: 15px;
  box-sizing: border-box;
  font-size: 14px;
  border-radius:15px;
}
.form button {
  text-transform: uppercase;
  outline: 0;
  background: #3324be;
  width: 100%;
  border: 0;
  padding: 15px;
  color: #FFFFFF;
  font-size: 14px;
  border-radius:15px;
  -webkit-transition: all 0.3 ease;
  transition: all 0.3 ease;
  cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
  background: #2957d6;
}
.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #3324be;
  text-decoration: none;
}

सिम्पल लॉगिन फॉर्म

अनुशंसित

HTML लॉगिन फ़ॉर्म (फ़्रेंच)

एनिमेटेड लॉगिन फॉर्म का HTML CSS कोड

ग्लासमोर्फिज्म लॉगिन फॉर्म

index.html

styles.css

main.js

अनुशंसित

HTML लॉगिन फ़ॉर्म (फ़्रेंच)

एनिमेटेड लॉगिन फॉर्म का HTML CSS कोड

ग्लासमोर्फिज्म लॉगिन फॉर्म

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js