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

              
                <header>
  <link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
</header>
<!--This will display font in Lobster if I give it a class-->

<div class = "container-fluid">

<section id="Aaron"><div class="pageOne text-center"><!--had to move this line here and set margin-bottom:10% under .nav-pills in order to center box div-->
  <ul class ="nav nav-pills navbar-fixed-top">
      
  
    <li>
      <a href="#Aaron">Aaron M.            Palm</a>
    </li>
    <li class="pull-right">
      <!--pull-right is bootstrap class that just moves text over and along with buttons I think-->
      <a href="#ContactMe">Contact Me</a>
    </li>
    
    <li class="pull-right">
      <a href="#Port">Portfolio</a>
    </li>
    <li class="pull-right">
      <a href="#Aboutsection">About Me</a>
    </li>
    
  </ul>

  <div class="box text-center">
  <h1>Aaron M. Palm</h1>
  <h3>apalm1341's exquisite learning and showcasing studio</h3>
  </div>
  <div class="btnlist">
    <a class="btn btn-default" href="#">Twitter</a>
    <a class="btn btn-default" href="https://github.com/apalm1341">Github</a>
    <a class="btn btn-default" href="#">LinkedIn</a>
    <a class="btn btn-default" href="#">YouTube</a>
    <a class="btn btn-default" href="https://www.facebook.com/aaron.palm.50">FaceBook</a>
    <!--<h2>Languages</h2>-->
<p class="text-center"> Languages I have experience in...</p>
    <table>
<tr>
<td><div id = html><img src ="https://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width = 120></div></td>
<td><div id = css><img src = "http://metagames.hu/img/CSS3.png" width = 124.5></div></td>
<td><div id = js><img src = "http://logo-load.com/uploads/posts/2016-09/javascript-logo.png" width = 200></div></td>
<td><div id = ><img src = "https://www.enthought.com/images//Python-for-LabVIEW-by-Enthought-Product-Icon-800x582-Trans.png" width = 100></div></td>
<td><div id = java><img src = "http://otsl-ctg.com/wp-content/uploads/2016/11/java-bg.jpg" width = 100 ></div></td>
  <td><div id = java><img src = "http://codesroom.com/images/tech/jquery.png" width = 100 ></div></td>
  <td><div id = java><img src = "https://1.bp.blogspot.com/-2qXU_Bec_I4/VCz51kxslII/AAAAAAAAAk0/poEWi0KeLTQ/s1600/csharp.png" width = 100 ></div></td>
  <td><div id = java><img src = "http://www.academy-of-code.com/img/free-ecourses/php.png" width = 100 ></div></td>
</tr>
</table>
</div>
</div>
  </section>
<!--This is styled unordered list built into bootstrap. This is cool menu bootstrap has built in and it is called pills. Pills are the type of line tabs we are looking at and when you hover over them, they sorta create button look to it.-->
<!--</div>     Commented out this container fluid div to make black background go to the edges-->
<!--Since we are using bootstrap, we need to declare a div here. This ensures grid system will work.-->

<section id="Aboutsection"><div class= "pageTwo">
  <div class ="row">
  <div class ="col-sm-12 col-md-6 col-lg-6 text-center"><!--centers h1 text in column and not page-->
    <h1 class="page2text">Aaron M. Palm</h1><hr class="line1">
    <p>I am a young adult hoping to one day possibly become some type of web developer. I started out as a CIS major in college and found that I loved coding. I am determined and a hard worker and will do whatever it takes to succeed. One day I hope to invent a multi-million dollar app that will help save/change lives for the better. Also, I have been learning through sites such as codecamp and freecodecamp working on projects and trying to earn different certifications to prove I am worthy of doing a good job.</p>
    </div>
    <div class ="col-sm-12 col-md-6 col-lg-6">
      <center><img src="https://s18.postimg.io/gpaax6cfd/Portfolio_image.jpg"class="personalimage"/></center>
    </div>    
  </div>
</div>
  </section>

<!--Portfolio Page-->
<div id="Port" class="container-fluid">
  <div class="PageThree page-header text-center">
    <h1>Portfolio</h1>
    <hr style="width: 85%">
