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

              
                <!--Looks like you don't need "<!DOCTYPE html> on Codepen...but I think you will need it elsewhere.-->
<html lang="en">

<head>
  <title>Bigfoot</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>

  body {
      font: 20px Montserrat, sans-serif;
      line-height: 1.8;
      color: #f5f6f7;
    }
      h1 {
          font: 65px Amatic SC, sans-serif;
      }
      h3 {
          font: 30px Source Sans Pro, sans-serif;
      }
    p {
      font-size: 16px;
    }
    .margin {
      margin-bottom: 45px;
    }
    .bg-1 {
        background: #736efe; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(#736efe, #5efce8); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(#736efe, #5efce8); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(#736efe, #5efce8); /* For Firefox 3.6 to 15 */
        background: linear-gradient(#736efe, #5efce8); /* Standard syntax (must be last) */
    }
      .bg-1-2{
          background-color: bisque; /* Bisque */
          color: #000
      }
    .bg-2 {
        background: #5efce8; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(-90deg, #43cbff, #9708cc); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(-90deg, #43cbff, #9708cc); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(-90deg, #43cbff, #9708cc); /* For Firefox 3.6 to 15 */
        background: linear-gradient(-90deg, #43cbff, #9708cc); /* Standard syntax (must be last) */
    }
    .bg-3 {
      background-color: #ffffff; /* White */
      color: #555555;
    }
    .bg-4 {
          background-color: black;
      }
    .bg-5 {
        background: #fccf31; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(-90deg, #fccf31, #f55555); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(-90deg, #fccf31, #f55555); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(-90deg, #fccf31, #f55555); /* For Firefox 3.6 to 15 */
        background: linear-gradient(-90deg, #fccf31, #f55555); /* Standard syntax (must be last) */
    }
    .container-fluid {
      padding-top: 70px;
      padding-bottom: 70px;
    }
    .navbar {
      padding-top: 15px;
      padding-bottom: 15px;
      border: 0;
      border-radius: 0;
      margin-bottom: 0;
      font-size: 30px;
      font-family: Amatic SC, sans-serif;
      letter-spacing: 5px;
    }
    .navbar-nav  li a:hover {
      color: #1abc9c !important;
    }
    .navbar-brand {
          font-size: 40px;
      }
    div.card {
          width: auto;
          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          text-align: center;
      }
    .panel-body {
          color: black;
      } 
    .btn-info {
        background: #43cbff; /* For browsers that do not support gradients */
        background: -webkit-linear-gradient(-90deg, #43cbff, #9708cc); /* For Safari 5.1 to 6.0 */
        background: -o-linear-gradient(-90deg, #43cbff, #9708cc); /* For Opera 11.1 to 12.0 */
        background: -moz-linear-gradient(-90deg, #43cbff, #9708cc); /* For Firefox 3.6 to 15 */
        background: linear-gradient(-90deg, #43cbff, #9708cc); /* Standard syntax (must be last) */
      }
      #add-credits {
          color: black;
      }

  </style>
</head>

<body>

  <!-- Navbar -->
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
        <a class="navbar-brand" href="#" target="_blank">B-Foot Central</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#what-bfoot" target="_blank">WHAT, NOW?</a></li>
          <li><a href="#deal-bfoot" target="_blank">THEIR DEAL?</a></li>
          <li><a href="#get-bfoot" target="_blank">GET 'EM</a></li>
          <li><a href="#more-bfoot" target="_blank">MORE</a></li>

        
      </div>
    </div>
  </nav>

  <!-- First Container -->
  <div class="container-fluid bg-1 text-center text-shadow">
      <h1 class="margin"><a id="what-bfoot">What are they?</a></h1>
    <img src="https://media4.giphy.com/media/PQtgq6Wmt6bio/200_s.gif" class="img-responsive img-rounded" style="display:inline" alt="Harry and the Hendersons movie still" width="350" height="350">
          <div class="caption text-center">
              <p>Harry from the film <em>Harry and the Hendersons</em>.</p>
          </div>
    <h3>Did they save us from Y2K? Some sources are saying:</h3>
    <h3><em>"Sorry, what?"</em></h3>
      <p></p> 
      <p></p>
      <div class="container-fluid bg-1-2 text-center text-shadow card">
        <p>Some say Bigfoot is simply a beard gone too far, perhaps severing itself from its host-man to start a new life and species. Others say they're just the government dressing up all silly in the woods to divert attention away from the lizard people riding American subways. </p>
        <p>Luckily, enough people have been eye to smell with these woodsy hair clogs that we have a set of basic characteristics.</p> 
        <p></p>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#big-hairy">Big & Hairy</button>
            <div id="big-hairy" class="collapse">
                <p></p>
                    <p>- Roughly 6 ft. 7 in.–9 ft. 10 in.</p>
                    <p>- Covered in hair that may be: black, dark brown, or dark reddish.</p> 
            </div>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#face-tho">But that face tho</button>
            <div id="face-tho" class="collapse">
                <p></p>
                <p>- Large eyes</p>
                <p>- Pronounced brow ridge</p>
                <p>- Large, low-set forehead</p>
            </div>
        <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#claim-fame">Claim 2 fame</button>
            <div id="claim-fame" class="collapse">
                <p></p>
                    <p>- Claimed to be as large as 24 in. long, 8 in. wide</p>
                    <p>- Some footprint casts contained claw marks</p>
            </div>
       <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#how-do">How They Do</button>
            <div id="how-do" class="collapse">
                <p></p>
                    <p class="lead">Omnivorous. <i class="fa fa-cutlery" aria-hidden="true"></i></p> 
                        <p>Boy <em>will</em> finish them chili fries if they ain't gettin' e'te.</p>
                    <p class="lead">Nocturnal. <i class="fa fa-moon-o" aria-hidden="true"></i></p> 
                        <p>All about that nightlife.</p>            
            </div>
          <p><a href="https://en.wikipedia.org/wiki/Bigfoot"><i class="fa fa-wikipedia-w" aria-hidden="true" style="font-size:9px;color:#736efe"></i></a></p>
    </div>
  </div>
  <!-- Second Container -->
  <div class="container-fluid bg-2 text-center card">
      <h1 class="margin"><a id="deal-bfoot">Like, what's their deal?</a></h1>
        <h2>Formal Studies of Bigfoot</h2>
            <div class="panel-group" id="accordion1">
                <div class="panel panel-default">
                       <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion1" href="#collapse1">1st Scientific Study—1973</a>
                        </h4>
                        </div>
                        <div id="collapse1" class="panel-collapse collapse in">
                            <div class="panel-body">The first scientific study of available evidence was conducted by John Napier and published in his book, Bigfoot: The Yeti and Sasquatch in Myth and Reality, in 1973. Napier wrote that if a conclusion is to be reached based on scant extant "'hard' evidence," science must declare "Bigfoot does not exist." However, he found it difficult to entirely reject thousands of alleged tracks, "scattered over 125,000 square miles" or to dismiss all "the many hundreds" of eyewitness accounts. Napier concluded, "I am convinced that Sasquatch exists, but whether it is all it is cracked up to be is another matter altogether. There must be something in north-west America that needs explaining, and that something leaves man-like footprints." <a href="https://en.wikipedia.org/wiki/Bigfoot"><i class="fa fa-wikipedia-w" aria-hidden="true" style="font-size:9px;color:#736efe"></i></a>
                            </div>
                        </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse2">National Wildlife Federation—1974</a>
                        </h4>
                    </div>
                    <div id="collapse2" class="panel-collapse collapse">
                        <div class="panel-body">In 1974, the National Wildlife Federation funded a field study seeking Bigfoot evidence. No formal federation members were involved and the study made no notable discoveries. <a href="https://en.wikipedia.org/wiki/Bigfoot"><i class="fa fa-wikipedia-w" aria-hidden="true" style="font-size:9px;color:#736efe"></i></a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse3">Grover Krantz—late 1970's</a>
                        </h4>
                    </div>
                    <div id="collapse3" class="panel-collapse collapse">
                        <div class="panel-body">Beginning in the late 1970s, physical anthropologist Grover Krantz published several articles and four book-length treatments of Sasquatch. However, his work was found to contain multiple scientific failings including falling for hoaxes. <a href="https://en.wikipedia.org/wiki/Bigfoot"><i class="fa fa-wikipedia-w" aria-hidden="true" style="font-size:9px;color:#736efe"></i></a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse4">Journal of Biogeography—2009</a>
                        </h4>
                    </div>
                    <div id="collapse4" class="panel-collapse collapse">
                        <div class="panel-body">A study published in the Journal of Biogeography in 2009 by J.D. Lozier et al. used ecological niche modeling on reported sightings of Bigfoot, using their locations to infer Bigfoot's preferred ecological parameters. They found a very close match with the ecological parameters of the American black bear, Ursus americanus. They also note that an upright bear looks much like Bigfoot's purported appearance and consider it highly improbable that two species should have very similar ecological preferences, concluding that Bigfoot sightings are likely sightings of black bears. <a href="https://en.wikipedia.org/wiki/Bigfoot"><i class="fa fa-wikipedia-w" aria-hidden="true" style="font-size:9px;color:#736efe"></i></a>
                        </div>
                    </div>
                </div>
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                        <a data-toggle="collapse" data-parent="#accordion1" href="#collapse5">Systematic Genetic Analysis—2014</a>
                        </h4>
                    </div>
                    <div id="collapse5" class="panel-collapse collapse">
                        <div class="panel-body">In the first systematic genetic analysis of 30 hair samples that were suspected to be from bigfoot, yeti, sasquatch, almasty or other anomalous primates, only one was found to be primate in origin, and that was identified as human. A joint study by the University of Oxford and Lausanne's Cantonal Museum of Zoology and published in the Proceedings of the Royal Society B in 2014, the team used a previously published cleaning method to remove all surface contamination and the ribosomal mitochondrial DNA 12S fragment of the sample was sequenced and then compared to GenBank to identify the species origin. The samples submitted were from different parts of the world, including the United States, Russia, the Himalayas, and Sumatra. Other than one sample of human origin, all but two are from common animals. Black and brown bear accounted for most of the samples, other animals include cow, horse, dog/wolf/coyote, sheep, goat, raccoon, porcupine, deer and tapir. The last two samples were thought to match a fossilized genetic sample of a 40,000 year old polar bear of the Pleistocene epoch; however, a later study disputes this finding. In the second paper, tests identified the hairs as being from a rare type of brown bear. <a href="https://en.wikipedia.org/wiki/Bigfoot"><i class="fa fa-wikipedia-w" aria-hidden="true" style="font-size:9px;color:#736efe"></i></a>
                        </div>
                    </div>
                </div>
            </div> 

      <h2>The Patterson-Gimlin Film</h2>
            <div class="panel-group" id="accordion2">
                <div class="panel panel-default">
                       <div class="panel-heading">
                            <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion2" href="#collapse6">Bill Munns, Movie Effects Creator, Analyzes the Famous Bigfoot Film Footage</a>
                        </h4>
                        </div>
                        <div id="collapse6" class="panel-collapse collapse">
                            <div class="panel-body"><iframe width="560" height="315" src="https://www.youtube.com/embed/MKUwdHex1Zs" frameborder="0" allowfullscreen></iframe></div>
                        </div>
                </div>
            </div>
      </div>
  <!-- Third Container (Grid) -->
  <div class="container-fluid bg-3 text-center">
      <h1 class="margin"><a id="get-bfoot">Where & How to get 'em! <i class="fa fa-tree" aria-hidden="true"></i></a></h1><br>
    <div class="row">
      <div class="col-sm-4 card ">
          <p><a href="http://bigfootdiscoveryproject.com" target="_blank">Map of Sightings</a></p>
          <p>"Joshua Stevens used data compiled from the Bigfoot Field Researchers Organization to show alleged sightings of Bigfoot from 1921 to 2012."</p>
        <img src="http://static6.businessinsider.com/image/523b66a8ecad046910647578-1200-881/bigfoot-map.jpg" class="img-responsive margin thumbnail" style="width:100%" alt="Bigfoot Sightings Map">
          <div class="caption text-center">
              <p>Courtesy of <a href="http://www.businessinsider.com/map-of-bigfoot-sightings-in-the-us-2013-9">Business Insider</a></p>
          </div>
      </div>
      <div class="col-sm-4 card ">
          <p><a href="http://www.bfro.net" target="_blank">Bigfoot Field Researchers Organization</a></p>
          <p>Comprehensive database of sightings and reports in the U.S. and Canada. You can view sightings/reports by state and county.</p>
        <img src="http://www.bfro.net/gdb/usatrans.jpg" class="img-responsive margin thumbnail" style="width:100%" alt="Image">
          <div class="caption text-center">
              <p>Check out the clickable sightings map at <a href="http://www.bfro.net/gdb/">BFRO.net</a></p>
          </div>
      </div>
      <div class="col-sm-4 card ">
        <p><a href="http://www.wikihow.com/Search-for-Bigfoot" target="_blank">WikiHow's "How to Search for Bigfoot"</a></p>
          <p>"The legend of Bigfoot continues to thrive and if you're fascinated with Bigfoot, maybe you've got what it takes to experience a Bigfoot sighting yourself. Here are some suggestions for how you can search for this legendary creature."</p>
        <img src="https://www.wikihow.com/images/thumb/1/14/Search-for-Bigfoot-Step-7.jpg/aid561181-v4-728px-Search-for-Bigfoot-Step-7.jpg.webp" class="img-responsive margin thumbnail" style="width:100%" alt="Man spying on Bigfoot Image">
          <div class="caption text-center">
              <p>From <a href="http://www.wikihow.com/Search-for-Bigfoot">Step 7, "Know what to do if you see a Bigfoot.</a></p>
          </div>
      </div>
    </div>
  </div>
      
<!-- Fourth Container -->
  <div class="container-fluid bg-4">
    <h1 class="margin"><a id="more-bfoot">'Squatch It to the MAX</a></h1>
    <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
      <li data-target="#myCarousel" data-slide-to="3"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" style="text-shadow: 2px 2px 4px #000000">

      <div class="item active">
        <img src="https://media-cdn.tripadvisor.com/media/photo-o/02/1c/b9/f7/bigfoot-discovery-museum.jpg" class="img-responsive margin" style="width:100%" alt="Bigfoot Discovery Museum image">
        <div class="carousel-caption">
            <a href="http://bigfootdiscoveryproject.com" target="_blank" class="btn btn-info btn-lg">Bigfoot Discovery Museum</a>
          <p>"Our collection includes exhibits of local history, tied in with local Bigfoot sightings, Popular Culture as it relates to the public view of Bigfoot, and actual evidence in the form of plaster foot and hand prints along with detailed exhibit on the Patterson-Gimlin Film."</p>
        </div>
      </div>

      <div class="item">
        <img src="http://ichef.bbci.co.uk/wwfeatures/wm/live/1280_720/images/live/p0/2j/cj/p02jcj2q.jpg" class="img-responsive margin" style="width:100%" alt="Bigfoot Country Museum image">
        <div class="carousel-caption">
          <a href="http://bigfootcountry.net" target="_blank" class="btn btn-info btn-lg">Bigfoot Country Bigfoot Museum</a>
          <p>"One of our big attractions of course is the… "Bigfoot exhibit" containing generous donations of items including Bigfoot foot print casts, Bigfoot pictures, maps, and other papers exhibited in a building specifically built to house this collection."</p>
        </div>
      </div>
    
      <div class="item">
        <img src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1449777551/International-Cryptozoology-Museum-Maine-ROADSIDE1215.jpg?itok=VidLk3rb" class="img-responsive margin" style="width:100%" alt="International Cryptozoology Museum image">
        <div class="carousel-caption">
          <a href="http://cryptozoologymuseum.com" target="_blank" class="btn btn-info btn-lg">International Cryptozoology Museum</a>
          <p>"We have a wide range of exhibitions from rare, one-of-a-kind scientific, zoological specimens to popular cultural homages to the relevant anthropological and psychological acknowledgements of the sightings and folk traditions to be found within hominology and cryptozoology."</p>
        </div>
      </div>
        
      <div class="item">
        <img src="https://img1.etsystatic.com/148/0/6063364/il_570xN.1210558495_lmc4.jpg" class="img-responsive margin" style="width:100%" alt="Bigfoot Forbidden Love patch image">
        <div class="carousel-caption">
          <a href="https://www.etsy.com/shop/MaidenVoyageClothing?ref=l2-shopheader-name" target="_blank" class="btn btn-info btn-lg">Maiden Voyage Clothing</a>
          <p>Great Bigfoot and cryptozoological-themed apparel, patches, and pins. "Accompany us as we explore all that is mysterious, for we believe that such things make the Universe more interesting and fun! Skeptics, Believers, Adventurers and Armchair-Travelers alike can find something to enjoy in the unusual subjects that we celebrate through our art and goods!"</p>
        </div>
      </div>
  
    </div>

    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</div>

<!-- Footer -->
  <footer class="container-fluid bg-5 text-center">
    <p>Based on the Bootstrap Theme by <a href="https://www.w3schools.com" target="_blank">www.w3schools.com</a></p>
    <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#add-credits">Additional Credits</button>
            <div id="add-credits" class="collapse card">
                <p></p>
                <p>All text marked with "<i class="fa fa-wikipedia-w" aria-hidden="true" style="font-size:9px;color:#736efe"></i>" was taken from Wikipedia's <a href="https://en.wikipedia.org/wiki/Bigfoot">Bigfoot page</a>.</p>
                <p>This page was created as part of <a href="https://t.co/VFctZltMDz"><i class="fa fa-free-code-camp" aria-hidden="true" style="font-size:14px;color:#736efe"></i> Free Code Camp's</a> Front End Development course. It was created for fun and experiementation, hence all the Wikipedia instead of researched sources.</p> 
            </div>
  </footer>

 </body>
</html>
              
            
!

CSS

              
                
              
            
!

JS

              
                
              
            
!
999px

Console