Formulario de suscripción a boletín informativo

Publica tu código

Recomendado

11 March 2025

Formulario de inicio de sesión HTML avanzado

8 February 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;
}

Formulario de suscripción a boletín informativo

Recomendado

Formulario de inicio de sesión HTML avanzado

Información de la tarjeta

efecto revelador

index.html

styles.css

main.js

Recomendado

Formulario de inicio de sesión HTML avanzado

Información de la tarjeta

efecto revelador

index.htmlCopy

styles.cssCopy

main.js Copy

index.html

styles.css

main.js