Skip to content

Commit bf102f6

Browse files
tiago-m-diastiago-m-dias
committed
feat: css variables
challenge wesbos#3 update css variables with js
1 parent e7be1f2 commit bf102f6

1 file changed

Lines changed: 49 additions & 36 deletions

File tree

‎03 - CSS Variables/index-START.html‎

Lines changed: 49 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,64 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>Scoped CSS Variables and JS</title>
5+
<meta charset="UTF-8">
6+
<title>Scoped CSS Variables and JS</title>
67
</head>
7-
<body>
8-
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
98

10-
<div class="controls">
11-
<label for="spacing">Spacing:</label>
12-
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
9+
<body>
10+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
1311

14-
<label for="blur">Blur:</label>
15-
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
12+
<div class="controls">
13+
<label for="spacing">Spacing:</label>
14+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
1615

17-
<label for="base">Base Color</label>
18-
<input id="base" type="color" name="base" value="#ffc600">
19-
</div>
16+
<label for="blur">Blur:</label>
17+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
2018

21-
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
19+
<label for="base">Base Color</label>
20+
<input id="base" type="color" name="base" value="#ffc600">
21+
</div>
2222

23-
<style>
23+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
2424

25-
/*
25+
<style>
26+
:root {
27+
--base: #ffc600;
28+
--spacing: 10px;
29+
--blur: 10px;
30+
}
31+
32+
img {
33+
padding: var(--spacing);
34+
background: var(--base);
35+
filter: blur(var(--blur));
36+
}
37+
/*
2638
misc styles, nothing to do with CSS variables
2739
*/
40+
41+
body {
42+
text-align: center;
43+
background: #193549;
44+
color: white;
45+
font-family: 'helvetica neue', sans-serif;
46+
font-weight: 100;
47+
font-size: 50px;
48+
}
49+
50+
.controls {
51+
margin-bottom: 50px;
52+
}
53+
54+
input {
55+
width: 100px;
56+
}
57+
</style>
2858

29-
body {
30-
text-align: center;
31-
background: #193549;
32-
color: white;
33-
font-family: 'helvetica neue', sans-serif;
34-
font-weight: 100;
35-
font-size: 50px;
36-
}
37-
38-
.controls {
39-
margin-bottom: 50px;
40-
}
41-
42-
input {
43-
width: 100px;
44-
}
45-
</style>
46-
47-
<script>
48-
</script>
59+
<script>
60+
</script>
4961

5062
</body>
51-
</html>
63+
64+
</html>

0 commit comments

Comments
 (0)