draftstone/draft.html at master · lschuab/draftstone · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>DraftStone</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
</head>

<body>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~ HEADER ~~~~~~~~~~~~~~~~~~~~~~~~~ -->

<header id="header">
  <nav id="navbar" class="navbar navbar-default navbar-fixed-top">
    <div class="row flex">
      <div class="col-xs-6">
        <h2 class="draftstone-text">DraftStone</h2>
      </div>
      <div class="col-xs-6 flex-end flex-col">
        <button type="button" class="btn btn-default navbar-btn nav-btn flex-end" data-toggle="modal" data-target="#exampleModalLong">Instructions</button>
      </div>
    </div>
  </nav>
</header>

<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~ MAIN ~~~~~~~~~~~~~~~~~~~~~~~~~ -->

  <main id="main" class="flex">
      <div class="x-squish"></div>

      <!-- ~~ CONTAINER ~~ -->

      <div id="container" class="flex">

        <!-- ~~ LEFT CARD ~~ -->

        <div id="left">
          <div class="y-squish">
          </div>

          <!-- ~~ DRAFT DISPLAY ~~ -->

          <div id="card-display" class="card-deck flex-col">
            <div class="text-center">
              <h3>Draft Hearthstone decks to play against friends!</h3>
              <br>
              <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora ratione voluptatibus omnis aliquam labore possimus iste, aliquid veniam, tenetur amet exercitationem doloribus dicta dolore harum enim sed provident, incidunt ex quod est quas earum nemo eum itaque! Tempore enim voluptatibus facere aliquid quasi perspiciatis voluptatem, aut, impedit est optio iusto ab officia fugit? Assumenda illo incidunt fugiat similique, esse eum unde, laudantium nam sint asperiores perferendis, mollitia, consectetur! Veniam, officia culpa maxime, est reprehenderit consectetur laborum nulla quisquam placeat voluptas repudiandae nemo laudantium deserunt odio, perferendis ducimus saepe voluptate libero quasi mollitia fuga voluptatibus cumque dolorum. Dolores accusamus saepe, repudiandae.</p>
            </div>
            <div class="flex-col flex-justify center">
              <button type="button" class="btn btn-primary btn-lg draft-btn">Setup Draft</button>
              <p class="center">click button to setup your custom draft</p>
            </div>
          </div>

          <div class="y-squish">
          </div>
        </div>

        <!-- ~~ RIGHT CARD ~~ -->

        <div id="right">
          <div class="y-squish">
          </div>

          <!-- ~~ DECK DISPLAY ~~ -->

          <div id="deck-display" class="card-deck flex">
            <div id="card-cost">
              <!-- <div class="flex">

              </div> -->
            </div>

            <div id="card-name">
              <!-- <div class="flex">

              </div> -->
            </div>
          </div>
        </div>
      </div>
    </main>


  <script type="text/javascript" src="main.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.js"></script>
</body>
</html>