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

              
                <body>
  <div class="container-fluid">
    <div class="nav">
      <div id="menuFull">
        <a href="#about">
          <h5>ABOUT</h5> </a>
        <a href="#port">
          <h5>PORTFOLIO</h5> </a>
        <a href="#contact">
          <h5>CONTACT</h5> </a>
      </div>
      <div id="menuSml">
        <h5>MENU</h5>
        <div id="menuContent">
          <a href="#about">
            <h5>ABOUT</h5> </a>
          <a href="#port">
            <h5>PORTFOLIO</h5> </a>
          <a href="#contact">
            <h5>CONTACT</h5> </a>
        </div>
      </div>
    </div>
    <!--Welcome-->
    <div class="welcome contentFlex">
      <h1>DOUG DRYBURGH</h1>
      <h2>- WEB DEVELOPER -</h2> </div>
    <div class="grad"></div>
    <!--About--><span class="anchor" id="about"></span>
    <div class="background">
      <div class="contentFlex sectionSpace">
        <h3>Hello!</h3>
        <div class="col-xs-12 col-sm-10">
          <h6>My name is Doug and I am a studying web developer. </h6> </div>
        <div class="col-xs-12 col-sm-10 col-md-8"> <img src="images/me.jpg" alt="a photo of me">
          <h6>Welcome to my portfolio.</h6> </div>
        <div class="col-xs-12 col-sm-10">
          <p>Since my first introduction to HTML in high school I've been hooked. In 2016 I took the plunge and decided to make a career change into web development.</p>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-offset-1">
          <p>My focus began by updating my front end development skills. I have refreshed my HTML and CSS knowledge while applying JavaScript and jQuery to my projects. I am now rounding out my knowledge by studying back end principles using Node and the
            MEAN stack. </p>
        </div>
        <div class="col-xs-12 col-sm-10">
          <p>I've come this far thanks to passion and some excellent online resources. Fundamental in my education has been <a href="https://www.freecodecamp.com" target="_blank">Free Code Camp</a> and its forum full of extremely helpful campers. I've also
            been involved in study groups and have developed my own projects for both practice and fun.</p>
        </div>
        <div class="col-xs-12 col-sm-9 col-sm-offset-1">
          <p>I am ready to take the next step and find an entry-level position in the industry. I'm hungry for knowledge and know this would be the most effective way for me to continue learning and improving. My enthusiasm and passion will be a great addition
            to your team!</p>
        </div>
      </div>
      <!--Hire me-->
      <div class="contentFlex  sectionSpace">
        <div>
          <h3>Why should you hire me?</h3> </div>
        <div class="col-xs-12 col-sm-10">
          <ul>
            <li>Experienced with: HTML, CSS, JavaScript, jQuery, Bootstrap, Git, Website Deployment and Hosting;</li>
            <li>Knowledgeable with: Wordpress, Photoshop;</li>
            <li>Learning: Node and the MEAN stack;</li>
            <li>Extremely motivated, and eager to learn more;</li>
            <li>Professional experience working with clients;</li>
            <li>I make excellent Spotify playlists.</li>
          </ul>
        </div>
        <div>
          <p>Full work experience available <a href="https://www.linkedin.com/in/doug-dryburgh-7056b513b/" target="_blank">here</a></p>
        </div>
      </div>
      <!--Portfolio--><span class="anchor" id="port"></span>
      <div class="port contentFlex sectionSpace">
        <h3>Portfolio</h3>
        <div class="col-xs-12 col-sm-10">
          <!--Pura Vida-->
          <div class="projectSpace">
            <h4>Pura Vida Photography</h4>
            <a href="http://www.puravida.ddryburugh.com" target="_blank"> <img src="images/puravida.jpg" alt="pura vida photography"> </a>
            <p>I have been passionate about photography for nearly a decade. This is another example of an area I've successfully self studied and have ultimately freelanced in. I designed and built this website to showcase my favourite work.</p>
            <p>With this design I utilized CSS transitions to make a pleasing slide show on the homepage. In addition I modified and implemented the blueimp gallery plug-in for my galleries as well as used JavaScript to animate a slide-out menu. The website
              is fully responsive and looks professional on all platforms.</p>
          </div>
          <div class="spacer"></div>
          <!--Simon-->
          <div class="projectSpace">
            <h4>Simon Says</h4>
            <a href="http://www.simon.ddryburugh.com" target="_blank"> <img src="images/simon.JPG" alt="simon says"> </a>
            <p>This assignment required building a Simon style memory game. There were many project requirements including: having two different difficulty modes and adding simple audio. Also important was that it look good on different sized viewports.</p>
            <p> I utilized CSS flexbox for the first time. In addition I integrated two add-ons that allows for colour animation through the jQuery animate method, as well as animating the toggleClass method.</p>
          </div>
          <div class="spacer"></div>
          <!--Word Scramble-->
          <div class="projectSpace">
            <h4>Word Scramble</h4>
            <a href="http://www.wordscramble.ddryburugh.com" target="_blank"> <img src="images/wordscramble.JPG" alt="word scramble"> </a>
            <p>This was a self assigned passion project. I wanted further practice with jQuery combined with the challenge of validating the user's input. The app ended up being educational for myself and the users!</p>
            <p>This project made more use of CSS flexbox, which has become an important tool for me. A fundamental part of the app is validating the user's input to determine if they submitted a correct word. I sourced a word list, and created a function
              to accomplish this.</p>
          </div>
        </div>
      </div>
      <!--More Projects-->
      <div class="port contentFlex sectionSpace">
        <h3>More Projects</h3>
        <div class="col-xs-12 col-sm-10">
          <div class="row">
            <!--Mad Minute-->
            <div class="col-sm-6">
              <h4>Mad Minute</h4>
              <a href="http://www.madminute.ddryburugh.com" target="_blank"> <img src="images/madminute.JPG" alt="mad minute"> </a>
              <p>The inspiration for this project came from a primary school exercise my teacher used to have us do. We would be given a sheet of math problems and would have to complete as many as possible in one minute. I've recreated this exercise in
                a web app. </p>
              <p>The program will randomly generate a series of addition, subtraction, multiplication, or division problems. The code will verify the answer to let the user know how well they've done at the end. This project can easily be scaled to include
                different levels of difficulty in the future.</p>
            </div>
            <!--Calc-->
            <div class="col-sm-6">
              <h4>Calculator</h4>
              <a href="http://www.calc.ddryburugh.com" target="_blank"> <img src="images/calculator.JPG" alt="calculator"> </a>
              <p>This app allows the user to complete basic arithmetic functions. It allows addition, subtraction, multiplication and division.</p>
              <p> Features include being able to chain multiple operations, use a decimal place, as well as integrating keyboard input.</p>
            </div>
          </div>
          <div class="row">
            <!--Tic Tac Toe-->
            <div class="col-sm-6">
              <h4>Tic Tac Toe</h4>
              <a href="http://www.tictactoe.ddryburugh.com" target="_blank"> <img src="images/tictactoe.JPG" alt="tic tac toe"> </a>
              <p>This fun project required building a Tic Tac Toe game. I'm proud of the design and feel of the game but the real challenge was to design the computer's AI. </p>
              <p>I started first with a 'noob' mode in which the computer chooses at random. Once I understood this process I then implemented a 'medium' mode in which the computer uses far greater logic to try and best the player.</p>
            </div>
            <!--Clock-->
            <div class="col-sm-6">
              <h4>Pomodoro Clock</h4>
              <a href="http://www.clock.ddryburugh.com" target="_blank"> <img src="images/clock.JPG" alt="pomodoro clock"> </a>
              <p>In this FCC project I designed a countdown timer with a sleek and minimal interface.</p>
              <p> The features allow you to choose a task length between 1-90 minutes, with a break interval of 1-30 minutes. The app will display the remaining time in the session/break. A progress bar also displays the percentage of the session left. Alongside
                this I added some animation to make the app sexier.</p>
            </div>
          </div>
          <div class="row">
            <!--Local Weather-->
            <div class="col-sm-6">
              <h4>Local Weather</h4>
              <a href="http://www.localweather.ddryburugh.com" target="_blank"> <img src="images/localweather.JPG" alt="local weather"> </a>
              <p>This was an early FCC project. The objective was to utilize the <a href="https://openweathermap.org/api" target="_blank">open weather api</a> in order to show the weather in the user's current location.</p>
              <p> I used a second API to determine the user's location based on their IP address. With this information I am able to return the weather conditions. I customized the design with backgrounds that illustrate the weather conditions and the app
                looks great on both desktop and mobile platforms.</p>
            </div>
            <!--Wikipedia Viewer-->
            <div class="col-sm-6">
              <h4>Wikipedia Viewer</h4>
              <a href="http://www.wikipediaviewer.ddryburugh.com" target="_blank"> <img src="images/wikipedia.JPG" alt="wikipedia viewer"> </a>
              <p>In this Free Code Camp assignment I was required to build a page utilizing the MediaWiki API. The requirements included being able to search for any topic, and return the results from Wikipedia. In addition the user was to be able to click
                a button to see a random article. The page was customized further with some aesthetically pleasing CSS animations.</p>
            </div>
          </div>
          <div class="row">
            <!--Random Quote-->
            <div class="col-sm-6">
              <h4>Random Quote Machine</h4>
              <a href="http://www.randomquote.ddryburugh.com" target="_blank"> <img src="images/randomquote.JPG" alt="random quote machine"> </a>
              <p>This Free Code Camp assignment was my first introduction to using an API. I utilized the <a href="https://forismatic.com/en/" target="_blank">forismatic api</a> in order to show a randomly generated inspiring quote. An additional requirement
                was to provide the functionality for the user to tweet that quote right from the page. I used CSS gradients to further set a positive tone to the page.</p>
            </div>
          </div>
        </div>
      </div>
      <!--Contact--><span class="anchor" id="contact"></span>
      <div class="contact contentFlex">
        <h3>Contact</h3>
        <div class="col-xs-12 col-sm-10">
          <div class="icons">
            <a href="mailto:douglas.dryburgh@gmail.com"> <i class="fa fa-envelope-o"></i> </a>
            <a href="https://github.com/doug-dryburgh" target="_blank"> <i class="fa fa-github"></i> </a>
            <a href="https://www.linkedin.com/in/doug-dryburgh-7056b513b/" target="_blank"> <i class="fa fa-linkedin"></i> </a>
            <a href="http://www.puravida.ddryburugh.com" target="_blank"> <i class="fa fa-camera"></i> </a>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Scripts-->
  <script src="https://use.fontawesome.com/00e02cdbce.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="js/js.js"></script>
