HTML लॉगिन पृष्ठ टेम्पलेट

1062 alejandrokundrah

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

अनुशंसित

5 February 2026

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

24 July 2025

CSS टॉगल स्विच HTML कोड

HTML

CSS

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

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

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-box {
  width: 350px;
  padding: 40px;
  background-color: #f0f0f0;
  border-radius: 20px;
  box-shadow: 
    10px 10px 20px rgba(0, 0, 0, 0.1),
    -10px -10px 20px rgba(255, 255, 255, 0.9);
}

.login-box h2 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}

.input-group {
  position: relative;
  margin-bottom: 25px;
}

.input-group input {
  width: 100%;
  padding: 15px;
  border: none;
  background-color: #f0f0f0;
  border-radius: 10px;
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9);
  outline: none;
  color: #333;
}

.input-group input::placeholder {
  color: #999;
}

button {
  width: 100%;
  padding: 15px;
  border: none;
  background-color: #4CAF50;
  color: white;
  border-radius: 10px;
  cursor: pointer;
  box-shadow: 
    5px 5px 10px rgba(0, 0, 0, 0.1),
    -5px -5px 10px rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

button:hover {
  background-color: #45a049;
}

button:active {
  box-shadow: 
    inset 3px 3px 6px rgba(0, 0, 0, 0.1),
    inset -3px -3px 6px rgba(255, 255, 255, 0.9);
}

.links {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.links a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
}

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

HTML लॉगिन पृष्ठ टेम्पलेट

अनुशंसित

वेबैक मशीन टाइम कन्वर्टर HTML

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

CSS टॉगल स्विच HTML कोड

HTML

CSS

JS

अनुशंसित

वेबैक मशीन टाइम कन्वर्टर HTML

पृष्ठभूमि छवि के साथ CSS लोडिंग एनीमेशन

CSS टॉगल स्विच HTML कोड

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS