-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path7css.html
More file actions
127 lines (127 loc) · 13.2 KB
/
Copy path7css.html
File metadata and controls
127 lines (127 loc) · 13.2 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="Backgrounds and Borders CSS tutorial with detailed English-Hindi explanation, examples, mistakes and live practice - LoOPCode"><title>7. Backgrounds and Borders - 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:28%;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>7. Backgrounds and Borders</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. background-color</h2><p><b>English:</b> Element ka background color set hota hai.</p><p><b>Hindi:</b> Element ka background color set 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">/* background-color */
.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">background-color — 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. background-image</h2><p><b>English:</b> Image ya gradient background add hota hai.</p><p><b>Hindi:</b> Image ya gradient background add 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">/* background-image */
.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">background-image — 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. background-size</h2><p><b>English:</b> Background image ka fitting behavior control hota hai.</p><p><b>Hindi:</b> Background image ka fitting behavior control 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">/* background-size */
.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">background-size — 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. background-position and repeat</h2><p><b>English:</b> Background ki location aur repetition control hoti hai.</p><p><b>Hindi:</b> Background ki location aur repetition control hoti 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">/* background-position and repeat */
.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">background-position and repeat — 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. border</h2><p><b>English:</b> Element boundary width, style aur color se banti hai.</p><p><b>Hindi:</b> Element boundary width, style aur color se banti 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">/* border */
.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">border — 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. border-radius</h2><p><b>English:</b> Corners round kiye ja sakte hain.</p><p><b>Hindi:</b> Corners round kiye ja sakte hain. 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">/* border-radius */
.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">border-radius — 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. outline</h2><p><b>English:</b> Outline layout size ko normally affect kiye bina outer line deta hai.</p><p><b>Hindi:</b> Outline layout size ko normally affect kiye bina outer line deta 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">/* outline */
.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">outline — 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>