Reaction-Labs/arena.html at main · rikhiltaneja/Reaction-Labs · 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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="arena.css" />
    <link rel="icon" type="image/x-icon" href="./assets/gun.png" />
  </head>

  <body>
    <div id="parent">
      <!-- greeting the player with their name -->
      <div id="greet">Hello, <span id="username"></span></div>

      <!-- background animation -->
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>
      <div class="box-bg"></div>


      <!-- main content of this page -->
      <div id="heading">Choose an Arena</div>
      <div id="choose">
        <div class="options color-test">
          <div class="opt-img">
            <div class="opt-img-text">
              Color Change
            </div>
          </div>
        </div>
        <div class="options pop">

          <!-- bg animation of second game div -->
          <div class="opt-img-2">
            <div class="circles" style="background-color: red; height: 20px; width: 20px; top: 10%; left: 10%;"></div>
            <div class="circles" style="background-color: orange; height: 30px; width: 30px; top: 30%; left: 40%;"></div>
            <div class="circles" style="background-color: green; height: 15px; width: 15px; top: 80%; left: 90%;"></div>
            <div class="circles" style="background-color: blueviolet; height: 25px; width: 25px; top: 5%; left: 60%;"></div>
            <div class="circles" style="background-color: greenyellow; height: 35px; width: 35px; top: 40%; left: 88%;"></div>
            <div class="circles" style="background-color: coral; height: 40px; width: 40px; top: 80%; left: 10%;"></div>
            <div class="circles" style="background-color: cornflowerblue; height: 18px; width: 18px; top: 6%; left: 80%;"></div>
            <div class="circles" style="background-color: hotpink; height: 32px; width: 32px; top: 66%; left: 37%;"></div>
            <div class="circles" style="background-color: firebrick; height: 27px; width: 27px; top: 35%; left: 20%;"></div>
            <div class="circles" style="background-color: khaki; height: 17px; width: 17px; top: 45%; left: 70%;"></div>
            <div class="opt-img-text">
              Pop the Dots
            </div>
          </div>
        </div>
        <div class="options car">

          <!-- bg animation of third game div -->
          <div class="opt-img-3">
            <img src="./assets/road.jpg" alt="" id="road">
            <img src="./assets/city.png" alt="" id="buildings">
            <img src="./assets/car.png" alt="" id="car">
            <img src="./assets/wheel.png" alt="" class="wheel left-wheel">
            <img src="./assets/wheel.png" alt="" class="wheel right-wheel">
            <div class="opt-img-text custom">Car Braking</div>
          </div>
        </div>
      </div>
    </div>
    <script src="arena.js"></script>
  </body>
</html>