⚙️ SSO ID लॉगिन पेज HTML/CSS
आपकी आवश्यकताओं के अनुसार, मैं आपको एक सरल SSO (Single Sign-On) ID लॉगिन पेज बनाने के लिए मूल HTML (HyperText Markup Language) और CSS (Cascading Style Sheets) कोड दे रहा हूँ।
यह कोड एक सामान्य लेआउट प्रदान करता है जिसमें SSO ID, पासवर्ड, और लॉगिन/रजिस्टर बटन जैसी मानक फ़ील्ड शामिल हैं।
💻 HTML कोड (index.html)
यह कोड पृष्ठ की संरचना (Structure) को परिभाषित करता है।
SSO ID लॉगिन
🎨 CSS कोड (style.css)
यह कोड पृष्ठ को स्टाइल (Style) और आकर्षक बनाने के लिए है। इसे ऊपर लिंक की गई style.css नाम की फ़ाइल में सहेजें।
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5; /* हल्का ग्रे बैकग्राउंड */
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
}
.login-container {
background-color: #ffffff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px; /* कंटेनर की अधिकतम चौड़ाई */
text-align: center;
}
.logo-text {
color: #0056b3; /* नीला रंग */
margin-bottom: 30px;
font-size: 24px;
font-weight: bold;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333;
font-size: 14px;
}
.input-group input {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
box-sizing: border-box; /* पैडिंग को चौड़ाई में शामिल करें */
font-size: 16px;
}
.options {
text-align: right;
margin-bottom: 25px;
}
.options a {
color: #007bff;
text-decoration: none;
font-size: 14px;
}
.options a:hover {
text-decoration: underline;
}
.login-btn {
width: 100%;
padding: 12px;
background-color: #007bff; /* प्राथमिक नीला बटन */
color: white;
border: none;
border-radius: 6px;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s;
}
.login-btn:hover {
background-color: #0056b3;
}
.register-link {
margin-top: 20px;
font-size: 14px;
}
.register-link p {
color: #666;
margin: 0;
}
.register-link a {
color: #28a745; /* हरा रंग */
text-decoration: none;
font-weight: bold;
}
.register-link a:hover {
text-decoration: underline;
}
📝 उपयोग के लिए निर्देश
* दो फ़ाइलें बनाएं:
* एक फ़ाइल को index.html नाम से सहेजें और उसमें HTML कोड डालें।
* दूसरी फ़ाइल को style.css नाम से सहेजें और उसमें CSS कोड डालें।
* दोनों फ़ाइलों को एक ही फ़ोल्डर (folder) में रखें।
* index.html फ़ाइल को अपने वेब ब्राउज़र (जैसे Chrome या Firefox) में खोलें।
आपका SSO ID लॉगिन पेज तैयार हो जाएगा।
आगे क्या करना चाहेंगे? क्या आप इसमें जावास्क्रिप्ट (JavaScript) से वैलिडेशन (Validation) या कोई खास डिज़ाइन जोड़ना चाहेंगे?
REET 2026 Mega Quiz (30 Qs) Start 30 Questions REET 2026 प्रश्न 01 RPSC / RSMSSB प्रश्न बैंक ⭐⭐⭐⭐⭐ 20 सालों के इतिहास में अधिक बार पूछे गए प्रश्न 0%
टिप्पणियाँ
एक टिप्पणी भेजें