/
index.html
235 lines (222 loc) · 12.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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<title>ToonStoryTime | StoryHouse Production</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style1.css" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- Google Stuff (Recommended to change or delete it if you doesn't want.) -->
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YPQMMXKB86"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-YPQMMXKB86');
</script>
<!-- Google Adsense -->
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7481452619144920"
crossorigin="anonymous"></script>
<!-- End of Google Stuff -->
</head>
<body>
<header>
<!-- Sidebar -->
<!--- Change your logo here. --><a href="index.html"><img class="logo" src="assets/oem.svg" alt="logo"></a></img><!--- Change your logo here. -->
<nav>
<ui class="nav_links">
<!--- Change your nav links here. -->
<li><a href="#about">About Me</a></li>
<li><a href="#platform">Platform</a></li>
<li><a href="#projects">Project</a></li>
<li><a href="https://blog.toonstorytime.me">Blog</a></li>
<li><a href="https://scrapbook.hackclub.com/toonnongaeoy">Scrapbook</a></li>
<!--- Ending here. -->
</ui>
</nav>
<a class="cta" href="#contact"><button>Contact</button></a>
<a onclick="openNav()" class="menu" href="#"><button>Menu</button></a>
<!-- End of Sidebar -->
</header>
<div class="hero-image">
<div class="hero-text">
<h1>Vlog Games and Storytime.</h1>
</br>
<div class="wrapper-text">
<h2>Youtuber and Developer with </h2>
</br>
<h2 id="subCount">NaN</h2>
</br>
<h2> Subscribers.</h2>
</div>
</div>
</div>
<div class="about-section">
<section id="about">
<h1 class="header">About Me</h1>
</br>
<center>
<span class="info">Hi. My name is Kritthapath Yaviraj or You can call me Cartoon. I'm studying 2nd Year of Vocational Colleage at <a href="https://dusitnon.ac.th">Dusit Commercial College Nonthaburi</a></span>
</center>
<h1 class="header">Languages</h1>
</br>
<div class="row-pc">
<div class="column"><img class="icon2" src="assets/visual-basic.png"><h2>Visual Basic</h2></div>
<div class="column"><img class="icon2" src="assets/html-5.png"><h2>HTML</h2></div>
<div class="column"><img class="icon2" src="assets/css.png"><h2>CSS</h2></div>
<div class="column"><img class="icon2" src="assets/php.png"><h2>PHP</h2></div>
<div class="column"><img class="icon2" src="assets/mysql.png"><h2>MySQL</h2></div>
<div class="column"><img class="icon2" src="assets/c.png"><h2>C</h2></div>
<div class="column"><img class="icon2" src="assets/python.png"><h2>Python</h2></div>
<div class="column"><img class="icon2" src="assets/batchscript.png"><h2>Batch Script (.BAT)</h2></div>
</div>
<div class="row-mobile">
<div class="column">
<img src="assets/visual-basic.png"><h2>Visual Basic</h2>
<img src="assets/html-5.png"><h2>HTML</h2>
</div>
<div class="column">
<img src="assets/css.png"><h2>CSS</h2>
<img src="assets/php.png"><h2>PHP</h2>
</div>
<div class="column">
<img src="assets/mysql.png"><h2>MySQL</h2>
<img src="assets/c.png"><h2>C</h2>
</div>
<div class="column">
<img src="assets/python.png"><h2>Python</h2>
<img src="assets/batchscript.png"><h2>Batch Script (.BAT)</h2>
</div>
</div>
</section>
<section id="platform">
<h1 class="header">Platform</h1>
<div class="row-pc">
<div class="column-free"><a href="https://www.youtube.com/channel/UCQUBBBEQgDxnFTd52UtjSTg"><img class="icon2" src="assets/youtube_social_squircle_red.png"><h2>Youtube</h2><p>Currently <div id="subCount1">NaN</div> Subscribers.</p></a></div>
<div class="column-free"><a href="https://twitch.tv/toonstorytime"><img class="icon2" src="assets/TwitchGlitchPurple.svg"><h2>Twitch</h2></a></div>
<div class="column-free"><a href="https://fb.me/toonstorytime"><img class="icon2" src="assets/f_logo_RGB-Blue_512.png"><h2>Facebook</h2></a></div>
</div>
<div class="row-mobile">
<div class="column">
<a href="https://www.youtube.com/channel/UCQUBBBEQgDxnFTd52UtjSTg"><img class="icon2" src="assets/youtube_social_squircle_red.png"><h2>Youtube</h2></a>
<a href="https://twitch.tv/toonstorytime"><img class="icon2" src="assets/TwitchGlitchPurple.svg"><h2>Twitch</h2></a>
<div class="column">
<a href="https://fb.me/toonstorytime"><img class="icon2" src="assets/f_logo_RGB-Blue_512.png"><h2>Facebook</h2></a>
</div>
</div>
</section>
<script type="text/javascript" src="ytapi.js"></script>
<section id="projects">
<h1 class="header">Project</h1>
<h2 class="info">This also include project that has been archived. and When I'm still in Grade 3.</h2>
<div class="row-pc">
<div class="column-free"><a href="https://github.com/StoryHouseProduction/CartoonOffice"><img class="icon2" src="assets/W.svg"><h2>Cartoon Office Word</h2><p>Tried to make like Microsoft-Suite Using .NET Visual Basic</p><p>On Visual Studio 2010 (Pirated Version of course cause I didn't know that Microsoft had a community version in Grade 3 or 4.)</p></a></div>
<div class="column-free"><a href="https://storyhouseproduction.github.io/CartoonLove.Website/"><img class="icon2" src="assets/Cringe.svg"><h2>CartoonLove********'s Website</h2><p>First Website that I Made with HTML and Very Basic CSS and then rewrite on PHP. Original Icon of this website is very cringe by the way.</p><p>Fact : This name was censored when I Move on from soneone's name cause I fall in love with her for 4 years. Every now and then It's still a very cringe story that I have aroud age 10 - 14.</p></a></div>
<div class="column-free"><a href="https://thai.hackclub.com"><img class="icon2" src="https://assets.hackclub.com/icon-progress-rounded.svg"><h2>Global Hackclub's Site</h2><p>First Translation that I use in public. Traslated Hack Club's Global Site in Thai Language.</a></div>
</div>
<div class="row-mobile">
<div class="column">
<a href="https://github.com/StoryHouseProduction/CartoonOffice"><img class="icon2" src="assets/W.svg"><h2>Cartoon Office Word</h2><p>Tried to make like Microsoft-Suite Using .NET Visual Basic</p><p>On Visual Studio 2010 (Pirated Version of course cause I didn't know that Microsoft had a community version in Grade 3 or 4.)</p></a></div>
<div class="column">
<a href="https://storyhouseproduction.github.io/CartoonLove.Website/"><img class="icon2" src="assets/Cringe.svg"><h2>CartoonLove********'s Website</h2><p>First Website that I Made with HTML and Very Basic CSS and then rewrite on PHP. Original Icon of this website is very cringe by the way.</p><p>Fact : This name was censored when I Move on from soneone's name cause I fall in love with her for 4 years. Every now and then It's still a very cringe story that I have aroud age 10 - 14.</p></a>
</div>
<div class="column">
<a href="https://thai.hackclub.com"><img class="icon2" src="https://assets.hackclub.com/icon-progress-rounded.svg"><h2>Global Hackclub's Site</h2><p>First Translation that I use in public. Traslated Hack Club's Global Site in Thai Language.</p></a>
</div>
</section>
<section id="contact">
<h1 class="header">Contact us!</h1>
<div class="row-pc">
<div class="column-free"><a href="https://fb.me/toonnongaeoy"><img class="icon2" src="assets/f_logo_RGB-Blue_512.png"><h2>Facebook</h2><p>Cartoon Kritthapath Yaviraj</p></a></div>
<div class="column-free"><a href="https://www.instagram.com/toonnongaeoy/"><img class="icon2" src="assets/Instagram_Glyph_Gradient_RGB.svg"><h2>Instagram</h2><p>@toonnongaeoy</p></a></div>
<div class="column-free"><a href="mailto:contact@toonstorytime.me"><img class="icon2" src="assets/Circle-icons-mail.svg"><h2>E-Mail us</h2><p>contact@toonstorytime.me</p></a></div>
</div>
<div class="row-mobile">
<div class="column">
<a href="https://fb.me/toonwannamoveon"><img class="icon2" src="assets/f_logo_RGB-Blue_512.png"><h2>Facebook</h2><p>Cartoon Kritthapath Yaviraj</p></a>
</div>
<div class="column">
<a href="https://www.instagram.com/toonnongaeoy/"><img class="icon2" src="assets/Instagram_Glyph_Gradient_RGB.svg"><h2>Instagram</h2><p>@toonnongaeoy</p></a>
</div>
<div class="column">
<a href="mailto:contact@toonstorytime.me"><img class="icon2" src="assets/Circle-icons-mail.svg"><h2>E-Mail us</h2><p>contact@toonstorytime.me</p></a>
</div>
</section>
<br>
<br>
</a>
</div>
<div id="mobile__menu" class="overlay">
<a class="close" onclick="closeNav()">×</a>
<div class="overlay__content">
<!--- Change your mobile nav links here. -->
<a href="#about" onclick="closeNav()">About Me :3</a>
<a href="#platform" onclick="closeNav()">Platform</a>
<a href="#projects" onclick="closeNav()">Project</a>
<a href="https://blog.toonstorytime.me" onclick="closeNav()">Scrapbook</a>
<a href="https://scrapbook.hackclub.com/toonnongaeoy" onclick="closeNav()">Scrapbook</a>
<a href="#contact" onclick="closeNav()">Contact</a>
<!--- End of mobile nav links. -->
</div>
</div>
<footer>
<h1 class="header"> </h1>
<h1>Follow me.</h1>
<div class="wrapper">
<!--- Change your social media links here. -->
<a href="https://fb.com/toonstorytime" class="icon facebook">
<span><i class="fab fa-facebook-f"></i></span>
</a>
<a href="https://www.twitter.com/toonnongaeoy" class="icon twitter">
<span><i class="fab fa-twitter"></i></span>
</a>
<a href="https://www.instagram.com/toonnongaeoy" class="icon instagram">
<span><i class="fab fa-instagram"></i></span>
</a>
<a href="https://www.github.com/toonnongaeoy" class="icon github">
<span><i class="fab fa-github"></i></span>
</a>
<a href="https://www.youtube.com/channel/UCQUBBBEQgDxnFTd52UtjSTg" class="icon youtube">
<span><i class="fab fa-youtube"></i></span>
</a>
<a href="https://discord.gg/XeE85yB" class="icon discord">
<span><i class="fab fa-discord"></i></span>
</a>
<!--- End of social media links. -->
</div>
<h1 class="space2"> </h1>
<!--- Change this to your name or organization. --><h2>2013 - 2023 StoryHouse Production.</h2><!--- Change this to your name or organization. -->
<h1>Version 1.1.1 Whilster. Find us on <!--- Change this to your fork. --><a href="https://github.com/toonnongaeoy/mysite/">Github.</a><!--- Change this to your fork. --></h3></font></h1>
</br>
</br>
<div class="wrapper-text">
<!--- Hack Club webring! If you doesn't a hack club's slack member, please remove it. -->
<div id="webring-wrapper">
<a href="https://webring.hackclub.com/" id="previousBtn" class="webring-anchor" title="Previous">‹</a>
<a href="https://webring.hackclub.com/" class="webring-logo" title="Hack Club Webring" alt="Hack Club Webring"></a>
<a href="https://webring.hackclub.com/" id="nextBtn" class="webring-anchor" title="Next">›</a>
<script src="https://webring.hackclub.com/public/embed.min.js"></script>
<a href="https://webring.wonderful.software#toonstorytime.me" title="วงแหวนเว็บ">
<img
alt="วงแหวนเว็บ"
width="32"
height="32"
src="https://webring.wonderful.software/webring.black.svg"
/>
</a>
</div>
<!--- End of Hack Club webring! If you doesn't a hack club's slack member, please remove it. -->
</div>
</br>
</br>
<p class="info">If you encountered any error on our website. Please contact us on <!--- Change it to your webmaster or report mail. --><a href="mailto:report@toonstorytime.me">report@toonstorytime.me</a><!--- Change it to your webmaster or report mail. --> or <!--- Change it to your issue tab of your forked repo. --><a href="https://github.com/ToonWannaMoveOn/mysite/issues">Open Issues on GitHub</p><!--- Change it to your issue tab of your forked repo. -->
</footer>
<script type="text/javascript" src="mobile.js"></script>
<script type="text/javascript" src="firebase.js"></script>
</body>
</html>