cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div class='container'>
  <a class="home" id="home"></a>
  <div class="row">
    <nav class="navbar navbar-inverse navbar-default navbar-fixed-top topnav" role="navigation">
      <div class="container topnav">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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="http://www.beespace.com" target="_blank" title="Michael Lecke"><img class="img-responsive img-circle" alt="Beespace" src="http://gravatar.com/avatar/ee06529b8b423349277818881d1f87d7?s=30"></a>
        </div>
        <div id="navbar" class="navbar-collapse collapse navbar-right">
          <ul class="nav navbar-nav text-align-right">
            <li>
              <a href="#home">Home</a>
            </li>
            <li>
              <a href="#about">About</a>
            </li>
            <li>
              <a href="#portfolio">Portfolio</a>
            </li>
            <li>
              <a href="#contact">Contact</a>
            </li>
          </ul>
        </div>
    </nav>
    </div>
    <div class="jumbotron">
      <div class="container">
        <h1><span class="golden-glow">BeeSpace</span></h1>
        <br />
        <p class="lead">
          <span class="fa-stack fa-lg">
  <i class="fa fa-square fa-stack-2x"></i>
  <i class="fa fa-terminal fa-stack-1x fa-inverse"></i>
        </span><samp class="text-glow">&nbsp;&nbsp;I'm a <a class="text-coder" href='https://freecodecamp.com/mlecke' target='_blank'>coder</a>.</samp>
        </p>
        <p class="text-align-right text-glow">
          <big>I make honey on the Web. HTML. CSS. JavaScript.</big>
        </p>
      </div>
      <a class="anchor" id="about"></a>
      <!-- about -->
    </div>
    <div class="jumbotron">
      <div class="container">
        <h1><span class="golden-glow-alt">Savvy:</span></h1>
        <br />
        <p class="lead">
        <ul class="list-group list-inline">
          <li class="list-group-item">Adobe Clouds</li>
          <li class="list-group-item"><mark><abbr title="Asynchronous Javascript And XML">AJAX</abbr></mark></li>
          <li class="list-group-item"><mark><abbr title="Application Programming Interfaces">APIs</abbr></mark></li>
          <li class="list-group-item">Basecamp</li>
          <li class="list-group-item">Bootstrap</li>
          <li class="list-group-item">Camtasia</li>
          <li class="list-group-item">Canvas.js</li>
          <li class="list-group-item">Garageband</li>
          <li class="list-group-item">Github</li>
          <li class="list-group-item">Google Analytics</li>
          <li class="list-group-item">Google Chrome</li>
          <li class="list-group-item">Google Docs</li>
          <li class="list-group-item">iShowU</li>
          <li class="list-group-item">Jira</li>
          <li class="list-group-item">JQuery</li>
          <li class="list-group-item"><mark><abbr title="JavaScript Object Notation ">JSON</abbr></mark></li>
          <li class="list-group-item">Logic Pro Audio</li>
          <li class="list-group-item">Markdown</li>
          <li class="list-group-item">MongoDB</li>
          <li class="list-group-item">MS Office</li>
          <li class="list-group-item">MS Project</li>
          <li class="list-group-item">MS SQL Server</li>
          <li class="list-group-item">MySQL</li>
          <li class="list-group-item"><mark><abbr title="PHP: Hypertext Preprocessor">PHP</abbr></mark></li>
          <li class="list-group-item">Podio</li>
          <li class="list-group-item">Python</li>
          <li class="list-group-item">Quicktime</li>
          <li class="list-group-item">Raphael.js</li>
          <li class="list-group-item"><mark><abbr title="REpresentational State Transfer">REST</abbr></mark></li>
          <li class="list-group-item">Ruby</li>
          <li class="list-group-item"><mark><abbr title="Responsive Web Design">RWD</abbr></mark></li>
          <li class="list-group-item"><mark><abbr title="Syntactically Awesome StyleSheets / LEaner cSS">SASS/LESS</abbr></mark></li>
          <li class="list-group-item">Scrum</li>
          <li class="list-group-item">Social Media</li>
          <li class="list-group-item"><mark><abbr title="Structured Query Language">SQL</abbr></mark></li>
          <li class="list-group-item">Sublime Text</li>
          <li class="list-group-item">Twitter API</li>
          <li class="list-group-item"><mark><abbr title="User Interface / User eXperience">UI/UX</abbr></mark> Design</li>
          <li class="list-group-item">WordPress</li>
          <li class="list-group-item"><mark><abbr title="eXtensible Markup Language">XML</abbr></mark></li>
        </ul>
        </p>
      </div>
      <!-- make something interactive here -->
    </div>
    <!-- saavy -->
    <div class="row portfolio">
      <a class="anchor" id="portfolio"></a>
      <div class="col-md-4">
        <h2>Portfolio<br /><small>A Selection From My Work</small></h2>
        <img class="img-responsive" src="http://loremflickr.com/g/600/600/honeycomb,beekeeping?random=1">
        <p>
          Bee ipsum dolor sit amet, Langstroth revolutionized the beekeeping industry by using bee space in his top-opening hive.
        </p>
      </div>
      <div class="col-md-4">
        <h2>						Ziplines<br /><small>Front End Development Projects</small></h2>
        <div class="container-responsive">
          <img class="img-responsive" src="http://loremflickr.com/g/600/600/honey,beehive,hexagons,bumblebees?random=2">
          <p>
            Bee ipsum dolor sit amet, Langstroth made many other discoveries in beekeeping and contributed greatly to the industrialization of modern beekeeping.
          </p>
        </div>
      </div>
      <div class="col-md-4">
        <h2>Basejumps<br /><small>Full Stack JavaScript Projects</small></h2>
        <img class="img-responsive " src="http://loremflickr.com/g/600/600/bees,hexagon,honeycomb,apiary?random=3 ">
        <p>
          Bee ipsum dolor sit amet, Langstroth spent many years attempting to defend his patent without success. He never earned any royalties because the patent was easily and widely infringed.
        </p>
      </div>
    </div>
    <!-- portfolio -->
    <div class="row ">
      <a class="anchor" id="contact"></a>
      <div class="col-md-12 contact">
        <h2>Buzz Me&nbsp;<small><i class="fa fa-hand-o-down "></i></small></h2>
        <div class="btn-group btn-group-justified ">
          <a href="https://www.freecodecamp.com/mlecke" target="_blank" class="btn btn-social-icon btn-fa-fire" role="button" title="Free Code Camp "><i class="fa fa-fire "></i></a>
          <a href="https://beespace.yelp.com " target="_blank " class="btn btn-social-icon btn-yelp " role="button " title="Yelp "><i class="fa fa-yelp "></i></a>
          <a href="https://codepen.io/beespace/ " target="_blank " class="btn btn-social-icon btn-codepen " role="button " title="Codepen "><i class="fa fa-codepen "></i></a>
          <a href="https://github.com/mlecke " target="_blank " class="btn btn-social-icon btn-github " role="button " title="Github "><i class="fa fa-github "></i></a>
          <a href="https://www.linkedin.com/pub/michael-lecke/3/169/b74 " target="_blank " class="btn btn-social-icon btn-linkedin " role="button " title="Linked In "><i class="fa fa-linkedin "></i></a>
          <a href="https://twitter.com/Bee5pace " target="_blank " class="btn btn-social-icon btn-twitter " role="button " title="Twitter "><i class="fa fa-twitter "></i></a>
          <a href="https://www.facebook.com/michael.lecke.3 " target="_blank " class="btn btn-social-icon btn-facebook " role="button " title="Facebook "><i class="fa fa-facebook "></i></a>
          <a href="https://medium.com/@bee5pace " target="_blank " class="btn btn-social-icon btn-medium " role="button " title="Medium "><i class="fa fa-medium "></i></a>
          <a href="https://vine.co/beespace " target="_blank " class="btn btn-social-icon btn-vine " role="button " title="Vine "><i class="fa fa-vine "></i></a>
          <a href="https://plus.google.com/+MichaelLecke/posts " class="btn btn-social-icon btn-google " role="button " title="Google "><i class="fa fa-google-plus "></i></a>
          <a href="https://www.youtube.com/channel/UC_5OM4-rCrplFOMyjdhmgtQ/channels " class="btn btn-social-icon btn-youtube " role="button " title="You Tube "><i class="fa fa-youtube "></i></a>
          <a href="https://delicious.com/mlecke " class="btn btn-social-icon btn-delicious " role="button " title="Delicious "><i class="fa fa-delicious "></i></a>
          <a href="https://soundcloud.com/beespace-1 " class="btn btn-social-icon btn-soundcloud " role="button " title="Soundcloud "><i class="fa fa-soundcloud "></i></a>
          <a href="https://www.pinterest.com/bee5pace/ " class="btn btn-social-icon btn-pinterest " role="button " title="Pinterest "><i class="fa fa-pinterest "></i></a>
          <a href="https://www.dropbox.com/ " class="btn btn-social-icon btn-dropbox " role="button " title="Dropbox "><i class="fa fa-dropbox "></i></a>
          <a href="http://jsfiddle.net/user/mlecke/ " class="btn btn-social-icon btn-jsfiddle " role="button " title="JSFiddle "><i class="fa fa-jsfiddle "></i></a>
          <a href="https://stackexchange.com/users/4713162/beespace " class="btn btn-social-icon btn-stack-exchange "><i class="fa fa-stack-exchange " role="button " title="Stack Exchange "></i></a>
          <a href="https://instagram.com/mlecke/ " class="btn btn-social-icon btn-instagram " role="button " title="Instagram "><i class="fa fa-instagram "></i></a>
          <a href="https://www.reddit.com/user/Bee5pace/m/webdev/ " class="btn btn-social-icon btn-reddit " role="button " title="Reddit "><i class="fa fa-reddit "></i></a>
        </div>
        <!-- button group social -->
      </div>
    </div>
    <!-- contact -->
    <div class="footer">
      <div class=row>
        <div class=col-md-4>
          <span class="copyright align-center">copyright <span class="fa fa-copyright fa-pulse"></span> beespace.com 2015</span>
        </div>
      </div>
    </div>
  </div>
  <!-- main container -->
            
          
