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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 class="container-fluid">
  <div class="row">
    <div class="col-md-12 text-center">
      <h1 class="text-primary ">Captain Barnacles</h1>
      <h3 class="text-center">Captain of the 
      <img class="octo-logo" src="http://www.theoctonauts.com/img/ow_logo.png" alt="Octonauts Logo"/></h3>
    </div>
  </div>
  <div class="row" id="header-images">
    <div class="col-sm-4">
      <img class="center-block flip" src="http://vignette1.wikia.nocookie.net/octonauts/images/d/d8/Captbarnacles.png/revision/latest?cb=20121022091411" alt="Barnacles with hands on hips" />
    </div>
    <div class="col-sm-4">
      <img class="center-block" src="http://img.lum.dolimg.com/v1/images/nav_disneyjunior_octonauts_dc4cafd9.png?region=0,0,300,300" alt="Barnacles headshot" />
    </div>
    <div class="col-sm-4">
      <img class="center-block last" src="http://vignette3.wikia.nocookie.net/octonauts/images/4/45/Captain-barnacles.jpg/revision/latest?cb=20140805165047" alt="Barnacles laughing" />
    </div>
  </div>
  <div id="main-content" class="center-block">
    <div class="row">
      <div class="col-sm-12 ">
        <h3 class="octo-font text-center">Sound the octoalert!</h3>
        <p>Barnacles Bear is the captain of the Octonauts and one of the bravest polar bears you will ever meet. Always the first to rush in and help when there's a problem, the crew has great respect for him.</p>
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12 wholecrew">
        <img class="img-responsive center-block" src="http://www.abbeyhomemedia.com/Images/Character%20Images/Octonauts_Characters_800_400_c1.jpg" alt="The whole Octonauts crew" />
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <p>Along with being the captain, Barnacles is also the strongest member of the crew and he's demonstrated his polar bear strength a number of times to help a sea creature in need. He's also one of the most level-headed crew members, often dismissing
          his crew mate Kwazii's outlandish stories about sea monsters and ghosts.</p>
      </div>

    </div>
    <div class="row">
      <div class="col-sm-12">
        <img class="img-responsive center-block" src="http://www.mcsuk.org/images/octonauts/sub.png" alt="Barnacles Kwazii and Peso in the Gup A" />
      </div>
    </div>
    <div class="row">
      <div class="col-sm-12">
        <p>It's also been revealed that he rather fancies playing the accordion. To his mind, he's quite good at it, but Kwazii, who has the misfortune of living in the same pod, doubts it! So far the only ones to appreciate the music have been a pod of
          Orcas. </p>
      </div>
    </div>
  </div>
  <div class="row center-block" id="footer-content">
    <div class="col-sm-4 center-block"><a href="https://twitter.com/barnaclesbear" target="_blank" class="btn btn-default btn-lg btn-block btn-warning"><i class="fa fa-twitter"></i>
    Follow Cpt Barnacles</a>
    </div>
    <div class="col-sm-4 center-block text-center">
      <a href="http://www.theoctonauts.com/" target="_blank" class="btn btn-default btn-lg btn-block btn-warning"><i class="fa fa-external-link"></i>
    <span class="octo-font">theoctonauts.com</span></a></div>
    <div class="col-sm-4 center-block">
      <a href="http://octonauts.wikia.com/wiki/Octonauts_Wiki" target="_blank" class="btn btn-default btn-lg btn-block btn-warning last"><i class="fa fa-external-link"></i>
    The Octonauts wiki</a></div>
  </div>
              
            
!

CSS

              
                body{
  font-family:	Verdana,Arial,Helvetica,sans-serif;
}
.flip{
  -moz-transform: scaleX(-1);
        -o-transform: scaleX(-1);
        -webkit-transform:scaleX(-1);
        transform: scaleX(-1);
        filter: FlipH;
        -ms-filter: "FlipH";
}
.btn{
  font-size:12px;
  height:41px;
}
@media (max-width: 768px) {
  /* CSS that should be displayed if width is equal to or less than 800px goes here */
.btn{
    margin-bottom:15px;
}
  .last{
    margin-bottom:0px;
  }
  #header-images .col-sm-4 img{
    margin-bottom:15px;
}
}
.octo-font{
 font-family:"rosewood-std-fill";
  color:#F47E31;
}
.btn .octo-font{
  font-size:16px;
  color:#ffffff;
}
#header-images .col-sm-4 img, #main-content, #footer-content{
  background-color:#ffffff;
  border-style:solid;
  border-color:#005A84;
  border-width:5px;
  border-radius:25px;
  padding:15px;

}
#header-images .col-sm-4 img{
  height:230px;
}
.wholecrew{
  overflow:hidden;
}
.wholecrew img{
  margin-top:-15px;
}
#main-content, #footer-content{
  width:80%;
  margin-top:40px;
  margin-bottom:40px;
}
h3{
  color:#ffffff;
}
.text-primary{
  font-family: "rosewood-std-fill";
  color:#005A84;
  background-color:#ffffff;
  border-style:solid;
  border-color:#005A84;
  border-width:5px;
  border-radius:37px;
  margin:20px auto 40px;
  max-width:400px;
  }
.octo-logo{
  height:60px;
  margin-top:-35px;
}
              
            
!

JS

              
                 $.backstretch("http://www.brownbagfilms.com/images/blog/legacy-files/2010/09/The-Octonauts_Octopod.jpg");
              
            
!
999px

Console