UI_programmingII/help.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
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Help</title>
    <link rel="stylesheet" href="css/helpCSS.css">
    <a href="home.html" class="backbutton">Back</a>
</head>
<body>
<div class="header">
    <h1>Help</h1>
</div>

<!--This page is showing some information for users. -->

<div class="row">

    <div class="col-6"><!--The class name is col-6. We use this for media query. Media query is used in the related CSS file -->
        <img class="helpImg" src="pic/questionMark.png">
        <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>
    <div class="col-6"><!--The class name is col-6. We use this for media query. Media query is used in the related CSS file -->
        <img class="helpImg" src="pic/memory.png">
        <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>

</div>


<div class="row">

    <div class="col-6"><!--The class name is col-6. We use this for media query. Media query is used in the related CSS file -->
        <img class="helpImg" src="pic/camera.png">
        <h1>Game - Memory</h1>
        <p>If you want to have a photo as your avatar, it is simple.
            You see a button in the middle of the page and you can simply click it and take your photo.</p>
    </div>
    <div class="col-6"><!--The class name is col-6. We use this for media query. Media query is used in the related CSS file -->
        <img class="helpImg" src="pic/star.png">
        <h1>Scores</h1>
        <p>Green stars come in the left corner of pages when you answer a question correctly.
            If it is not correct, a red star pop ups one second in order to show that your answer is wrong.</p>
    </div>

</div>

</body>
</html>