!
            
              body {
  min-height: 1500px;
  min-width: 365px;
  padding-top: 60px;
  font-family: Metrophobic;
  background: -moz-linear-gradient(top, #e1ad21, #2054e1);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1ad21), color-stop(100%,#2054e1));
  background: -webkit-linear-gradient(top, #e1ad21, #2054e1);
  background: -o-linear-gradient(top, #e1ad21, #2054e1);
  background: -ms-linear-gradient(top, #e1ad21, #2054e1);
  background: linear-gradient(top, #e1ad21, #2054e1);
  /*color: #000;
  /*background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#7db9e8));
    background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);
    background: -ms-linear-gradient(top,  #1e5799 0%,#7db9e8 100%);*/
}

h1 {
  font-family: Metrophobic;
  font-size: 23px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 23px;
}

h2, h2>small {
  color: black;
}

h3 {
  font-family: Metrophobic;
  font-size: 17px;
  font-style: normal;
  font-variant: normal;
  font-weight: 500;
  line-height: 23px;
}

p {
  font-family: Metrophobic;
  font-size: 14px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 23px;
}

blockquote {
  font-family: Metrophobic;
  font-size: 17px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 23px;
}

pre {
  font-family: Metrophobic;
  font-size: 11px;
  font-style: normal;
  font-variant: normal;
  font-weight: 400;
  line-height: 23px;
}

.anchor {
  padding-top: 40px;
  margin-top: -40px;
  display: inline-block;
  /* required for webkit browsers */
}

.navbar-brand {
  padding: 10px 0 10px 15px;
}

.topnav {
  font-size: 16px;
  box-shadow: 0 2px #000;
}

.topnav ul.navbar-nav li a {
  background: none;
  color: #e1ad21;
}

.topnav ul.navbar-nav li a:hover,
.topnav ul.navbar-nav li a:focus {
  color: #2054e1;
  background: darkgray;
}

.topnav .navbar-brand {
  background: none;
  color: black;
}

.jumbotron {
  background: url('http://loremflickr.com/g/1200/1800/apiary,hexagons,honeycomb,beekeeping?random=4') no-repeat center center fixed;
  background-size: cover;
  background-repeat: no-repeat;
  max-width: 100%;
  display: block;
  border: 1px solid black;
  
}

.golden-glow {
  color:white;
  text-shadow: .1em .1em 1em #e1ad21, 0 0 .25em black, 0 0 .15em #e1ad21;
  padding-bottom: 4px;
}

.golden-glow-alt {
  color:white;
  text-shadow: .1em .1em .25em #e1ad21, 0 0 .25em black, 0 0 .15em red;
}

.golden-glow-alt-1 {
  color: #e1ad21;
  text-shadow: 1px 1px 3px black, 0 0 25px darkgray, 0 0 5px #e1ad21;
}
    

.text-glow {
  color: white;
  text-shadow: 1px 1px 3px black, 0 0 25px darkgray, 0 0 5px #e1ad21;
}

.text-coder {
  color: red;
}

.text-align-right {
  text-align: right;
}

.portfolio p {
  max-width:600px;
  color:black;
}

.copyright {
  color:black;
}



/* below is a fix for bootstrap-social.css You Tube issue
/* cdn is loaded as link, update with fix when newer version comes out.
*/

.btn-youtube {
  color: #fff;
  background-color: #DC2725;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-youtube:hover,
.btn-youtube:focus,
.btn-youtube:active,
.btn-youtube.active,
.open>.dropdown-toggle.btn-youtube {
  color: #fff;
  background-color: #B21E1C;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-youtube:active,
.btn-youtube.active,
.open>.dropdown-toggle.btn-youtube {
  background-image: none
}

.btn-youtube.disabled,
.btn-youtube[disabled],
fieldset[disabled] .btn-youtube,
.btn-youtube.disabled:hover,
.btn-youtube[disabled]:hover,
fieldset[disabled] .btn-youtube:hover,
.btn-youtube.disabled:focus,
.btn-youtube[disabled]:focus,
fieldset[disabled] .btn-youtube:focus,
.btn-youtube.disabled:active,
.btn-youtube[disabled]:active,
fieldset[disabled] .btn-youtube:active,
.btn-youtube.disabled.active,
.btn-youtube[disabled].active,
fieldset[disabled] .btn-youtube.active {
  background-color: #DC2725;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-youtube .badge {
  color: #DC2725;
  background-color: #FFF
}

.btn-fa-fire {
  color: #FFF;
  background-color: #492C14;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-fa-fire:hover,
.btn-fa-fire:focus,
.btn-fa-fire:active,
.btn-fa-fire.active {
  color: #492C14;
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-fa-fire:active,
.btn-fa-fire.active,
.open>.dropdown-toggle.btn-fa-fire {
  background-image: none
}

.btn-fa-fire.active {
  background-color: #492C14;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-yelp {
  color: #fff;
  background-color: #C41200;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-yelp:hover,
.btn-yelp:focus,
.btn-yelp:active,
.btn-yelp.active,
.open>.dropdown-toggle.btn-yelp {
  color: #C41200;
  background-color: #fff;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-yelp:active,
.btn-yelp.active,
.open>.dropdown-toggle.btn-yelp {
  background-image: none
}

.btn-yelp.active {
  background-color: #C41200;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-codepen {
  color: #FFF;
  background-color: #000;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-codepen:hover,
.btn-codepen:focus,
.btn-codepen:active,
.btn-codepen.active,
.open>.dropdown-toggle.btn-codepen {
  color: #000;
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-codepen:active,
.btn-codepen.active,
.open>.dropdown-toggle.btn-codepen {
  background-image: none
}

.btn-codepen.active {
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-medium {
  color: #FFF;
  background-color: #000;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-medium:hover,
.btn-medium:focus,
.btn-medium:active,
.btn-medium.active,
.open>.dropdown-toggle.btn-medium {
  color: #000;
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-medium:active,
.btn-medium.active,
.open>.dropdown-toggle.btn-medium {
  background-image: none
}

.btn-medium.active {
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-vine {
  color: #FFF;
  background-color: #00B386;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-vine:hover,
.btn-vine:focus,
.btn-vine:active,
.btn-vine.active,
.open>.dropdown-toggle.btn-vine {
  color: #00B386;
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-vine:active,
.btn-vine.active,
.open>.dropdown-toggle.btn-vine {
  background-image: none
}

.btn-vine.active {
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-jsfiddle {
  color: #FFF;
  background-color: #4679A4;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-jsfiddle:hover,
.btn-jsfiddle:focus,
.btn-jsfiddle:active,
.btn-jsfiddle.active,
.open>.dropdown-toggle.btn-jsfiddle {
  color: #4679A4;
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-jsfiddle:active,
.btn-jsfiddle.active,
.open>.dropdown-toggle.btn-jsfiddle {
  background-image: none
}

.btn-jsfiddle.active {
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-stack-exchange {
  color: #FFF;
  background-color: #000;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-stack-exchange:hover,
.btn-stack-exchange:focus,
.btn-stack-exchange:active,
.btn-stack-exchange.active,
.open>.dropdown-toggle.btn-stack-exchange {
  color: #000;
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-stack-exchange:active,
.btn-stack-exchange.active,
.open>.dropdown-toggle.btn-stack-exchange {
  background-image: none
}

.btn-stack-exchange.active {
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-delicious {
  color: #FFF;
  background-color: #000;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-delicious:hover,
.btn-delicious:focus,
.btn-delicious:active,
.btn-delicious.active,
.open>.dropdown-toggle.btn-delicious {
  color: #000;
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}

.btn-delicious:active,
.btn-delicious.active,
.open>.dropdown-toggle.btn-delicious {
  background-image: none
}

.btn-delicious.active {
  background-color: #FFF;
  border-color: black;
  border-color: rgba(0, 0, 0, 0.2)
}
            
          
!
            
              $(document).ready();

$("#navbar a").click(function() {
  $("button[aria-expanded='true']").click();
  //alert("Handler for .click() called.");
});
            
          
!
999px
Loading ..................

Console