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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ 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

              
                <!-- ***************************************************
"MaryJoFoster.com" Webpage sections in rendered order:
- header: Anchor link in image + Background image & text
- Top Navigation
- Body:  Main content
- footer: Seperator line, social links, etc.
**************************************************** -->
<!DOCTYPE html>
<html>
<body>
	<head>
		<meta charset="UTF-8">
    <title>MaryJoFoster.com</title>
    <!-- Bootstrap Stylesheet -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
    <!-- Optional Bootstrap Theme Stylesheet -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
    <!-- Font's Awesome Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <!-- Google Fonts Stylesheet -->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans|Gentium+Book+Basic' rel='stylesheet' type='text/css'>
    <!-- My Customized Stylesheet -->
    <link rel="stylesheet" type="text/css" href="css/mystyles.css">
		
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-99305540-1', 'auto');
      ga('send', 'pageview');
    </script>

	</head>

  <section class="wrap-top">
    <header class="wrap-hdr">
      <div class="wrap-hdr-photo-and-txt">
        <a href="#about-me">
        <img class="wrap-hdr-photo" src="img/RelaxedMJ.jpg" alt="MaryJo Foster">
        </a>
        <div class="wrap-hdr-txt">
          <p>A Team Player For Any Project!</p>
          <p class="txt-line-2">MaryJo Foster</p>
        </div>
      </div>
    </header>
  
    <!-- NAVIGATION -->
    <nav class="nav navbar">
      <div class="nav-content">
        <ul class="links">
          <li class="active"><a href="#about-me">About Me</a></li>
          <li><a href="#ed-experience">Education & Experience</a></li>
          <!-- <li><a href="pages/MyResume.html" target="_blank">Resume</a></li> -->
          <li><a href="#contact-me">Contact Me</a></li>
        </ul>
      </div>
    </nav>
  </section>

  <!-- MAIN CONTENT -->
  <section class="main-content">
    <h3 id="about-me" class="heading">About Me</h3>
    <p class="item-detail">
      For me, contributing to a team is the perfect combination of creative problem solving 
      and effective collaboration.  Discussing innovative solutions, learning together,
      and overcoming obstacles in an agile workflow motivates me to work at my highest
      level of creativity and efficiency!
    </p>

    <h3 id="ed-experience" class="heading">Education & Experience</h3>
      <ul>
        <li><strong>BS, Computer Science  <span><i class="fa fa-graduation-cap text-primary"></i></span></strong>
            <a class="item-detail" href="https://csc.calpoly.edu/" target="_blank">California Polytechnic State University, San Luis Obispo</a>
            <a class="item-detail" href="https://www.csueastbay.edu/csci/departments/cs/index.html" target="_blank">California State University, East Bay</a>
        </li>
        <li><strong>MS, Computer Science</strong> <em>(Ongoing)</em>
            <a class="item-detail" href="http://coen.boisestate.edu/cs/about/" target="_blank">Boise State University</a>
        </li>
      </ul>
      
    <h3 class="heading">Continuing Education</h3>
      <ul>
        <li><a href="https://www.udacity.com/course/full-stack-web-developer-nanodegree--nd004" target="_blank">
          Full Stack Web Developer <i class="fa fa-certificate"></i></a><span><em> (Ongoing)</em></span></li>
          <div class="item-detail">
            Co-created by Amazon, Google, GitHub, and AT&T at Udacity.com
          </div>
        <li><a href='https://www.codefellows.org/#' target="_blank">Code Fellows - Seattle</a></li>
        <li><a href='https://app.pluralsight.com/profile/maryjo-foster' target='_blank'>MSDN and Pluralsight</a></li>
        <li><a href="https://teamtreehouse.com/maryjofoster" target="_blank">TeamTreehouse</a></li>
        <li><a href="https://www.codecademy.com/MJ_Foster" target="_blank">CodeCademy</a></li>
      </ul>

    <h3 class="heading">Internships</h3>
      <ul>
        <li><a href="http://simplot.com/" target="_blank"> Internship, Simplot Corp. - The Enterprise Library</a></li>
          <h5 class="detail-text-1">ASP.NET MVC website with AngularJS on the front end.</h5>
          <h5 class="detail-text-1 detail-text-2">An Enterprise solution of an internal meta data repository.</h5>
      </ul>

    <h3 class="heading">Completed Projects</h3>
      <ul>
        <li><a href="https://github.com/MJFoster" target="_blank">Github Project Repositories <i class="fa fa-github"></i></a></li>
        <li><a href="https://guarded-harbor-51686.herokuapp.com" target="_blank">Invest And Learn <i class="fa fa-graduation-cap invest-and-learn-favicon"></i></a></li>
          <h5 class="detail-text-1">Built from scratch, PHP without frameworks, on purpose!</h5>
          <h5 class="detail-text-1 detail-text-2">Provides user authentication and security measures.</h5>
      </ul>

    <h3 class="heading">Projects I'm Interested In</h3>
      <ul>
          <li><a href="https://github.com/codeforamerica/CutePetsDenver/blob/master/README.md" target="_blank">Shelter Bot Project <i class="fa fa-github"></i></a></li>
      </ul>
    
    <h3 class="heading">My Interests</h3>
      <p class="item-detail">
        For fun, I enjoy spending time with my
        <strong><a href="img/MyFamily.jpg" target="_blank"> family and friends</a></strong>, 
        staying fit, golfing, and riding horses whenever possible!
      </p>

      <p class="item-detail">
        I was born and raised in California, living mostly in Sacramento, Santa Barbara, 
        and San Diego where I enjoyed the year round outdoors!  Speaking of which, outdoor activities are 
        what attracted me to the Boise, ID area where I currently call home.  Besides the growing tech
        industry and the great outdoors, my favorite thing about this area is the constant change of all four seasons! 
      </p>

    <h3 class="heading">Volunteer Work</h3>
      <h4 class="item-detail"><img src="img/GoogleLogo.png" class="detail-icon"> IgniteCS, Team Leader</h4>
      <p class="item-detail">
        This project was designed to "Ignite" the interests of local High School students
        in a Computer Science education. Our target audience was High School students
        in the Boise area, with a strong focus on under represented students in the STEM industries.
      </p>

    <h3 id="contact-me" class="heading">Contact Me</h3>
      <ul>
        <li><a href="mailto:MJ@MaryJoFoster.com">email:  MJ@MaryJoFoster.com</a></li>
        <li><a href="https://www.linkedin.com/in/mj-foster" target="_blank">Linked-In Profile</a></li>
        <li><a href="https://twitter.com/MJ_Codes" target="_blank">Twitter:  @MJ_Codes</a></li>
      </ul>

  </section>


 <!-- Footer section with social links -->
  <footer class="wrap-footer">
    <p>Additional Profiles</p>
    <ul class="social">
      <li><a href="https://www.linkedin.com/in/mj-foster" target="_blank"><i class="fa fa-linkedin-square"></i></a></li>
      <li><a href="https://github.com/MJFoster" target="_blank"><i class="fa fa-github"></i></a></li>
      <!--<li><a href="https://www.facebook.com/MJFoster.GetMovedNow" target="_blank"><i class="fa fa-facebook-square"></i></a></li> -->
      <li><a href="https://twitter.com/MJ_Codes" target="_blank"><i class="fa fa-twitter-square"></i></a></li>
    </ul>
    <p><small>Cover Image via <a href="http://www.freeimages.com/" target="_blank">Free Images</a></small></p>
  </footer>
