CreativeProject5/index.html at main · ZakkeryDaRebel/CreativeProject5 · 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
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>You should play D&D</title>

    <link rel='stylesheet' href='styles.css'/>
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&display=swap" rel="stylesheet">
  </head>
  <body>
    <!--Navbar Code Below-->
    <nav class="navbar navbar-expand-lg fixed-top navbar-light bg-light">
      <a class="navbar-brand" href="index.html">Home</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNavDropdown">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link" href="how_to_create.html">How To Create a Character</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="classTs.Ctml" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Classes
            </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="classes.html">The Classes</a>
            <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="classes.html#barbarian">Barbarian</a>
              <a class="dropdown-item" href="classes.html#bard">Bard</a>
              <a class="dropdown-item" href="classes.html#cleric">Cleric</a>
              <a class="dropdown-item" href="classes.html#druid">Druid</a>
              <a class="dropdown-item" href="classes.html#fighter">Fighter</a>
              <a class="dropdown-item" href="classes.html#monk">Monk</a>
              <a class="dropdown-item" href="classes.html#paladin">Paladin</a>
              <a class="dropdown-item" href="classes.html#ranger">Ranger</a>
              <a class="dropdown-item" href="classes.html#rogue">Rogue</a>
              <a class="dropdown-item" href="classes.html#sorcerer">Sorcerer</a>
              <a class="dropdown-item" href="classes.html#warlock">Warlock</a>
              <a class="dropdown-item" href="classes.html#wizard">Wizard</a>
            </div>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="races.html" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              Races
            </a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a class="dropdown-item" href="races.html">The Races</a>
            <div class="dropdown-divider"></div>
              <a class="dropdown-item" href="races.html#dwarf">Dwarf</a>
              <a class="dropdown-item" href="races.html#elf">Elf</a>
              <a class="dropdown-item" href="races.html#halfling">Halfling</a>
              <a class="dropdown-item" href="races.html#human">Human</a>
              <a class="dropdown-item" href="races.html#dragonborn">Dragonborn</a>
              <a class="dropdown-item" href="races.html#gnome">Gnome</a>
              <a class="dropdown-item" href="races.html#half-elf">Half-Elf</a>
              <a class="dropdown-item" href="races.html#half-orc">Half-Orc</a>
              <a class="dropdown-item" href="races.html#tiefling">Tiefling</a>
            </div>
          </li>
        </ul>
      </div>
    </nav>
    <!--Navbar Content above, About Me section below-->

    <div class='divider'></div>
    <div class="photo">
        <img src='https://w0.peakpx.com/wallpaper/1016/274/HD-wallpaper-fantasy-dungeons-dragons-book-cover.jpg' class="img-fluid" id="homepage-cover"/>
    </div>

    <div class="header">
        <h1>Now wait, before you close out of the page, hear me out!</h1>
    </div>

    <div class='page'>
        <div class='page-section page-section-odd'>
          <div class='content'>
            <div class='columns'>
              <div class='image-container landscape'>
                <img src='https://logos-world.net/wp-content/uploads/2021/12/DnD-Symbol.png' id="dnd-logo"/>
              </div>
              <div class='text-container'>

                <h3>What is D&D?</h3>
                <p>Dungeons and Dragons (D&D), is a fun table top roleplaying
                    game (TTRPG) that you can play with your friends. The
                    game consists of a team of adventurers (<em>that's you
                    and your friends</em>),comprised of different skills and
                    abilities, embarking on a quest, given by the <strong>
                    Dungeon Master</strong> (DM), to accomplish both great
                    and small tasks. If you've never played D&D before, this
                    website will help you understand how to get started.
                    If you've already played D&D before, this website is good
                    to share with your friends, but it will also come with
                    some tips and tricks that you may find to be pretty handy
                    and useful.</p>

              </div> <!-- Text container -->
            </div> <!-- Columns -->
          </div> <!-- Content -->
        </div> <!-- Page section (ODD) -->

        <div class='page-section page-section-even'>
          <div class='content'>
            <div class='columns'>
              <div class='image-container profile-pic second'>
                <img src='https://cdn11.bigcommerce.com/s-ir15vf9mmx/images/stencil/1280x1280/products/316/1722/1-Haxtec-god-foil-dice-black-red_1__00137.1622463567.gif?c=2' id="dice-pic"/>
              </div>
              <div class='text-container'>

                <h3>What you need to play</h3>
                <ul>
                  <li>A basic understanding of the rules</li>
                  <li>A group of freinds to play with (One of which needs
                      to be the DM)</li>
                  <li>A rulebook (Player's Handbook is the most helpful for
                      players</li>
                  <li>A character (this can be made using the <a
                      href="how_to_create.html">How to Create a Character</a>
                      page)</li>
                  <li>Dice, either real or online</li>
                </ul>

              </div> <!-- Text container -->
            </div> <!-- Columns -->
          </div> <!-- Content -->
        </div> <!-- Page section (EVEN) -->

        <div class='page-section page-section-odd'>
          <div class='content'>
            <div class='columns'>
              <div class='image-container profile-pic'>
                <img src='https://i0.wp.com/www.strangeassembly.com/wp-content/uploads/2015/11/Article_SwordCoastAdventurerersGuide_Thumb.jpg' id="home-class"/>
              </div>
              <div class='text-container'>

                <h3>What you can find on the <a href="classes.html">Classes</a> page?</h3>
                <p>Since choosing your class is the most important decision
                    you'll make in Dungeons and Dragons, I have a page
                    dedicated to just talking about Classes. Each Class has
                    their own section that has a brief overview of the class
                    as well as describing a Special Ability they have. It also
                    includes what is the classes Primary Ability.</p>

              </div> <!-- Text container -->
            </div> <!-- Columns -->
          </div> <!-- Content -->
        </div> <!-- Page section (ODD) -->

        <div class='page-section page-section-even'>
          <div class='content'>
            <div class='columns'>
              <div class='image-container landscape second'>
                <img src='images/dnd-homepage-pic.png'/>
              </div>
              <div class='text-container'>

                <h3>What you can you find on the <a href="races.html">Races</a> page?</h3>
                <p>Races are still a vital part of your character, and it goes
                    hand and hand with what class you choose. So on this page
                    you'll find each race in the Player's Handbook with a
                    brief overview on their culture and what they're like.
                    Included is what kind of Ability increases each Race has.</p>

              </div> <!-- Text container -->
            </div> <!-- Columns -->
          </div> <!-- Content -->
        </div> <!-- Page section (EVEN) -->
      </div>

      <div class="footer">
        <h4>Github: <a href="https://github.com/ZakkeryDaRebel/CreativeProject5">ZakkeryDaRebel/CreativeProject5</a></h4>
      </div>

        <!--Bootstrap Code Insertion-->
        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
  </body>
</html>