coding.space/index.html at master · awesomeisfree/coding.space · GitHub

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
<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>The Coding Space Projects</title>
	<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
	<link rel="stylesheet" href="index.css">
	<link rel="icon" type="favicon/x-icon" href="images/favicon.ico">
	<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
	 crossorigin="anonymous"></script>
</head>

<body>

	<h1>The Coding Space Projects</h1>
	<div class="container">

		<div class="section-holder">

			<section id="scratch">
				<a id="scratch-img" href="./scratch"><img class="img-responsive large-img" src="./images/2018scratch.png" alt="Scratch"></a>
				<div id="scratch-box" class="black-opaque infobox">Program your own interactive stories, games, and animations with Scratch
					-- and share your creations with others in the online community.
					<p class="info-para green">We recommend starting here.</p>
				</div>
			</section>

			<section id="woof">
				<a id="woof-img" href="http://woofjs.com/"><img class="img-responsive large-img" src="./images/2018woof.png" alt="Woof"></a>
				<div id="woof-box" class="black-opaque infobox">Build complex games, animations, and apps with WoofJS. It uses JavaScript,
					the language of the web, so you can build for mobile and integrate with APIs and databases.
					<p class="info-para yellow">We recommend completing two Level 4 Scratch projects before starting with WoofJS.</p>
				</div>
			</section>

			<section id="web">
				<a id="web-img" href="./web"><img class="img-responsive large-img" src="./images/2018web.png" alt="Web"></a>
				<div id="web-box" class="black-opaque infobox">Create websites and web apps using HTML, CSS, and JavaScript.
					<p class="info-para red">We recommend completing two Level 3+ WoofJS projects before you start with Web projects.</p>
				</div>
			</section>
		</div>

	</div>
<div id= "footer">

	<div id="learn-col">
		<div id="start" class="info-modal" style="margin-right: 7px">Where do I start?</div>
		<a href="./about.html"><div class="info-modal" id="about">About this site</div></a>
	</div>
	<div class="holder" style="min-height: 80px">
		<div id="start-box" class="black-opaque">
			<p class="info-para">We recommend starting with a Level 1 Scratch project, like
				<a href="./scratch/ghost-busters.html" target="_blank">Ghost Busters
				</a>.
			</p>

			<p class="info-para">If you’re a experienced coder, browse the levels to find a project that's challenging for you.
			</p>
		</div>
	</div>

	<div class="bottom-holder">
		<h4 id="tcs-text">Created by <a href="http://www.thecodingspace.com" target="_blank">The Coding Space</a></h4>
	</div>
</div>

	<script>

		function isMobileDevice() {
			return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
		};

		$(document).ready(function () {

			// scratch info hide/show
			$("#scratch-img").mouseenter(function () {
				$("#scratch-box").fadeIn(250);
				$("#footer").css("display","none");
			})
			$("#scratch-img").mouseleave(function () {
				$("#scratch-box").fadeOut(400);
				$("#footer").fadeIn(400);
			})

			// woof info hide/show
			$("#woof-img").mouseenter(function () {
				$("#woof-box").fadeIn(400);
				$("#footer").css("display","none");
			})
			$("#woof-img").mouseleave(function () {
				$("#woof-box").fadeOut(400);
				$("#footer").fadeIn(400);
			})

			// web info hide/show
			$("#web-img").mouseenter(function () {
				$("#web-box").fadeIn(400);
				$("#footer").css("display","none");
			})
			$("#web-img").mouseleave(function () {
				$("#web-box").fadeOut(400);
				$("#footer").fadeIn(400);
			})

			// learn more hide/show

			// tappable on mobile
			if (isMobileDevice()) {
				$("#start").mousedown(function () {
					$("#start-box").toggle();
				})
			}

			// hoverable not on mobile
			else {
				$("#start").mouseenter(function () {
					// make the box stay showing for a longer period of time so you can click the Ghost Busters link
					// only fade in if it's hidden -- prevents it from queuing up too many fade-ins during the delay()
					if ($('#start-box').is(':hidden')) {
						$("#start-box").fadeIn(250).delay(5000);
					}
				})
				$("#start").mouseleave(function () {
					$("#start-box").fadeOut(600);
				})
			}
		})

	</script>

</body>

</html>