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

              
                <html>

<body>
  <div class="container"></div>
  <div class="page-header">
    <h1 class="text-left"> Fred Bear</h1>
    <h1 class="text-center">Fred Bear</h1>
    <h1 class="text-right">Fred Bear</h1>
  </div>
  <div class="row">
    <figure>
      <img src="http://www.azquotes.com/picture-quotes/quote-when-a-hunter-is-in-a-tree-stand-with-high-moral-values-and-with-the-proper-hunting-fred-bear-58-13-05.jpg" id="fbquote" class="img-responsive img-thumbnail center-block" width="638" height="300"
        alt="Responsive image">
      <figcaption>Image copied from azqoutes.com</figcaption>
    </figure>
  </div>
  <div class="row">
    <h2 class="text-center">Known as the Father of bow hunting</h2>
    <h3 class="text-center">His lifelong passion for archery and archery hunting led to many accomplishments.</h3>
    <br>
    <ul>
      <li>Born: March 5th, 1902 Waynesboro, Pennsylvania</li>
      <li>Moved to Michigan in 1923</li>
      <li>Founded Bear Archery Products in 1933</li>
      <li>Advocated for Michigan,s first archery only hunting season in 1937</li>
      <li>Was the Michigan State Archery Champion 1934, 1937, 1939</li>
      <li>Throughout 1930s and 1940s patented many archery products</li>
      <li>1940s began filming hunting adventures</li>
      <li>Moved to Grayling Michigan in 1947</li>
      <li>Harvested world record stone sheep in 1957</li>
      <li>Harvested world record brown bear in 1960</li>
      <li>Founded the Fred Bear museum in 1967, at that time (worlds largest collection of archery artifacts)</li>
      <li>1972 Inducted into the Archery Hall of Fame</li>
      <li>Died in Gainsville, Florida in 1988</li>
    </ul>
    <hr>
    <figure>
      <img src="http://www.deeranddeerhunting.com/wp-content/uploads/Fred-Bear.jpg" class="img-responsive img-thumbnail center-block" width="360" height="400" alt="Fred with bow& arrow">
      <figcaption>image copied from deeranddeerhunting.com</figcaption>
    </figure>
    <br>
    <p>
      &nbsp;&nbsp;&nbsp;&nbsp;Fred Bear was undoubtedly one of the most influential people in the archery world. His influence helped prepetuate the existence and evolution of the archery & archery hunting industries as we know them today. Through his film
      making, authoring and mentoring he inspired thousands to take up the bow & arrow and become part of the brother & sisterhood of bow hunting. His message conveyed the code of ethics related to archery hunting and the profound reverence we as hunters
      hold of the natural world and the game animals that are pursued.
    </p>
    <p>
      Perhaps one of the best tributes to Fred Bear was a song done by long time rock & roll star Ted Nugent. There is a YouTube video that features the song and several Fred Bear photographs.&#x25BC; Just click on the YouTube button below.&#x25BC;
    </p>
    <div id="youtube">
      <a href="https://www.youtube.com/watch?v=MN7dzmZY708"><img src="https://www.youtube.com/yt/brand/media/image/YouTube-logo-full_color.png" width="200" height="100" alt="YouTube"></a>
    </div>
    <!---	<div class= "audio1">
		<audio controls>
			<source src="FredBear.mp3" type="audio/mpeg">
			Your browser does not support the audio element.
		</audio>
		</div> --->
    <p>
      You can find out more about Fred Bear and Bear Archery, by simply doing a Google search of Fred Bear, or clicking on the following links.:
    </p>
    <div class="mylink">
      <a href="https://en.wikipedia.org/wiki/Fred_Bear">Fred Bear - Wikipedia</a> &nbsp;&nbsp;&nbsp;
      <a href="http://www.beararchery.com/about-bear-archery"> <img src="http://www.beararchery.com/sites/all/themes/bear2014/img/bear-small-hover.png" width="102" height="30" alt="bear archery"></a>
    </div>
  </div>

</body>

</html>
              
            
!

CSS

              
                 body {
	background-color: #5a7d8b;
	padding-right: 15px;
	padding-bottom: 15px;
	padding-left: 15px;
	padding-top: 0px;
	margin-top: 0px;
  }
  
  h1 {
  font-family: 'Playball', cursive;
  margin: 0px;
  }
  
  .page-header {
	background-color: #000;
	color: white;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border-radius: 10px;
	margin-top: 5px;
  }
  
  
  p {
	margin: 25px;
	font-size: 16px;
  }
  
  .container {
	padding-right: 5%;
	padding-left: 5%;
	padding-bottom: 5%;
	padding-top: 0%;
  }
  
  a {
	color: orange;
	font-size: 20px;
  }
  

li {
	font-size: 16px;
	
}

figcaption {
	text-align: center;
}

.audio1{
	text-align: center;
}

#youtube {
	text-align: center;
}


.mylink {
	text-align: center;
}


              
            
!

JS

              
                
              
            
!
999px

Console