-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path3.html
123 lines (122 loc) · 4.67 KB
/
3.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Playing with CSS (Day-3)</title>
<link rel="stylesheet" href="../assets/css/3.css" />
<script src="../assets/js/3.js"></script>
</head>
<body>
<div class="navbar">
<div class="info">
<div class="info-sign">
<div class="symbol">i</div>
</div>
<span class="description">
<b> <i>Tip</i> </b> : Play with different controls.
</span>
</div>
<div class="source">
<a
class="info"
target="_blank"
aria-hidden="true"
title="View on Github"
href="https://github.com/karna98/JavaScript30/#day-3-"
>
<div class="info-sign">
<div class="symbol">
<img src="../assets/images/github.svg" />
</div>
</div>
</a>
</div>
</div>
<div class="content">
<div class="content-title">
Update <span class="highlight"> CSS </span> Variables with
<span class="highlight"> JS </span>
</div>
<div class="content-body">
<div class="left-frame">
<table class="controls">
<tr>
<td><label for="spacing">Spacing</label></td>
<td>
<input
id="spacing"
type="range"
name="spacing"
min="2"
max="50"
value="5"
data-sizing="px"
/>
</td>
</tr>
<tr>
<td><label for="brightness">Brightness</label></td>
<td>
<input
id="brightness"
type="range"
name="brightness"
min="0"
max="100"
value="50"
data-sizing="%"
/>
</td>
</tr>
<tr>
<td><label for="contrast">Contrast</label></td>
<td>
<input
id="contrast"
type="range"
name="contrast"
min="0"
max="200"
value="100"
data-sizing="%"
/>
</td>
</tr>
<tr>
<td><label for="blur">Blur</label></td>
<td>
<input
id="blur"
type="range"
name="blur"
min="0"
max="25"
value="10"
data-sizing="px"
/>
</td>
</tr>
<tr>
<td>
<label for="color">Color</label>
</td>
<td>
<input
id="color"
type="color"
name="color"
value="#ffa500"
/>
</td>
</tr>
</table>
</div>
<div class="right-frame">
<div class="frame">
<img src="/assets/images/sample_image.jpg" />
</div>
</div>
</div>
</div>
</body>
</html>