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.

            
              <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
  
 <!-- Latest compiled JQuery -->  
<script src="https://www.google.com/jsapi" type="text/javascript"></script>
 
<script type="text/javascript">google.load("jquery", "1.3.2");</script>
</head>
  
<div class="container-fluid">
  <div class="navbar navbar-inverse row" id="nav">
      <h3 class="text-right"><a class="menu" href="#about">About</a><a class="menu" href="#portfolio">Portfolio</a><a class="menu" href="#contact">Contact</a></h3>
  </div>
</div>
<div class="row" id="about">
  <h1 class="text-center">About Me</h1>
  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
    <img class="img-responsive text-center" src="http://brentkeath.com/wp-content/uploads/2016/03/me.jpg"/>
  </div>
  <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
  <h3>Hello! My name is Brent Keath. I hold a bachelor’s degree in Mathematics and am currently studying my M.B.A. in IT Management.  I am an app developer, website designer, and game inventor. I also ran a business in college where I developed mobile apps. I live by the golden rule: “Treat others as you wish to be treated.” I have not only managed but been part of numerous teams throughout my life. My goal professionally is to be part of a company where I can help the community around me while personally improving my own skills and well-being. I also love to have fun and make people laugh.</h3>
  </div>
</div>
  <div class="row" id="portfolio">
    <h1 class="text-center">Portfolio</h1>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <h2 class = "text-center">Web Development</h2>
      <div class = "row">
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "https://www.freecodecamp.com/zzbrent">
              <h4 class = "text-center">Free Code Camp Curriculum</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2017/04/9892522-360x205.png"/>
          </a>
        <p class="text-center">As I was finishing my MBA program and began applying to junior developer positions, I began the Free Code Camp curriculum to hone my skills and improve my portfolio.</p>
          </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "http://brentkeath.com/">
              <h4 class = "text-center">My Website</h4>
            <img class="img-responsive img-rounded" id="rounded-me" src = "http://brentkeath.com/wp-content/uploads/2017/04/finalheadshot_rect_1024x1800.png"/>
          </a>
        <p class="text-center">I created a website for potential employers to quickly and easily look at some of my past projects, look at my resume, see some testimonials about my work, and email me directly.</p>
          </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <a href = "http://flannelgames.com/">
            <h4 class = "text-center">Adorans Academic Journal</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2016/04/adoranslogo1-360x205.png"/>
          </a>
          <p class = "text-center">While in my undergraduate program I was accepted into an intellectual conversation group called the Agora Fellows.  We had a website that I built where we posted our essays.</p>
      </div>
      </div>
      <div class="row">
         
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <a href = "https://play.google.com/store/apps/details?id=com.projectcaruso.campusbuzz">
            <h4 class = "text-center">Campus Buzz</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2014/07/Campus-Buzz-360x205.png"/>
          </a>
          <p class = "text-center">Freshman year of college I was approached by some business students who had an idea for an app to help Eastern University students learn about upcoming events.  I helped them bring their idea to life.</p>
      </div>
      </div>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
      <h2 class = "text-center">Game Development</h2>
    <div class = "row">
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "http://brentkeath.com/wp-content/uploads/2017/04/FeedTheBirds.html">
              <h4 class = "text-center">Feed the Birds App</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2014/08/feed-the-birds-image-360x205.png"/>
          </a>
        <p class="text-center">A game app I managed for Isaac's Restaurant and Deli in Lancaster County.  I helped make the most out of their small budget to take their game app from idea to reality.</p>
          </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
            <a href = "http://brentkeath.com/wp-content/uploads/2017/04/FeedTheBirds.html">
              <h4 class = "text-center">Legends of Areia: Destiny</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2016/04/destiny-360x205.jpg"/>
          </a>
        <p class="text-center">A desktop application created using RPG Maker XP and Ruby.  It is a role playing version of my book (Legends of Areia: Generations).</p>
          </div>
      <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <a href = "http://flannelgames.com/">
            <h4 class = "text-center">Falling Birds App</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2014/07/falling-birds-image-360x205.png"/>
          </a>
          <p class = "text-center">A game application that was full of glitches and problems that I purchased in 2013.  I then fixed all of the problems and re-released it on Google Play.</p>
      </div>
      </div>
      <div class="row">
         
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <a href = "http://flannelgames.com/">
            <h4 class = "text-center">Pumpkins on Graves App</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2014/07/pumpkins-on-graves-360x205.png"/>
          </a>
          <p class = "text-center">An iPhone and Android game app I invested in, improved, and resold in 2014.</p>
      </div>
        <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
          <a href = "http://flannelgames.com/">
            <h4 class = "text-center">Furtherance App and Board Game</h4>
            <img class="img-responsive img-rounded" src = "http://brentkeath.com/wp-content/uploads/2016/04/rsz_furtherance_-_without_logo-1024x614-360x205.png"/>
          </a>
          <p class = "text-center">The board game I developed in my final semester of my undergraduate program.  I am currently working on a virtual version using Unity and C#.</p>
      </div>
      </div>
    </div>
  </div>
</div>

  <div class="row" id="contact">
    <h1 class="text-center">Contact</h1>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <div class="col-xs-11 col-sm-11 col-md-11 col-lg-11">
    </div>
    <a href="https://www.linkedin.com/in/brent-keath-m-b-a-45359693/"><img class="img-responsive col-xs-1 col-sm-1 col-md-1 col-lg-1" src="https://upload.wikimedia.org/wikipedia/commons/c/ca/LinkedIn_logo_initials.png"/></a>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
    <a href="https://www.facebook.com/brent.keath"><img class="img-responsive col-xs-1 col-sm-1 col-md-1 col-lg-1" src="https://en.facebookbrand.com/wp-content/uploads/2016/05/FB-fLogo-Blue-broadcast-2.png"/></a>
    </div>
  </div>
  <div class="row">
    <a href="mailto:me@brentkeath.com?subject=I just viewed your portfolio!&body=Hi Brent!  I just viewed your resume and wanted to send you an email to..."><h2 class="text-center">Click here to send an email to me@brentkeath.com</h2></a>
    </div>
            
          
!
            
              h1 {
  padding: 60px 0px 15px 0px;
}
h3 {
  margin-right: 35px;
}
#nav {
 background-color:#262626;
 width:100%;
 height:60px;
 box-shadow: 0px 1px 60px #5E5E5E;
 position:fixed;
 top:0px;
 z-index:10;
}
.menu {
  color: white;
  padding-left: 25px;
  padding-right: 25px;
  border-color: white;
  border-width: 15px;
}
.menu:link {
  text-decoration: none;
}
.menu:visited {
  color: white;
}
.menu:hover {
  color: white;
  border-style: groove;
  border-color: white;
  border-width: 3px;
  border-radius: 6px;
  text-decoration: none;
  opacity: 0.95;
}
.active {
  color: white;
  border-style: groove;
  border-color: white;
  border-width: 3px;
  border-radius: 6px;
  text-decoration: none;
  opacity: 0.95;
}
#rounded-me {
  border-radius: 50%
}
.img-responsive {
    margin: 0 auto;
}
            
          
!
            
              $(document).ready(function(){
  $( ".menu" ).click(function() {
  $(".menu").addClass("active");
});
});
            
          
!
999px
Loading ..................

Console