Honey-Tiles/index.html at main · JorSoi/Honey-Tiles · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Data -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍯</text></svg>">
    <title>Honey Tiles | Reaction Game</title>

    <!-- AOS CDN -->
    <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>

    <!-- Styling & Scripts-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="styles/landingpage.css" type="text/css">
    <script src="scripts/parallax.js" defer></script>
</head>


<body>

    <div class="logo-container">
        <img src="assets/logo.png" alt="Honey Tiles">
    </div>

    <img id="layer-3" src="assets/layer-3.png" alt="">
    <img id="layer-3-mobile" src="assets/layer-3-mobile.png" alt="">
    <img id="layer-2" src="assets/layer-2.png" alt="">
    <img id="layer-2-mobile" src="assets/layer-2-mobile.png" alt="">

    <!-- Using main layer as our main body part now -->
    <div id="main-layer">
        <img id="layer-1" src="assets/layer-1.png" alt="">
        <img id="layer-1-mobile" src="assets/layer-1-mobile.png" alt="">
        <section class="content-section">

            <div class="header-container">
                <div class="header-wrapper">
                    <h1>How to play</h1>
                    <img class="header-underline" src="assets/header-underline.svg" alt="">
                </div>
            </div>

            <div class="explainer-container">
                <div class="explainer-wrapper" >
                    <div class="explainer-1" data-aos="fade-up" data-aos-duration="1750" >
                        <img src="assets/explainer-img-1.png" alt="">
                        <h2>Bee quick!</h2>
                        <p>Hit the colored tiles as fast as you can. If you miss or if it takes you too long, you will loose the game.</p>
                    </div>
                    <div class="explainer-2" data-aos="fade-up" data-aos-duration="1750" data-aos-delay="300">
                        <img src="assets/explainer-img-2.png" alt="">
                        <h2>Challenge friends</h2>
                        <p>Are you ready to take the next step? Invite your friends or challenge other playes to compete for the highscore.</p>
                    </div>
                    <div class="explainer-3" data-aos="fade-up" data-aos-duration="1750" data-aos-delay="600">
                        <img src="assets/explainer-img-3.png" alt="">
                        <h2>Set difficulty</h2>
                        <p>If the game has  trained your reflexes well enough, you can change the difficulty level to match your skills.</p>
                    </div>
                </div>
                <img class="honey-comb-right" src="assets/honey-comb.svg" alt="">
            </div>

            <div class="button-container">
                    <button onclick="location.href='game.html';">Play Game!</button>
            </div>

            <div class="credentials-container">
                    <p>© Designed and developed with 🐝 by <a href="https://twitter.com/SoikaJorim" target="_blank">@Jorim Soika</a> .</p>
            </div>


            <img class="honey-comb-left" src="assets/honey-comb.svg" alt="">
            <img class="flying-bee" src="assets/flying-bee.svg" alt="">
        </section>
    </div>
    <script>AOS.init();</script>
</body>
</html>