Repository navigation
Expand file tree
/
Copy path8css.html
More file actions
127 lines (127 loc) · 13.4 KB
/
Copy path8css.html
File metadata and controls
127 lines (127 loc) · 13.4 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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta name="description" content="Display, Positioning and Overflow CSS tutorial with detailed English-Hindi explanation, examples, mistakes and live practice - LoOPCode"><title>8. Display, Positioning and Overflow - 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><link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Roboto+Mono&display=swap" rel="stylesheet"><style>*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f7fa;color:#1f2937;font-family:Poppins,sans-serif;line-height:1.7}header{background:#111827;color:#fff;padding:30px 15px;text-align:center;position:sticky;top:0;z-index:20;box-shadow:0 4px 16px #0002}header h1{margin:0;font-size:clamp(1.5rem,4vw,2.4rem)}header p{margin:6px 0;color:#cbd5e1}.progress{max-width:1050px;margin:15px auto 0;padding:0 18px}.progressbar{height:8px;background:#e5e7eb;border-radius:20px;overflow:hidden}.progressbar span{display:block;width:32%;height:100%;background:#2563eb}.container{max-width:1050px;margin:auto;padding:18px}.topic{background:#fff;margin:24px 0;padding:25px;border-radius:16px;border:1px solid #e5e7eb;box-shadow:0 8px 25px #0000000d}.badge{display:inline-block;padding:4px 9px;border-radius:20px;background:#dbeafe;color:#1d4ed8;font-size:12px;font-weight:700}.topic h2{color:#2563eb;margin:9px 0}.topic h3{font-size:16px;color:#374151;margin-bottom:6px}.codeview{background:#0f172a;color:#e2e8f0;padding:15px;border-radius:10px;overflow:auto;font-family:"Roboto Mono",monospace;font-size:13px}textarea{width:100%;min-height:220px;padding:15px;background:#0b1220;color:#e2e8f0;border:1px solid #334155;border-radius:10px;font-family:"Roboto Mono",monospace;font-size:13px;resize:vertical}button{border:0;background:#2563eb;color:#fff;padding:11px 19px;border-radius:9px;font-weight:700;cursor:pointer;margin:10px 0}button:hover{background:#1d4ed8;transform:translateY(-1px)}iframe{display:block;width:100%;height:200px;border:1px solid #cbd5e1;border-radius:10px;background:#fff}.challenge{margin-top:14px;padding:14px;background:#ecfdf5;border-left:4px solid #10b981;border-radius:9px;color:#065f46}ul{padding-left:22px}footer{text-align:center;padding:30px;background:#111827;color:#cbd5e1;margin-top:30px}@media(max-width:650px){.container{padding:9px}.topic{padding:18px}.topic p{font-size:15px}textarea,iframe{height:175px;min-height:175px}}</style></head><body><header><h1>8. Display, Positioning and Overflow</h1><p>LoOPCode • CSS Complete Learning Chapter</p></header><div class="progress"><div class="progressbar"><span></span></div></div><main class="container"><section class="topic"><div class="badge">CONCEPT 1</div><h2>1. display:block</h2><p><b>English:</b> Block element new line leta hai.</p><p><b>Hindi:</b> Block element new line leta hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* display:block */
.demo {
padding: 20px;
margin: 10px;
color: #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c0"><!DOCTYPE html>
<html><head><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></head><body>
<div class="demo">display:block — Practice Me</div>
</body></html></textarea><button onclick="runCode('c0','o0')">▶ Run Code</button><iframe id="o0"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 2</div><h2>2. display:inline and inline-block</h2><p><b>English:</b> Inline aur inline-block ka sizing behavior different hota hai.</p><p><b>Hindi:</b> Inline aur inline-block ka sizing behavior different hota hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* display:inline and inline-block */
.demo {
padding: 20px;
margin: 10px;
background: #dbeafe;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c1"><!DOCTYPE html>
<html><head><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></head><body>
<div class="demo">display:inline and inline-block — Practice Me</div>
</body></html></textarea><button onclick="runCode('c1','o1')">▶ Run Code</button><iframe id="o1"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 3</div><h2>3. position:relative</h2><p><b>English:</b> Relative positioning element ko normal flow ke reference se offset karti hai.</p><p><b>Hindi:</b> Relative positioning element ko normal flow ke reference se offset karti hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* position:relative */
.demo {
padding: 20px;
margin: 10px;
border: 2px solid #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c2"><!DOCTYPE html>
<html><head><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></head><body>
<div class="demo">position:relative — Practice Me</div>
</body></html></textarea><button onclick="runCode('c2','o2')">▶ Run Code</button><iframe id="o2"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 4</div><h2>4. position:absolute</h2><p><b>English:</b> Absolute element nearest positioned ancestor ke relative place hota hai.</p><p><b>Hindi:</b> Absolute element nearest positioned ancestor ke relative place hota hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* position:absolute */
.demo {
padding: 20px;
margin: 10px;
color: #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c3"><!DOCTYPE html>
<html><head><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></head><body>
<div class="demo">position:absolute — Practice Me</div>
</body></html></textarea><button onclick="runCode('c3','o3')">▶ Run Code</button><iframe id="o3"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 5</div><h2>5. fixed and sticky</h2><p><b>English:</b> Fixed viewport se aur sticky scroll position se related hota hai.</p><p><b>Hindi:</b> Fixed viewport se aur sticky scroll position se related hota hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* fixed and sticky */
.demo {
padding: 20px;
margin: 10px;
background: #dbeafe;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c4"><!DOCTYPE html>
<html><head><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></head><body>
<div class="demo">fixed and sticky — Practice Me</div>
</body></html></textarea><button onclick="runCode('c4','o4')">▶ Run Code</button><iframe id="o4"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 6</div><h2>6. z-index</h2><p><b>English:</b> z-index stacking order control karta hai.</p><p><b>Hindi:</b> z-index stacking order control karta hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* z-index */
.demo {
padding: 20px;
margin: 10px;
border: 2px solid #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c5"><!DOCTYPE html>
<html><head><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></head><body>
<div class="demo">z-index — Practice Me</div>
</body></html></textarea><button onclick="runCode('c5','o5')">▶ Run Code</button><iframe id="o5"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section><section class="topic"><div class="badge">CONCEPT 7</div><h2>7. overflow</h2><p><b>English:</b> Overflow extra content ka behavior control karta hai.</p><p><b>Hindi:</b> Overflow extra content ka behavior control karta hai. Is concept ko practical website me use karte waqt syntax, browser behavior aur responsive effect ko samajhna important hai.</p><h3>Syntax / Example</h3><pre class="codeview">/* overflow */
.demo {
padding: 20px;
margin: 10px;
color: #2563eb;
}</pre><h3>Correct Example</h3><p>Use the property/value according to the design requirement and keep the rule readable and reusable.</p><h3>Common Mistakes</h3><ul><li>Property name ya value ki spelling galat karna.</li><li>Selector ko unnecessarily complex banana.</li><li>Responsive screens par output test na karna.</li></ul><textarea id="c6"><!DOCTYPE html>
<html><head><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></head><body>
<div class="demo">overflow — Practice Me</div>
</body></html></textarea><button onclick="runCode('c6','o6')">▶ Run Code</button><iframe id="o6"></iframe><div class="challenge"><b>🎯 Mini Challenge:</b> Code me kam se kam 2 values change karo, output compare karo aur phir apna version banao.</div></section></main><footer>Created by:- Dharmandra Singh</footer><script>function runCode(a,b){const c=document.getElementById(a).value,f=document.getElementById(b),d=f.contentDocument||f.contentWindow.document;d.open();d.write(c);d.close()}</script></body></html>