width 300px file downloaded
25 | width 600px file downloaded
26 | width 900px file downloaded
27 | width 1200px file downloaded
28 |
29 |
30 |
--------------------------------------------------------------------------------
/03/example_03-02/w1200.css:
--------------------------------------------------------------------------------
1 | .w1200 {
2 | display: block;
3 | }
--------------------------------------------------------------------------------
/03/example_03-02/w300.css:
--------------------------------------------------------------------------------
1 | .w300 {
2 | display: block;
3 | }
--------------------------------------------------------------------------------
/03/example_03-02/w600.css:
--------------------------------------------------------------------------------
1 | .w600 {
2 | display: block;
3 | }
--------------------------------------------------------------------------------
/03/example_03-02/w900.css:
--------------------------------------------------------------------------------
1 | .w900 {
2 | display: block;
3 | }
--------------------------------------------------------------------------------
/04/example_04-01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
61 |
69 |
70 |
71 |
--------------------------------------------------------------------------------
/04/example_04-02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
63 |
64 |
65 |
66 |
67 |
68 |
11 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/04/example_04-02/main.js:
--------------------------------------------------------------------------------
1 | // First wait for the DOM to be ready
2 | document.addEventListener("DOMContentLoaded", function(){
3 | "use strict";
4 | var theBody = document.querySelector("body");
5 | // This function merely toggles the class
6 | function toggleClass() {
7 | theBody.classList.toggle("OffCanvas-Active");
8 | }
9 | // When the header is clicked we fire the function to toggle the class
10 | document.querySelector(".Header").addEventListener("click", toggleClass );
11 |
12 | // The section below merely deals with resize events
13 |
14 | // This debounce function (via: https://remysharp.com/2010/07/21/throttling-function-calls) merely stops functioned firing too often on repetitive events (such as resize/scroll)
15 | function debounce(fn, delay) {
16 | var timer = null;
17 | return function () {
18 | var context = this, args = arguments;
19 | clearTimeout(timer);
20 | timer = setTimeout(function () {
21 | fn.apply(context, args);
22 | }, delay);
23 | };
24 | }
25 |
26 | // removing the class from the body inside a debounce
27 | var debouncedA = debounce(function() {
28 | theBody.classList.remove("OffCanvas-Active");
29 | }, 250);
30 |
31 | // When the window is resized, we want to fire the debouncedA function
32 | window.onresize = debouncedA;
33 | });
--------------------------------------------------------------------------------
/04/example_04-02/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | body {
8 | overflow-x: hidden;
9 | overflow-y: scroll;
10 | }
11 |
12 | .Wrap {
13 | max-width: 1400px;
14 | margin: 0 auto;
15 | }
16 |
17 | .Header {
18 | width: 100%;
19 | height: 130px;
20 | background-color: #038C5A;
21 | }
22 |
23 | .WrapMiddle {
24 | width: 100%;
25 | font-size: 0;
26 | position: relative;
27 | }
28 |
29 | .OffCanvas-Active .Left,
30 | .OffCanvas-Active .Middle {
31 | transform: translate3d(200px, 0, 0);
32 | transition: transform .3s;
33 | }
34 |
35 | .Left {
36 | height: 625px;
37 | background-color: #03A66A;
38 | display: inline-block;
39 | position: absolute;
40 | left: -200px;
41 | width: 200px;
42 | font-size: .9rem;
43 | transition: transform .3s;
44 | }
45 |
46 | @media (min-width: 40rem) {
47 | .Left {
48 | width: 20.8333333%;
49 | left: 0;
50 | position: relative;
51 | }
52 | }
53 |
54 | .Middle {
55 | height: 625px;
56 | background-color: #bbbf90;
57 | transition: transform .3s;
58 | font-size: .9rem;
59 | }
60 |
61 | @media (min-width: 40rem) {
62 | .Middle {
63 | display: inline-block;
64 | width: 68.75%;
65 | }
66 | }
67 |
68 | .Right {
69 | height: 625px;
70 | width: 100%;
71 | background-color: #03A66A;
72 | font-size: .9rem;
73 | }
74 |
75 | @media (min-width: 40rem) {
76 | .Right {
77 | width: 10.4166667%;
78 | display: inline-block;
79 | }
80 | }
81 |
82 | .Footer {
83 | height: 200px;
84 | width: 100%;
85 | background-color: #025059;
86 | }
--------------------------------------------------------------------------------
/04/example_04-03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Header
12 |
13 |
17 |
18 | Left
14 | Middle
15 | Right
16 |
12 | Hello, I'm centered with Flexbox!
13 |
14 |
15 |
--------------------------------------------------------------------------------
/04/example_04-03/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | .CenterMe {
8 | background-color: indigo;
9 | color: #ebebeb;
10 | font-family: "Oswald", sans-serif;
11 | font-size: 2rem;
12 | text-transform: uppercase;
13 | height: 200px;
14 | display: flex;
15 | align-items: center;
16 | justify-content: center;
17 | }
18 |
19 |
--------------------------------------------------------------------------------
/04/example_04-04/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
16 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/04/example_04-06e/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | font-family: "Oswald", sans-serif;
6 | color: #ebebeb;
7 | }
8 |
9 | .container {
10 | background-color: indigo;
11 | display: flex;
12 | justify-content: space-around;
13 | height: 200px;
14 | width: 100%;
15 | }
16 |
17 | .item {
18 | border: 1px solid #ebebeb;
19 | background-color: #34005b;
20 | display: flex;
21 | height: 100px;
22 | }
23 |
24 | .one {
25 | flex: 1.5 0 auto;
26 | }
27 |
28 | .two,
29 | .three {
30 | flex: 1 0 auto;
31 | }
32 |
--------------------------------------------------------------------------------
/04/example_04-06s/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 | Item One
17 | Item Two
18 | Item Three
19 |
16 | Header
17 |
18 | Content
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/04/example_04-08/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | font-family: "Oswald", sans-serif;
6 | color: #ebebeb;
7 | }
8 |
9 | .container {
10 | background-color: indigo;
11 | display: flex;
12 | flex-direction: column;
13 | }
14 | .item {
15 | display: flex;
16 | align-items: center;
17 | min-height: 6.25rem;
18 | padding: 1rem;
19 | }
20 | header {
21 | background-color: #105b63;
22 | }
23 | main {
24 | background-color: #fffad5;
25 | color: #333;
26 | }
27 | aside {
28 | background-color: #ffd34e;
29 | color: #222;
30 | }
31 | aside.aside-two {
32 | background-color: #db9e36;
33 | color: #333;
34 | }
35 | footer {
36 | background-color: #bd4932;
37 | }
38 |
--------------------------------------------------------------------------------
/05/Start/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/Start/favicon.ico
--------------------------------------------------------------------------------
/05/Start/fonts/Inter-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/Start/fonts/Inter-Regular.woff
--------------------------------------------------------------------------------
/05/Start/fonts/Inter-Regular.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/Start/fonts/Inter-Regular.woff2
--------------------------------------------------------------------------------
/05/Start/fonts/Inter.var.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/Start/fonts/Inter.var.woff2
--------------------------------------------------------------------------------
/05/Start/img/ResponsiveWebDesignA.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/Start/img/ResponsiveWebDesignA.png
--------------------------------------------------------------------------------
/05/Start/img/rwd.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/Start/img/rwd.png
--------------------------------------------------------------------------------
/05/Start/img/triangle_bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/Start/img/triangle_bg.png
--------------------------------------------------------------------------------
/05/example_05-01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
16 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/05/example_05-01/styles.css:
--------------------------------------------------------------------------------
1 | .my-first-grid {
2 | display: grid;
3 | grid-gap: 10px;
4 | grid-template-rows: 200px 200px;
5 | grid-template-columns: 200px 200px;
6 | background-color: #e4e4e4;
7 | }
8 |
9 | .grid-item-1 {
10 | grid-row: 1;
11 | grid-column: 1;
12 | }
13 | .grid-item-2 {
14 | grid-row: 1;
15 | grid-column: 2;
16 | }
17 | .grid-item-3 {
18 | grid-row: 2;
19 | grid-column: 1;
20 | }
21 | .grid-item-4 {
22 | grid-row: 2;
23 | grid-column: 2;
24 | }
25 |
26 | [class^='grid-item'] {
27 | outline: 3px dashed #f90;
28 | font-size: 30px;
29 | color: #333;
30 | }
31 |
--------------------------------------------------------------------------------
/05/example_05-02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 | 1
17 | 2
18 | 3
19 | 4
20 |
16 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/05/example_05-02/styles.css:
--------------------------------------------------------------------------------
1 | .my-first-grid {
2 | display: inline-grid;
3 | grid-gap: 10px;
4 | grid-template-rows: 200px 200px;
5 | grid-template-columns: 200px 200px;
6 | background-color: #e4e4e4;
7 | }
8 |
9 | .grid-item-1 {
10 | grid-row: 1;
11 | grid-column: 1;
12 | }
13 | .grid-item-2 {
14 | grid-row: 1;
15 | grid-column: 2;
16 | }
17 | .grid-item-3 {
18 | grid-row: 2;
19 | grid-column: 1;
20 | }
21 | .grid-item-4 {
22 | grid-row: 2;
23 | grid-column: 2;
24 | }
25 |
26 | [class^='grid-item'] {
27 | display: grid;
28 | align-items: center;
29 | justify-content: center;
30 | outline: 3px dashed #f90;
31 | font-size: 30px;
32 | color: #333;
33 | }
34 |
--------------------------------------------------------------------------------
/05/example_05-03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 | 1
17 | 2
18 | 3
19 | 4
20 |
16 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/05/example_05-03/styles.css:
--------------------------------------------------------------------------------
1 | .my-first-grid {
2 | display: inline-grid;
3 | grid-gap: 10px;
4 | grid-template-rows: 200px 200px;
5 | grid-template-columns: 200px 200px;
6 | grid-auto-rows: 100px 150px;
7 | grid-auto-columns: 100px 150px;
8 | grid-auto-flow: column;
9 | background-color: #e4e4e4;
10 | }
11 |
12 | .grid-item-1 {
13 | grid-row: 1;
14 | grid-column: 1;
15 | }
16 | .grid-item-2 {
17 | grid-row: 1;
18 | grid-column: 2;
19 | }
20 | .grid-item-3 {
21 | grid-row: 2;
22 | grid-column: 1;
23 | }
24 | .grid-item-4 {
25 | grid-row: 2;
26 | grid-column: 2;
27 | }
28 |
29 | [class^='grid-item'] {
30 | display: grid;
31 | align-items: center;
32 | justify-content: center;
33 | outline: 3px dashed #f90;
34 | font-size: 30px;
35 | color: #333;
36 | }
37 |
--------------------------------------------------------------------------------
/05/example_05-04/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 | 1
17 | 2
18 | 3
19 | 4
20 | 5
21 | 6
22 | 7
23 | 8
24 | 9
25 |
16 |
37 |
38 |
39 |
--------------------------------------------------------------------------------
/05/example_05-04/styles.css:
--------------------------------------------------------------------------------
1 | .container {
2 | font-size: 28px;
3 | font-family: sans-serif;
4 | display: grid;
5 | grid-gap: 30px;
6 | background-color: #ddd;
7 | grid-template-columns: repeat(4, 1fr);
8 | grid-auto-rows: 100px;
9 | grid-auto-flow: row dense;
10 | }
11 |
12 | [class^='grid-item'] {
13 | outline: 1px #f90 dashed;
14 | display: grid;
15 | background-color: goldenrod;
16 | align-items: center;
17 | justify-content: center;
18 | }
19 |
20 | .grid-item3 {
21 | grid-column: 2/-1;
22 | }
23 |
24 | .grid-item6 {
25 | grid-row: 3/6;
26 | grid-column: 3 / 5;
27 | }
28 |
29 | .grid-item17 {
30 | grid-row: 6 / span 2;
31 | grid-column: 2/3;
32 | }
33 |
34 | .grid-item4 {
35 | grid-row: 4 / 7;
36 | }
37 |
--------------------------------------------------------------------------------
/05/example_05-05/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 | 1. tofu
17 | 2. egg plant
18 | 3. onion
19 | 4. carrots
20 | 5. swede
21 | 6. scones
22 | 7. cucumber
23 | 8. carrot
24 | 9. yam
25 | 10. sweet potato
26 | 11. peas
27 | 12. beans
28 | 13. lentil
29 | 14. tomato
30 | 15. butternut squash
31 | 16. ham
32 | 17. pizza
33 | 18. pasta
34 | 19. cheese
35 | 20. milk
36 |
16 |
26 |
27 |
28 |
--------------------------------------------------------------------------------
/05/example_05-05/styles.css:
--------------------------------------------------------------------------------
1 | .my-first-grid {
2 | display: inline-grid;
3 | grid-gap: 10px;
4 | grid-template-columns: [left-start] 200px [left-end center-start] 200px [center-end right-start] 200px [right-end];
5 | grid-template-rows: [top-start] 200px [top-end middle-start] 200px [middle-end bottom-start] 200px [bottom-end];
6 | background-color: #e4e4e4;
7 | }
8 |
9 | [class^='grid-item'] {
10 | display: grid;
11 | align-items: center;
12 | justify-content: center;
13 | outline: 3px dashed #f90;
14 | font-size: 30px;
15 | color: #333;
16 | }
17 |
18 | .grid-item-1 {
19 | grid-area: middle / center;
20 | }
21 |
22 | .grid-item-2 {
23 | grid-area: bottom / right;
24 | }
25 |
26 | .grid-item-3 {
27 | grid-area: top / left;
28 | }
29 |
30 | .grid-item-4 {
31 | grid-column: right-start / right-end;
32 | grid-row: top-start / top-end;
33 | }
34 |
35 | .grid-items-5 {
36 | grid-column: left-start / middle-start;
37 | grid-row: middle-end / bottom-end;
38 | }
39 |
40 | .grid-item-6 {
41 | grid-column: right-start / right-end;
42 | grid-row: middle-start / middle-end;
43 | }
44 |
45 | .grid-item-7 {
46 | grid-column: center-start / center-end;
47 | grid-row: middle-end / bottom-end;
48 | }
49 |
50 | .grid-item-8 {
51 | grid-column: left-start / left-end;
52 | grid-row: top-end / bottom-start;
53 | }
54 |
55 | .grid-item-9 {
56 | grid-column: center-start / center-end;
57 | grid-row: top-start / top-end;
58 | }
59 |
--------------------------------------------------------------------------------
/05/example_05-06/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 1
17 | 2
18 | 3
19 | 4
20 | 5
21 | 6
22 | 7
23 | 8
24 | 9
25 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/05/example_05-06/styles.css:
--------------------------------------------------------------------------------
1 | .my-first-grid {
2 | display: inline-grid;
3 | grid-gap: 10px;
4 | grid-template-columns: 200px 200px 200px;
5 | grid-template-rows: 200px 200px 200px;
6 | background-color: #e4e4e4;
7 | grid-template-areas:
8 | 'one two three'
9 | 'four five six'
10 | 'seven eight nine';
11 | }
12 |
13 | [class^='grid-item'] {
14 | display: grid;
15 | align-items: center;
16 | justify-content: center;
17 | outline: 3px dashed #f90;
18 | font-size: 30px;
19 | color: #333;
20 | }
21 |
22 | .grid-item-1 {
23 | grid-area: five;
24 | }
25 |
26 | .grid-item-2 {
27 | grid-area: nine;
28 | }
29 |
30 | .grid-item-3 {
31 | grid-area: one;
32 | }
33 |
34 | .grid-item-4 {
35 | grid-area: three;
36 | }
37 |
38 | .grid-items-5 {
39 | grid-area: seven;
40 | }
41 |
42 | .grid-item-6 {
43 | grid-area: six;
44 | }
45 |
46 | .grid-item-7 {
47 | grid-area: eight;
48 | }
49 |
50 | .grid-item-8 {
51 | grid-area: four;
52 | }
53 |
54 | .grid-item-9 {
55 | grid-area: two;
56 | }
57 |
--------------------------------------------------------------------------------
/05/example_05-07/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 1
12 | 2
13 | 3
14 | 4
15 | 5
16 | 6
17 | 7
18 | 8
19 | 9
20 |
11 |
21 |
22 |
23 |
--------------------------------------------------------------------------------
/05/example_05-07/styles.css:
--------------------------------------------------------------------------------
1 | .my-first-grid {
2 | display: grid;
3 | background-color: #e4e4e4;
4 | grid-gap: 10px;
5 | grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
6 | }
7 |
8 | [class^='grid-item'] {
9 | display: grid;
10 | align-items: center;
11 | justify-content: center;
12 | outline: 3px dashed #f90;
13 | height: 100px;
14 | font-size: 30px;
15 | color: #333;
16 | }
17 |
--------------------------------------------------------------------------------
/05/example_05-08/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 1
12 | 2
13 | 3
14 | 4
15 | 5
16 | 6
17 | 7
18 | 8
19 | 9
20 |
11 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/05/example_05-08/styles.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: grid;
3 | grid: repeat(2, 200px) / repeat(2, 200px);
4 | }
5 |
6 | [class*="child"] {
7 | border: 2px dashed orange;
8 | }
9 |
10 | .parent {
11 | display: contents;
12 | }
13 |
--------------------------------------------------------------------------------
/05/example_05-09/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Child-1
12 | Child-2
13 |
14 |
17 | Grandchild 3
15 | Grandchild 4
16 |
11 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/05/example_05-09/styles.css:
--------------------------------------------------------------------------------
1 | .container {
2 | display: grid;
3 | grid: repeat(2, 200px) / repeat(2, 200px);
4 | }
5 |
6 | [class*="child"] {
7 | border: 2px dashed orange;
8 | }
9 |
10 | .parent {
11 | display: grid;
12 | grid-template-columns: subgrid;
13 | grid-column: span 2;
14 | }
15 |
--------------------------------------------------------------------------------
/05/example_05-10/Earth.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Earth.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Jupiter.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Jupiter.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Mars.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Mars.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Mercury.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Mercury.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Neptune.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Neptune.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Pluto.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Pluto.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Saturn.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Saturn.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Sun.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Sun.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Uranus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Uranus.jpg
--------------------------------------------------------------------------------
/05/example_05-10/Venus.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/05/example_05-10/Venus.jpg
--------------------------------------------------------------------------------
/05/example_05-10/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | background-color: #111;
3 | color: #fff;
4 | font-family: sans-serif;
5 | padding: 0 10px;
6 | }
7 |
8 | a {
9 | color: #fff;
10 | background-color: #666;
11 | text-decoration-style: double;
12 | }
13 |
14 | .Scroll_Wrapper {
15 | display: grid;
16 | width: 100%;
17 | overflow-y: hidden;
18 | overflow-x: auto;
19 | gap: 0 20px;
20 | grid-template-rows: auto auto;
21 | grid-auto-columns: auto;
22 | grid-auto-flow: column;
23 | }
24 |
25 | .Item {
26 | grid-row: 1/-1;
27 | display: grid;
28 | grid-template-rows: subgrid;
29 | grid-template-columns: 100px 200px;
30 | gap: 0 20px;
31 | margin: 0;
32 | }
33 |
34 | .Item img {
35 | border: 1px solid #333;
36 | aspect-ratio: auto;
37 | width: 100%;
38 | display: block;
39 | grid-row: 1/-1;
40 | grid-column: 1;
41 | }
42 |
43 | .Item p {
44 | grid-row: 1;
45 | line-height: 1.2;
46 | grid-column: 2;
47 | margin-block: 0;
48 | }
49 |
50 | .Caption {
51 | font-size: 1.2rem;
52 | grid-row: 2;
53 | grid-column: 1/-1;
54 | margin: 0;
55 | }
56 |
57 | em {
58 | font-size: 0.8em;
59 | color: #ccc;
60 | display: inline-block;
61 | margin-left: 10px;
62 | }
63 |
--------------------------------------------------------------------------------
/06/example_06-01/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Child-1
12 | Child-2
13 |
14 |
17 | Grandchild 3
15 | Grandchild 4
16 | Our Sun and its planets
13 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /06/example_06-03/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | margin: 0 auto; 8 | background-color: #ebebeb; 9 | max-width: 40rem; 10 | padding: 0 2rem; 11 | } 12 | 13 | @media (min-width: 45rem) { 14 | html, 15 | body { 16 | max-width: 50.75rem; 17 | } 18 | } 19 | 20 | @media (min-width: 55rem) { 21 | html, 22 | body { 23 | max-width: 78.75rem; 24 | } 25 | } 26 | 27 | .Scroll_Wrapper { 28 | display: flex; 29 | flex: 1 0 100%; 30 | flex-wrap: wrap; 31 | /* Make a counter */ 32 | counter-reset: item-count; 33 | font-size: 0; 34 | } 35 | 36 | /*Stops the scrollbar appearing in WebKit browsers*/ 37 | .Scroll_Wrapper::-webkit-scrollbar { 38 | display: none; 39 | } 40 | 41 | .Item { 42 | display: flex; 43 | font-size: 1rem; 44 | counter-increment: item-count; 45 | position: relative; 46 | background-color: #ebebeb; 47 | border-bottom: 2px solid #bbb; 48 | height: 9rem; 49 | width: 50%; 50 | margin: 1rem 0; 51 | } 52 | 53 | @media (min-width: 45rem) { 54 | .Item { 55 | width: 33.3333333333%; 56 | } 57 | } 58 | 59 | @media (min-width: 55rem) { 60 | .Item { 61 | width: 25%; 62 | } 63 | } 64 | 65 | .Item::before { 66 | content: counter(item-count); 67 | position: absolute; 68 | display: flex; 69 | align-items: center; 70 | justify-content: center; 71 | font-size: 1rem; 72 | line-height: 1rem; 73 | top: 0; 74 | left: -2rem; 75 | border-radius: 50%; 76 | height: 1.4rem; 77 | width: 1.4rem; 78 | background-color: #ccc; 79 | border: 1px solid #999; 80 | } 81 | 82 | .Item img { 83 | max-height: 7.25rem; 84 | } 85 | 86 | .Caption { 87 | padding-left: 0.5rem; 88 | font-size: 1.2rem; 89 | line-height: 1.1; 90 | font-weight: 800; 91 | } 92 | 93 | .Caption em { 94 | display: block; 95 | margin-top: 4px; 96 | font-size: 0.9em; 97 | font-weight: 400; 98 | } 99 | -------------------------------------------------------------------------------- /06/example_06-04/Earth.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Earth.jpg -------------------------------------------------------------------------------- /06/example_06-04/Jupiter.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Jupiter.jpg -------------------------------------------------------------------------------- /06/example_06-04/Mars.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Mars.jpg -------------------------------------------------------------------------------- /06/example_06-04/Mercury.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Mercury.jpg -------------------------------------------------------------------------------- /06/example_06-04/Neptune.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Neptune.jpg -------------------------------------------------------------------------------- /06/example_06-04/Pluto.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Pluto.jpg -------------------------------------------------------------------------------- /06/example_06-04/Saturn.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Saturn.jpg -------------------------------------------------------------------------------- /06/example_06-04/Sun.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Sun.jpg -------------------------------------------------------------------------------- /06/example_06-04/Uranus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Uranus.jpg -------------------------------------------------------------------------------- /06/example_06-04/Venus.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/06/example_06-04/Venus.jpg -------------------------------------------------------------------------------- /06/example_06-04/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |Our Sun and its planets
13 | 73 | 74 | 75 | -------------------------------------------------------------------------------- /06/example_06-04/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | margin: 0 auto; 8 | background-color: #ebebeb; 9 | max-width: 40rem; 10 | padding: 0 2rem; 11 | } 12 | 13 | @media (min-width: 45rem) { 14 | html, 15 | body { 16 | max-width: 50.75rem; 17 | } 18 | } 19 | 20 | @media (min-width: 55rem) { 21 | html, 22 | body { 23 | max-width: 78.75rem; 24 | } 25 | } 26 | 27 | .Scroll_Wrapper { 28 | display: flex; 29 | flex: 1 0 100%; 30 | flex-wrap: wrap; 31 | /* Make a counter */ 32 | counter-reset: item-count; 33 | font-size: 0; 34 | } 35 | 36 | /*Stops the scrollbar appearing in WebKit browsers*/ 37 | .Scroll_Wrapper::-webkit-scrollbar { 38 | display: none; 39 | } 40 | 41 | .Item { 42 | display: flex; 43 | font-size: 1rem; 44 | counter-increment: item-count; 45 | position: relative; 46 | background-color: #ebebeb; 47 | border-bottom: 2px solid #bbb; 48 | height: 9rem; 49 | width: 50%; 50 | margin: 1rem 0; 51 | } 52 | 53 | @media (max-width: 44.99rem) { 54 | /* Get me every two items and of them, only ones that are in the last two items */ 55 | .Item:nth-child(2n+1):nth-last-child(-n+2), 56 | /* Now get me every one after that same collection too. */ 57 | .Item:nth-child(2n+1):nth-last-child(-n+2) ~ .Item { 58 | border-bottom: 0; 59 | } 60 | } 61 | 62 | @media (min-width: 45rem) { 63 | .Item { 64 | width: 33.3333333333%; 65 | } 66 | /* Get me every third item and of them, only ones that are in the last three items */ 67 | .Item:nth-child(3n+1):nth-last-child(-n+3), 68 | /* Now get me every one after that same collection too. */ 69 | .Item:nth-child(3n+1):nth-last-child(-n+3) ~ .Item { 70 | border-bottom: 0; 71 | } 72 | } 73 | 74 | @media (min-width: 55rem) { 75 | .Item { 76 | width: 25%; 77 | } 78 | /* Get me every fourth item and of them, only ones that are in the last four items */ 79 | .Item:nth-child(4n+1):nth-last-child(-n+4), 80 | /* Now get me every one after that same collection too. */ 81 | .Item:nth-child(4n+1):nth-last-child(-n+4) ~ .Item { 82 | border-bottom: 0; 83 | } 84 | } 85 | 86 | .Item::before { 87 | content: counter(item-count); 88 | position: absolute; 89 | display: flex; 90 | align-items: center; 91 | justify-content: center; 92 | font-size: 1rem; 93 | line-height: 1rem; 94 | top: 0; 95 | left: -2rem; 96 | border-radius: 50%; 97 | height: 1.4rem; 98 | width: 1.4rem; 99 | background-color: #ccc; 100 | border: 1px solid #999; 101 | } 102 | 103 | .Item img { 104 | max-height: 7.25rem; 105 | } 106 | 107 | .Caption { 108 | padding-left: 0.5rem; 109 | font-size: 1.2rem; 110 | line-height: 1.1; 111 | font-weight: 800; 112 | } 113 | 114 | .Caption em { 115 | display: block; 116 | margin-top: 4px; 117 | font-size: 0.9em; 118 | font-weight: 400; 119 | } 120 | -------------------------------------------------------------------------------- /06/example_06-05/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |
23 | If you can keep your head when all about you
24 | Are losing theirs and blaming it on you;
If you can trust yourself
25 | when all men doubt you,
26 | But make allowance for their doubting too:
If you can wait and not be
27 | tired by waiting,
28 | Or, being lied about, don't deal in lies,
Or being hated don't give
29 | way to hating,
30 | And yet don't look too good, nor talk too wise;
31 |
If you can dream- -and not make dreams your master;
32 | If you can think- -and not make thoughts your aim,
If you can meet
33 | with Triumph and Disaster
34 | And treat those two impostors just the same:.
If you can bear to hear
35 | the truth you've spoken
36 | Twisted by knaves to make a trap for fools,
Or watch the things you
37 | gave your life to, broken,
38 | And stoop and build'em up with worn-out tools;
39 |
If you can make one heap of all your winnings
40 | And risk it on one turn of pitch-and-toss,
And lose, and start again
41 | at your beginnings,
42 | And never breathe a word about your loss:
If you can force your heart
43 | and nerve and sinew
44 | To serve your turn long after they are gone,
And so hold on when
45 | there is nothing in you
46 | Except the Will which says to them: 'Hold on! '
47 |
If you can talk with crowds and keep your virtue,
48 | Or walk with Kings- -nor lose the common touch,
If neither foes nor
49 | loving friends can hurt you,
50 | If all men count with you, but none too much:
If you can fill the
51 | unforgiving minute
52 | With sixty seconds' worth of distance run,
Yours is the Earth and
53 | everything that's in it,
54 | And- -which is more- -you'll be a Man, my son!
55 |
56 |
15 | 16 | You'll need a browser capable of displaying P3 and LCH to view 17 | many of these examples 18 | 19 |
20 |-
21 |
- display-p3 color block 22 | 23 |
- display-p3 color gradient 24 | 25 |
- hsl() same lightness 26 | 27 |
- lch() same lightness 28 | 29 |
- lch() bright color gradient 30 | 31 |
- lch() color gradient 32 | 33 |
- OKlab() color gradient 34 | 35 |
- 36 | lch() and hsl() same '45' hue value?? 37 | 38 | 39 |
- lch() beyond sRGB 40 | 41 |
- color-mix() 42 | 43 |
- color-contrast() 44 | 45 |
- color-contrast() with no 46 | 47 |
- relative color 48 | 49 |
- relative color with RGB 50 |
Outer box-shadow
13 | Inner box-shadow
14 |
15 |
16 |
--------------------------------------------------------------------------------
/08/example_08-01/styles.css:
--------------------------------------------------------------------------------
1 | .box-shadow,
2 | .inner-box-shadow {
3 | height: 20vmin;
4 | width: 20vmin;
5 | border: 1px solid #111;
6 | margin: 1em;
7 | display: inline-flex;
8 | font-family: sans-serif;
9 | align-items: center;
10 | justify-content: center;
11 | }
12 |
13 | .box-shadow {
14 | box-shadow: 0 0 15px blue;
15 | }
16 |
17 | .inner-box-shadow {
18 | box-shadow: inset 0 0 15px violet;
19 | }
20 |
--------------------------------------------------------------------------------
/08/example_08-02/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | no spread
13 | with spread
14 |
15 |
16 |
--------------------------------------------------------------------------------
/08/example_08-02/styles.css:
--------------------------------------------------------------------------------
1 | .no-spread,
2 | .spread {
3 | height: 20vmin;
4 | width: 20vmin;
5 | border: 1px solid #111;
6 | margin: 1em;
7 | display: inline-flex;
8 | font-family: sans-serif;
9 | align-items: center;
10 | justify-content: center;
11 | }
12 |
13 | .no-spread {
14 | box-shadow: 0 10px 10px;
15 | }
16 |
17 | .spread {
18 | box-shadow: 0 10px 10px -10px;
19 | }
20 |
--------------------------------------------------------------------------------
/08/example_08-03/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | blur(2px)
14 | brightness(2)
15 | contrast(2)
16 | grayscale(.8)
17 | hue-rotate(25deg)
18 | invert(75%)
19 | opacity(50%)
20 | saturate(15%)
21 | sepia(.75)
22 |
23 |
24 |
--------------------------------------------------------------------------------
/08/example_08-08/styles.css:
--------------------------------------------------------------------------------
1 | .tri-right {
2 | width: 0;
3 | height: 0;
4 | border-top: 3.125rem solid transparent;
5 | border-left: 6.25rem solid red;
6 | border-bottom: 3.125rem solid transparent;
7 | margin-bottom: 5rem;
8 | /*box-shadow: 8px 8px 6px #333;*/
9 | -webkit-filter: drop-shadow(8px 8px 6px #333);
10 | filter: drop-shadow(8px 8px 6px #333);
11 |
12 | }
13 |
14 | [class^="filter"] {
15 | background-image: url('el-cap@1x.jpg');
16 | -webkit-background-size: cover;
17 | background-size: cover;
18 | width: 750px;
19 | height: 500px;
20 | margin-bottom: 5rem;
21 | }
22 |
23 | @media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
24 | [class^="filter"] {
25 | background-image: url('el-cap@2x.jpg');
26 | }
27 | }
28 |
29 | .filter-blur {
30 | -webkit-filter: blur(2px);
31 | filter: blur(2px);
32 | }
33 |
34 | .filter-brightness {
35 | -webkit-filter: brightness(2);
36 | filter: brightness(2);
37 | }
38 |
39 | .filter-contrast {
40 | -webkit-filter: contrast(2);
41 | filter: contrast(2);
42 | }
43 |
44 | .filter-grayscale {
45 | -webkit-filter: grayscale(.8);
46 | filter: grayscale(.8);
47 | }
48 |
49 | .filter-hue-rotate {
50 | -webkit-filter: hue-rotate(25deg);
51 | filter: hue-rotate(25deg);
52 | }
53 |
54 | .filter-invert {
55 | -webkit-filter: invert(75%);
56 | filter: invert(75%);
57 | }
58 |
59 | .filter-opacity {
60 | -webkit-filter: opacity(50%);
61 | filter: opacity(50%);
62 | }
63 |
64 | .filter-saturate {
65 | -webkit-filter: saturate(15%);
66 | filter: saturate(15%);
67 | }
68 |
69 | .filter-sepia {
70 | -webkit-filter: sepia(.75);
71 | filter: sepia(.75);
72 | }
--------------------------------------------------------------------------------
/08/example_08-09/1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/08/example_08-09/1.jpg
--------------------------------------------------------------------------------
/08/example_08-09/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
15 |
16 |
17 |
18 |
19 |
20 |
--------------------------------------------------------------------------------
/08/example_08-10/styles.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | }
4 |
5 | html,
6 | body {
7 | margin: 0;
8 | padding: 0;
9 | }
10 |
11 | body {
12 | background-color: #333;
13 | }
14 |
15 | .masks-Frame {
16 | max-width: 1000px;
17 | margin: 0 auto;
18 | position: relative;
19 | width: 100%;
20 | height: 600px;
21 | animation: move 9s ease-in-out infinite alternate;
22 | }
23 |
24 | .masks-InnerTriangle {
25 | position: absolute;
26 | left: 0;
27 | top: 0;
28 | right: 0;
29 | bottom: 0;
30 | background-image: url('1.jpg');
31 | background-size: 600px auto;
32 | background-repeat: no-repeat;
33 | background-position: 95% center;
34 | clip-path: polygon(
35 | calc(100% - 320px) 60px,
36 | calc(100% - 60px) calc(100% - 40px),
37 | calc(100% - 580px) calc(100% - 40px)
38 | );
39 | animation: pulseInner 9s ease-in-out infinite alternate;
40 | }
41 |
42 | .masks-OuterTriangle {
43 | position: absolute;
44 | left: 0;
45 | top: 0;
46 | right: 0;
47 | bottom: 0;
48 | background: linear-gradient(hsla(0, 0%, 0%, 0.4) 0, hsla(0, 0%, 0%, 0.4) 100%),
49 | url('1.jpg');
50 | background-size: 600px auto;
51 | background-repeat: no-repeat;
52 | background-position: 95% center;
53 | clip-path: polygon(
54 | calc(100% - 320px) 20px,
55 | calc(100% - 20px) calc(100% - 20px),
56 | calc(100% - 620px) calc(100% - 20px)
57 | );
58 | }
59 | @keyframes move {
60 | 0% {
61 | transform: translate3d(-40px, 40px, 0);
62 | }
63 | 20% {
64 | transform: translate3d(-30px, 10px, 0);
65 | }
66 | 30% {
67 | transform: translate3d(20px, 17px, 0);
68 | }
69 | 50% {
70 | transform: translate3d(-15px, 40px, 0);
71 | }
72 | 100% {
73 | transform: none;
74 | }
75 | }
76 |
77 | @keyframes pulseInner {
78 | 0% {
79 | clip-path: polygon(
80 | calc(100% - 320px) 180px,
81 | calc(100% - 180px) calc(100% - 120px),
82 | calc(100% - 460px) calc(100% - 120px)
83 | );
84 | }
85 |
86 | 50% {
87 | clip-path: polygon(
88 | calc(100% - 320px) 180px,
89 | calc(100% - 180px) calc(100% - 120px),
90 | calc(100% - 460px) calc(100% - 120px)
91 | );
92 | }
93 | 100% {
94 | clip-path: polygon(
95 | calc(100% - 320px) 60px,
96 | calc(100% - 60px) calc(100% - 40px),
97 | calc(100% - 580px) calc(100% - 40px)
98 | );
99 | }
100 | }
101 |
--------------------------------------------------------------------------------
/08/example_08-11/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | 
19 |
20 |
21 |
--------------------------------------------------------------------------------
/08/example_08-11/mars-text-mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/08/example_08-11/mars-text-mask.png
--------------------------------------------------------------------------------
/08/example_08-11/mars.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/08/example_08-11/mars.jpg
--------------------------------------------------------------------------------
/08/example_08-11/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | body {
8 | background-color: #111;
9 | }
10 | .mask-image-example {
11 | display: block;
12 | height: 1024px;
13 | width: 1024px;
14 | margin: 0 auto;
15 | -webkit-mask-image: url("mars-text-mask.png");
16 | mask-image: url("mars-text-mask.png");
17 | animation: moveMask 6s infinite alternate;
18 | }
19 |
20 | @keyframes moveMask {
21 | 0% {
22 | object-position: 0px 0px;
23 | }
24 | 100% {
25 | object-position: 100px 100px;
26 | }
27 | }
28 |
--------------------------------------------------------------------------------
/08/example_08-12/mars-text-mask.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/08/example_08-12/mars-text-mask.png
--------------------------------------------------------------------------------
/08/example_08-12/mars.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/08/example_08-12/mars.jpg
--------------------------------------------------------------------------------
/08/example_08-12/styles.css:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 | margin: 0;
4 | padding: 0;
5 | }
6 |
7 | body {
8 | background-image: url('mars.jpg');
9 | background-attachment: fixed;
10 | background-repeat: no-repeat;
11 | background-color: #000;
12 | font-family: Georgia, 'Times New Roman', Times, serif;
13 | }
14 |
15 | .over-text {
16 | font-size: 25px;
17 | line-height: 1.4;
18 | color: #fff;
19 | mix-blend-mode: overlay;
20 | max-width: 30em;
21 | margin: 9em 5em;
22 | }
23 |
--------------------------------------------------------------------------------
/09/scones.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/09/scones.jpg
--------------------------------------------------------------------------------
/09/squoosh-scones.avif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/09/squoosh-scones.avif
--------------------------------------------------------------------------------
/09/squoosh-scones.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/09/squoosh-scones.jpg
--------------------------------------------------------------------------------
/09/squoosh-scones.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/09/squoosh-scones.webp
--------------------------------------------------------------------------------
/10/example_10-01/Star.svg:
--------------------------------------------------------------------------------
1 |
2 |
--------------------------------------------------------------------------------
/10/example_10-02/IcoMoon - 5 Icons/PNG/drag-left-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/10/example_10-02/IcoMoon - 5 Icons/PNG/drag-left-right.png
--------------------------------------------------------------------------------
/10/example_10-02/IcoMoon - 5 Icons/PNG/drag-left.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/10/example_10-02/IcoMoon - 5 Icons/PNG/drag-left.png
--------------------------------------------------------------------------------
/10/example_10-02/IcoMoon - 5 Icons/PNG/drag-right.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/10/example_10-02/IcoMoon - 5 Icons/PNG/drag-right.png
--------------------------------------------------------------------------------
/10/example_10-02/IcoMoon - 5 Icons/PNG/multitouch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/10/example_10-02/IcoMoon - 5 Icons/PNG/multitouch.png
--------------------------------------------------------------------------------
/10/example_10-02/IcoMoon - 5 Icons/PNG/touch.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/benfrain/rwd4/2c4f890d5342e73c10a7f6ec5fe223079b683c76/10/example_10-02/IcoMoon - 5 Icons/PNG/touch.png
--------------------------------------------------------------------------------
/10/example_10-02/IcoMoon - 5 Icons/Read Me.txt:
--------------------------------------------------------------------------------
1 | The *SVG* folder contains the icons you selected as separate SVG files.
2 |
3 | The *demo.html* lists the icons that you selected. To learn how to insert your icons as inline SVGs (with the