Skip to content

Commit 33c9713

Browse files
Dun-sinDun-sin
committed
docs: add comment to sections
1 parent 70c3a8f commit 33c9713

File tree

2 files changed

+112
-61
lines changed

2 files changed

+112
-61
lines changed

‎index.html‎

Lines changed: 102 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,16 @@ <h1 id="head">Code Magic</h1>
9292
<ul id="category">
9393
<li id="gradient" class="dropdown">
9494
<div>
95-
<iconify-icon
96-
inline
97-
icon="ri:gradienter-fill"
98-
style="color: white"
99-
width="20"
100-
height="20"
101-
></iconify-icon>
102-
<span> Gradient Generators </span>
95+
<div>
96+
<iconify-icon
97+
inline
98+
icon="ri:gradienter-fill"
99+
style="color: white"
100+
width="20"
101+
height="20"
102+
></iconify-icon>
103+
<span> Gradient Generators </span>
104+
</div>
103105
<iconify-icon
104106
inline
105107
icon="material-symbols:arrow-drop-down-rounded"
@@ -137,14 +139,16 @@ <h1 id="head">Code Magic</h1>
137139

138140
<li id="shadows" class="dropdown">
139141
<div>
140-
<iconify-icon
141-
inline
142-
icon="vaadin:square-shadow"
143-
style="color: white"
144-
width="20"
145-
height="20"
146-
></iconify-icon>
147-
<span>Shadow Generators</span>
142+
<div>
143+
<iconify-icon
144+
inline
145+
icon="vaadin:square-shadow"
146+
style="color: white"
147+
width="20"
148+
height="20"
149+
></iconify-icon>
150+
<span>Shadow Generators</span>
151+
</div>
148152
<iconify-icon
149153
inline
150154
icon="material-symbols:arrow-drop-down-rounded"
@@ -180,14 +184,16 @@ <h1 id="head">Code Magic</h1>
180184

181185
<li id="animation" class="dropdown">
182186
<div>
183-
<iconify-icon
184-
inline
185-
icon="material-symbols:animation"
186-
style="color: white"
187-
width="20"
188-
height="20"
189-
></iconify-icon>
190-
<span>Animation</span>
187+
<div>
188+
<iconify-icon
189+
inline
190+
icon="material-symbols:animation"
191+
style="color: white"
192+
width="20"
193+
height="20"
194+
></iconify-icon>
195+
<span>Animation</span>
196+
</div>
191197
<iconify-icon
192198
inline
193199
icon="material-symbols:arrow-drop-down-rounded"
@@ -214,14 +220,16 @@ <h1 id="head">Code Magic</h1>
214220

215221
<li id="border" class="dropdown">
216222
<div>
217-
<iconify-icon
218-
inline
219-
icon="cil:color-border"
220-
style="color: white"
221-
width="20"
222-
height="20"
223-
></iconify-icon>
224-
<span>Border Generators</span>
223+
<div>
224+
<iconify-icon
225+
inline
226+
icon="cil:color-border"
227+
style="color: white"
228+
width="20"
229+
height="20"
230+
></iconify-icon>
231+
<span>Border Generators</span>
232+
</div>
225233
<iconify-icon
226234
inline
227235
icon="material-symbols:arrow-drop-down-rounded"
@@ -261,14 +269,16 @@ <h1 id="head">Code Magic</h1>
261269

262270
<li id="input" class="dropdown">
263271
<div>
264-
<iconify-icon
265-
inline
266-
icon="material-symbols:input"
267-
style="color: white"
268-
width="20"
269-
height="20"
270-
></iconify-icon>
271-
<span>Input Generators</span>
272+
<div>
273+
<iconify-icon
274+
inline
275+
icon="material-symbols:input"
276+
style="color: white"
277+
width="20"
278+
height="20"
279+
></iconify-icon>
280+
<span>Input Generators</span>
281+
</div>
272282
<iconify-icon
273283
inline
274284
icon="material-symbols:arrow-drop-down-rounded"
@@ -294,14 +304,16 @@ <h1 id="head">Code Magic</h1>
294304
</li>
295305
<li id="random" class="dropdown">
296306
<div>
297-
<iconify-icon
298-
inline
299-
icon="game-icons:perspective-dice-six-faces-random"
300-
style="color: white"
301-
width="20"
302-
height="20"
303-
></iconify-icon>
304-
<span>Random Generators</span>
307+
<div>
308+
<iconify-icon
309+
inline
310+
icon="game-icons:perspective-dice-six-faces-random"
311+
style="color: white"
312+
width="20"
313+
height="20"
314+
></iconify-icon>
315+
<span>Random Generators</span>
316+
</div>
305317
<iconify-icon
306318
inline
307319
icon="material-symbols:arrow-drop-down-rounded"
@@ -348,8 +360,11 @@ <h1 id="head">Code Magic</h1>
348360
</footer>
349361
</nav>
350362
</header>
363+
<!-- End of Side Bar -->
351364

