Skip to content

Commit fa20174

Browse files
rachelandrewrachelandrew
committed
Example files for Values and Units
1 parent 9831cba commit fa20174

17 files changed

+1092
-0
lines changed

‎learn/values-units/balloons.jpg

107 KB
Loading

‎learn/values-units/calc.html

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Values and Units: calc</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
13+
.box {
14+
padding: 1em;
15+
border-radius: .5em;
16+
border: 5px solid rebeccapurple;
17+
background-color: lightblue;
18+
}
19+
</style>
20+
21+
<style class="editable">
22+
.wrapper {
23+
width: 400px;
24+
}
25+
26+
.box {
27+
width: calc(20% + 100px);
28+
}
29+
</style>
30+
</head>
31+
32+
<body>
33+
<section class="preview">
34+
<div class="wrapper">
35+
<div class="box">My width is calculated</div>
36+
</div>
37+
</section>
38+
39+
<textarea class="playable playable-css" style="height: 140px;">
40+
.wrapper {
41+
width: 400px;
42+
}
43+
44+
.box {
45+
width: calc(20% + 100px);
46+
}
47+
</textarea>
48+
49+
<textarea class="playable playable-html" style="height: 80px;">
50+
<div class="wrapper">
51+
<div class="box">My width is calculated.</div>
52+
</div>
53+
</textarea>
54+
55+
<div class="playable-buttons">
56+
<input id="reset" type="button" value="Reset">
57+
</div>
58+
</body>
59+
<script src="../playable.js"></script>
60+
61+
</html>

