Skip to content

Commit b29dd4a

Browse files
rachelandrewrachelandrew
committed
examples for the images and forms section
1 parent 0340f3e commit b29dd4a

File tree

9 files changed

+456
-0
lines changed

9 files changed

+456
-0
lines changed

‎learn/images/balloons.jpg

107 KB
Loading

‎learn/images/filter.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and other unusual elements: filters</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
align-items: flex-start;
15+
}
16+
17+
.wrapper > * {
18+
margin: 20px;
19+
flex: 1;
20+
}
21+
22+
.box {
23+
border: 5px solid darkblue;
24+
}
25+
26+
</style>
27+
28+
<style class="editable">
29+
.box {
30+
width: 300px;
31+
height: 200px;
32+
}
33+
34+
img {
35+
height: 100%;
36+
width: 100%;
37+
display: block;
38+
object-fit: cover;
39+
}
40+
41+
.blur {
42+
filter: blur(10px);
43+
}
44+
45+
.grayscale {
46+
filter: grayscale(60%);
47+
}
48+
</style>
49+
</head>
50+
51+
<body>
52+
<section class="preview">
53+
<div class="wrapper">
54+
<div class="box"><img src="balloons.jpg" alt="balloons" class="blur"></div>
55+
<div class="box"><img src="balloons.jpg" alt="balloons" class="grayscale"></div>
56+
</div>
57+
</section>
58+
59+
<textarea class="playable playable-css" style="height: 320px;">
60+
img {
61+
height: 100%;
62+
width: 100%;
63+
display: block;
64+
object-fit: cover;
65+
}
66+
67+
.blur {
68+
filter: blur(10px);
69+
}
70+
71+
.grayscale {
72+
filter: grayscale(60%);
73+
}
74+
</textarea>
75+
76+
<textarea class="playable playable-html" style="height: 120px;">
77+
<div class="wrapper">
78+
<div class="box"><img src="balloons.jpg" alt="balloons" class="blur"></div>
79+
<div class="box"><img src="balloons.jpg" alt="balloons" class="grayscale"></div>
80+
</div>
81+
</textarea>
82+
83+
<div class="playable-buttons">
84+
<input id="reset" type="button" value="Reset" />
85+
</div>
86+
</body>
87+
<script src="../playable.js"></script>
88+
</html>

‎learn/images/form.html

+97
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and other unusual elements: forms</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
form > div {
9+
display: flex;
10+
}
11+
12+
label {
13+
width: 10em;
14+
}
15+
16+
.buttons {
17+
justify-content: center;
18+
}
19+
20+
</style>
21+
22+
<style class="editable">
23+
input[type="text"],
24+
input[type="email"] {
25+
border: 2px solid #000;
26+
margin: 0 0 1em 0;
27+
padding: 10px;
28+
}
29+
30+
input[type="submit"] {
31+
border: 3px solid #333;
32+
background-color: #999;
33+
border-radius: 5px;
34+
padding: 10px 2em;
35+
font-weight: bold;
36+
color: #fff;
37+
}
38+
39+
input[type="submit"]:hover {
40+
background-color: #333;
41+
}
42+
</style>
43+
</head>
44+
45+
<body>
46+
<section class="preview">
47+
<form>
48+
<div><label for="name">Name</label>
49+
<input type="text" id="name"></div>
50+
<div><label for="email">Email</label>
51+
<input type="email" id="email"></div>
52+
53+
<div class="buttons"><input type="submit" value="Submit"></div>
54+
</form>
55+
</section>
56+
57+
<textarea class="playable playable-css" style="height: 420px;">
58+
input[type="text"],
59+
input[type="email"] {
60+
border: 2px solid #000;
61+
margin: 0 0 1em 0;
62+
padding: 10px;
63+
width: 100%;
64+
}
65+
66+
input[type="submit"] {
67+
border: 3px solid #333;
68+
background-color: #999;
69+
border-radius: 5px;
70+
padding: 10px 2em;
71+
font-weight: bold;
72+
color: #fff;
73+
}
74+
75+
input[type="submit"]:hover {
76+
background-color: #333;
77+
}
78+
79+
</textarea>
80+
81+
<textarea class="playable playable-html" style="height: 200px;">
82+
<form>
83+
<div><label for="name">Name</label>
84+
<input type="text" id="name"></div>
85+
<div><label for="email">Email</label>
86+
<input type="email" id="email"></div>
87+
88+
<div class="buttons"><input type="submit" value="Submit"></div>
89+
</form>
90+
</textarea>
91+
92+
<div class="playable-buttons">
93+
<input id="reset" type="button" value="Reset" />
94+
</div>
95+
</body>
96+
<script src="../playable.js"></script>
97+
</html>