365+
<!-- Main Page -->
352366
<main>
367+
<!-- Home Page -->
353368
<section id="home-page">
354369
<h1>
355370
All in one <span>styling</span> tool for <span>Developers</span>.
@@ -366,7 +381,11 @@ <h2>
366381
Your browser does not support the video tag.
367382
</video>
368383
</section>
384+
<!-- End of Home Page -->
385+
386+
<!-- Generator Tools -->
369387
<section id="generator">
388+
<!-- Sign for opening result section -->
370389
<div class="open">
371390
<p>Open Previous Results➡️</p>
372391
<div class="open-sidebar">
@@ -380,6 +399,9 @@ <h2>
380399
<span class="tooltip">Open</span>
381400
</div>
382401
</div>
402+
<!-- End of sign for opening result section -->
403+
404+
<!-- Input for Generators -->
383405
<div class="generators">
384406
<!-- Pic Text -->
385407
<div data-content="pic-text">
@@ -388,6 +410,7 @@ <h2>
388410
</div>
389411
<div class="btn" data-button="pic-text">Get Results</div>
390412
</div>
413+
<!-- End of Pic Text -->
391414

392415
<!-- Gradient Text -->
393416
<div data-content="gradient-text">
@@ -456,6 +479,7 @@ <h2>
456479

457480
<div class="btn" data-button="gradient-text">Get Results</div>
458481
</div>
482+
<!-- End of Gradient Text -->
459483

460484
<!-- Gradient Border -->
461485
<div data-content="gradient-border">
@@ -535,6 +559,7 @@ <h2>
535559

536560
<div class="btn" data-button="gradient-border">Get Result</div>
537561
</div>
562+
<!-- End of Gradient Border -->
538563

539564
<!-- Gradient Background -->
540565
<div data-content="gradient-background">
@@ -598,6 +623,7 @@ <h2>
598623

599624
<div class="btn" data-button="gradient-background">Get Result</div>
600625
</div>
626+
<!-- End of Gradient Background -->
601627

602628
<!-- Animation -->
603629
<div data-content="animation">
@@ -674,8 +700,9 @@ <h2>
674700

675701
<div class="btn" data-button="animation">Get Results</div>
676702
</div>
703+
<!-- End of Animation -->
677704

678-
<!-- border radius generator -->
705+
<!-- Border Radius -->
679706
<div data-content="border-radius">
680707
<div class="border-radius-preview-box">
681708
<div class="preview"></div>
@@ -713,6 +740,7 @@ <h2>
713740

714741
<div class="btn" data-button="border-radius">Get Results</div>
715742
</div>
743+
<!-- End of Border Radius -->
716744

717745
<!-- Box Shadow -->
718746
<div data-content="box-shadow">
@@ -798,8 +826,9 @@ <h2>
798826

799827
<div class="btn" data-button="box-shadow">Get Results</div>
800828
</div>
829+
<!-- End of Box Shadown -->
801830

802-
<!-- Text shadow generator -->
831+
<!-- Text Shadow Generator -->
803832
<div data-content="text-shadow">
804833
<div class="preview-slider"></div>
805834

@@ -873,7 +902,9 @@ <h2>
873902

874903
<div class="btn" data-button="text-shadow">Get Results</div>
875904
</div>
905+
<!-- End of Text Shadow Generator -->
876906

907+
<!-- Input Type Range Generator -->
877908
<div data-content="input-range">
878909
<div>
879910
<p>Preview</p>
@@ -1027,8 +1058,11 @@ <h2>
10271058
Get Code
10281059
</div>
10291060
</div>
1061+
<!-- End of Input Type Range Generator -->
10301062
</div>
1063+
<!-- End of Input for Generators -->
10311064