‎learn/values-units/color-hex.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Values and Units: color hex codes</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
.box {
13+
padding: 10px;
14+
margin: 1em 0;
15+
border-radius: .5em;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.one {
21+
background-color: #02798b;
22+
}
23+
24+
.two {
25+
background-color: #c55da1;
26+
}
27+
28+
.three {
29+
background-color: #128a7d;
30+
}
31+
32+
33+
</style>
34+
</head>
35+
36+
<body>
37+
<section class="preview">
38+
<div class="wrapper">
39+
<div class="box one">#02798b</div>
40+
<div class="box two">#c55da1</div>
41+
<div class="box three">128a7d</div>
42+
</div>
43+
</section>
44+
45+
<textarea class="playable playable-css" style="height: 240px;">
46+
.one {
47+
background-color: #02798b;
48+
}
49+
50+
.two {
51+
background-color: #c55da1;
52+
}
53+
54+
.three {
55+
background-color: #128a7d;
56+
}
57+
</textarea>
58+
59+
<textarea class="playable playable-html" style="height: 130px;">
60+
<div class="wrapper">
61+
<div class="box one">#02798b</div>
62+
<div class="box two">#c55da1</div>
63+
<div class="box three">128a7d</div>
64+
</div>
65+
</textarea>
66+
67+
<div class="playable-buttons">
68+
<input id="reset" type="button" value="Reset">
69+
</div>
70+
</body>
71+
<script src="../playable.js"></script>
72+
73+
</html>

‎learn/values-units/color-hsl.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Values and Units: color hsl codes</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
.box {
13+
padding: 10px;
14+
margin: 1em 0;
15+
border-radius: .5em;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.one {
21+
background-color: hsl(188, 97%, 28%);
22+
}
23+
24+
.two {
25+
background-color: hsl(321, 47%, 57%);
26+
}
27+
28+
.three {
29+
background-color: hsl(174,77%,31%);
30+
}
31+
32+
33+
</style>
34+
</head>
35+
36+
<body>
37+
<section class="preview">
38+
<div class="wrapper">
39+
<div class="box one">hsl(188, 97%, 28%)</div>
40+
<div class="box two">hsl(321, 47%, 57%)</div>
41+
<div class="box three">hsl(174,77%,31%)</div>
42+
</div>
43+
</section>
44+
45+
<textarea class="playable playable-css" style="height: 240px;">
46+
.one {
47+
background-color: hsl(188, 97%, 28%);
48+
}
49+
50+
.two {
51+
background-color: hsl(321, 47%, 57%);
52+
}
53+
54+
.three {
55+
background-color: hsl(174, 77%, 31%);
56+
}
57+
</textarea>
58+
59+
<textarea class="playable playable-html" style="height: 130px;">
60+
<div class="wrapper">
61+
<div class="box one">hsl(188, 97%, 28%)</div>
62+
<div class="box two">hsl(321, 47%, 57%)</div>
63+
<div class="box three">hsl(174, 77%, 31%)</div>
64+
</div>
65+
</textarea>
66+
67+
<div class="playable-buttons">
68+
<input id="reset" type="button" value="Reset">
69+
</div>
70+
</body>
71+
<script src="../playable.js"></script>
72+
73+
</html>

‎learn/values-units/color-hsla.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Values and Units: color hsl codes</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
.wrapper {
13+
background-image:url(balloons.jpg);
14+
padding: 40px 20px;
15+
}
16+
.box {
17+
padding: 10px;
18+
margin: 1em 0;
19+
border-radius: .5em;
20+
}
21+
</style>
22+
23+
<style class="editable">
24+
.one {
25+
background-color: hsla(188, 97%, 28%,.3);
26+
}
27+
28+
.two {
29+
background-color: hsla(321, 47%, 57%,.7);
30+
}
31+
32+
.three {
33+
background-color: hsla(174,77%,31%,.9);
34+
}
35+
36+
37+
</style>
38+
</head>
39+
40+
<body>
41+
<section class="preview">
42+
<div class="wrapper">
43+
<div class="box one">hsla(188, 97%, 28%, .3)</div>
44+
<div class="box two">hsla(321, 47%, 57%, .7)</div>
45+
<div class="box three">hsla(174, 77%, 31%, .9)</div>
46+
</div>
47+
</section>
48+
49+
<textarea class="playable playable-css" style="height: 240px;">
50+
.one {
51+
background-color: hsla(188, 97%, 28%, .3);
52+
}
53+
54+
.two {
55+
background-color: hsla(321, 47%, 57%, .7);
56+
}
57+
58+
.three {
59+
background-color: hsla(174, 77%, 31%, .9);
60+
}
61+
</textarea>
62+
63+
<textarea class="playable playable-html" style="height: 130px;">
64+
<div class="wrapper">
65+
<div class="box one">hsla(188, 97%, 28%, .3)</div>
66+
<div class="box two">hsla(321, 47%, 57%, .7)</div>
67+
<div class="box three">hsla(174, 77%, 31%, .9)</div>
68+
</div>
69+
</textarea>
70+
71+
<div class="playable-buttons">
72+
<input id="reset" type="button" value="Reset">
73+
</div>
74+
</body>
75+
<script src="../playable.js"></script>
76+
77+
</html>

‎learn/values-units/color-keywords.html

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Values and Units: color keywords</title>
7+
<link rel="stylesheet" href="../styles.css">
8+
<style>
9+
* {
10+
box-sizing: border-box;
11+
}
12+
.box {
13+
padding: 10px;
14+
margin: 1em 0;
15+
border-radius: .5em;
16+
}
17+
</style>
18+
19+
<style class="editable">
20+
.one {
21+
background-color: antiquewhite;
22+
}
23+
24+
.two {
25+
background-color: blueviolet;
26+
}
27+
28+
.three {
29+
background-color: greenyellow;
30+
}
31+
32+
33+
</style>
34+
</head>
35+
36+
<body>
37+
<section class="preview">
38+
<div class="wrapper">
39+
<div class="box one">antiquewhite</div>
40+
<div class="box two">blueviolet</div>
41+
<div class="box three">greenyellow</div>
42+
</div>
43+
</section>
44+
45+
<textarea class="playable playable-css" style="height: 240px;">
46+
.one {
47+
background-color: antiquewhite;
48+
}
49+
50+
.two {
51+
background-color: blueviolet;
52+
}
53+
54+
.three {
55+
background-color: greenyellow;
56+
}
57+
</textarea>
58+
59+
<textarea class="playable playable-html" style="height: 130px;">
60+
<div class="wrapper">
61+
<div class="box one">antiquewhite</div>
62+
<div class="box two">blueviolet</div>
63+
<div class="box three">greenyellow</div>
64+
</div>
65+
</textarea>
66+
67+
<div class="playable-buttons">
68+
<input id="reset" type="button" value="Reset">
69+
</div>
70+
</body>
71+
<script src="../playable.js"></script>
72+
73+
</html>

0 commit comments

Comments
 (0)