‎learn/images/layout.html

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and other unusual elements: layout</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
</style>
13+
14+
<style class="editable">
15+
.wrapper {
16+
display: grid;
17+
grid-template-columns: 1fr 1fr;
18+
grid-template-rows: 200px 200px;
19+
gap: 20px;
20+
}
21+
22+
.wrapper > div {
23+
background-color: rebeccapurple;
24+
border-radius: .5em;
25+
}
26+
</style>
27+
</head>
28+
29+
<body>
30+
<section class="preview">
31+
<div class="wrapper">
32+
<img src="star.png" alt="star">
33+
<div></div>
34+
<div></div>
35+
<div></div>
36+
</div>
37+
</section>
38+
39+
<textarea class="playable playable-css" style="height: 220px;">
40+
.wrapper {
41+
display: grid;
42+
grid-template-columns: 1fr 1fr;
43+
grid-template-rows: 200px 200px;
44+
gap: 20px;
45+
}
46+
47+
.wrapper > div {
48+
background-color: rebeccapurple;
49+
border-radius: .5em;
50+
}
51+
</textarea>
52+
53+
<textarea class="playable playable-html" style="height: 150px;">
54+
<div class="wrapper">
55+
<img src="star.png" alt="star">
56+
<div></div>
57+
<div></div>
58+
<div></div>
59+
</div>
60+
</textarea>
61+
62+
<div class="playable-buttons">
63+
<input id="reset" type="button" value="Reset" />
64+
</div>
65+
</body>
66+
<script src="../playable.js"></script>
67+
</html>

‎learn/images/object-fit.html

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and other unusual elements: object-fit</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
align-items: flex-start;
15+
}
16+
17+
.wrapper > * {
18+
margin: 20px;
19+
}
20+
21+
.box {
22+
border: 5px solid darkblue;
23+
}
24+
25+
</style>
26+
27+
<style class="editable">
28+
.box {
29+
width: 200px;
30+
height: 200px;
31+
}
32+
33+
img {
34+
height: 100%;
35+
width: 100%;
36+
}
37+
38+
.cover {
39+
object-fit: cover;
40+
}
41+
42+
.contain {
43+
object-fit: contain;
44+
}
45+
</style>
46+
</head>
47+
48+
<body>
49+
<section class="preview">
50+
<div class="wrapper">
51+
<div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
52+
<div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
53+
</div>
54+
</section>
55+
56+
<textarea class="playable playable-css" style="height: 320px;">
57+
.box {
58+
width: 200px;
59+
height: 200px;
60+
}
61+
62+
img {
63+
height: 100%;
64+
width: 100%;
65+
}
66+
67+
.cover {
68+
object-fit: cover;
69+
}
70+
71+
.contain {
72+
object-fit: contain;
73+
}
74+
</textarea>
75+
76+
<textarea class="playable playable-html" style="height: 120px;">
77+
<div class="wrapper">
78+
<div class="box"><img src="balloons.jpg" alt="balloons" class="cover"></div>
79+
<div class="box"><img src="balloons.jpg" alt="balloons" class="contain"></div>
80+
</div>
81+
</textarea>
82+
83+
<div class="playable-buttons">
84+
<input id="reset" type="button" value="Reset" />
85+
</div>
86+
</body>
87+
<script src="../playable.js"></script>
88+
</html>

‎learn/images/round-balloon.png

21.8 KB
Loading

‎learn/images/shapes.html

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Images and other unusual elements: shapes</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
</style>
12+
13+
<style class="editable">
14+
img {
15+
float: left;
16+
shape-outside: circle(50%);
17+
}
18+
</style>
19+
</head>
20+
21+
<body>
22+
<section class="preview">
23+
<div class="wrapper">
24+
<img src="round-balloon.png" alt="balloon">
25+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.</p>
26+
</div>
27+
</section>
28+
29+
<textarea class="playable playable-css" style="height: 120px;">
30+
img {
31+
float: left;
32+
shape-outside: circle(50%);
33+
}
34+
</textarea>
35+
36+
<textarea class="playable playable-html" style="height: 220px;">
37+
<div class="wrapper">
38+
<img src="round-balloon.png" alt="balloon">
39+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery. Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.</p>
40+
</div>
41+
</textarea>
42+
43+
<div class="playable-buttons">
44+
<input id="reset" type="button" value="Reset" />
45+
</div>
46+
</body>
47+
<script src="../playable.js"></script>
48+
</html>

0 commit comments

Comments
 (0)