Personal-DM/Blog.html at master · gtfargo/Personal-DM · 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
<!DOCTYPE html>
<html>
  <head>
    <title>Personal DM Updates</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="./styles.css">
  </head>
  <body class="w3-light-grey">

    <!-- w3-content defines a container for fixed size centered content,
    and is wrapped around the whole page content, except for the footer in this example -->
    <div class="w3-content" style="max-width:1400px">
      <!-- Jumbotron Container for Header -->
      <nav class="navbar navbar-inverse george-was-here">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Personal DM</a>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
              <li><a href="http://personaldm.com/campaigns.html">Campaigns</a></li>
              <li><a href="http://personaldm.com/WhatIsACampaign.html">What is a Campaign?</a></li>
              <li><a href="http://personaldm.com/AboutMe.html">About me</a></li>
              <li><a href="http://personaldm.com/Blog.html">Blog</a></li>
            </ul>
            <ul class="nav navbar-nav navbar-right">
              <li><a href="http://personaldm.com/Donate.html">Donate</a></li>
            </ul>
          </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
      </nav>

      <!-- Header -->
      <header class="w3-container w3-center w3-padding-32 nav-padding">
        <h1><b>Personal DM Updates</b></h1>
        <p>Periodical updates on new<span class="w3-tag">adventures</span></p>
      </header>

      <!-- Grid -->
      <div class="w3-row">

        <!-- Blog entries -->
        <div class="w3-col l8 s12">
          <!-- Blog entry -->
          <div class="w3-card-4 w3-margin w3-white">
            <img src="images/Logos/ReadingOctopus.jpg" alt="Reading Logo" style="width:100%">
            <div class="w3-container">
              <h3><b>The Lords of Castlemire</b></h3>
              <h5>Atlantia, Atlantis, Ad Infinitum... <span class="w3-opacity">April 7, 2017</span></h5>
            </div>

            <div class="w3-container">
              <p>A journey to Atlantis! Or Atlantia to be specific. Next up on the list is a campaign centered around a small city with a big role to play in a global conflict. The Lords of Castlemire will place your players in a comfortable yet mysterious world, a world that seems lost in time and centered in an endless ocean. What will start as an easy, fun loving adventure, will quickly and with acceleration, turn into war and destruction. New races, characters, worlds and gods will find hope in the players as they embark to uncover the secrets of Castlemire and the Kingdom of Atlantia.</p>
              <div class="w3-row">
                <div class="w3-col m8 s12">
                  <p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE</b></button></p>
                </div>
                <div class="w3-col m4 w3-hide-small">
                  <p><span class="w3-padding-large w3-right"><b>Comments  </b> <span class="w3-tag">0</span></span></p>
                </div>
              </div>
            </div>
          </div>
          <hr>

          <!-- Blog entry -->
          <div class="w3-card-4 w3-margin w3-white">
            <img src="images/Photos/ReenieUnicorn.JPG" alt="Reenie The Unicorn" style="width:100%">
            <div class="w3-container">
              <h3><b>Starting This Website</b></h3>
              <h5>A journey into the terrifying and mysterious world of CSS, <span class="w3-opacity">April 2, 2017</span></h5>
            </div>

            <div class="w3-container">
              <p>I've been playing Dungeons and Dragons for almost the entirety of my intelligent life (or untintelligent?). I've also been writing stories for the same time.</p>
              <p>Stories are different though. They're so much time, effort, and love with so little reward sometimes that it can kill you. Unless you've got a heart of stone (which I'm afraid I don't) then writing stories and hoping for them to make you happy is like jumping off a cliff and hoping you land in warm water.</p>
              <p>Role playing games are different though. Writing for these gives an immediate response. I'm constantly told by my players and friends if a campaign is bad or good, constantly refining my style and narratives, until my criticisms have become my strengths. Now, I sit back and play tabletop games with multiple groups of friends, a hobby that has transformed itself to take up most of my time. And I couldn't be happier with it.</p>
              <p>So here is my stockpile, the child of my brain that needs adoption. These are worlds, characters, magic items, stories woven out of love and joy of the sport. I don't offer these because I want to make money, but rather because seeing the dusty papers in my room grow old and stale makes me very sad. Take these characters and turn them into something wonderful. Hopefully this website is the flint that strikes that fire.</p>
              <div class="w3-row">
                <div class="w3-col m8 s12">
                  <p><button class="w3-button w3-padding-large w3-white w3-border"><b>READ MORE</b></button></p>
                </div>
                <div class="w3-col m4 w3-hide-small">
                  <p><span class="w3-padding-large w3-right"><b>Comments  </b> <span class="w3-badge">2</span></span></p>
                </div>
              </div>
            </div>
          </div>
          <!-- END BLOG ENTRIES -->
        </div>

        <!-- Introduction menu -->
        <div class="w3-col l4">
          <!-- About Card -->
          <div class="w3-card-2 w3-margin w3-margin-top">
            <img src="/images/Photos/headshot.jpg" style="width:20%">
            <div class="w3-container w3-white">
              <h4><b>Welcome to my Multiverse!</b></h4>
              <p>Here you will find the progress I am making developing new campaigns to soon be posted. Please feel free to comment with questions or comments.</p>
            </div>
          </div><hr>

          <!-- Posts -->
          <div class="w3-card-2 w3-margin">
            <div class="w3-container w3-padding">
              <h4>Recent Posts</h4>
            </div>
            <ul class="w3-ul w3-hoverable w3-white">
              <li class="w3-padding-16">
                <img src="/images/Logos/FinishedOctopusLogo.jpg" alt="Octopus" class="w3-left w3-margin-right" style="width:50px">
                <span class="w3-large">The Lords of Castlemire</span><br>
                <span>Atlantia, Atlantis, Ad Infinitum...</span>
              </li>
              <li class="w3-padding-16">
                <img src="/w3images/gondol.jpg" alt="Image" class="w3-left w3-margin-right" style="width:50px">
                <span class="w3-large">Starting This Website</span><br>
                <span>A journey into the terrifying and mysterious world of CSS</span>
              </li>
            </ul>
          </div>
          <hr>

          <!-- Labels / tags -->
          <div class="w3-card-2 w3-margin">
            <div class="w3-container w3-padding">
              <h4>Tags</h4>
            </div>
            <div class="w3-container w3-white">
              <p><span class="w3-tag w3-black w3-margin-bottom">D&D</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Dungeons And Dragons</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Role Playing</span>
                <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Fantasy</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Atlantis</span> <span class="w3-tag w3-light-grey w3-small w3-margin-bottom">Campaign</span>
              </p>
            </div>
          </div>

          <!-- END Introduction Menu -->
        </div>

        <!-- END GRID -->
      </div><br>

      <!-- END w3-content -->
    </div>

    <!-- Footer -->
    <footer class="w3-container w3-dark-grey w3-padding-32 w3-margin-top">
      <button class="w3-button w3-black w3-disabled w3-padding-large w3-margin-bottom">Previous</button>
      <button class="w3-button w3-black w3-padding-large w3-margin-bottom">Next</button>
      <p>Created by Paul Clapps</p>
      <p>pclapps@personaldm.com</p>
    </footer>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>