<!--
<script>
  document.addEventListenter('DOMContentLoaded', function() {
    window.scrollBy(0,-500);
  }, false);
</script>
-->
</body>

</html>

              
            
!

CSS

              
                /* 
MaryJoFoster.com Styles
This will be my main website about my work
*/

/**************************
  Main element attributes
**************************/
.inline {
  display: inline;
}

body {
    color: #222222;
    font-size: 1.25rem;
    font-family: "Open Sans", "Helvetica Neue", sans-serif;
}

.detail-text-1 {
  padding-left: 25px;
  margin-top: 0px;
  margin-bottom: 0px;
  font-style: italic;
}

.detail-text-2 {
  margin-bottom: 8px;
}

.detail-icon {
  height: 25px;
  width: 25px;
}

.item-detail {
  margin-left: 20px;
  display: block;
}
/*****************************
HDR Attributes
*****************************/
.wrap-top {
  height: 180px;
  width: 100%;
  position: fixed;
  /* position: fixed; */
  /* z-index: 9999;  places this element underneath, on the z-axis, all others. */
}

.wrap-hdr {
  background-image: url('https://dl.dropboxusercontent.com/u/3562920/_USERS/MaryJo/.%20EDUCATION/.%20Source/_RESOURCES/img/green-grass.jpg');
  background-size: cover;
  border-radius: 0 0 1rem 1rem;
  background-position: center;
  background-repeat: no-repeat;
}