1065+
<!-- Result from Generators -->
10321066
<div class="side-results">
10331067
<div class="header">
10341068
<div class="close-sideBar">
@@ -1044,7 +1078,8 @@ <h2>
10441078
</div>
10451079
<h2>Results</h2>
10461080
</div>
1047-
<!-- Pic Text -->
1081+
1082+
<!-- Pic Text Result -->
10481083
<div class="download-output" data-result="pic-text">
10491084
<div class="output"></div>
10501085
<div class="download-btn">
@@ -1080,8 +1115,9 @@ <h2>Results</h2>
10801115
</button>
10811116
</div>
10821117
</div>
1118+
<!-- End of Pic Text Result -->
10831119

1084-
<!-- Gradient Text -->
1120+
<!-- Gradient Text Result -->
10851121
<div class="download-output" data-result="gradient-text">
10861122
<div class="output"></div>
10871123

@@ -1118,8 +1154,9 @@ <h2>Results</h2>
11181154
</button>
11191155
</div>
11201156
</div>
1157+
<!-- End of Gradient Text Result -->
11211158

1122-
<!-- Gradient Border -->
1159+
<!-- Gradient Border Result -->
11231160
<div class="download-output" data-result="gradient-border">
11241161
<div class="output gradient-border"></div>
11251162
<div class="download-btn">
@@ -1134,8 +1171,9 @@ <h2>Results</h2>
11341171
</button>
11351172
</div>
11361173
</div>
1174+
<!-- End of Gradient Border Result -->
11371175

1138-
<!-- Gradient Background -->
1176+
<!-- Gradient Background Result -->
11391177
<div class="download-output" data-result="gradient-background">
11401178
<div class="output"></div>
11411179
<div class="download-btn">
@@ -1150,8 +1188,9 @@ <h2>Results</h2>
11501188
</button>
11511189
</div>
11521190
</div>
1191+
<!-- End of Gradient Background Result -->
11531192

1154-
<!-- Animation -->
1193+
<!-- Animation Result -->
11551194
<div class="download-output" data-result="animation">
11561195
<div class="output"></div>
11571196
<div class="download-btn">
@@ -1166,8 +1205,9 @@ <h2>Results</h2>
11661205
</button>
11671206
</div>
11681207
</div>
1208+
<!-- End of Animation Result -->
11691209

1170-
<!-- border radius -->
1210+
<!-- Border Radius Result -->
11711211
<div class="download-output" data-result="border-radius">
11721212
<div class="output"></div>
11731213
<div class="download-btn">
@@ -1182,8 +1222,9 @@ <h2>Results</h2>
11821222
</button>
11831223
</div>
11841224
</div>
1225+
<!-- End of Border Radius Result -->
11851226

1186-
<!-- Box-Shadow -->
1227+
<!-- Box-Shadow Result -->
11871228
<div class="download-output" data-result="box-shadow">
11881229
<div class="output box-shadow"></div>
11891230
<div class="download-btn">
@@ -1198,8 +1239,9 @@ <h2>Results</h2>
11981239
</button>
11991240
</div>
12001241
</div>
1242+
<!-- End of Box-Shadow Result -->
12011243

1202-
<!-- Text shadow -->
1244+
<!-- Text Shadow Result -->
12031245
<div class="download-output" data-result="text-shadow">
12041246
<div class="output"></div>
12051247

@@ -1236,8 +1278,10 @@ <h2>Results</h2>
12361278
</button>
12371279
</div>
12381280
</div>
1281+
<!-- End Text Shadow Result -->
12391282
</div>
12401283
</section>
1284+
<!-- End of Generator Tools -->
12411285
</main>
12421286
</body>
12431287
</html>

‎src/style.css‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -96,13 +96,19 @@ nav ul {
9696
list-style: none;
9797
}
9898

99-
.dropdown > div {
99+
.dropdown {
100+
display: flex;
101+
justify-content: center;
102+
}
103+
104+
.dropdown div {
100105
display: flex;
101106
align-items: center;
102107
cursor: pointer;
108+
justify-content: space-between;
103109
}
104110

105-
.dropdown > div > iconify-icon:first-of-type {
111+
.dropdown > div iconify-icon:first-of-type {
106112
margin-right: 5px;
107113
}
108114

@@ -113,7 +119,8 @@ nav ul {
113119
}
114120

115121
.dropdown > ul {
116-
transition: 200ms transform;
122+
transition: 350ms transform;
123+
transition-timing-function: ease-in-out;
117124
}
118125

119126
.dropdown:hover > ul,

0 commit comments

Comments
 (0)