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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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