Skip to content

Commit 898a2a9

Browse files
rachelandrewrachelandrew
committed
another set of multicol examples
1 parent e688093 commit 898a2a9

File tree

8 files changed

+931
-0
lines changed

8 files changed

+931
-0
lines changed

‎multicol/overflow/image-max-width.html‎

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Multicol example - image with max-width</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
height: 160px;
20+
background-color: #F4F7F8;
21+
border: none;
22+
border-left: 6px solid #558ABB;
23+
color: #4D4E53;
24+
width: 90%;
25+
max-width: 700px;
26+
padding: 10px 10px 0px;
27+
font-size: 90%;
28+
}
29+
30+
textarea:nth-of-type(1) {
31+
height: 80px
32+
}
33+
34+
textarea:nth-of-type(2) {
35+
height: 160px
36+
}
37+
38+
.playable-buttons {
39+
text-align: right;
40+
width: 90%;
41+
max-width: 700px;
42+
padding: 5px 10px 5px 26px;
43+
font-size: 100%;
44+
}
45+
46+
section {
47+
width: 90%;
48+
max-width: 700px;
49+
border: 1px solid #4D4E53;
50+
border-radius: 2px;
51+
padding: 10px 14px 10px 10px;
52+
margin-bottom: 10px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
</style>
61+
<style class="editable">
62+
.container {
63+
column-width: 150px;
64+
}
65+
img {
66+
max-width: 100%;
67+
}
68+
</style>
69+
</head>
70+
71+
<body>
72+
<section>
73+
<div class="container">
74+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
75+
76+
<img src="image.jpg" alt="balloons">
77+
78+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
79+
80+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
81+
</div>
82+
83+
</section>
84+
<textarea class="playable-css">
85+
.container {
86+
column-width: 150px;
87+
}
88+
img {
89+
max-width: 100%;
90+
}
91+
</textarea>
92+
<textarea id="code" class="playable-html">
93+
<div class="container">
94+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
95+
96+
<img src="image.jpg" alt="balloons">
97+
98+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
99+
100+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
101+
</div>
102+
</textarea>
103+
<div class="playable-buttons">
104+
<input id="reset" type="button" value="Reset">
105+
</div>
106+
</body>
107+
<script>
108+
var section = document.querySelector('section');
109+
var editable = document.querySelector('.editable');
110+
var textareaHTML = document.querySelector('.playable-html');
111+
var textareaCSS = document.querySelector('.playable-css');
112+
var reset = document.getElementById('reset');
113+
var htmlCode = textareaHTML.value;
114+
var cssCode = textareaCSS.value;
115+
116+
function fillCode() {
117+
editable.innerHTML = textareaCSS.value;
118+
section.innerHTML = textareaHTML.value;
119+
}
120+
121+
reset.addEventListener('click', function () {
122+
textareaHTML.value = htmlCode;
123+
textareaCSS.value = cssCode;
124+
fillCode();
125+
});
126+
127+
textareaHTML.addEventListener('input', fillCode);
128+
textareaCSS.addEventListener('input', fillCode);
129+
window.addEventListener('load', fillCode);
130+
</script>
131+
132+
</html>

‎multicol/overflow/image.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Multicol example - image overflow</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
height: 160px;
20+
background-color: #F4F7F8;
21+
border: none;
22+
border-left: 6px solid #558ABB;
23+
color: #4D4E53;
24+
width: 90%;
25+
max-width: 700px;
26+
padding: 10px 10px 0px;
27+
font-size: 90%;
28+
}
29+
30+
textarea:nth-of-type(1) {
31+
height: 80px
32+
}
33+
34+
textarea:nth-of-type(2) {
35+
height: 160px
36+
}
37+
38+
.playable-buttons {
39+
text-align: right;
40+
width: 90%;
41+
max-width: 700px;
42+
padding: 5px 10px 5px 26px;
43+
font-size: 100%;
44+
}
45+
46+
section {
47+
width: 90%;
48+
max-width: 700px;
49+
border: 1px solid #4D4E53;
50+
border-radius: 2px;
51+
padding: 10px 14px 10px 10px;
52+
margin-bottom: 10px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
</style>
61+
<style class="editable">
62+
.container {
63+
column-width: 150px;
64+
}
65+
</style>
66+
</head>
67+
68+
<body>
69+
<section>
70+
<div class="container">
71+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
72+
73+
<img src="image.jpg" alt="balloons">
74+
75+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
76+
77+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
78+
</div>
79+
80+
</section>
81+
<textarea class="playable-css">
82+
.container {
83+
column-width: 150px;
84+
}
85+
</textarea>
86+
<textarea id="code" class="playable-html">
87+
<div class="container">
88+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
89+
90+
<img src="image.jpg" alt="balloons">
91+
92+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
93+
94+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
95+
</div>
96+
</textarea>
97+
<div class="playable-buttons">
98+
<input id="reset" type="button" value="Reset">
99+
</div>
100+
</body>
101+
<script>
102+
var section = document.querySelector('section');
103+
var editable = document.querySelector('.editable');
104+
var textareaHTML = document.querySelector('.playable-html');
105+
var textareaCSS = document.querySelector('.playable-css');
106+
var reset = document.getElementById('reset');
107+
var htmlCode = textareaHTML.value;
108+
var cssCode = textareaCSS.value;
109+
110+
function fillCode() {
111+
editable.innerHTML = textareaCSS.value;
112+
section.innerHTML = textareaHTML.value;
113+
}
114+
115+
reset.addEventListener('click', function () {
116+
textareaHTML.value = htmlCode;
117+
textareaCSS.value = cssCode;
118+
fillCode();
119+
});
120+
121+
textareaHTML.addEventListener('input', fillCode);
122+
textareaCSS.addEventListener('input', fillCode);
123+
window.addEventListener('load', fillCode);
124+
</script>
125+
126+
</html>

‎multicol/overflow/image.jpg‎

20 KB
Loading

‎multicol/overflow/min-height.html‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Multicol example - min-height media query</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
height: 160px;
20+
background-color: #F4F7F8;
21+
border: none;
22+
border-left: 6px solid #558ABB;
23+
color: #4D4E53;
24+
width: 90%;
25+
max-width: 700px;
26+
padding: 10px 10px 0px;
27+
font-size: 90%;
28+
}
29+
30+
textarea:nth-of-type(1) {
31+
height: 80px
32+
}
33+
34+
textarea:nth-of-type(2) {
35+
height: 160px
36+
}
37+
38+
.playable-buttons {
39+
text-align: right;
40+
width: 90%;
41+
max-width: 700px;
42+
padding: 5px 10px 5px 26px;
43+
font-size: 100%;
44+
}
45+
46+
section {
47+
width: 90%;
48+
max-width: 700px;
49+
border: 1px solid #4D4E53;
50+
border-radius: 2px;
51+
padding: 10px 14px 10px 10px;
52+
margin-bottom: 10px;
53+
}
54+
55+
section input {
56+
display: block;
57+
margin: 5px;
58+
}
59+
60+
</style>
61+
<style class="editable">
62+
@media (min-height: 300px) {
63+
.container {
64+
column-width: 200px;
65+
}
66+
}
67+
</style>
68+
</head>
69+
70+
<body>
71+
<section>
72+
<div class="container">
73+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
74+
75+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
76+
77+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
78+
</div>
79+
80+
</section>
81+
<textarea class="playable-css">
82+
@media (min-height: 300px) {
83+
.container {
84+
column-width: 200px;
85+
}
86+
}
87+
</textarea>
88+
<textarea id="code" class="playable-html">
89+
<div class="container">
90+
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo melon azuki bean garlic.</p>
91+
92+
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
93+
94+
<p>Turnip greens yarrow ricebean rutabaga endive cauliflower sea lettuce kohlrabi amaranth water spinach avocado daikon napa cabbage asparagus winter purslane kale. Celery potato scallion desert raisin horseradish spinach carrot soko.</p>
95+
</div>
96+
</textarea>
97+
<div class="playable-buttons">
98+
<input id="reset" type="button" value="Reset">
99+
</div>
100+
</body>
101+
<script>
102+
var section = document.querySelector('section');
103+
var editable = document.querySelector('.editable');
104+
var textareaHTML = document.querySelector('.playable-html');
105+
var textareaCSS = document.querySelector('.playable-css');
106+
var reset = document.getElementById('reset');
107+
var htmlCode = textareaHTML.value;
108+
var cssCode = textareaCSS.value;
109+
110+
function fillCode() {
111+
editable.innerHTML = textareaCSS.value;
112+
section.innerHTML = textareaHTML.value;
113+
}
114+
115+
reset.addEventListener('click', function () {
116+
textareaHTML.value = htmlCode;
117+
textareaCSS.value = cssCode;
118+
fillCode();
119+
});
120+
121+
textareaHTML.addEventListener('input', fillCode);
122+
textareaCSS.addEventListener('input', fillCode);
123+
window.addEventListener('load', fillCode);
124+
</script>
125+
126+
</html>

0 commit comments

Comments
 (0)