UI_programmingII/home.html at master · Jessica1213/UI_programmingII · 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
<html>
<head>
	<meta charset="UTF-8">
	<a href="help.html" class="helpstyle"> IF YOU NEED MORE HELP, CLICK HERE!! </a>
	<title>Skywonder</title>
	<link rel="stylesheet" href="css/homeCSS.css?v=1.0">
    <script src="JavascriptFiles/Library/jquery-1.12.0.js"></script>
    <script src="JavascriptFiles/home.js"></script>
</head>
<body>
	<!--Div for title and play/pause background music-->
    <div class="header">Sky Wonder<audio id="music2" src="music/BGM.mp3" autoplay="autoplay" loop="loop">Your browser not support audio.</audio>
	<a href="javascript:playPause();"><img src="pic/On.png"  width="30" height="30" id="music_btn2" border="0"></a> </div>
    <div class="intro">Welcome to Sky Wonder!! There are small games for children. Enjoy :)</div>
    <div id="user"> <!--Div for account data-->
        Hi &nbsp;
        <span id="usernameLogin"></span>
        &nbsp;&nbsp;&nbsp;
        <img id="usericon">
    </div>
    <div class="content"><!--Div for two link, and help page div-->
			<img class="floating" id="C1" SRC="pic/C1.png">
			<a href="memoryGame.html" id="a1"><img class="floating" id="B1" SRC="pic/B1.png"></a>
			<div id="help1">
				<h1>Memory Game</h1>
				<p> Four images are shown to you on four cards. Then the cards rotate and you can not see the images.
					Then one question pop ups and one of those images is the answer. You just need to go on the answer card.</p></div>
			<img class="floating" id="C2" SRC="pic/C1.png">
			<a href="ChildGame.html" id="a2"><img class="floating" id="B2" SRC="pic/B2.png"></a>
			<div id="help2">
				<h1>Question-based Game</h1>
				<p>There are some questions. Their answers are animations that move.
				You should drag the answer image and drop it on to the basket.</p></div>
			<img class="floating" id="C3" SRC="pic/C1.png">
    </div>
    <!--Div for Copyright Notice-->
    <div class="footer">©2016 MariaRajabzadehNamaghi PeiChunChen JiaYingLin LincolnTam, All Rights Reserved.</div>
</body>
</html>