Un code par securearray494

2,579 StormFallGame Suivre

Remixer Ouvrir dans l'éditeur Plein écran Discuter Publiez votre code

Recommandé

16 January 2025

Exemple de page de destination d'un site Web de film

25 June 2025

Un code de Mete

16 April 2025

Un code par hamzanramzan034

HTML

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #151515;
}

.login-container {
  background: #1b1b1b;
  padding: 40px 35px 60px;
  border-radius: 5px;
  box-shadow: inset 0 0 1px #272727;
  width: 370px;
}

h3 {
  text-align: center;
  color: #c7c7c7;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 30px;
}

.input-group {
  margin-top: 20px;
  position: relative;
}

.input-group label {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: 0.5s;
}

.input-group input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

.input-group input:focus {
  color: #339933;
  box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 255, 0, 0.1);
  background: linear-gradient(#333933, #222922);
  animation: glow 0.8s ease-out infinite alternate;
}

.input-group input:focus ~ label,
.input-group input:valid ~ label {
  top: -20px;
  left: 0;
  color: #03e9f4;
  font-size: 12px;
}

@keyframes glow {
  0% {
    border-color: #339933;
    box-shadow: 0 0 5px rgba(0, 255, 0, 0.2), inset 0 0 5px rgba(0, 0, 0, 0.1);
  }
  100% {
    border-color: #6f6;
    box-shadow: 0 0 20px rgba(0, 255, 0, 0.6), inset 0 0 10px rgba(0, 255, 0, 0.4);
  }
}

.actions {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.actions button {
  width: 100%;
  padding: 10px;
  background: linear-gradient(#333, #222);
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 30px;
  letter-spacing: 1px;
  transition: 0.5s;
}

.actions button:hover {
  background: #03e9f4;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;
}

.actions a {
  font-size: 12px;
  color: #03e9f4;
  text-decoration: none;
  margin-top: 25px;
}

.actions a:hover {
  text-decoration: underline;
}