<div class="row">
 <div class="col-sm-12 col-md-4 col-lg-4">
   <a href="https://s.codepen.io/ap1341/debug/bZXjdd" target="_blank"><!--Is this right link?-->
     <img class="img-thumbnail" src="https://s21.postimg.org/8rg0hwrvr/Tribute_Page_Screenshot.jpg" alt="photo of tribute page Andre Agassi"><!--Screenshot of tribute page Project I did in codepen-->
     <h2>Tribute Page (Free Code Camp)</h2>
   </a>
  </div>
  <div class="col-sm-12 col-md-4 col-lg-4">
    <a href="https://s.codepen.io/ap1341/debug/bZXjdd" target="_blank"><!--Is this right link?-->
     <img class="img-thumbnail" src="Desktop\Portfolio ProjectCodepen!" alt="image of target assignment I did in college"><!--Screenshot of target assignment I did in CIS 181 programming 1 in Python-->
      <h2>Target assignment done in Python language</h2>
    </a>
  </div>
  <div class="col-sm-12 col-md-4 col-lg-4" style="margin-bottom:4em;"><!--margin bottom created bigger gap between 1st and 2nd row-->
    <a href="https://s.codepen.io/ap1341/debug/bZXjdd" target="_blank"><!--Is this right link?-->
     <img class="img-thumbnail" src="https://s4.postimg.org/li38wger1/Python_face_project.jpg" alt="image of face assignment done in python I did in college"><!--Screenshot of face assignment I did in CIS 181 programming 1 in Python-->
      <h2>Face assignment done in Python language</h2>
    </a>
  </div>
  </div>
  
  <div class="row">
 <div class="col-sm-12 col-md-4 col-lg-4">
   <a href="https://s.codepen.io/ap1341/debug/bZXjdd" target="_blank"><!--Is this right link?-->
     <img class="img-thumbnail" src="https://s16.postimg.org/bsc95nm4l/Python_3_dice_project.jpg" alt="photo of tribute page Andre Agassi"><!--Screenshot of tribute page Project I did in codepen-->
     <h2>3 dice done in Python language</h2>
   </a>
  </div>
    <div class="col-sm-12 col-md-4 col-lg-4">
    <a href="https://s.codepen.io/ap1341/debug/bZXjdd" target="_blank"><!--Is this right link?-->
     <img class="img-thumbnail" src="https://s16.postimg.org/afnumzfxh/A_fall_scene_including_a_pumpkin_and_a_tree.jpg" alt="image of target assignment I did in college"><!--Screenshot of face assignment I did in CIS 181 programming 1 in Python-->
      <h2>Fall scene with pumpkin and tree done in Python language</h2>
    </a>
  </div>
    <div class="col-sm-12 col-md-4 col-lg-4">
    <a href="https://s.codepen.io/ap1341/debug/bZXjdd" target="_blank"><!--Is this right link?-->
     <img class="img-thumbnail" src="https://s21.postimg.org/g6s6k9w53/Python_rectangle_project.jpg" alt="image of target assignment I did in college"><!--Screenshot of face assignment I did in CIS 181 programming 1 in Python-->
      <h2>Program done in Python language allows user to draw rectangle by clicking two points anywhere on screen and then calculates and displays the perimeter and area of it</h2>
    </a>
  </div>
   
    
  </div>
    
    <section id="ContactMe">
      <div class="pageFour text-center">
        <div class="row">
          <h1 style="color: blue">Contact Me</h1>
          <hr class="contactline">
          <div class="col-md-5">
            <div class="panel panel-default"
            <div class="panel-body">
            <center><div class="col-md-7"></center>
              <div class="panel panel-default">
                <div class="panel-body">
                  
                  <form method="post" action="https://formspree.io/apalm1341@gmail.com" role="form">
            <div class="form-group">
              <label for="contactname">Name</label>
              <input type="text" class="form-control" id="contactname" placeholder="Enter Name" name="name">
            </div>
            
            <div class="form-group">
              <label for="contactemail">Email Address</label>
              <input type="email" class="form-control" id="contactemail" placeholder="Enter Email" name="contactemail">
            </div>
            <div class="form-group">
              <label for="contactphonenumber">Phone Number</label>
              <input type="text" class="form-control" id="contactphonenumber" placeholder="Enter Phone Number" name="contactphonenumber">
                     </div>
              <div class="form-group">
                <label for="contactmessage">Message</label>
                <textarea class="form-control" id="contactmessage" rows="6" placeholder="Enter Message" name="contactmessage"></textarea>
                                                                                </div>
                            
                                                                               <button type="submit" class="btn btn-default">Submit</button>
                                                                               </form>
                                                                        </div>
                                                                        </div>
                                                                       </div>
                                                                       </section>      
          
                  <!--Revised form code above with name attributes added to input elements and textarea element. missing closing tags on input elements that I created were fixed above. I also had a missing " in one of the formsthat was fixed above and I also added the name= to all of my forms above-->
          <!--<form method="post" action="https://formspree.io/apalm1341@gmail.com" role="form">
            <div class="form-group">
              <label for="contactname">Name</label>
              <input type="text" class="form-control" id="contactname" placeholder="Enter Name">
            </div>
            
            <div class="form-group">
              <label for="contactemail">Email Address</label>
              <input type="email" class="form-control" id="contactemail" placeholder="Enter Email">
            </div>
            <div class="form-group">
              <label for="contactphonenumber">Phone Number</label>
              <input type="text" class="form-control" id="contactphonenumber" placeholder="Enter Phone Number"
                     </div>
              <div class="form-group">
                <label for="contactmessage">Message</label>
                <textarea class="form-control" id="contactmessage rows="6" placeholder="Enter Message"></textarea>
                                                                                </div>
                            
                                                                               <button type="submit" class="btn btn-default">Submit</button>
                                                                               </form>
                                                                        </div>
                                                                        </div>
                                                                       </div>
                                                                       </section>-->
                  
              
            
