bitstarter/index.html at master · tlm2021/bitstarter · 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
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Digital Basement Games</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap-combined.no-icons.min.css">
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css">
    <link rel="stylesheet" href="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fsocial-buttons.css">
    <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fjquery.js"></script>
    <script src="https://d396qusza40orc.cloudfront.net/startup%2Fcode%2Fbootstrap.js"></script>
    <link href="http://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic"
          rel=stylesheet" type="text/css">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,300,400,600,700,800"
          rel="stylesheet" type="text/css">

    <style type="text/css">

      /* Large desktop */
      @media (min-width: 980px) {
        body {
          padding-top: 60px;
        }
        .linediv-l {
          border-right: 1px white solid;
        }
        .linediv-r {
          border-left: 1px white solid;
        }
      }

      /* Landscape phones and down */
      @media (min-width: 480px) {
        .copy {
          padding: 2.5% 10%;
        }
        .lindiv-l {
          border-bottom: 1px white solid;
        }
        .lindiv-r {
          border-top: 1px white solid;
        }
      }

      /* All form factors */

      /* Main body and headings */
      body {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
      }
      .heading, .subheading {
        font-family: 'Ubuntu', Helvetica, Arial, sans-serif;
        text-align: center;
      }
      p.lead {
        padding-top: 1.5%;
        font-size: 24px;
        line-height: 30px;
      }
      p {
        font-size: 18px;
        line-height: 24px;
      }

      /* Video pitch and Action */
      .pitch {
        padding: 2.5% 0%;
      }
      .order {
        padding: 2% 0%;
      }
      .actions {
        background-color: #343434;
        padding: 3% 0%;
      }
      .video, .thermometer, .order, .social, .stastics {
        text-align: center;
      }
      .statistics h3, .statistics p {
        color: white;
      }

      /* Marketing Copy and Footer */
      .copy {
        padding-top: 2.5%;
        padding-bottom: 2.5%;
        text-align: justify;
      }
      .asset {
        padding: 2.5% 0%;
      }
      .footer {
        color: #cccccc;
        text-align: center;
      }
      .footer p {
        foot-size: 11px;
      }
      .footer a {
        color: #ccccff;
      }

    </style>
  </head>
  <body>

    <!-- Mobile-friendly navbar adapted from example. -->
    <!-- http://twitter.github.io/bootstrap/examples/starter-template.html -->
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Bitstarter</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <!-- We use ro-fluid inside containers to achieve a resizable layout. -->
    <!-- blogs.endjin.com/2013/04/tips-for-implementing-responsive-designs-using-bootstrap/ -->
    <!-- http://stackoverflow.com/a/12270322 -->
    <div class="container">
      <!-- Font and paired font of .heading/.subheading and body from Google Fonts -->
      <!-- www.google.com/fonts/specimen/Ubuntu -->
      <!-- www.google.com/fonts/specimen/Ubuntu#pairings -->
      <div class="row-fluid heading">
        <div class="span12">
          <h1>Virtual Basement Games</h1>
        </div>
      </div>
      <div class="row-fluid subheading">
        <div class="span12">
          <!-- Special typography from Bootstrap for lead paragraph. -->
          <!-- http://twitter.github.io/bootstrap/base-css.html#typography -->
          <p class="lead">Just like your friend's basement, without waking their parents.</p>
        </div>
        <div class="row-fluid pitch">
          <div class="span5 offset1 video">
            <img class="img-polaroid" src="http://placehold.it/480x300">
          </div>

        <!-- We define a new 'actions' div to contain statistics, order, and share buttons. -->
        <div class="span5 actions">
          <div class="row-fluid">
          <div class="span8 offset2">
            <div class="row-fluid statistics">
              <div class="span4">
                <!-- linediv-l and linediv-r give dividing lines that look
                different in horizontal and vertical layouts, illustrating
                media queries. -->
                <div class="linediv-l">
                  <h3>1</h3> <p>backers</p>
                </div>
              </div>
              <div class="span4">
                <div class="linediv-c">
                  <h3>$10000</h3> <p>of $250,000</p>
                </div>
              </div>
              <div class="span4">
                <div class="linediv-r">
                  <h3>180</h3> <p> days left</p>
                </div>
              </div>
            </div>
          </div>
          <div class="row-fluid">
          <div class="span10 offset1">
            <!-- Bootstrap progress bar -->
            <!-- http://twitter.github.io/bootstrap/components.html#progress -->
            <div class="thermometer progress active">
              <div class="bar bar-success" style="width: 05%;"></div>
              <div class="bar bar-warning" style="width: 95%;"></div>
            </div>
          </div>
          </div>
          <div class="row-fluid">
          <div class="span6 offset3 order">
            <!-- Standard Bootstrap button -->
            <!-- http://twitter.github.io/bootstrap/base-css.html#buttons -->
            <button class="btn btn-success btn-large">Preorder</button>
          </div>
          </div>
          <div class="row-fluid">
          <div class="span8 offset2 social">
            <!-- Social buttons are not included in default Bootstrap. -->
            <!-- See: http://noiszwaves.github.io/bootstrap-social-buttons -->
            <button class="btn btn-twitter"><i class="icon-twitter"></i> | Twitter</button>
            <button class="btn btn-facebook"><i class="icon-facebook"></i> | Facebook</button>
          </div>
          </div>
        </div>
        </div>
      </div>

      <!-- Beyond this part the marketing copy begins. -->
      <!-- https://developer.mozilla.org/en-US/docs/Web/CSS/text-align -->
      <!-- http://twitter.github.io/bootstrap/base-css.html#images -->
      <!-- http://placehold.it -->
      <div class="row-fluid section1">
        <div class="span5 offset1 asset">
          <img class="img-polaroid" src="http://placehold.it/480x300">
        </div>
        <div class="span5 copy">
          <p>
            Try as they might, no modern video games can fully capture the excitement and
            freedom of a classic pen-and-paper RPG. But in this day and age, why do we need
            the pen-and-paper? With the wealth of content available for your traditional RPG,
            there has to be a better way to discover, sort, and manage that content wich lets
            you focus on building your worlds, telling your stories, and figuring out what
            mechanic to use to allow your friend to bang that wench he sees in the bar instead
            of listenting to King's messenger talk about some old wizard who's causing trouble.
          </p>
        </div>
      </div>

      <div class="row-fluid section2">
        <div class="span5 offset1 copy copy-right">
          <p>
            You're friends should be limited by your geography. Create gaming sessions that anyone
            in the world can join. Play with people you know, or open your game up to the entire
            world! Whatever session you join, you have access to all of their content, allowing you
            to try out new things. Dive into dungeons, climb castles, rescue fair maidens, and
            ultimately get killed because you couldn't resist slapping your mate on the back while
            he was playing that knife game. But most of all, play your game, in your world, your way.
          </p>
        </div>
        <div class="span5 asset">
          <img class="img-polaroid" src="http://placehold.it/480x300">
        </div>
      </div>

      <!-- For the FAQ, we introcude a little bit of JS, using the accordion. -->
      <!-- This brings in jquery.js and bootstrap.js as dependencies. -->
      <!-- http://twitter.github.io/bootstrap/javascript.html#collapse -->
      <div class="row-fluid faq">
        <div class="span10 offset1">
          <h3>FAQ</h3>
          <div class="accordion" id="accordion2">
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse"
                   data-parent="#accordion2" href="#collapseOne">
                  What is Virtual Basement Games?
                </a>
              </div>
              <div id="collapseOne" class="accordion-body collapse">
                <div class="accordion-inner">
                  Virtual Basement Games is a company dedicated to bringing classic 20th century
                  gaming experiences into the modern era without sacrificing the dynamic, open-ended
                  and social aspects of those games that allowed them to flurish.
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse"
                   data-parent="#accordion2" href="#collapseTwo">
                  Don't MMOs do that?
                </a>
              </div>
              <div id="collapseTwo" class="accordion-body collapse">
                <div class="accordion-inner">
                  Not even close. MMOs do offer very rich worlds with a ton of variety. And some are
                  even now allowing user generated content. But these are still someone else's worlds,
                  and you're playing by someone else's rules. Part of what makes pen-and-paper RPGs
                  great is their adaptability and flexibilty to what YOU want to do. Tell your story,
                  the way you want to tell it. And have the real ability to have an impact in that world.
                </div>
              </div>
            </div>
            <div class="accordion-group">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse"
                   data-parent="#accordion2" href="#collapseThree">
                  So how do I get content?
                </a>
              </div>
              <div id="collapseThree" class="accordion-body collapse">
                <div class="accordion-inner">
                  Initially, manual entry. You enter information about equipment, monsters, characters, items
                  and more, and we save it to your account and make it available to all players in a play session.

                  In the future, we hope to make available official content from the biggest names in RPG
                  publishing for you to browse, buy, and have for all your future game sessions. With slick
                  integration of content throughout the interface, beautiful illustrations, and access to
                  it in any game you participate in.
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>

      <!-- Not curcial, but we put this under a CC By-SA 3.0 license. -->
      <!-- http://creativecommons.org/licenses/ -->
      <div class="row-fluid footer">
        <div class="span12">
          <p>This work is licensed under
            the <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC
              By-SA 3.0
            </a>, without all the cruft that would otherwise be
            put at the bottom of the page.</p>
        </div>
      </div>
    </div>
  </body>
</html>