-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
159 lines (144 loc) · 8.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
<!doctype html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta name="author" content="jouw naam">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Winnie the Pooh - Timeline</title>
<link rel="stylesheet" href="https://use.typekit.net/bjl8hpx.css">
<link href="styles/style.css" rel="stylesheet">
<link rel="icon" type="image/svg+xml" href="images/cursor.png">
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1350 500" width="100%" id="blobSvg">
<defs>
<linearGradient id="honing">
<stop offset="0%" stop-color="#fccc00"/>
<stop offset="30%" stop-color="#ffe266"/>
<stop offset="50%" stop-color="#ffea8f"/>
<stop offset="70%" stop-color="#ffe266"/>
<stop offset="100%" stop-color="#fccc00"/>
</linearGradient>
</defs>
<defs>
<linearGradient id="horror">
<stop offset="0%" stop-color="#8a0303"/>
<stop offset="30%" stop-color="#a62d2d"/>
<stop offset="50%" stop-color="#be5c5c"/>
<stop offset="70%" stop-color="#a62d2d"/>
<stop offset="100%" stop-color="#8a0303"/>
</linearGradient>
</defs>
<path id="start" d="M0,281V0H1368V261c-33.29,10.12-48.41,5.1-56-2-28.28-26.47,30.22-98.69-2-162-13.15-25.84-40.99-49.37-63-45-29.58,5.87-46.2,61.66-46,105,.31,67.67,41.51,83.41,39,146-1.76,43.88-24.47,97.64-58,103-28.38,4.54-60.15-26.93-76-56-34.14-62.62,8.37-109.07-18.5-218.5-10.89-44.35-22.93-57.28-35.5-61.5-22.32-7.49-53.43,10.09-67,34-14.94,26.31-.03,45.73,3,111,2.39,51.51,3.97,85.65-16,101-25.08,19.28-83.15,8.19-107-26-40.03-57.37,38.9-147.4-3-193-15.89-17.29-42.72-21.2-61-18-31.09,5.45-48.55,33.44-62,55-7.6,12.19-26.18,42.8-27,85-1.09,55.95,30.3,65.73,28,115-1.59,34.07-19.09,82.53-55,93-35.52,10.36-79.39-19.27-99-54-25.39-44.98,3.7-75.41-3-178-3.08-47.08-6.03-111.78-40-125-23.35-9.09-49.43,10.67-50.5,11.5-37.79,29.42-27.24,95.87-25,110,8.22,51.83,32.63,63.32,25,95-6.72,27.89-34.05,53.9-62,55-37.83,1.49-68.79-42.97-81-76-28.38-76.76,28.67-134.53-4.5-172.5-18.83-21.57-58.79-27.62-77-13-31.22,25.05,17,98.64-20,139-17.98,19.61-51.62,26.51-71,15-19.72-11.71-22.2-41.02-25-74-4.67-55.02,9.99-76.03-4-90-16.15-16.13-59.38-11.82-79,11-8.23,9.58-15.3,25.9,1,131,10.64,68.6,18.96,95.86,3,110-11.49,10.18-31.61,10.05-46,3-15.9-7.79-26.24-24.7-27-44Z;"/>
<path id="eind" d="M0,281V0H1368V261c-13.85,.74-32.85-.55-44-13-27.49-30.71,27.35-90.69,2-151-13.36-31.79-47.44-59.94-76-55-31.8,5.5-53.05,51.39-55,89-3.36,64.59,51.2,84.99,45,145-3.81,36.9-29.59,79.02-64,84-35.72,5.17-73.84-30.67-87-67-17.49-48.26,18.2-72.14,12-155-2.42-32.36-5.23-69.92-31-84-27.17-14.85-72.39,.51-90,29-16.53,26.75,2.68,46.65-1,112-2.13,37.77-4.46,79.08-28,91-27.25,13.79-80.67-12.93-101-53-20.5-40.41,5.08-69.93-21-131-14.97-35.06-29.31-39.16-33-40-27.3-6.24-55.52,31.94-60,38-4.33,5.86-23.76,33.25-26,84-2.46,55.73,19.15,63.95,16,109-2.76,39.53-23.75,95.49-59,101-32.59,5.09-67.59-34.47-82-69-13.61-32.63-3.97-49.08-2-130,2.64-108.58-13.58-126.15-22-133-18.68-15.21-48.45-18.01-69-7-29.59,15.85-33.99,57.09-36,76-5.58,52.42,18.6,69.56,5,105-8.52,22.21-29.82,46.25-53,46-33.3-.36-54.8-50.68-57-56-29.29-70.79,22.88-126.72-7-159-17.96-19.4-57.88-21.97-77-6-31.61,26.4,7.53,91.9-28,125-15.78,14.7-42.51,19.49-57,10-10.11-6.62-11.49-18.37-19-75-7.33-55.3-8.67-64.14-17-71-18.53-15.25-60.32-11.32-79,11-25.5,30.48-9.68,97.37,3,151,4.5,19.02,10.73,40.44,0,60-.76,1.39-15.89,27.99-41,26-16.39-1.3-26.66-13.96-29-17Z;"/>
</svg>
<header>
<h1>The evolution of</h1>
</header>
<main>
<article>
<input type="radio" id="binnen1" name="pages" checked>
<input type="radio" id="kaft" name="pages">
<section>
<label for="kaft">
<h2>Winnie the Pooh</h2>
<p>click me</p>
<img src="images/winnie-the-poeh.png" alt="Winnie the Pooh from Disneyclips.com">
</label>
<label for="binnen1">
<img src="images/hundred-acre-woods-half1.jpg" alt="Page half 1 of Hundred Acre Woods from i.etsystatic.com">
<ol>
<li>
<button>Go to 1921</button>
<div>
<img src="images/winnie-the-pooh-1921.png" alt="Winnie the Pooh from 1920 to 1924 from images0.persgroep.net">
<div>
<h3>1921</h3>
<p>Christopher Robin Milne gets a teddy bear for his first birthday. He first names the bear Edward, but after a visit to the London Zoo, he names the teddy bear after the bear Winnipeg. Later, he got several other stuffed animals that became Winnie's friends.</p>
</div>
</div>
</li>
<li>
<button>Go to 1924 to 1928</button>
<div>
<img src="images/winnie-the-pooh-1924.png" alt="Winnie the Pooh from 1924 to 1928 from upload.wikimedia.org">
<div>
<h3>1924</h3>
<p>Christopher Robin played a lot with his stuffed animal, this inspired A. A. Milne to write poems and stories about it. In 1924, the first poem appeared in When We Were Very Young. He then wrote the book Winnie the Pooh in 1926. The illustrations were made by E. H. Shepard.</p>
</div>
</div>
</li>
<li>
<button>Go to 1932</button>
<div>
<img src="images/winnie-the-pooh-1932.png" alt="Winnie the Pooh from 1930 to 1932 from lh3.googleusercontent.com">
<div>
<h3>1932</h3>
<p>Winnie the Pooh first appeared in color in 1932 when it was drawn by Slesinger. He also wore a red t-shirt for the first time.</p>
</div>
</div>
</li>
<li>
<button>Go to 1969 to 1972</button>
<div>
<img src="images/winnie-the-pooh-1969.png" alt="Winnie the Pooh version of the Sovjet Union from images.mubicdn.net">
<div>
<h3>1969-1972</h3>
<p>In the Soviet Union, a version of Winnie the Pooh was made called Vinni Pukh. Pooh looked much more like a panda than a bear and he also got a completely different character, namely unkind and aggressive.</p>
</div>
</div>
</li>
</ol>
</label>
</section>
<input type="radio" id="binnen3" name="pages">
<input type="radio" id="binnen2" name="pages">
<section>
<label for="binnen2">
<img src="images/hundred-acre-woods-half2.jpg" alt="Page half 2 of Hundred Acre Woods from i.etsystatic.com">
<ol>
<li>
<button>Go to 1961 to 2021</button>
<div>
<img src="images/winnie-the-pooh-1961.png" alt="Winnie the Pooh by Disney from 1961 from Disneyclips.com">
<div>
<h3>1961-2021</h3>
<p>In 1961, Disney got the rights to Winnie the Pooh and since then they have released many different movies. The character of Winnie the Pooh in the books and movies is that he is naive, slow-witted and friendly. He also likes to eat a lot of honey.</p>
</div>
</div>
</li>
<li>
<button>Go to 2018 Live action</button>
<div>
<img src="images/winnie-the-pooh-2018.png" alt="Winnie the Pooh live action 2018 from s1.dmcdn.net">
<div>
<h3>2018</h3>
<p>In 2018, Disney released a live action movie about Christopher Robin. In the film, Christopher Robin's stuffed animals and himself are not illustrated, but Christopher Robin is a real person and Pooh and his friends are animated plushies.</p>
</div>
</div>
</li>
<li>
<button>Go to 2021 Copyrights expired</button>
<div>
<img src="images/winnie-the-pooh-2023.png" alt="Winnie the Pooh Horror film 2023 from media.pathe.nl">
<div>
<h3>2021</h3>
<p>Since 2021 Winnie the Pooh is a public domain, because it has been 95 years since the first publication. Disney has no longer exclusive rights, so independent filmmaker Rhys-Frake Wakefield made a horror film about Winnie the Pooh that will come out in 2023.</p>
</div>
</div>
</li>
</ol>
</label>
<label for="binnen3">
<img src="images/horror-pooh.jpeg" alt="Horror Pooh from media.pathe.nl">
</label>
</section>
</article>
</main>
<footer></footer>
<script src="scripts/MorphSVGPlugin.min.js"></script>
<script scr="scripts/TimelineMax.min.js"></script>
<script src="scripts/TweenMax.min.js"></script>
<script src="scripts/script.js"></script>
</body>
</html>