-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path22css.html
More file actions
25 lines (25 loc) · 8.6 KB
/
Copy path22css.html
File metadata and controls
25 lines (25 loc) · 8.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!doctype html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="CSS for Accessibility CSS tutorial with Hindi-English explanation, mistakes and live practice - LoOPCode"><title>22. CSS for Accessibility - LoOPCode</title><script async src="https://www.googletagmanager.com/gtag/js?id=G-D0ENCWPZL9"></script><script>window.dataLayer=window.dataLayer||[];function gtag(){dataLayer.push(arguments)}gtag('js',new Date());gtag('config','G-D0ENCWPZL9');</script><style>*{box-sizing:border-box}body{margin:0;background:#f5f7fa;color:#1f2937;font-family:Poppins,Arial,sans-serif;line-height:1.7}header{background:#111827;color:white;text-align:center;padding:30px 15px;position:sticky;top:0;z-index:5}header h1{margin:0}.container{max-width:1050px;margin:auto;padding:18px}.topic{background:white;margin:24px 0;padding:25px;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 8px 25px #0001}.topic>b{background:#dbeafe;color:#1d4ed8;padding:4px 9px;border-radius:20px;font-size:12px}.topic h2{color:#2563eb}.topic pre{background:#0f172a;color:#e2e8f0;padding:15px;border-radius:10px;overflow:auto}textarea{width:100%;min-height:220px;padding:15px;background:#0b1220;color:#e2e8f0;border:1px solid #334155;border-radius:10px;font-family:monospace;resize:vertical}button{background:#2563eb;color:#fff;border:0;border-radius:9px;padding:11px 19px;font-weight:bold;margin:10px 0;cursor:pointer}iframe{width:100%;height:200px;border:1px solid #cbd5e1;border-radius:10px}.challenge{padding:14px;background:#ecfdf5;border-left:4px solid #10b981;border-radius:9px;color:#065f46}footer{text-align:center;background:#111827;color:#cbd5e1;padding:30px;margin-top:30px}@media(max-width:650px){.container{padding:9px}.topic{padding:18px}textarea,iframe{height:175px;min-height:175px}}</style></head><body><header><h1>22. CSS for Accessibility</h1><p>LoOPCode • CSS Complete Learning Chapter</p></header><main class="container"><section class="topic"><b>CONCEPT 1</b><h2>1. Color contrast</h2><p><strong>English:</strong> Color contrast is a practical CSS concept used in production websites.</p><p><strong>Hindi:</strong> Color contrast ko real projects me apply karke code ko responsive, accessible aur maintainable bana sakte ho.</p><h3>Example</h3><pre>.demo { padding: 24px; background: #dbeafe; color: #1e3a8a; border-radius: 12px; }</pre><h3>Common Mistakes</h3><ul><li>Syntax ya property value ki spelling mistake.</li><li>Unnecessary CSS complexity.</li><li>Mobile aur different screen sizes par test na karna.</li></ul><textarea id="c0"><style>
.demo{padding:25px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;border-radius:12px;text-align:center;transition:.3s}
.demo:hover{transform:translateY(-3px)}
</style>
<div class="demo">Color contrast — Practice</div></textarea><button onclick="run('c0','o0')">▶ Run Code</button><iframe id="o0"></iframe><div class="challenge"><strong>🎯 Mini Challenge:</strong> Values change karo aur output compare karo.</div></section><section class="topic"><b>CONCEPT 2</b><h2>2. Focus states</h2><p><strong>English:</strong> Focus states is a practical CSS concept used in production websites.</p><p><strong>Hindi:</strong> Focus states ko real projects me apply karke code ko responsive, accessible aur maintainable bana sakte ho.</p><h3>Example</h3><pre>.demo { padding: 24px; background: #dbeafe; color: #1e3a8a; border-radius: 12px; }</pre><h3>Common Mistakes</h3><ul><li>Syntax ya property value ki spelling mistake.</li><li>Unnecessary CSS complexity.</li><li>Mobile aur different screen sizes par test na karna.</li></ul><textarea id="c1"><style>
.demo{padding:25px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;border-radius:12px;text-align:center;transition:.3s}
.demo:hover{transform:translateY(-3px)}
</style>
<div class="demo">Focus states — Practice</div></textarea><button onclick="run('c1','o1')">▶ Run Code</button><iframe id="o1"></iframe><div class="challenge"><strong>🎯 Mini Challenge:</strong> Values change karo aur output compare karo.</div></section><section class="topic"><b>CONCEPT 3</b><h2>3. Reduced motion</h2><p><strong>English:</strong> Reduced motion is a practical CSS concept used in production websites.</p><p><strong>Hindi:</strong> Reduced motion ko real projects me apply karke code ko responsive, accessible aur maintainable bana sakte ho.</p><h3>Example</h3><pre>.demo { padding: 24px; background: #dbeafe; color: #1e3a8a; border-radius: 12px; }</pre><h3>Common Mistakes</h3><ul><li>Syntax ya property value ki spelling mistake.</li><li>Unnecessary CSS complexity.</li><li>Mobile aur different screen sizes par test na karna.</li></ul><textarea id="c2"><style>
.demo{padding:25px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;border-radius:12px;text-align:center;transition:.3s}
.demo:hover{transform:translateY(-3px)}
</style>
<div class="demo">Reduced motion — Practice</div></textarea><button onclick="run('c2','o2')">▶ Run Code</button><iframe id="o2"></iframe><div class="challenge"><strong>🎯 Mini Challenge:</strong> Values change karo aur output compare karo.</div></section><section class="topic"><b>CONCEPT 4</b><h2>4. Readable sizing</h2><p><strong>English:</strong> Readable sizing is a practical CSS concept used in production websites.</p><p><strong>Hindi:</strong> Readable sizing ko real projects me apply karke code ko responsive, accessible aur maintainable bana sakte ho.</p><h3>Example</h3><pre>.demo { padding: 24px; background: #dbeafe; color: #1e3a8a; border-radius: 12px; }</pre><h3>Common Mistakes</h3><ul><li>Syntax ya property value ki spelling mistake.</li><li>Unnecessary CSS complexity.</li><li>Mobile aur different screen sizes par test na karna.</li></ul><textarea id="c3"><style>
.demo{padding:25px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;border-radius:12px;text-align:center;transition:.3s}
.demo:hover{transform:translateY(-3px)}
</style>
<div class="demo">Readable sizing — Practice</div></textarea><button onclick="run('c3','o3')">▶ Run Code</button><iframe id="o3"></iframe><div class="challenge"><strong>🎯 Mini Challenge:</strong> Values change karo aur output compare karo.</div></section><section class="topic"><b>CONCEPT 5</b><h2>5. Hidden content</h2><p><strong>English:</strong> Hidden content is a practical CSS concept used in production websites.</p><p><strong>Hindi:</strong> Hidden content ko real projects me apply karke code ko responsive, accessible aur maintainable bana sakte ho.</p><h3>Example</h3><pre>.demo { padding: 24px; background: #dbeafe; color: #1e3a8a; border-radius: 12px; }</pre><h3>Common Mistakes</h3><ul><li>Syntax ya property value ki spelling mistake.</li><li>Unnecessary CSS complexity.</li><li>Mobile aur different screen sizes par test na karna.</li></ul><textarea id="c4"><style>
.demo{padding:25px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;border-radius:12px;text-align:center;transition:.3s}
.demo:hover{transform:translateY(-3px)}
</style>
<div class="demo">Hidden content — Practice</div></textarea><button onclick="run('c4','o4')">▶ Run Code</button><iframe id="o4"></iframe><div class="challenge"><strong>🎯 Mini Challenge:</strong> Values change karo aur output compare karo.</div></section><section class="topic"><b>CONCEPT 6</b><h2>6. ARIA relationship</h2><p><strong>English:</strong> ARIA relationship is a practical CSS concept used in production websites.</p><p><strong>Hindi:</strong> ARIA relationship ko real projects me apply karke code ko responsive, accessible aur maintainable bana sakte ho.</p><h3>Example</h3><pre>.demo { padding: 24px; background: #dbeafe; color: #1e3a8a; border-radius: 12px; }</pre><h3>Common Mistakes</h3><ul><li>Syntax ya property value ki spelling mistake.</li><li>Unnecessary CSS complexity.</li><li>Mobile aur different screen sizes par test na karna.</li></ul><textarea id="c5"><style>
.demo{padding:25px;background:linear-gradient(135deg,#2563eb,#7c3aed);color:white;border-radius:12px;text-align:center;transition:.3s}
.demo:hover{transform:translateY(-3px)}
</style>
<div class="demo">ARIA relationship — Practice</div></textarea><button onclick="run('c5','o5')">▶ Run Code</button><iframe id="o5"></iframe><div class="challenge"><strong>🎯 Mini Challenge:</strong> Values change karo aur output compare karo.</div></section></main><footer>Created by:- Dharmandra Singh</footer><script>function run(a,b){let c=document.getElementById(a).value,f=document.getElementById(b),d=f.contentDocument;d.open();d.write(c);d.close()}</script></body></html>