Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

  <div class="row">
    <div class="col">
      <div id="img-div" class="jumbotron text-center mt-3">
        <h1 id="title">Ernest Thompson Seton</h1>
        <h2><small><em>Artist, author, chief scout, and lover of the wilderness</em></small></h2>
        <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/464px-Ernest_Thompson_Seton.jpg" alt="Ernest Thompson Seton" id="image" class="img-fluid rounded">
        <h6 id="img-caption">Ernest Thompson Seton (1860-1946), founder of the Woodcraft Indians and pioneer leader of the Boy Scouts of America.</h6>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="col">
      <h2>Timeline</h2>
      <hr>
    </div>
  </div>

  <div id="tribute-info" class="row">
    <div class="col">
      <dl class="row">
        <dt class="col-12 col-md-1">1860</dt>
        <dd class="col-12 col-md-11">Born on August 14 in South Shields, Durham, England. His given name was Ernest Evan Thompson.</dd>
        <dt class="col-12 col-md-1">1866</dt>
        <dd class="col-12 col-md-11">Emigrated to Lindsay, Ontario, Canada.</dd>
        <dt class="col-12 col-md-1">1870</dt>
        <dd class="col-12 col-md-11">Moved to Toronto, Canada where he attended his basic education. He spent most of his youth in the woods to draw and study animals as a way of avoiding his abusive father.</dd>
        <dt class="col-12 col-md-1">1879</dt>
        <dd class="col-12 col-md-11">Won a scholarship to study art at the Royal Academy of Art in London.</dd>
        <dt class="col-12 col-md-1">1881</dt>
        <dd class="col-12 col-md-11">Due to health reasons, was forced to return home to Canada. Continued to spend time drawing and studying wildlife in Manitoba. During this time, he wrote and published a short guide called <em>Mammals of Manitoba (1886)</em>.</dd>
        <dt class="col-12 col-md-1">1891</dt>
        <dd class="col-12 col-md-11">Returned to Europe to continue his studies in Paris. He entered his painting &ldquo;The Sleeping Wolf&rdquo; for inclusion in the Grand Salon. It was not only accepted but also hung &ldquo;on the line&rdquo;, the most favorable position at eye-level.</dd>
        <dt class="col-12 col-md-1">1893</dt>
        <dd class="col-12 col-md-11">Moved to New Mexico to work at the ranch of Mr. Fitz-Randolph, an acquaintance he had made on an Atlantic crossing. Mr. Fitz-Randolph hired Seton to trap wolves that was attacking his cattle. This was where he made the acquaintance of &ldquo;Lobo&rdquo;,
          an infamous and clever wolf that had been evading the local ranchers.</dd>
        <dt class="col-12 col-md-1">1898</dt>
        <dd class="col-12 col-md-11">Published his first book, <em>Wild Animals I have Known</em>, which included the story of &ldquo;Lobo&rdquo;.</dd>
        <dt class="col-12 col-md-1">1910</dt>
        <dd class="col-12 col-md-11">Became chairman of the founding committee of Boy Scouts of America. He served as Chief Scout until 1915 and was largely responsible for the American Indian elements in the Boy Scouts tradition.</dd>
        <dt class="col-12 col-md-1">1915</dt>
        <dd class="col-12 col-md-11">Seton was not a fan of the militaristic aspects of Boy Scouts. And the Boy Scouts of America founders were not a fan of the American Indian emphasis of Seton. Seton resigns from scouting and forms the Woodcraft Leauge of America, a co-ed organization
          for the study of woodcraft.</dd>
        <dt class="col-12 col-md-1">1916</dt>
        <dd class="col-12 col-md-11">Published <em>Woodcraft Manual for Girls</em>. Somewhat ahead of his time, Seton believed the outdoors should be for both boys and girls. </dd>
        <dt class="col-12 col-md-1">1946</dt>
        <dd class="col-12 col-md-11">Died on October 23 at the age of 86.</dd>
      </dl>
      <p class="text-center">Learn more about Ernest Thompson Seton on <a href="https://en.wikipedia.org/wiki/Ernest_Thompson_Seton" target="_blank" id="tribute-link">Wikipedia</a>.</p>
    </div>
  </div>

  <div class="row mt-3">
    <div class="col">
      <h2>Drawings and paintings</h2>
      <hr>
    </div>
  </div>

  <div class="row text-center">
    <div class="col-12 col-md my-2">
      <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/sleeping_wolf.jpg" alt="The Sleeping Wolf" class="img-fluid img-thumbnail">
    </div>
    <div class="col-12 col-md my-2">
      <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/Carpodacus_pinicola.jpg" alt="Carpodacus pinicola" class="img-fluid img-thumbnail">
    </div>
    <div class="col-12 col-md my-2">
      <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/Triumph-of-the-Wolves.jpg" alt="Triumph of the Wolves" class="img-fluid img-thumbnail">
    </div>
  </div>

  <div class="row mt-3">
    <div class="col">
      <h2>Books and writings</h2>
      <hr>
    </div>
  </div>

  <div class="row text-center">
    <div class="col-12 col-md my-2">
      <a href="http://www.gutenberg.org/ebooks/3031" target="_blank">
        <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/Wild_Animals_I_Have_Known.jpg" alt="Wild Animals I have Known" class="img-fluid img-thumbnail">
      </a>
    </div>
    <div class="col-12 col-md my-2">
      <a href="http://www.gutenberg.org/ebooks/52600" target="_blank">
        <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/Bird_Portraits.jpg" alt="Bird Portraits" class="img-fluid img-thumbnail">
      </a>
    </div>
    <div class="col-12 col-md my-2">
      <a href="http://www.gutenberg.org/ebooks/42827" target="_blank">
        <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/Bannertail.jpg" alt="Bannertail" class="img-fluid img-thumbnail">
      </a>
    </div>
  </div>

  <footer class="row mt-3">
    <div class="col text-center">
      <img src="https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/Seton-Paw.jpg" alt="wolf footprint" class="img-fluid" width="120px">
      <h6>Written and coded by Dariel Dato-on.</h6>
    </div>
  </footer>
</div>
              
            
!

CSS

              
                body {
  margin-top: 60px;
  background: url("https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/tree_bark.png");
}
.container {
  background-color: white;
  box-shadow: 0 0 3px 3px #BCBCBC;
}
#image {
  display: block;
  margin: auto;
  height: auto;
}
#img-caption {
  margin: auto;
  width: 460px;
}
footer {
  background: url("https://uncostly-paste.000webhostapp.com/codepen/rzWKQG/Seton-Paw-BG.png");
  border-top: 1px solid #EEE;
}

              
            
!

JS

              
                
              
            
!
999px

Console