.wrap-hdr-photo-and-txt {
  padding: 1rem 5rem;
}

.wrap-hdr-photo {
  height: 225px;
  width: 175px;
  margin-right: 10rem;
  border-radius: 10rem;
}

.wrap-hdr-txt {
  font-family: "Open Sans", "Helvetica Neue", sans-serif;
  color: white;
  font-weight: bold;
  font-size: 5rem;
  margin: 0;
  letter-spacing: -0.02rem;
  text-transform: capitalize;
  text-shadow: 0px 8px 0px black;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
}

.txt-line-2 {
  font-size: 5.5rem;
}


/****************************
Navigation Attributes
****************************/
.links {
  margin: 0;
  padding: 0;
  width: 100%;
}

.links > li {
  list-style: none;
  display: inline-block;
  font-size: 1.75rem;
/*  width: 25.4%;*/
  width: 33.8%;
  padding: 1rem;
  margin: -0.5rem;
  background-color: #00261C;
  border: black 0.10rem solid;
  border-radius: 1rem;
  text-align: center;
  color: white;
}

.links > li > a:visited {
  color: white;
}

/****************************
Main-Content Attributes
****************************/
.main-content {
  width: 50%;
  padding-top: 25%;
  margin-left: auto;
  margin-right: auto;
}

.main-content > p, .wrap-footer > p {
    font-weight: 300;
    letter-spacing: 0.05rem;
}

#about-me, #ed-experience, #contact-me {
  padding-top: 55%;
}

/************************************
HEADING's Attributes
************************************/
.heading {
  max-width: 28rem;
}


/**************************
FOOTER Attributes
**************************/
.wrap-footer {
  padding: 2rem 0;
  margin: 3rem 25%;
  border-top: #00261C solid;
  text-align: center; 
}
.wrap-footer > p {
  color: black;
}
footer > ul {
  padding: 0;
}

/**************************
SOCIAL Attributes
**************************/
.social {
  margin: 0 auto;
}
.social > li {
  display: inline-block;
  text-align: center;
  list-style: none;
  font-size: 3rem;
  margin: 1.25rem 0.5rem;
}

.invest-and-learn-favicon {
  color: purple;
}


/************************** 
Responsive Styles
**************************/
/*@media only screen and (max-width: 500px) {
  .wrap-hdr {
    padding: 3rem 0;
  }
  .wrap-hdr-photo-and-txt {
    font-size: 3rem;
  }
  .wrap-footer > p {
    padding: 0.25rem 1rem;
  }
}*/

              
            
!

JS

              
                document.querySelector('a[href*="#about-me"]').addEventListener('click', function() {
  css("color", "red");
  window.scrollBy(0,-300);
});
              
            
!
999px

Console