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 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

              
                <html lang="en-us">

<head>
  <!-- Recommended charset if using english -->
  <meta charset="utf-8">
  <!-- Description that is shown in search results -->
  <meta description="Sean Hamlet's personal page">
  <!-- Ensures rendered using latest IE version -->
  <meta http-equiv="X-UA-Compatible" content="IE=Edge">
  <!-- Controls pages dimensions to follow screen width of device -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sean M Hamlet</title>

</head>

<body>

  <!-- Navigation Bar -->
  <nav class="navbar navbar-default navbar-fixed-top">

    <div class="container-fluid">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#example-navbar">
          <!-- what's shown when collapsed -->
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span> 
        </button>

        <!-- "navbar-brand" sets the title for the linked text ("Sean Hamlet")to have same text style as navbar-->
        <a class="navbar-brand" href="#home">seanmhamlet</a>

      </div>

      <div class="collapse navbar-collapse" id="example-navbar">
        <!-- Groups buttons on right of page -->
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#about">ABOUT</a></li>
          <li><a href="#portfolio">PROJECTS</a></li>
          <li><a href="#contact">CONTACT</a></li>
        </ul>
      </div>

    </div>

  </nav>

  <!-- Home -->
  <div class="container-fluid text-center section pad-expand" id="home">
    <div class="">
      <h1 class="name">Sean M Hamlet</h1>
      <hr class="hr-home">
      <h4 class="title">Aspiring Software Engineer</h4>

      <!-- Social media buttons -->
      <!-- Make button hover display handle of respective website
           i.e. twitter button hover will display @smhamlet0
           github button hover will display @smhamlet -->
      <div class="row front-buttons">

        <a href="https://twitter.com/seanmhamlet" target="_blank"><i class="fa fa-twitter fa-3x"></i></a>
        <a href="https://github.com/seanmhamlet" target="_blank"><i class="fa fa-github fa-3x"></i></a>
        <a href="https://www.linkedin.com/in/seanmhamlet" target="_blank"><i class="fa fa-linkedin fa-3x"></i></a>
        <a href="https://www.freecodecamp.com/seanmhamlet" target="_blank"><i class="fa fa-fire fa-3x"></i></a>

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

  <!-- About -->
  <div class="container-fluid section" id="about">

    <div class="row">
      <div class="col-xs-offset-2 col-xs-4">
        <h1>About</h1>
        <p>Hi. My name is Sean Hamlet. I'm an electrical engineering PhD student and I love solving technical problems. Only recently have I discovered my love for programming. After developing a videogame in MATLAB and taking tutorials on Python, I decided
          I wanted to expand my programming knowledge and write better code. I'm currently working through <a href="https://www.freecodecamp.com">freeCodeCamp</a> to learn web development.</p>
      </div>

      <div class="col-xs-4">
        <h3>Languages and Frameworks</h3>
        <ul>
          <li><strong>Working Knowledge:</strong> MATLAB, Python</li>
          <li><strong>Basic knowledge:</strong> HTML, CSS, Bootstrap, C, C++</li>
        </ul>

        <h3>Tools</h3>
        <ul>
          <li><strong>Working Knowledge:</strong> Git, TortoiseGit</li>
          <li><strong>Basic knowledge:</strong> Pycharm, SourceTree, Sublime Text</li>
        </ul>


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

  <!-- Text on middle of screen -->
  <div class="container-fluid section" id="portfolio">
    <h2 class="text-center">Portfolio</h2>
    <hr>

    <!-- Portfolio top row -->

    <a href="https://codepen.io/seanmhamlet/full/zrbRyv/" target="_blank">
      <img src="https://res.cloudinary.com/seanmhamlet/image/upload/c_scale,h_340,w_545/v1461945863/TributePage_ate8mj.png" alt="Tribute Page">
      <h4>Tribute Page</h4>
    </a>

    <a href="https://codepen.io/seanmhamlet/full/yOqyGq/" target="_blank">
      <img src="https://res.cloudinary.com/seanmhamlet/image/upload/v1461939675/WikipediaSearchShot_diekpl.png" alt="Wikipedia Search">
      <h4>Wikipedia Search</h4>
    </a>

    <a href="https://codepen.io/seanmhamlet/full/MyoOaw/" target="_blank">
      <img src="https://res.cloudinary.com/seanmhamlet/image/upload/c_scale,h_340,w_545/v1461948432/LocalWeather_xujdmy.png" alt="Local Weather">
      <h4>Local Weather</h4>
    </a>

    <!-- Portfolio bottom row -->
    <a href="https://codepen.io/seanmhamlet/full/xVgpWZ/" target="_blank">
      <img src="https://res.cloudinary.com/seanmhamlet/image/upload/c_scale,h_340,w_545/v1461948593/RandomQuoteGenerator_npf8ov.png" alt="Random Quote Generator">
      <h4>Random Quote Generator</h4>
    </a>

    <a href="https://codepen.io/seanmhamlet/full/PNOWEQ/" target="_blank">
      <img src="https://res.cloudinary.com/seanmhamlet/image/upload/c_crop,h_340,w_545,x_365/v1461948702/TwitchTV_fjqtme.png" alt="Twitch TV">
      <h4>Twitch TV</h4>
    </a>

    <a href="https://codepen.io/seanmhamlet/full/PNoLLG/" target="_blank">
      <img src="https://res.cloudinary.com/seanmhamlet/image/upload/c_crop,h_340,w_545/v1461948929/PersonalSite_tgcoyk.png" alt="Portfolio 6">
      <h4>Portfolio Site</h4>
    </a>

  </div>

  <!-- Text on middle of screen -->
  <div class="container-fluid section" id="contact">

    <div class="row text-center">
      <a href="https://twitter.com/seanmhamlet" target="_blank"><i class="fa fa-twitter fa-3x"></i></a>
      <a href="https://github.com/seanmhamlet" target="_blank"><i class="fa fa-github  fa-3x"></i></a>
      <a href="https://www.linkedin.com/in/seanmhamlet" target="_blank"><i class="fa fa-linkedin fa-3x"></i></a>
      <a href="https://www.freecodecamp.com/seanmhamlet" target="_blank"><i class="fa fa-fire fa-3x"></i></a>


    </div>

  </div>


  <footer class="footer">Copyright &copy <a href="https://github.com/seanmhamlet" target="_blank">seanmhamlet</a> 2016. All rights reserved.</footer>

