Simple XML in Hindi
RGPV University / DIPLOMA_CSE / Web Technology
Simple XML in Hindi
Simple XML in Hindi
XML का पूरा नाम "eXtensible Markup Language" है। यह एक मार्कअप भाषा है जो डेटा को स्टोर करने और ट्रांसफर करने के लिए उपयोग की जाती है। XML का मुख्य उद्देश्य डेटा को एक संरचित और पठनीय रूप में प्रस्तुत करना है, ताकि इसे विभिन्न सिस्टम्स और प्लेटफॉर्म्स के बीच आसानी से साझा किया जा सके। XML का इस्तेमाल अक्सर वेब सर्विसेज, डेटा ट्रांसफर, और सॉफ़्टवेयर एप्लिकेशन्स में किया जाता है।
Structure of a Simple XML Document in Hindi
एक साधारण XML दस्तावेज़ की संरचना निम्नलिखित होती है:
- XML Declaration: XML दस्तावेज़ की शुरुआत में एक XML declaration होती है, जो दस्तावेज़ के प्रकार को निर्धारित करती है। उदाहरण के लिए:
- Root Element: XML दस्तावेज़ में एक root element होता है, जो सभी अन्य elements को समाहित करता है। उदाहरण के लिए:
- Child Elements: root element के अंदर कई child elements हो सकते हैं। उदाहरण के लिए:
XML Basics
Basic Syntax Rules of Simple XML in Hindi
XML लिखने के लिए कुछ बुनियादी नियम होते हैं जिन्हें ध्यान में रखना चाहिए:
- Case Sensitivity: XML में सभी टैग्स केस सेंसिटिव होते हैं, यानी
</code> और <code><Title></code> अलग-अलग टैग्स होते हैं।</li> <li><b>Tags:</b> XML में सभी टैग्स को angle brackets (<>) के बीच लिखा जाता है, जैसे: <code><tag></code></li> <li><b>Root Element:</b> XML दस्तावेज़ में केवल एक root element होना चाहिए, और यह सभी child elements को समाहित करता है।</li> <li><b>Well-formed XML:</b> XML को "well-formed" होना चाहिए, यानी सभी टैग्स को सही ढंग से खोला और बंद किया जाना चाहिए।</li> <li><b>Attribute Values:</b> XML में attribute values को double quotes ("") में लिखा जाता है, जैसे: <code><book title="XML Tutorial"></code></li> </ul> <h3>Creating XML Elements in Hindi</h3> <p>XML elements बनाने के लिए आपको निम्नलिखित प्रक्रिया का पालन करना होता है:</p> <ul> <li><b>Element Declaration:</b> किसी भी element को angle brackets (<>) के बीच लिखा जाता है। उदाहरण: <code><book></code></li> <li><b>Element Content:</b> किसी element के अंदर उसका content लिखा जाता है, जैसे: <code><author>John Doe</author></code></li> <li><b>Attributes:</b> XML element में attributes भी हो सकते हैं, जो उस element की विशेषताएँ बताते हैं। उदाहरण: <code><book title="XML Basics"></code></li> </ul> <h3>Simple XML Example with Explanation in Hindi</h3> <p>आइए एक सरल XML उदाहरण पर विचार करते हैं और उसे समझते हैं:</p> <code> <?xml version="1.0" encoding="UTF-8"?> <library> <book title="XML Basics"> <author>John Doe</author> <year>2023</year> </book> <book title="Advanced XML"> <author>Jane Smith</author> <year>2024</year> </book> </library> </code> <p>इस उदाहरण में:</p> <ul> <li><b>XML Declaration:</b> <code><?xml version="1.0" encoding="UTF-8"?></code> - यह XML दस्तावेज़ की शुरुआत है।</li> <li><b>Root Element:</b> <code><library></code> - यह root element है, जो सभी book elements को समाहित करता है।</li> <li><b>Child Elements:</b> <code><book></code> - प्रत्येक <code><book></code> element एक पुस्तक को दर्शाता है।</li> <li><b>Attributes:</b> <code>title="XML Basics"</code> - यह प्रत्येक <code><book></code> element का attribute है, जो पुस्तक का शीर्षक बताता है।</li> <li><b>Element Content:</b> <code><author>John Doe</author></code> और <code><year>2023</year></code> - यह प्रत्येक पुस्तक के लेखक और प्रकाशन वर्ष को दर्शाते हैं।</li> </ul> </div> <h2 id='faqs' class='faqc'>FAQs</h2> <div class='eachfaq'> <button onclick='toggleFaq("faq1")' class='faqquestion'>What is XML? (XML क्या है?)</button> <div id='faq1' class='faqanswer'> XML (eXtensible Markup Language) एक मार्कअप भाषा है जिसका उपयोग डेटा को संरचित और स्टोर करने के लिए किया जाता है। XML का उद्देश्य डेटा को पठनीय और आसानी से ट्रांसफर करने योग्य बनाना है। </div> </div> <div class='eachfaq'> <button onclick='toggleFaq("faq2")' class='faqquestion'>What are the basic syntax rules of XML? (XML के बुनियादी सिंटैक्स नियम क्या हैं?)</button> <div id='faq2' class='faqanswer'> XML में कुछ मुख्य सिंटैक्स नियम होते हैं, जैसे कि टैग्स का सही से खुलना और बंद होना, कैस सेंसिटिविटी, और attribute values को डबल कोट्स ("") में लिखना। </div> </div> <div class='eachfaq'> <button onclick='toggleFaq("faq3")' class='faqquestion'>What is the root element in XML? (XML में root element क्या है?)</button> <div id='faq3' class='faqanswer'> XML दस्तावेज़ का root element वह element होता है, जो सभी अन्य elements को समाहित करता है। एक XML दस्तावेज़ में केवल एक root element होता है। </div> </div> <div class='eachfaq'> <button onclick='toggleFaq("faq4")' class='faqquestion'>How do you create an XML element? (XML element कैसे बनाते हैं?)</button> <div id='faq4' class='faqanswer'> XML element को angle brackets (<>) के बीच लिखा जाता है, जैसे: <code><book></code>। इसके अंदर content और attributes हो सकते हैं। </div> </div> <div class='eachfaq'> <button onclick='toggleFaq("faq5")' class='faqquestion'>What is the role of attributes in XML? (XML में attributes की भूमिका क्या है?)</button> <div id='faq5' class='faqanswer'> Attributes XML elements की विशेषताएँ या गुण होते हैं, जो उस element के बारे में अतिरिक्त जानकारी प्रदान करते हैं। उदाहरण: <code><book title="XML Basics"></code>। </div> </div> <div class='eachfaq'> <button onclick='toggleFaq("faq6")' class='faqquestion'>What is a well-formed XML document? (Well-formed XML document क्या है?)</button> <div id='faq6' class='faqanswer'> एक well-formed XML दस्तावेज़ वह होता है, जिसमें सभी टैग्स सही ढंग से खुले और बंद होते हैं, और सभी नियमों का पालन किया गया हो। </div> </div></div> </article> </div> </div> <div style="display: flex; justify-content: center; align-items: center; min-height: 30vh; padding: 20px; box-sizing: border-box;"> <div style="background-color: #ffffff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); text-align: center; width: 100%; max-width: 400px; box-sizing: border-box;"> <h3 style="color: #333; margin-bottom: 20px; font-size: 1.5rem;">Please Give Us Feedback</h3> <textarea id="comment" rows="5" placeholder="Type your feedback here..." style="width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 5px; font-size: 1rem; resize: none; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1); box-sizing: border-box;"></textarea><br> <button onclick="sendWhatsApp()" style="margin-top: 15px; background-color: #25D366; color: #fff; border: none; padding: 10px 20px; border-radius: 5px; font-size: 1rem; cursor: pointer; transition: background-color 0.3s ease;">Send via WhatsApp</button> </div> </div> <script> function sendWhatsApp() { const comment = document.getElementById("comment").value.trim(); if (!comment) { alert("Please enter a comment before sending."); return; } const phoneNumber = "919009300541"; // Replace with your WhatsApp number (with country code, no +) const message = encodeURIComponent(comment); window.open(`https://wa.me/${phoneNumber}?text=${message}`, "_blank"); } </script> </main> <div class="footer-content"> <div class="footer-logo"> <img src="https://i.ibb.co/kV3rwY64/Notes-In-Hindi2-removebg-preview.png" alt="NotesInHindi Logo"> <p>Your trusted partner for learning Computer Science in Hindi and English</p> </div> <div class="footer-links"> <div class="link-group"> <h3>Quick Links</h3> <ul> <li><a href="https://notesinhindi.com/"><i class="fas fa-home"></i> Home</a></li> <li><a href="https://notesinhindi.com/courses"><i class="fas fa-graduation-cap"></i> Courses</a></li> <li><a href="https://notesinhindi.com/universities"><i class="fas fa-graduation-cap"></i> Universities</a></li> <li><a href="https://notesinhindi.com/about"><i class="fas fa-info-circle"></i> About Us</a></li> </ul> </div> <div class="link-group"> <h3>Legal</h3> <ul> <li><a href="privacy"><i class="fas fa-shield-alt"></i> Privacy Policy</a></li> <li><a href="terms"><i class="fas fa-file-contract"></i> Terms & Conditions</a></li> </ul> </div> <div class="link-group"> <h3>Contact</h3> <ul> <li><a href="mailto:contact@notesinhindi.com"><i class="fas fa-envelope"></i> contact@notesinhindi.com</a></li> <li><a href="https://notesinhindi.com/contactUs"><i class="fas fa-envelope"></i> contactUs</a></li> </ul> </div> </div> </div> <div class="footer-bottom"> <p>© 2025 NotesInHindi. All rights reserved.</p> </div> </footer> <style> :root { --primary: #6c5ce7; --primary-light: #a29bfe; --primary-dark: #5f4bd8; --text: #2d3436; --text-light: #636e72; --bg: #f0f2f5; --card-bg: #ffffff; --border: #dfe6e9; --shadow-light: 8px 8px 15px #d1d9e6; --shadow-dark: -8px -8px 15px #ffffff; } .site-footer { background: var(--bg); padding: 4rem 1rem 2rem; margin-top: 4rem; position: relative; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.05); } .footer-content { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; } .footer-logo { display: flex; flex-direction: column; align-items: flex-start; } .footer-logo img { width: 150px; height: auto; margin-bottom: 1rem; } .footer-logo p { color: var(--text-light); font-size: 0.9rem; line-height: 1.6; } .footer-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .link-group h3 { color: var(--text); font-size: 1.1rem; margin-bottom: 1.5rem; position: relative; padding-left: 1rem; } .link-group ul { list-style: none; padding: 0; margin: 0; } .link-group li { margin-bottom: 1rem; } .link-group a { color: var(--text-light); text-decoration: none; display: flex; align-items: center; gap: 0.5rem; transition: all 0.3s ease; padding: 0.5rem; border-radius: 8px; } .link-group a:hover { color: var(--primary); background: var(--card-bg); box-shadow: var(--shadow-light), var(--shadow-dark); transform: translateX(5px); } .link-group i { width: 20px; text-align: center; } .footer-bottom { max-width: 1200px; margin: 2rem auto 0; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; color: var(--text-light); font-size: 0.9rem; } /* Mobile Responsive Styles */ @media (max-width: 768px) { .footer-content { grid-template-columns: 1fr; gap: 2rem; } .footer-logo { align-items: center; text-align: center; } .footer-links { grid-template-columns: 1fr; gap: 2rem; } .link-group { text-align: center; } .link-group h3::before { left: 50%; transform: translateX(-50%); top: -10px; } .link-group a { justify-content: center; } } @media (min-width: 769px) and (max-width: 1024px) { .footer-content { gap: 2rem; } .footer-links { grid-template-columns: repeat(2, 1fr); } } </style> <script> function togglePanel(panelId) { const panel = document.getElementById(panelId); const isOpen = panel.style.right === '0px'; if (isOpen) { panel.style.right = '-100%'; document.body.style.overflow = ''; } else { // Close other panels if open document.querySelectorAll('.side-panel, .right-panel').forEach(p => { if (p.id !== panelId) { p.style.right = '-100%'; } }); panel.style.right = '0'; document.body.style.overflow = 'hidden'; } } // Handle ticket hover and touch events document.querySelectorAll('.ticket').forEach(ticket => { // Hover effect for desktop ticket.addEventListener('mouseenter', () => { if (window.innerWidth > 768) { ticket.classList.add('ticket-expanded'); } }); ticket.addEventListener('mouseleave', () => { if (window.innerWidth > 768) { ticket.classList.remove('ticket-expanded'); } }); // Touch events for mobile let touchStartTime; let touchStartX; let touchStartY; ticket.addEventListener('touchstart', (e) => { touchStartTime = new Date().getTime(); touchStartX = e.touches[0].clientX; touchStartY = e.touches[0].clientY; e.preventDefault(); }); ticket.addEventListener('touchmove', (e) => { e.preventDefault(); }); ticket.addEventListener('touchend', (e) => { const touchEndTime = new Date().getTime(); const touchEndX = e.changedTouches[0].clientX; const touchEndY = e.changedTouches[0].clientY; // Check if it's a tap (not a swipe) if (touchEndTime - touchStartTime < 300 && Math.abs(touchEndX - touchStartX) < 10 && Math.abs(touchEndY - touchStartY) < 10) { const panelId = ticket.classList.contains('related-topics-ticket') ? 'sidePanel' : 'rightPanel'; togglePanel(panelId); } e.preventDefault(); }); }); // Close panel when clicking outside document.addEventListener('click', (e) => { if (!e.target.closest('.ticket') && !e.target.closest('.side-panel') && !e.target.closest('.right-panel')) { document.querySelectorAll('.side-panel, .right-panel').forEach(panel => { panel.style.right = '-100%'; }); document.body.style.overflow = ''; } }); // Close panel when touching outside on mobile document.addEventListener('touchstart', (e) => { if (!e.target.closest('.ticket') && !e.target.closest('.side-panel') && !e.target.closest('.right-panel')) { document.querySelectorAll('.side-panel, .right-panel').forEach(panel => { panel.style.right = '-100%'; }); document.body.style.overflow = ''; } }); // Prevent body scroll when panel is open document.addEventListener('touchmove', (e) => { const panels = document.querySelectorAll('.side-panel, .right-panel'); const isPanelOpen = Array.from(panels).some(panel => panel.style.right === '0px'); if (isPanelOpen) { e.preventDefault(); } }, { passive: false }); </script> <style> .side-scroll { width: 100%; background-color: #f1f1f1; height: 87%; overflow-y: scroll; padding: 10px; box-sizing: border-box; } /* Scrollbar thoda bada और visible दिखाने के लिए */ .side-scroll::-webkit-scrollbar { width: 21px; } .side-scroll::-webkit-scrollbar-thumb { background-color: #888; border-radius: 6px; } .side-scroll::-webkit-scrollbar-thumb:hover { background-color: #555; } /* Side Panel Full Layout */ .side-panel { position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; height: 100vh; background: #ffffff; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease; z-index: 1111; display: flex; flex-direction: column; } /* Active State */ .side-panel.active { right: 0; } /* Panel Header */ .panel-header { padding: 16px; background: #f7fafc; border-bottom: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; } .panel-header h2 { margin: 0; font-size: 1.2rem; color: #1a202c; } .close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #4a5568; } /* Scrollable Content */ .side-panel-content { flex: 1; overflow-y: auto; padding: 16px; -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */ scrollbar-width: thin; /* Firefox */ scrollbar-color: #888 #f1f1f1; /* Firefox */ } /* WebKit (Chrome, Safari, Edge) */ .side-panel-content::-webkit-scrollbar { width: 20px; } .side-panel-content::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 5px; } .side-panel-content::-webkit-scrollbar-thumb { background-color: #888; border-radius: 5px; } .side-panel-content::-webkit-scrollbar-thumb:hover { background-color: #555; } /* Scrollable Link Style */ .side-panel-content p { margin: 0 0 10px; } .side-panel-content a { text-decoration: none; color: #2d3748; font-weight: 500; display: block; padding: 8px 12px; border-radius: 6px; transition: background 0.2s; } .side-panel-content a:hover { background: #f0f0f0; } /* Mobile Adjustments */ @media (max-width: 768px) { .side-panel { width: 100%; max-width: 100%; } .content { padding: 1.5rem; } .panel-header h2 { font-size: 1rem; } } /* Add these styles to your existing CSS */ .subject-panel, .topic-panel { position: fixed; top: 0; right: -100%; width: 100%; max-width: 400px; height: 100vh; background: var(--bg); box-shadow: var(--shadow-light), var(--shadow-dark); transition: right 0.3s ease; z-index: 1000; overflow-y: auto; } .subject-panel.active, .topic-panel.active { right: 0; } @media (max-width: 768px) { .subject-panel, .topic-panel { width: 100%; max-width: 100%; } } </style> <style> body{ margin: 6rem 0rem; } /* Ticket System Styling */ .ticket-container { position: fixed; right: 0; top: 90%; transform: translateY(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 10px; } .ticket { width: 100px; height: 40px; border-radius: 8px 0 0 8px; cursor: pointer; transition: all 0.3s ease; /*overflow: hidden;*/ position: relative; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); } .related-topics-ticket { background: linear-gradient(135deg, #4CAF50, #45a049); } .related-subjects-ticket { background: linear-gradient(135deg, #2196F3, #1976D2); } .ticket-content { display: flex; align-items: center; padding: 2px; color: white; width: 100px; position: absolute; right: 0; top: 0; height: 100%; transform: translateX(0px); transition: transform 0.3s ease; } .ticket-icon { font-size: 24px; margin-right: 6px; } .ticket-text { font-size: 14px; font-weight: 500; white-space: nowrap; } .ticket-expanded .ticket-content { transform: translateX(0); } /* Panel Styling */ .side-panel, .right-panel { position: fixed; top: 0; right: -100%; width: 400px; height: 100%; background: white; box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1); transition: right 0.3s ease; z-index: 1111; overflow-y: auto; } .panel-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; border-bottom: 1px solid #e2e8f0; } .panel-header h2 { margin: 0; font-size: 1.25rem; color: #1a202c; } .close-btn { background: none; border: none; font-size: 24px; cursor: pointer; color: #4a5568; padding: 5px; } .side-panel-content, .panel-content { padding: 15px; } .side-panel-content p, .panel-content p { margin-bottom: 10px; } .side-panel-content a, .panel-content a { color: #4a5568; text-decoration: none; transition: color 0.2s ease; } .side-panel-content a:hover, .panel-content a:hover { color: #3182ce; } /* Responsive Design */ @media (max-width: 768px) { .ticket { width: 60px; height: 35px; position: relative; z-index: 1001; } .ticket-icon { font-size: 11px; margin-right: 0px; } .ticket-content { width: 160px; transform: translateX(99px); } .side-panel, .right-panel { width: 100%; z-index: 1000; } .ticket-text { font-size: 12px; } /* Add touch feedback */ .ticket:active { transform: scale(0.95); } } /* Base Styles */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; } body { background-color: #f8f9fa; color: #2d3748; line-height: 1.6; } /* Typography */ h1, h2, h3, h4, h5, h6 { font-family: 'Poppins', sans-serif; color: #1a202c; line-height: 1.3; margin-bottom: 1rem; } .blog-title { font-size: 2.5rem; font-weight: 700; margin-bottom: 1.5rem; color: #1a202c; line-height: 1.2; } .blog-category { color: #4a5568; font-size: 1rem; font-weight: 500; margin-bottom: 2rem; display: block; } /* Content Styling */ .blog-content { font-size: 1.125rem; line-height: 1.8; color: #2d3748; } .blog-content p { margin-bottom: 1.5rem; color: #2d3748; } .blog-content h2 { font-size: 1.75rem; margin: 2.5rem 0 1.5rem; color: #1a202c; } .blog-content h3 { font-size: 1.5rem; margin: 2rem 0 1rem; color: #1a202c; } .blog-content ul, .blog-content ol { margin: 1.5rem 0; padding-left: 2rem; } .blog-content li { margin-bottom: 0.75rem; color: #2d3748; } /* Side Panel Styling */ .side-panel { background: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .side-panel h2 { font-size: 1.25rem; color: #1a202c; padding: 1.5rem; border-bottom: 1px solid #e2e8f0; } .side-panel-content p a { color: #4a5568; font-weight: 500; transition: color 0.2s ease; } .side-panel-content p a:hover { color: #3182ce; } /* Container Layout */ .container { max-width: 1200px; margin: 0 auto; padding: 2rem; } .content { background: #ffffff; padding: 2rem; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* Right Panel Styling */ .right-panel { background: #ffffff; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .right-panel h2 { font-size: 1.25rem; color: #1a202c; margin-bottom: 1rem; text-align: left; } .subject-name a { color: #4a5568; font-weight: 500; transition: color 0.2s ease; } .subject-name a:hover { color: #3182ce; } /* Table Styling */ table { width: 100%; font-size: calc(0.9rem + 0.3vw); border-collapse: collapse; margin: 1rem -0.5rem; background: #ffffff; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } th { background: #f7fafc; color: #1a202c; font-weight: 600; padding: calc(0.2rem - 2px); text-align: center; border-bottom: 2px solid #e2e8f0; } td { padding: 1rem calc(0.2rem - 2px); border-bottom: 1px solid #e2e8f0; text-align: center; color: #4a5568; } tr:hover { background: #f7fafc; } /* Code Block Styling (Applied Directly to the `code` Tag) */ code { display: block; /* Make the code element behave like a box */ background: #f7fafc; padding: 1.5rem; border-radius: 8px; font-family: 'Fira Code', monospace; font-size: 0.875rem; line-height: 1.6; color: #2d3748; border-left: 4px solid #3182ce; margin: 1.5rem 0; overflow-x: auto; /* Enable horizontal scrolling for long code */ border: 1px solid #e2e8f0; /* Subtle border for the box effect */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); /* Subtle shadow for depth */ white-space: pre-wrap; /* Allow code to wrap for better readability */ } /* Responsive adjustments (optional, but recommended) */ @media (max-width: 768px) { code { font-size: 0.8rem; padding: 1rem; } } @media (max-width: 576px) { code { font-size: 0.75rem; } } /* FAQ Styling */ .faqquestion { background: #f7fafc; color: #1a202c; padding: 1rem; border-radius: 6px; font-weight: 600; transition: background 0.2s ease; } .faqquestion:hover { background: #edf2f7; } .faqanswer { background: #ffffff; padding: 1.5rem; border-radius: 6px; margin-top: 0.5rem; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* Responsive Design */ @media (max-width: 768px) { .container { padding: 1rem; flex-direction: column; } .blog-title { font-size: 2rem; } .content { padding: 1.2rem; } .side-panel { width: 100%; } } /* Button Styling */ .btn { display: inline-block; padding: 0.75rem 1.5rem; background: #3182ce; color: #ffffff; border-radius: 6px; font-weight: 500; transition: background 0.2s ease; } .btn:hover { background: #2c5282; } /* Error Message Styling */ .error-message { color: #e53e3e; font-weight: 500; margin: 2rem 0; padding: 1rem; background: #fff5f5; border-radius: 6px; border-left: 4px solid #e53e3e; } </style> </body> </html>