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

              
                <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href='//fonts.googleapis.com/css?family=Advent Pro' rel='stylesheet'>
<link href='//fonts.googleapis.com/css?family=Noto Sans' rel='stylesheet'>

<!-- My HTML starts below -->
<!-- This is where my top nagivation menu is -->
<div class="container-fluid bg">
  <ul class="topnav" id="myTopnav">
    <li><a href="#about">About</a></li>
    <li><a href="#portfolio">Portfolio</a></li>
    <li><a href="#contact">Contact</a>
    <li class="icon">
      <a href="javascript:void(0);" onclick="myFunction()">&#9776;</a>
    </li>
  </ul>
  
<!-- The About section of my site -->
  <a name="about"></a>
  <div class="container">
    <div class="panel panel-default" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);">
      <div class="panel-heading">
        <h2>About</h2>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-4">
            <img id="self-img" class="img-rounded img-responsive center-block" width="300" height="300"   src="http://i1270.photobucket.com/albums/jj605/chaotic_klaud/IMG_20161225_112456_438_zpsjfjlhybz.jpg">
          </div>
              <div class="col-md-8">
                <p>I currently work as an Instructional Design professional with Arizona State University. In this role, I collaborate with a variety of brilliant minds to design and develop quality courses for online graduate programs. Working with such a diverse range of people is both an exciting and wonderful experience!</p>

<p>While I enjoy all aspects of my job, I am exceptionally passionate about technology, learning, and problem-solving, and I strive to infuse these passions in 100% of the work that I do. With a desire to become more technically proficient, and to increase my ability to work more dynamically across a variety of projects, I am working towards gaining proficiency in software development and web development. This portfolio will house some of the projects that I accomplish along my journey.</p>

<p>When I'm not working or studying, I enjoy traveling, casual photography, and gaming.</p>                             
          </div>
        </div>
        <hr style="height:5px;border:none;color:#d9d1c8;background-color:#d9d1c8;" />
        <div class="row">
          <div class="col-md-6">
							<ul style="list-style: none;">
                <li><b>Web Development</b></li> 
                <div id="progressbar2">
                  <div></div>
                </div>
								<li>HMTL | CSS | Bootstrap</li>
                <div id="progressbar3">
                  <div></div>
                </div>
                <li>JavaScript | jQuery</li>
                <div id="progressbar1">
                  <div></div>
                </div>
							</ul>
          </div>
          <div class="col-md-6">
             <ul style="list-style: none;">
                <li><b>Software Development</b></i>
                <div id="progressbar1">
                  <div></div>
                </div>
								<li>Java</li>
                <div id="progressbar1">
                  <div></div>
                </div>								
								<li>Python</li>
                <div id="progressbar">
                  <div></div>
              </div>
							</ul>                              
          </div>
        </div>
      </div>
    </div>
  </div>
  
<!-- The Portfolio section of my site -->
  <a name="portfolio"></a>
    <div class="container">
    <div class="panel panel-default" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);">
      <div class="panel-heading">
        <h2>Portfolio</h2>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-4">
            <div class="thumbnail">
            <a href="https://s.codepen.io/toriancrane/debug/OWajWp/NQAzYnYjyQqr" target="_blank">
              <img class="img-rounded img-responsive center-block"    src="http://content.screencast.com/users/TorianCrane/folders/Snagit/media/a908b97c-0e92-47dc-9acc-01b380044dc5/03.01.2017-10.25.png">
              <div class="caption center-block">
              <p>Tribute Page</p>
              </div>
            </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
            <a href="https://s.codepen.io/toriancrane/debug/evOVGz/VGrWNnNJLBmM" target="_blank">
              <img class="img-rounded img-responsive center-block"    src="https://content.screencast.com/users/TorianCrane/folders/Snagit/media/4797e9fe-0a09-4106-8d03-a325adb04970/03.01.2017-10.32.png">
              <div class="caption">
              <p>Random Quote Generator</p>
              </div>
            </a>
            </div>
          </div>
          <div class="col-md-4">
            <div class="thumbnail">
            <a href="https://s.codepen.io/toriancrane/debug/yMYxpM/dXkqBbBYLznM" target="_blank"><img class="img-rounded img-responsive center-block"   src="https://content.screencast.com/users/TorianCrane/folders/Snagit/media/58743f30-ac5e-46bc-b367-fe198c7e7042/03.01.2017-10.23.png"></a>
              <div class="caption">
              <p>Wikipedia Viewer</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
