Skip to content

Commit de52cb4

Browse files
Dun-sinDun-sin
committed
feat: remove video in home page
1 parent 33c9713 commit de52cb4

File tree

3 files changed

+54
-67
lines changed

3 files changed

+54
-67
lines changed

‎assets/CodeMagic.mp4‎

-88.7 KB
Binary file not shown.

‎index.html‎

Lines changed: 46 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -376,10 +376,6 @@ <h2>
376376
<br />
377377
and more for your applications <span>With Just One Click</span>
378378
</h2>
379-
<video autoplay muted loop>
380-
<source src="./assets/CodeMagic.mp4" type="video/mp4" />
381-
Your browser does not support the video tag.
382-
</video>
383379
</section>
384380
<!-- End of Home Page -->
385381

@@ -405,9 +401,9 @@ <h2>
405401
<div class="generators">
406402
<!-- Pic Text -->
407403
<div data-content="pic-text">
408-
<div>
404+
<label for="pic-text-file">
409405
<input type="file" id="pic-text-file" required />
410-
</div>
406+
</label>
411407
<div class="btn" data-button="pic-text">Get Results</div>
412408
</div>
413409
<!-- End of Pic Text -->
@@ -683,7 +679,7 @@ <h2>
683679
value="3"
684680
/>
685681
</label>
686-
<label id="degree">
682+
<label id="degree" for="animation-degree">
687683
<span class="label-title">
688684
<span class="title-display">Angle</span>
689685
<span class="unit-display animation">deg</span>
@@ -707,34 +703,42 @@ <h2>
707703
<div class="border-radius-preview-box">
708704
<div class="preview"></div>
709705
<div class="border-range-inputs">
710-
<input
711-
type="range"
712-
max="100"
713-
min="0"
714-
id="border-radius-top"
715-
class="border-radius-inputs"
716-
/>
717-
<input
718-
type="range"
719-
max="100"
720-
min="0"
721-
id="border-radius-left"
722-
class="border-radius-inputs"
723-
/>
724-
<input
725-
type="range"
726-
max="100"
727-
min="0"
728-
id="border-radius-right"
729-
class="border-radius-inputs"
730-
/>
731-
<input
732-
type="range"
733-
max="100"
734-
min="0"
735-
id="border-radius-bottom"
736-
class="border-radius-inputs"
737-
/>
706+
<label for="border-radius-top">
707+
<input
708+
type="range"
709+
max="100"
710+
min="0"
711+
id="border-radius-top"
712+
class="border-radius-inputs"
713+
/>
714+
</label>
715+
<label for="border-radius-left">
716+
<input
717+
type="range"
718+
max="100"
719+
min="0"
720+
id="border-radius-left"
721+
class="border-radius-inputs"
722+
/>
723+
</label>
724+
<label for="border-radius-right">
725+
<input
726+
type="range"
727+
max="100"
728+
min="0"
729+
id="border-radius-right"
730+
class="border-radius-inputs"
731+
/>
732+
</label>
733+
<label for="border-radius-bottom">
734+
<input
735+
type="range"
736+
max="100"
737+
min="0"
738+
id="border-radius-bottom"
739+
class="border-radius-inputs"
740+
/>
741+
</label>
738742
</div>
739743
</div>
740744

@@ -760,7 +764,7 @@ <h2>
760764

761765
<div class="degrees">
762766
<div class="degrees-row">
763-
<label id="degree">
767+
<label id="degree" for="box-shadow-h-offset">
764768
<span>
765769
<span>Horizontal</span>
766770
<span id="box-shadow-h-offset-field">5px</span>
@@ -775,7 +779,7 @@ <h2>
775779
/>
776780
</label>
777781

778-
<label id="degree">
782+
<label id="degree" for="box-shadow-v-offset">
779783
<span>
780784
<span>Vertical</span>
781785
<span id="box-shadow-v-offset-field">5px</span>
@@ -792,7 +796,7 @@ <h2>
792796
</div>
793797
<hr class="divider" />
794798
<div class="degrees-row">
795-
<label id="degree">
799+
<label id="degree" for="box-shadow-blur">
796800
<span>
797801
<span>Blur</span>
798802
<span id="box-shadow-blur-field">5px</span>
@@ -807,7 +811,7 @@ <h2>
807811
/>
808812
</label>
809813

