Button-Punch-Games.github.io/index.html at main · Button-Punch-Games/Button-Punch-Games.github.io · 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
138
139
140
141
142
143
144
145
146
147
148
<!DOCTYPE html>
<html>
  <head>
    <title>Button Punch Games</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="icon" href="assets/images/button-guy-black.png" />
    <link rel="stylesheet" type="text/css" href="stylesheets/bpg.css" />
    <link
      rel="stylesheet"
      type="text/css"
      href="stylesheets/spinball-dude.css"
    />
    <link
      href="https://fonts.googleapis.com/css?family=Righteous|Audiowide"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.2.0/css/all.css"
      integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ"
      crossorigin="anonymous"
    />

    <script>
      function updateYear() {
        const year = new Date().getFullYear();
        document.getElementById("year").innerHTML = year;
      }
    </script>
  </head>

  <body onload="updateYear()">
    <div id="header">
      <a href="https://twitter.com/buttonpunch" class="twitter" target="_blank">
        <span class="social-icon"><i class="fab fa-twitter"></i></span>
      </a>
      <a
        href="https://facebook.com/ButtonPunch"
        class="facebook"
        target="_blank"
      >
        <span class="social-icon"><i class="fab fa-facebook"></i></span>
      </a>
    </div>
    <div>
      <div class="spinball-dude red">
        <div class="body">
          <div class="arrow"></div>
        </div>
        <div class="arms"></div>
      </div>
    </div>
    <div class="container">
      <div class="main-title">
        <img src="spinball/img/spinball-logo-white.png" />
        SPINBALL
      </div>
      <div class="video-wrapper">
        <iframe
          src="https://www.youtube.com/embed/PConwXTm_T8?rel=0&autoplay=1&mute=1"
          frameborder="0"
          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
          allowfullscreen
        ></iframe>
      </div>

      <div class="text">
        Spinball is a <span class="emphasis">fast</span>,
        <span class="emphasis">fun</span>, and
        <span class="emphasis">competitive multi-player sport game</span> with
        non-stop scoring action. Rack up the points as you
        <span class="emphasis">spin your paddles</span> to smack the ball
        towards the goal, and try not to accidentally score against your own
        team!
      </div>

      <div class="text callout callout--white">Available now!</div>
      <div class="row stores">
        <a
          class="button-link"
          href="https://store.steampowered.com/app/943920/Spinball/"
          target="_blank"
        >
          <div class="button">
            <div>STEAM</div>
            <div class="content social-icon"><i class="fab fa-steam"></i></div>
          </div>
        </a>
        <a
          class="button-link"
          href="https://buttonpunchgames.itch.io/spinball"
          target="_blank"
        >
          <div class="button">
            <div>ITCH.IO</div>
          </div>
        </a>
      </div>

      <div class="section">
        <div class="header">features</div>
        <ul>
          <li>
            <i class="fas fa-users"></i> Local multiplayer up to 4 players
          </li>
          <li><i class="fas fa-th"></i> Nine different arenas</li>
          <li><i class="fas fa-user"></i> Single player challenge mode</li>
          <li><i class="fas fa-gamepad"></i> Full Controller Support</li>
          <li><i class="fas fa-keyboard"></i> Keyboard Support</li>
        </ul>
      </div>

      <div class="section">
        <div class="header">How to play</div>
        <div class="video-wrapper">
          <iframe
            src="https://www.youtube.com/embed/gqBoMt7bawQ"
            frameborder="0"
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen
          ></iframe>
        </div>
      </div>

      <div class="section">
        <div class="header">Put your own spin on it</div>
        <div class="row screenshots">
          <img src="assets/images/select-profile2.gif" />
          <img src="assets/images/change-paddles2.gif" />
          <img src="assets/images/change-icon2.gif" />
          <img src="assets/images/game-settings2.gif" />
        </div>
      </div>

      <div class="logo">
        <img src="assets/images/button-guy-white.png" />
        <div>Button Punch Games</div>
        <div class="copyright">&copy; 2018-<span id="year"></span></div>
      </div>
      <script src="spinball-dude.js"></script>

      <div class="chadminton">
        Check out our real-life sport creation,
        <a href="http://chadminton.net/">Chadminton</a>!
      </div>
    </div>
  </body>
</html>