securearray494 द्वारा एक कोड

1276 securearray494

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

13 June 2025

एक वैकल्पिक होम पेज निर्देशिका

13 October 2024

द्वारा फार्म

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

securearray494 द्वारा एक कोड

अनुशंसित

मेटेहन द्वारा एक कोड

एक वैकल्पिक होम पेज निर्देशिका

द्वारा फार्म

HTML

CSS

JS

अनुशंसित

मेटेहन द्वारा एक कोड

एक वैकल्पिक होम पेज निर्देशिका

द्वारा फार्म

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS