Un código de securearray494

2,147 securearray494

Abrir en el editor Publica tu código

Recomendado

25 April 2025

Un código de Metehan

19 May 2025

Interfaz de usuario de ondulación 3D

26 October 2024

Plantilla de sitio web de cartera de desarrolladores HTML CSS

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