Skip to content

Commit f86e373

Browse files
DawoodShahzad61004DawoodShahzad61004
authored
First Half - till Float
0 parents  commit f86e373

3 files changed

Lines changed: 1006 additions & 0 deletions

File tree

‎index.html‎

Lines changed: 254 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,254 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Advanced CSS Visual Diagrams</title>
7+
8+
<link rel="stylesheet" href="stylesheet.css">
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>CSS Visual Diagrams</h1>
13+
14+
<!-- 1. Centering Content -->
15+
<div class="diagram-section">
16+
<div class="diagram-title">1. Centering Content Horizontally</div>
17+
<div class="centering-demo">
18+
<div class="centered-content">
19+
Centered Content (width: 50%, margin-left: 25%)
20+
</div>
21+
<div class="centering-labels">
22+
<span>25% margin</span>
23+
<span>50% width</span>
24+
<span>25% margin</span>
25+
</div>
26+
</div>
27+
</div>
28+
29+
<!-- 2. Box Model Interactive -->
30+
<div class="diagram-section">
31+
<div class="diagram-title">2. Interactive Box Model</div>
32+
33+
<div class="controls-group">
34+
<div class="controls-title">Box Model Controls:</div>
35+
<div class="slider-container">
36+
<label>Margin: <span class="value-display" id="margin-value">15px</span></label>
37+
<input type="range" min="0" max="50" value="15" class="slider" id="margin-slider" oninput="updateBoxModel('margin', this.value, 'margin-value')">
38+
</div>
39+
<div class="slider-container">
40+
<label>Border Width: <span class="value-display" id="border-value">3px</span></label>
41+
<input type="range" min="0" max="20" value="3" class="slider" id="border-slider" oninput="updateBoxModel('border', this.value, 'border-value')">
42+
</div>
43+
<div class="slider-container">
44+
<label>Padding: <span class="value-display" id="padding-value">15px</span></label>
45+
<input type="range" min="0" max="50" value="15" class="slider" id="padding-slider" oninput="updateBoxModel('padding', this.value, 'padding-value')">
46+
</div>
47+
<button class="interactive-btn" onclick="resetBoxModel()">Reset Box Model</button>
48+
</div>
49+
50+
<div class="box-model">
51+
<div class="box-layer margin-layer" id="interactive-margin">
52+
Margin
53+
<div class="box-layer border-layer" id="interactive-border">
54+
Border
55+
<div class="box-layer padding-layer" id="interactive-padding">
56+
Padding
57+
<div class="content-layer" id="interactive-content">
58+
Content<br>(width × height)
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
</div>
64+
</div>
65+
66+
<!-- 3. CSS Specificity -->
67+
<div class="diagram-section">
68+
<div class="diagram-title">3. CSS Specificity Hierarchy</div>
69+
<div class="specificity-pyramid">
70+
<div class="specificity-level spec-important">!important (Highest Priority)</div>
71+
<div class="specificity-level spec-inline">Inline Styles</div>
72+
<div class="specificity-level spec-id">IDs (#id)</div>
73+
<div class="specificity-level spec-class">Classes (.class), Attributes, Pseudo-classes</div>
74+
<div class="specificity-level spec-element">Elements (div, p, h1...)</div>
75+
</div>
76+
</div>
77+
78+
<!-- 4. CSS Positioning -->
79+
<div class="diagram-section">
80+
<div class="diagram-title">4. CSS Positioning Types</div>
81+
<div class="positioning-demo">
82+
<div class="pos-static">Static (Default)</div>
83+
<div class="pos-relative">Relative (offset from normal position)</div>
84+
<div class="pos-absolute">Absolute (relative to parent)</div>
85+
</div>
86+
<div class="pos-fixed">Fixed (relative to viewport)</div>
87+
</div>
88+
89+
<!-- 5. Display Properties -->
90+
<div class="diagram-section">
91+
<div class="diagram-title">5. CSS Display Properties</div>
92+
<div class="display-demo">
93+
<div class="display-block">Block Element 1</div>
94+
<div class="display-block">Block Element 2</div>
95+
<div style="margin: 10px 0;">
96+
<span class="display-inline">Inline 1</span>
97+
<span class="display-inline">Inline 2</span>
98+
<span class="display-inline">Inline 3</span>
99+
</div>
100+
<div style="margin: 10px 0;">
101+
<span class="display-inline-block">Inline-Block 1</span>
102+
<span class="display-inline-block">Inline-Block 2</span>
103+
</div>
104+
</div>
105+
</div>
106+
107+
<!-- 6. Float Property -->
108+
<div class="diagram-section">
109+
<div class="diagram-title">6. CSS Float Property - Interactive</div>
110+
111+
<div class="controls-group">
112+
<div class="controls-title">Float Controls:</div>
113+
<button class="interactive-btn" onclick="setFloat('element1', 'left')">Float Element 1 Left</button>
114+
<button class="interactive-btn" onclick="setFloat('element1', 'right')">Float Element 1 Right</button>
115+
<button class="interactive-btn" onclick="setFloat('element1', 'none')">Element 1 No Float</button>
116+
<br>
117+
<button class="interactive-btn" onclick="setFloat('element2', 'left')">Float Element 2 Left</button>
118+
<button class="interactive-btn" onclick="setFloat('element2', 'right')">Float Element 2 Right</button>
119+
<button class="interactive-btn" onclick="setFloat('element2', 'none')">Element 2 No Float</button>
120+
<br>
121+
<button class="interactive-btn" onclick="toggleClear()">Toggle Clear</button>
122+
<button class="interactive-btn" onclick="resetFloat()">Reset Float Demo</button>
123+
</div>
124+
125+
<div class="float-demo" id="float-container">
126+
<div class="float-element float-left" id="element1" draggable="true">Element 1</div>
127+
<div class="float-element float-right" id="element2" draggable="true">Element 2</div>
128+
<div class="float-text">
129+
This text demonstrates how content flows around floated elements. Try changing the float properties above to see how the layout changes. Floated elements are removed from the normal document flow.
130+
</div>
131+
<div class="clear-both" id="clear-element" style="display: none;">Clear: Both (Stops wrapping)</div>
132+
</div>
133+
</div>
134+
135+
<!-- 7. Z-Index Stacking -->
136+
<div class="diagram-section">
137+
<div class="diagram-title">7. Z-Index Stacking Context - Interactive</div>
138+
139+
<div class="controls-group">
140+
<div class="controls-title">Z-Index Controls:</div>
141+
<div class="slider-container">
142+
<label>Green Layer Z-Index: <span class="value-display" id="z1-value">1</span></label>
143+
<input type="range" min="-5" max="10" value="1" class="slider" id="z1-slider" oninput="updateZIndex('z-back', this.value, 'z1-value')">
144+
</div>
145+
<div class="slider-container">
146+
<label>Orange Layer Z-Index: <span class="value-display" id="z2-value">2</span></label>
147+
<input type="range" min="-5" max="10" value="2" class="slider" id="z2-slider" oninput="updateZIndex('z-middle', this.value, 'z2-value')">
148+
</div>
149+
<div class="slider-container">
150+
<label>Red Layer Z-Index: <span class="value-display" id="z3-value">3</span></label>
151+
<input type="range" min="-5" max="10" value="3" class="slider" id="z3-slider" oninput="updateZIndex('z-front', this.value, 'z3-value')">
152+
</div>
153+
<button class="interactive-btn" onclick="randomizeZIndex()">Randomize Z-Index</button>
154+
<button class="interactive-btn" onclick="resetZIndex()">Reset Z-Index</button>
155+
</div>
156+
157+
<div class="z-index-demo" id="z-container">
158+
<div class="z-layer z-back interactive-element" id="z-back" draggable="true">
159+
Z-Index: <span id="z-back-text">1</span> (Green)
160+
</div>
161+
<div class="z-layer z-middle interactive-element" id="z-middle" draggable="true">
162+
Z-Index: <span id="z-middle-text">2</span> (Orange)
163+
</div>
164+
<div class="z-layer z-front interactive-element" id="z-front" draggable="true">
165+
Z-Index: <span id="z-front-text">3</span> (Red)
166+
</div>
167+
</div>
168+
</div>
169+
170+
171+
172+
<!-- Enhanced Interactive Demo -->
173+
<div class="diagram-section">
174+
<div class="diagram-title">8. Advanced Interactive Demo</div>
175+
176+
<div class="controls-group">
177+
<div class="controls-title">Position & Display Controls:</div>
178+
<button class="interactive-btn" onclick="changePosition('static')">Static</button>
179+
<button class="interactive-btn" onclick="changePosition('relative')">Relative</button>
180+
<button class="interactive-btn" onclick="changePosition('absolute')">Absolute</button>
181+
<button class="interactive-btn" onclick="changePosition('fixed')">Fixed</button>
182+
<br>
183+
<button class="interactive-btn" onclick="changeDisplay('block')">Block</button>
184+
<button class="interactive-btn" onclick="changeDisplay('inline-block')">Inline-Block</button>
185+
<button class="interactive-btn" onclick="changeDisplay('inline')">Inline</button>
186+
<button class="interactive-btn" onclick="changeDisplay('none')">Hide</button>
187+
</div>
188+
189+
<div class="controls-group">
190+
<div class="controls-title">Transform Controls:</div>
191+
<div class="slider-container">
192+
<label>Rotation: <span class="value-display" id="rotation-value">0°</span></label>
193+
<input type="range" min="0" max="360" value="0" class="slider" id="rotation-slider" oninput="updateTransform('rotate', this.value, 'rotation-value')">
194+
</div>
195+
<div class="slider-container">
196+
<label>Scale: <span class="value-display" id="scale-value">1</span></label>
197+
<input type="range" min="0.5" max="3" step="0.1" value="1" class="slider" id="scale-slider" oninput="updateTransform('scale', this.value, 'scale-value')">
198+
</div>
199+
<div class="slider-container">
200+
<label>Opacity: <span class="value-display" id="opacity-value">100%</span></label>
201+
<input type="range" min="0" max="100" value="100" class="slider" id="opacity-slider" oninput="updateTransform('opacity', this.value, 'opacity-value')">
202+
</div>
203+
</div>
204+
205+
<div class="controls-group">
206+
<div class="controls-title">Color & Style Controls:</div>
207+
<label>Background Color:
208+
<input type="color" value="#4caf50" onchange="changeColor('background', this.value)">
209+
</label>
210+
<label>Text Color:
211+
<input type="color" value="#ffffff" onchange="changeColor('text', this.value)">
212+
</label>
213+
<label>Border Color:
214+
<input type="color" value="#2e7d32" onchange="changeColor('border', this.value)">
215+
</label>
216+
<br>
217+
<button class="interactive-btn" onclick="applyAnimation('bounce')">Bounce</button>
218+
<button class="interactive-btn" onclick="applyAnimation('spin')">Spin</button>
219+
<button class="interactive-btn" onclick="applyAnimation('pulse')">Pulse</button>
220+
<button class="interactive-btn" onclick="applyAnimation('fade')">Fade</button>
221+
</div>
222+
223+
<div id="interactive-demo" style="background: #f5f5f5; padding: 20px; border-radius: 10px; min-height: 150px; position: relative; border: 2px solid #ddd;">
224+
<div id="demo-element" class="interactive-element" draggable="true" style="background: #4caf50; color: white; padding: 20px; border-radius: 10px; width: 200px; transition: all 0.3s;">
225+
Demo Element<br><small>Drag me around!</small>
226+
</div>
227+
</div>
228+
229+
<div class="controls-group">
230+
<div class="controls-title">Live CSS Display:</div>
231+
<div id="live-display" style="background: #e8f5e8; padding: 10px; border-radius: 5px; font-family: monospace; font-size: 0.9em;">
232+
<strong>Live CSS Values:</strong><br>
233+
Position: static<br>
234+
Display: block<br>
235+
Z-Index: auto<br>
236+
Transform: none<br>
237+
Opacity: 1
238+
</div>
239+
</div>
240+
241+
<div style="margin-top: 15px;">
242+
<button class="interactive-btn" onclick="resetElement()">Reset All</button>
243+
<button class="interactive-btn" onclick="randomizeElement()">Randomize</button>
244+
<small style="display: block; margin-top: 10px; color: #666;">
245+
💡 Keyboard Shortcuts: Ctrl+R (Reset), Ctrl+Z (Randomize Z-Index), Ctrl+F (Reset Float)
246+
</small>
247+
</div>
248+
</div>
249+
</div>
250+
251+
252+
<script src="index.js"></script>
253+
</body>
254+
</html>

0 commit comments

Comments
 (0)