</body>
              
            
!

CSS

              
                 @import url('https://fonts.googleapis.com/css?family=Poiret+One|Dosis');
 html,
 body {
   background-image: url(https://static.pexels.com/photos/93405/pexels-photo-93405.jpeg);
   background-size: cover;
   background-attachment: fixed;
 }
 /* NAV & RESPONSIVE MENU */
 
 .nav {
   width: 100%;
   background-color: rgba(0, 0, 0, .8);
   position: fixed;
   left: 0;
   top: 0;
   z-index: 1;
 }
 
 #menuFull {
   display: flex;
   flex-direction: row;
   justify-content: space-around;
   width: 100%;
 }
 
 #menuSml {
   display: none;
   width: 100%;
   padding-left: 10px;
 }
 
 #menuContent {
   display: none;
   position: relative;
   z-index: 1;
 }
 
 #menuSml:hover #menuContent {
   display: block;
 }
 
 #menuContent:hover #menuContent {
   display: block;
 }
 
 .anchor {
   display: block;
   height: 46px;
   margin-top: -46px;
   visibility: hidden;
 }
 /* CONTENT */
 
 .background {
   background: linear-gradient(rgb(115, 160, 190), rgb(0, 40, 70))
 }
 
 .grad {
   height: 200px;
   background: linear-gradient(rgba(115, 160, 190, 0), rgba(115, 160, 190, 1))
 }
 
 .contentFlex {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
 }
 
 .sectionSpace {
   padding-bottom: 100px;
 }
 
 .welcome {
   justify-content: center;
   height: 100vh;
 }
 
 .contact {
   min-height: 400px;
 }
 
 .icons {
   display: flex;
   justify-content: space-around;
   width: 100%;
   margin-bottom: 25px;
   font-size: 10em;
 }
 
 img {
   max-width: 100%;
   border-radius: 5px;
 }
 
 .port img:hover {
   box-shadow: 0px 0px 20px black;
   transition: .5s;
 }
 
 .projectSpace {
   margin: 30px auto 40px auto;
 }
 
 .spacer {
   width: 100%;
   height: 1px;
   background-color: black;
 }
 /* TEXT & LINKS*/
 
 h1 {
   font-size: 9em;
   font-family: 'Poiret One', cursive;
   color: white;
   text-shadow: 2px 2px 2px black;
 }
 
 h2 {
   font-size: 8em;
   font-family: 'Poiret One', cursive;
   color: white;
   text-shadow: 2px 2px 2px black;
 }
 
 h3 {
   font-size: 4em;
   font-family: 'Poiret One', cursive;
   color: white;
   text-shadow: 2px 2px 2px black;
 }
 
 h4 {
   font-size: 3.5em;
   font-family: 'Poiret One', cursive;
   color: white;
   text-align: center;
 }
 
 h5 {
   font-size: 1.75em;
   font-family: 'Poiret One', cursive;
   text-shadow: 2px 2px 2px black;
 }
 
 h6 {
   font-size: 3em;
   font-family: 'Poiret One', cursive;
   color: white;
   text-align: center;
 }
 
 p,
 li {
   font-size: 1.5em;
   font-family: 'Dosis', sans-serif;
   color: white;
 }
 
 p,
 ul {
   margin-top: 25px;
 }
 
 #menuSml>h5 {
   color: white;
   cursor: pointer;
 }
 
 .nav a {
   color: white;
   text-decoration: none;
 }
 
 .nav a:hover {
   color: red;
   transition: .5s;
 }
 
 a,
 a:hover {
   color: red;
 }
 
 .icons a {
   color: white;
 }
 
 .icons a:hover {
   color: red;
   transition: .5s;
 }
 /* RESPONSIVE */
 
 @media only screen and (max-width: 1199px) {
   h1 {
     font-size: 7em;
   }
   h2 {
     font-size: 6em;
   }
   .icons {
     font-size: 7em;
   }
 }
 
 @media only screen and (max-width: 768px) {
   h1 {
     font-size: 5em;
   }
   h2 {
     font-size: 4em;
   }
   h6 {
     font-size: 1.75em;
   }
 }
 
 @media only screen and (max-width: 576px) {
   #menuFull {
     display: none;
   }
   #menuSml {
     display: block;
   }
   h1 {
     font-size: 3.5em;
   }
   h2 {
     font-size: 2.8em;
   }
   h3 {
     font-size: 3em;
   }
   h4 {
     font-size: 2.8em;
   }
   .icons {
     font-size: 5em;
   }
 }
 
 @media only screen and (max-width: 400px) {
   h1 {
     font-size: 2.25em;
   }
   h2 {
     font-size: 1.8em;
   }
   .icons {
     font-size: 3em;
   }
 }
              
            
!

JS

              
                $(document).on('click', 'a', function(event){

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 750);
});
              
            
!
999px

Console