</body>

</html>
              
            
!

CSS

              
                body {
  font-family: Lato, sans-serif;
}

.navbar-collapse {
  text-align: right;
  padding-right: 30px;
}

.glyphicon {
  font-size: 20px;
}

.front-buttons {
  display: inline;
}


/* General section parameters, useful so that each section looks similar
   with regards to padding*/
.section {
  padding-top: 70px;
  padding-bottom: 50px;
  min-height:calc(100% - 1px);
}

.pad-expand {
  padding-top: 20%;
  padding-bottom: 25%;
}

/* Home */

.hr-home {
  width: 25%;
  height: 0;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  margin-top: 1rem;
  margin-bottom: 1rem;
}

#home {
  color: rgba(255,255,255,1.0);
  background-color: #3499DB;
  background-size: 100% 100%;
  opacity: 1.0;
  filter: alpha(opacity=100);
  font-weight: 300;
}

.transbox {
    margin: 30px;
    background-color: #000000;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

.fa {
  color: rgba(255,255,255,0.87);
  margin-left: 1.0rem;
  margin-right: 1.0rem;
}

.fa:hover {
  color: rgba(255,255,255,0.50);
}

.title {
  color: rgba(255,255,255,0.70);
}

/* About */

#about {
  color: rgba(0,0,0,0.89);
  background-color: #fff;
}

/* Portfolio */

#portfolio {
  color: black;
  background-color: #eeeeee;
  text-align: center;
}

#portfolio a {
  display: inline-block;
  text-align: center;
  text-decoration: inherit;
  color: inherit;
  margin-left: 2rem;
  margin-right: 2rem;
  margin-bottom: 5rem;
  background-color: white;
  box-shadow: 0 4px 4px rgba(0,0,0,0.12);
}

#portfolio a h4 {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

img {
  max-width: 350px;
}

/* Contact */

#contact {
  background-color: #3499DB;
}

/* Footer */

footer {
  color: white;
  background-color: #3499DB;
  text-align: center;
}

footer a {
  text-decoration: none;
  color: inherit;
}
              
            
!

JS

              
                
              
            
!
999px

Console