-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (177 loc) · 14.4 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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<title>ROGERKIDS! | A Cartoon Website for Kids</title>
<link rel="icon" href="Image/Logo.png" type="image/x-icon"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ROGERKIDS! A cartoon website for kids to watch a cartoon for free during Christmas and New Year.">
<meta name="keywords" content="ROGERKIDS, cartoon, kids, free, entertainment, Christmas, New Year">
<meta name="robots" content="index, follow">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<link href="design.css" rel="stylesheet" type="text/css"/>
<script src="script.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZPVECY1WSB"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ZPVECY1WSB');
</script>
</head>
<body>
<div class="secAudio">
<audio controls autoplay loop>
<source src="Video/JingleBells.mp3" type="audio/mpeg">
Your browser does not support the <code>audio</code> tag.
</audio>
</div>
<div id="snow"></div>
<div class="top">
<div class="sectionLogo">
<div data-aos="fade-right" data-aos-delay="500" data-aos-duration="1000">
<a class="btnLogo" href="index.html">
<img src="Image/Logo.png" alt="RogerKids!" class="img-fluid logo" loading="lazy"/></a>
</div>
</div>
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand font-weight-bold" href="index.html">ROGERKIDS!</a>
</nav>
</div>
<div class="content">
<div class="container">
<div class="imagebar" data-aos="fade-down" data-aos-delay="2200" data-aos-duration="1000">
<button class="color1" onclick="changeBgImg1()">
<img src="Image/frame1.png" class="img-fluid" alt="Christmas card with lovely santa and friends characters Free Vector frame" loading="lazy"/>
</button>
<button class="color2" onclick="changeBgImg2()">
<img src="Image/frame2.png" class="img-fluid" alt="Santa claus sneaking toward christmas tree to place gifts cartoon illustration Free Vector frame" loading="lazy"/>
</button>
<button class="color3" onclick="changeBgImg3()">
<img src="Image/frame3.png" class="img-fluid" alt="Christmas illustration with santa claus Free Vector frame" loading="lazy"/>
</button>
<button class="color4" onclick="changeBgImg4()">
<img src="Image/frame4.png" class="img-fluid" alt="Christmas background Free Vector frame" loading="lazy"/>
</button>
</div>
<div class="intro py-5 shadow" data-aos="zoom-in" data-aos-delay="1500" data-aos-duration="500">
<img src="Image/Logo.png" alt="ROGERKIDS! Logo" class="img-fluid introImg" loading="lazy"/>
<h1 class="text-center mt-4 mb-2">Welcome to ROGERKIDS!</h1>
<p class="text-justify">This is an entertainment website that I created for kids to watch the cartoon that I made myself for free without paying. I hope the cartoon can entertain kids. Feel free to watch the cartoon.</p>
</div>
<div class="XmasNy">
<img src="Image/ChristmasText.png" alt="Christmas Text Image" class="img-fluid christmasText txt" data-aos="fade-right" loading="lazy"/>
<img src="Image/And.png" alt="And Text Image" class="img-fluid and" data-aos="zoom-in" data-aos-delay="500" loading="lazy"/>
<img src="Image/NewYear.png" alt="New Year Text Image" class="img-fluid nyText txt" data-aos="fade-left" data-aos-delay="1000" loading="lazy"/>
<p class="text-justify" id="xmasText" data-aos="fade" data-aos-delay="1500" data-aos-duration="1000">It is almost Christmas and New Year. We hope children get to enjoy watch the cartoon during holidays. We hereby wish you a <b class="merryXmas">Merry Christmas</b> and a <b class="hny" id="hny">Happy New Year.</b>
</div>
</div>
<div class="container-fluid secKid" data-aos="zoom-in" data-aos-anchor-placement="center-bottom">
<img src="Image/entertainment.png" alt="Entertainment text" class="img-fluid mx-auto entertain"
data-aos="zoom-in" data-aos-anchor-placement="bottom-bottom" loading="lazy"/>
<img src="Image/HoverMe.png" alt="HoverMe Message" class="img-fluid mx-auto hoverMsg" data-aos="flip-up" data-aos-anchor-placement="center-center" loading="lazy"/>
<div class="row kids text-center">
<div class="col-4"><img src="Image/LeftKid.png" alt="Happy cute little kids boy and girl read book Free Vector left kid" class="img-fluid kid leftKid"
data-aos="fade-up" data-aos-anchor-placement="center-bottom" loading="lazy"/></div>
<div class="col-4"><img src="Image/MiddleKid.png" alt="Happy cute little kids boy and girl read book Free Vector middle kid" class="img-fluid kid middleKid"
data-aos="fade-up" data-aos-anchor-placement="center-bottom" loading="lazy"/></div>
<div class="col-4"><img src="Image/RightKid.png" alt="Right kid" class="img-fluid kid rightKid"
data-aos="fade-up" data-aos-anchor-placement="center-bottom" loading="lazy"/></div>
</div>
</div>
<div class="container-fluid bgChristmas">
<div class="row">
<div class="col colChristmas">
<img src="Image/ChristmasCartoonText.png" alt="Christmas Cartoon text" class="img-fluid txtChristmas"
data-aos="zoom-in" data-aos-anchor-placement="bottom-bottom" loading="lazy"/>
</div>
</div>
<div class="row">
<div class="col-6 leftChristmas" data-aos="fade-right" data-aos-anchor-placement="center-bottom">
<div class="col-4 present">
<img src="Image/Present.png" alt="Realistic luxury gift boxes set Free Vector" class="img-fluid sourcePresent" data-toggle="modal" data-target=".bd-example-modal-lg"
data-aos="fade" data-aos-delay="1500" data-aos-duration="1250" loading="lazy"/>
</div>
</div>
<div class="col-6 rightChristmas" data-aos="fade-left" data-aos-anchor-placement="center-bottom">
<div class="shadow embed-responsive embed-responsive-16by9 mr-auto ml-auto video" data-aos="fade" data-aos-delay="700" data-aos-duration="2000">
<video controls class="embed-responsive-item">
<source src="Video/AlternativeSolutions.mp4" type="video/mp4" />
</video>
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id = "msgModal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title" id="exampleModalLongTitle">ROGERKIDS!</h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<h2 class="modalSubt">Sources Used in This Site</h2>
<p class="text-justify modalText">This is a non-commercial school project. Most of the works here originate from others' works. You may click to the links below to see the works from authors.
</p>
<ul class="list-group">
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/nice-businessman-character-set_2960917.htm">Nice businessman character set Free Vector by pikisuperstar - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/student-doing-different-actions_2921542.htm">Student doing different actions Free Vector by pikisuperstar - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.fesliyanstudios.com/royalty-free-music/downloads-c/children-kids-music/51">Clap And Sing (By David Renda) - Royalty free music from https://www.FesliyanStudios.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.myinstants.com/instant/ding-sound-effect/">ding sound effect - https://www.myinstants.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://freemusicarchive.org/music/Scott_Holmes/christmas-background-music/jingle-bells-1">Jingle Bells by Scott Holmes Music - https://freemusicarchive.org/home</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/christmas-card-with-lovely-santa-friends-characters_6096701.htm">Christmas card with lovely santa and friends characters Free Vector created by BiZkettE1 - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/santa-claus-sneaking-toward-christmas-tree-place-gifts-cartoon-illustration_6690819.htm">Santa claus sneaking toward christmas tree to place gifts cartoon illustration Free Vector created by vectorpouch - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/christmas-illustration-with-santa-claus_11571235.htm">Christmas illustration with santa claus Free Vector by callmetak - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/christmas-background_1368140.htm">Christmas background Free Vector created by kjpargeter - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/vintage-christmas-tree-with-gifts_11186555.htm">Vintage christmas tree with gifts Free Vector created by freepik - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/happy-cute-little-kids-boy-girl-read-book_6983404.htm">Happy cute little kids boy and girl read book Free Vector created by colorfuelstudio - www.freepik.com</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://pixabay.com/illustrations/christmas-santa-claus-frame-3766056/">Christmas Santa Claus Frame Background by marucha - https://pixabay.com/</a>
</li>
<li class="list-group-item d-flex align-items-center">
<a href="https://www.freepik.com/free-vector/realistic-luxury-gift-boxes-set_9586860.htm">Realistic luxury gift boxes set Free Vector created by macrovector - www.freepik.com</a>
</li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="mr-auto ml-auto btn btnModal" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</div>
<div class="footer font-weight-bold">
<p>Copyright © ROGERKIDS!</p>
</div>
<script>AOS.init({ startEvent: 'load', });</script>
</body>
</html>