<!-- The Contact section of my site -->
  <a name="contact"></a>
  <div class="container">
    <div class="panel panel-default" style="box-shadow: 0px 2px 25px rgba(0, 0, 0, .25);">
      <div class="panel-heading">
        <h2>Contact</h2>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-md-6">
            <form>
              <div class="form-group">
                <label for="inlineFormInput">Name:</label>
                <input type="text" class="form-control" id="email" placeholder="Enter name">
              </div>
              <div class="form-group">
                <label for="email">Email:</label>
                <input type="email" class="form-control" id="email" placeholder="Enter email">
              </div>
              <div class="form-group">
                <label for="inlineFormInput">Phone Number:</label>
                <input type="tel" class="form-control" id="email" placeholder="Enter phone number">
              </div>
              <div class="form-group">
                <label for="comment">Message:</label>
                <textarea class="form-control" rows="5" id="comment"></textarea>
              </div>
              <div class="form-group">  
                <button type="submit" class="btn btn-default form-control">Submit</button>
              </div>
            </form>
          </div>
          <div class="col-md-6">
            <hr style="height:5px;border:none;color:#d9d1c8;background-color:#d9d1c8;" />
<hr style="height:5px;border:none;color:#d9d1c8;background-color:#d9d1c8;" />
            <p style="padding: 10px 20px 10px 0px;">I would be happy to hear from you! To contact me, please feel free to fill out and submit the adjacent contact form. You can also reach me via the Social Media platforms linked below.</p>
<hr style="height:5px;border:none;color:#d9d1c8;background-color:#d9d1c8;" />
<hr style="height:5px;border:none;color:#d9d1c8;background-color:#d9d1c8;" />
          <div id="contact-img">
          <div class="row">
          <div class="col-md-4">
           <a href="https://www.linkedin.com/in/toriancrane/" target="_blank"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/online_social_media_linked_in-128.png"  class="img-responsive"></a>
          </div>
          <div class="col-md-4">
            <a href="https://www.facebook.com/torian.crane" target="_blank"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/32/facebook_online_social_media-128.png" class="img-responsive"></a>
          </div>
          <div class="col-md-4">
             <a href="https://github.com/toriancrane" target="_blank"><img src="https://cdn2.iconfinder.com/data/icons/black-white-social-media/64/github_social_media_logo-128.png" class="img-responsive"></a>
          </div>
          </div>
          </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  
<!-- This section is for my Social Media information -->
  <div class="well text-center">
Made with JavaScript and Bootstrap by Torian Crane
</div>
              
            
!

CSS

              
                /* Changing the background color of the site*/
.bg{
    background: #5d5d5d;
}

/* Remove margins and padding from the list, and add a black background color */
ul.topnav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}
/* Float the list items side by side */
ul.topnav li {
  float: left;
}
/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 25px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 30px;
    font-family: Advent Pro;
}
/* Change background color of links on hover */
ul.topnav li a:hover {
  background-color: #111;
}
/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {
  display: none;
}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }
}

/*Adding a shadow box around my main div sections*/
.drop-shadow {
        -webkit-box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
        box-shadow: 0 0 5px 2px rgba(0, 0, 0, .5);
    }
.container.drop-shadow {
        padding-left:0;
        padding-right:0;
    }

/* Styling for my h2 elements*/
h2{
  text-align: center;
}

/* Styling for my panel elements*/
.panel-body{
  background-color: #eeeae6;
}
.panel-default > .panel-heading {
  background-color: #d9d1c8!important;
  font-family: Advent Pro!important;
}
/*Padding for my social media icons*/
.img-padding{
  padding-right: 50px;
}
/*Formatting for my p elements*/
p{
  font-family: Noto Sans;
  font-size: 17px;
  padding-right: 50px;
  text-align: justify;
}
/* Formatting for my well class*/
.well{
  margin-left: 160px;
  margin-right: 160px;
}
#contact-img{
  margin-top: 45px;
  text-align: center;
}

#progressbar {
  background-color: black;
   width: 85%; /* Adjust with JavaScript */
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar > div {
   background-color: orange;
   width: 40%; /* Adjust with JavaScript */
   height: 10px;
   border-radius: 10px;
}

#progressbar1 {
  background-color: black;
   width: 85%; /* Adjust with JavaScript */
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar1 > div {
   background-color: orange;
   width: 55%; /* Adjust with JavaScript */
   height: 10px;
   border-radius: 10px;
}

#progressbar2 {
  background-color: black;
   width: 85%; /* Adjust with JavaScript */
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar2 > div {
   background-color: orange;
   width: 75%; /* Adjust with JavaScript */
   height: 10px;
   border-radius: 10px;
}

#progressbar3 {
  background-color: black;
   width: 85%; /* Adjust with JavaScript */
  border-radius: 13px; /* (height of inner div) / 2 + padding */
  padding: 3px;
}

#progressbar3 > div {
   background-color: orange;
   width: 100%; /* Adjust with JavaScript */
   height: 10px;
   border-radius: 10px;
}


              
            
!

JS

              
                /* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
        x.className += " responsive";
    } else {
        x.className = "topnav";
    }
}
//jQuery to collapse the navbar on scroll
$(window).scroll(function() {
    if ($(".navbar").offset().top > 50) {
        $(".navbar-fixed-top").addClass("top-nav-collapse");
    } else {
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
    }
});

              
            
!
999px

Console