!

CSS

              
                .nav-pills{
  font-family:Lobster;
  font-size:1.7em;/*makes 2x size*/
  background-color:black;/*makes nav bar this color!*/
  opacity: 100%;/*this made nav bar with categories lighter black/greyish color and words lighter blue color.*/
  margin-bottom:10%;
  /*rest of code under here under navpills helps make nav bar more transparent during scrolling process except for at very top of 1st page*/
  -webkit-transition: all 0.6s ease-out;
    -moz-transition: all 0.6s ease-out;
    -o-transition: all 0.6s ease-out;
    -ms-transition: all 0.6s ease-out;
    transition: all 0.6s ease-out;
  
}
.nav-pills.scrolled{
  opacity: 0.5;
  
}

body{
  background-color:white;
  font-family:Lobster;
  color:white;/*makes everything under nav bar this color*/
}


.pageOne{
  background:url("https://hd.unsplash.com/photo-1421757295538-9c80958e75b0");
  background-size:cover;
  /*height:800px;*/
  margin-top:-44px;
  margin-left:-20px;
  margin-right:-20px;
  min-height: 800px;
  
  /*margin-top:-10%; hey lets remove margin and push them up by 10%. This applies to all of your children divs.*/
  
} /*Got image from unsplash since you can do whatever you want with them and they are copyright free*/
.box{
  background-color:black;
  opacity:.8;/*this makes box around elements at top more transparent*/
  padding:50px;/*makes more space inside box and enlarges box topwise and bottomwise. I wonder what default is*/
  width:50%;/*shortens width of box, cutting off right part of box hanging off left edge..I wonder what default is*/
  margin-right:auto;
  margin-left:auto; /*both margin-right auto and margin-left auto center this box on page!*/
  border-radius:10px;/*makes corners around box more round instead of sharp!*/
  margin-top:6.9em;
  
  
  /*transform:translateY(0px);*/
}
h1{
  padding:0;
  margin-top:0px;
  /*transform:translateY(200px);*/
  font-size:5.0em;
  
}
h3{
  padding:0;
  margin-top:0px;*/
  /*transform:translateY(200px);*/
  
}
.btnlist{
  text-align: center;
  /*transform:translateY(200px);*/
}

