न्यूजलेटर सब्सक्रिप्शन फॉर्म

अनुशंसित

22 June 2025

body{
  height: 100vh;
  background: #07306f;
}
.form {
  background-image: linear-gradient( 96.5deg,  rgba(39,103,187,1) 10.4%, rgba(16,72,144,1) 87.7% );
  padding: 20px;
  border-radius: 10px;
  max-width: 450px;
}
.title {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
}
.description {
  font-size: 1rem;
  margin-top: 1rem;
  color: rgb(209 213 219);
}
.form div {
  display: flex;
  margin-top: 1rem;
  column-gap: 0.5rem;
}
.form div input {
  outline: none;
  line-height: 1.5rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 );
  padding: 0.5rem 0.875rem;
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgba(253, 253, 253, 0.363);
  border-radius: 0.375rem;
  flex: 1 1 auto;
}
.form div input::placeholder {
  color: rgb(216, 212, 212);
}
.form div input:focus {
  border: 1px solid rgb(99 102 241);
}
.form div button {
  color: #fff;
  font-weight: 600;
  line-height: 1.25rem;
  padding: 0.625rem 0.875rem;
  background-color: rgb(75, 77, 219);
  border-radius: 0.375rem;
  border: none;
  outline: none;
}

न्यूजलेटर सब्सक्रिप्शन फॉर्म

अनुशंसित

HTML लॉगिन फॉर्म उदाहरण

3डी फॉर्म

मॉडर्न लॉगिन फॉर्म

index.html

styles.css

main.js

अनुशंसित

HTML लॉगिन फॉर्म उदाहरण

3डी फॉर्म

मॉडर्न लॉगिन फॉर्म

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js