810-
<label id="degree">
814+
<label id="degree" for="box-shadow-spread">
811815
<span>
812816
<span>Spread</span>
813817
<span id="box-shadow-spread-field">5px</span>
@@ -883,7 +887,7 @@ <h2>
883887
</div>
884888
<hr class="divider" />
885889
<div class="degrees-row">
886-
<label id="degree">
890+
<label id="degree" for="text-shadow-blur">
887891
<span>
888892
<span>Blur</span>
889893
<span id="text-shadow-blur-field">5px</span>
@@ -906,10 +910,10 @@ <h2>
906910

907911
<!-- Input Type Range Generator -->
908912
<div data-content="input-range">
909-
<div>
913+
<label for="preview-range">
910914
<p>Preview</p>
911915
<input type="range" min="3" max="20" name="" id="preview-range" />
912-
</div>
916+
</label>
913917

914918
<!-- Color for track and thumbs -->
915919
<div class="colors">

‎src/style.css‎

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -134,14 +134,14 @@ nav ul {
134134
margin-top: 20px;
135135
display: flex;
136136
flex-direction: column;
137+
gap: 5px;
137138
}
138139

139140
#category > li {
140141
font-size: 0.8rem;
141142
padding-left: 0.2rem;
142143
display: flex;
143144
flex-direction: column;
144-
gap: 20px;
145145
}
146146

147147
#category ul {
@@ -156,7 +156,6 @@ nav ul {
156156
align-items: center;
157157
border-radius: 3px;
158158
padding: 0.35rem;
159-
margin-bottom: 0.7rem;
160159
}
161160

162161
#category ul > li span {
@@ -220,14 +219,16 @@ main > section {
220219
}
221220

222221
main > section:first-of-type h1 {
223-
font-size: clamp(1rem, 2.5vw, 2rem);
222+
font-size: clamp(1rem, 2.5vw, 3rem);
224223
text-align: center;
224+
font-weight: 600;
225225
}
226226

227227
main > section:first-of-type h2 {
228228
margin-top: 10px;
229-
font-size: clamp(0.7rem, 1vw, 1.7rem);
229+
font-size: clamp(0.7rem, 1vw, 2.7rem);
230230
text-align: center;
231+
font-weight: 500;
231232
}
232233

233234
main > section:first-of-type span {
@@ -236,13 +237,6 @@ main > section:first-of-type span {
236237
text-transform: uppercase;
237238
}
238239

239-
main > section:first-of-type video {
240-
width: clamp(300px, 40vw, 800px);
241-
height: clamp(300px / 1.75, 40vw / 1.75, 800px / 1.75);
242-
margin-top: 20px;
243-
border: 2px solid var(--text-color);
244-
}
245-
246240
main > section:last-of-type {
247241
display: none;
248242
position: relative;
@@ -311,15 +305,15 @@ main > section:last-of-type {
311305
border: 2px dashed var(--tertiary-color);
312306
}
313307

314-
[data-content='pic-text'] > div:first-of-type {
308+
[data-content='pic-text'] > label:first-of-type {
315309
width: var(--generator-width);
316310
}
317311

318312
[data-content='input-range'] {
319313
gap: 5px;
320314
}
321315

322-
[data-content='input-range'] > div:first-of-type {
316+
[data-content='input-range'] > label:first-of-type {
323317
background-color: var(--primary-color);
324318
width: var(--generator-width);
325319
display: flex;
@@ -331,7 +325,7 @@ main > section:last-of-type {
331325
margin-bottom: 20px;
332326
}
333327

334-
[data-content='input-range'] > div:first-of-type p {
328+
[data-content='input-range'] > label:first-of-type p {
335329
font-size: 0.7em;
336330
}
337331

@@ -998,17 +992,6 @@ a {
998992
color: var(--tertiary-color);
999993
}
1000994

1001-
@keyframes openDropDown {
1002-
0% {
1003-
opacity: 0;
1004-
}
1005-
1006-
100% {
1007-
top: 0;
1008-
opacity: 1;
1009-
}
1010-
}
1011-
1012995
@keyframes moveColor {
1013996
0% {
1014997
background-position-x: -500%;

0 commit comments

Comments
 (0)