/*a{
  color:blue;
} This makes nav bar words darker blue*/

.btn-default{
  background-color:black;
  border-color:black;
  color:#337ab7;
  font-size:1.7em;/*This makes buttons have light blue color!*/
}

.pageTwo{
  background:url("https://hd.unsplash.com/photo-1468248608912-fe6ca744a6c2");
  background-size:cover;/**/
  /*height:800px;*/
  min-height: 800px;
  /*padding-top:5%;/*moves all font down by 5% in column on page*/
  /*background-size:cover; and height:800px; help to create second page with iphone showing!*/
  background-position: 0% 10%;
  margin-left:-20px; /*fills white space on left side of page */
  margin-right:-20px;/*fills white space on right side of page*/
}
p{
  font-size:2.2em;/*means it is gonna make font 3 times normal size*/
  padding-left:70px;
  padding-right:70px;
  padding-top:100px;
  color:white;
  background-color:orange;
  opacity:.8;
  border-radius:10px;
  
}


.personalimage{
  /*height:400px; this is a fixed height. so I added minheight to make project responsive for small devices to expand size if needed*/
  min-height:100px;
  padding-top:20px;
}
.page2text{
  padding-top:50px;
  color:purple;
}
.line1{
  width:50%;
  border-top:5px solid;
  color:purple;
  
}

.PageThree {
  background: url("https://hd.unsplash.com/photo-1472143684393-8b081cb2e899");/*makes part of background show*/
  /*background-size:cover;*//*makes whole background show*/
  /*height: 1000px;*//*makes height of background bigger/taller*/
  min-height: 800px;
  padding-top: 5%;/*makes everything but background shift down on page*/
  margin-left:-29px;/*makes everything even including background shift left! and helped fill gap of white vertical space on left side*/
  margin-right:-29px;/*does same thing as margin-left that we did but moved everything to right filling right space gap*/
  margin-top: 0%;/*could put just 0 here too. This eliminates top page white space showing!*/
  margin-bottom: -20%;/*this eliminates bottom page white space showing!*/
  color:black;
  
}


.img-thumbnail {
  height: 200px;
  width: 300px;
  
}

h2 {
  color:black;
}

.contactline {
  border-color: blue;
  width: 400px;
  /*background: blue; this seemed to not do anything but I could be wrong. I need to recheck this.*/
  height: 2px;
  
}/*all this code for contactline class applies to changing hr line under Contact Me heading!*/

.panel-default {
  opacity: .9;/*the higher the decimal, the less transparent/lighter. In this case, I made it less transparent*/
  color: blue; /*makes Name word blue*/
  }

.pageFour{
  background: url("https://hd.unsplash.com/photo-1438302439441-82e18f791f5e");
  background-size: cover;
  /*height:800px;*/
  min-height: 800px;
  padding-top: 5%;
  margin-left:-20px; margin-right:-20px;
  
}

/* Styles: Very Basic Media Queries Template below this comment! */

@media only screen and (min-device-width : 320px) {
  /* For mobile phones: Between 320 px - 599 px = Mobile Phone*/
}

@media only screen and (min-width: 600px) {
    /* For tablets: Between 600 px - 767 px = Tablets */
}
@media only screen and (min-width: 768px) {
    /* For desktop: > 768 px = Desktops */

}
              
            
!

JS

              
                /**
 * Listen to scroll to change the class of header opacity
 */
function checkScroll(){
    var startY = $('.nav-pills').height() * 2; //This is the point where the navbar changes in px

    if($(window).scrollTop() > startY){
        $('.nav-pills').addClass("scrolled");
    }else{
        $('.nav-pills').removeClass("scrolled");
    }
}

if($('.nav-pills').length > 0){
    $(window).on("scroll load resize", function(){
        checkScroll();
    });
}
//all of this javascript up until this point helps make the nav bar more transparent while scrolling!! except for at very top on 1st page for some weird reason.
              
            
!
999px

Console