Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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 -->
<header class="header show-on-scroll">
  <div class="main-photo"></div>
  <div class="heading">
    <h1 class="intro">Hi, my name is Karl</h1>
    <p class="lead">
      I'm a web developer and teacher. I love JavaScript, Node.js,
      jQuery, and Python.
    </p>
    <p><a id="header-btn" class="header-btn">Contact Me</a></p>
  </div>
</header>

<!-- About -->
<section id="about" class="dark-bg">
  <div class="about-summary">
    <h2 class="white-text">About</h2>
    <p>
      I'm a freelancer living in <strong>Portugal</strong> who is
      originally from the <strong>UK</strong>. I teach business
      English remotely and I create websites.
    </p>

    <p>
      I went to university in London where I earned a BA in
      English Literature and an MA in Victorian Studies. In 2013,
      I relocated to Lisbon in order to train for a CELTA at
      International House, Lisbon.
    </p>

    <p>
      While I love teaching English, I missed the fun that I had
      creating Visual Basic programs and database queries while
      working as a Management Information and Data Analytics
      Administrator for Kingston University.
    </p>

    <p>
      In 2016, I decided to learn web development and I enrolled
      in freeCodeCamp's Full Stack Web Development Certification.
      Since then I have completed Colt Steele's
      <em>The Ultimate MySQL Bootcamp: Go from SQL Beginner to
        Expert</em>, <em>The Modern Python 3 Bootcamp</em>, and
      <em>The Web Developer Bootcamp</em>, as well as Wes Bos's
      <em>JavaScript30</em>, <em>What The Flexbox?!</em>, and
      <em>CSS Grid</em>.
    </p>

    <p>
      I use <strong>Python</strong>, <strong>JavaScript</strong>,
      <strong>jQuery</strong>, <strong>Node.js</strong>,
      <strong>HTML5</strong>, and <strong>CSS3</strong> to
      automate day-to-day business tasks like sending emails and
      keeping track of hours worked.
    </p>

    <p>
      I'm open to job opportunities, and my CV is available on
      request.
    </p>
  </div>

  <div class="about-skills">
    <h3 class="white-text">Skills</h3>

    <ul class="grid-list slide-left show-on-scroll">
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path d="M439.8 200.5c-7.7-30.9-22.3-54.2-53.4-54.2h-40.1v47.4c0 36.8-31.2 67.8-66.8 67.8H172.7c-29.2 0-53.4 25-53.4 54.3v101.8c0 29 25.2 46 53.4 54.3 33.8 9.9 66.3 11.7 106.8 0 26.9-7.8 53.4-23.5 53.4-54.3v-40.7H226.2v-13.6h160.2c31.1 0 42.6-21.7 53.4-54.2 11.2-33.5 10.7-65.7 0-108.6zM286.2 404c11.1 0 20.1 9.1 20.1 20.3 0 11.3-9 20.4-20.1 20.4-11 0-20.1-9.2-20.1-20.4.1-11.3 9.1-20.3 20.1-20.3zM167.8 248.1h106.8c29.7 0 53.4-24.5 53.4-54.3V91.9c0-29-24.4-50.7-53.4-55.6-35.8-5.9-74.7-5.6-106.8.1-45.2 8-53.4 24.7-53.4 55.6v40.7h106.9v13.6h-147c-31.1 0-58.3 18.7-66.8 54.2-9.8 40.7-10.2 66.1 0 108.6 7.6 31.6 25.7 54.2 56.8 54.2H101v-48.8c0-35.3 30.5-66.4 66.8-66.4zm-6.7-142.6c-11.1 0-20.1-9.1-20.1-20.3.1-11.3 9-20.4 20.1-20.4 11 0 20.1 9.2 20.1 20.4s-9 20.3-20.1 20.3z" />
          </svg>
        </div>
        <div class="svg-title-container">Python</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path d="M0 32v448h448V32H0zm243.8 349.4c0 43.6-25.6 63.5-62.9 63.5-33.7 0-53.2-17.4-63.2-38.5l34.3-20.7c6.6 11.7 12.6 21.6 27.1 21.6 13.8 0 22.6-5.4 22.6-26.5V237.7h42.1v143.7zm99.6 63.5c-39.1 0-64.4-18.6-76.7-43l34.3-19.8c9 14.7 20.8 25.6 41.5 25.6 17.4 0 28.6-8.7 28.6-20.8 0-14.4-11.4-19.5-30.7-28l-10.5-4.5c-30.4-12.9-50.5-29.2-50.5-63.5 0-31.6 24.1-55.6 61.6-55.6 26.8 0 46 9.3 59.8 33.7L368 290c-7.2-12.9-15-18-27.1-18-12.3 0-20.1 7.8-20.1 18 0 12.6 7.8 17.7 25.9 25.6l10.5 4.5c35.8 15.3 55.9 31 55.9 66.2 0 37.8-29.8 58.6-69.7 58.6z" />
          </svg>
        </div>
        <div class="svg-title-container">JavaScript</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- Created by Karl Horning -->
          <svg class="svg-image" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 1080 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
            <path d="m540 0c298.03 0 540 241.97 540 540s-241.97 540-540 540-540-241.97-540-540 241.97-540 540-540zm-233.59 254.64c-30.448 53.325-47.845 115.01-47.845 180.71 0 201.96 164.38 365.94 366.85 365.94 100.3 0 191.26-40.241 257.51-105.41-63.14 110.59-182.4 185.22-319 185.22-202.47 0-366.85-163.97-366.85-365.94 0-101.91 41.855-194.15 109.34-260.53zm173-58.2c-22.437 39.295-35.257 84.749-35.257 133.17 0 148.83 121.13 269.66 270.33 269.66 73.912 0 140.94-29.654 189.76-77.676-46.527 81.491-134.41 136.49-235.07 136.49-149.2 0-270.33-120.83-270.33-269.66 0-75.099 30.842-143.07 80.57-191.98zm147.95 0c-13.007 22.838-20.44 49.255-20.44 77.394 0 86.496 70.224 156.72 156.72 156.72 42.85 0 81.707-17.234 110.01-45.144-26.974 47.361-77.923 79.326-136.28 79.326-86.496 0-156.72-70.224-156.72-156.72 0-43.646 17.881-83.148 46.71-111.58z" />
          </svg>
        </div>
        <div class="svg-title-container">jQuery</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path d="M224 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6.4l47.4 28.1c1.7 1 4.1 1 5.7 0l184.7-106.6c1.7-1 2.8-3 2.8-5V149.3c0-2.1-1.1-4-2.9-5.1L226.8 37.7c-1.7-1-4-1-5.7 0L36.6 144.3c-1.8 1-2.9 3-2.9 5.1v213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7V167.5c0-3 2.4-5.3 5.4-5.3h23.4c2.9 0 5.4 2.3 5.4 5.3V378c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6l-48.4-27.9C8.1 389.2.7 376.3.7 362.4V149.3c0-13.8 7.4-26.8 19.4-33.7L204.6 9c11.7-6.6 27.2-6.6 38.8 0l184.7 106.7c12 6.9 19.4 19.8 19.4 33.7v213.1c0 13.8-7.4 26.7-19.4 33.7L243.4 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zm149.1-210.1c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8.5 2.4 2.7 4.2 5.2 4.2h24c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5h-23.9c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z" />
          </svg>
        </div>
        <div class="svg-title-container">Node.js</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
            <path d="M0 32l34.9 395.8L191.5 480l157.6-52.2L384 32H0zm308.2 127.9H124.4l4.1 49.4h175.6l-13.6 148.4-97.9 27v.3h-1.1l-98.7-27.3-6-75.8h47.7L138 320l53.5 14.5 53.7-14.5 6-62.2H84.3L71.5 112.2h241.1l-4.4 47.7z" />
          </svg>
        </div>
        <div class="svg-title-container">HTML5</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
            <path d="M0 32l34.9 395.8L192 480l157.1-52.2L384 32H0zm313.1 80l-4.8 47.3L193 208.6l-.3.1h111.5l-12.8 146.6-98.2 28.7-98.8-29.2-6.4-73.9h48.9l3.2 38.3 52.6 13.3 54.7-15.4 3.7-61.6-166.3-.5v-.1l-.2.1-3.6-46.3L193.1 162l6.5-2.7H76.7L70.9 112h242.2z" />
          </svg>
        </div>
        <div class="svg-title-container">CSS3</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path d="M320 104.5c171.4 0 303.2 72.2 303.2 151.5S491.3 407.5 320 407.5c-171.4 0-303.2-72.2-303.2-151.5S148.7 104.5 320 104.5m0-16.8C143.3 87.7 0 163 0 256s143.3 168.3 320 168.3S640 349 640 256 496.7 87.7 320 87.7zM218.2 242.5c-7.9 40.5-35.8 36.3-70.1 36.3l13.7-70.6c38 0 63.8-4.1 56.4 34.3zM97.4 350.3h36.7l8.7-44.8c41.1 0 66.6 3 90.2-19.1 26.1-24 32.9-66.7 14.3-88.1-9.7-11.2-25.3-16.7-46.5-16.7h-70.7L97.4 350.3zm185.7-213.6h36.5l-8.7 44.8c31.5 0 60.7-2.3 74.8 10.7 14.8 13.6 7.7 31-8.3 113.1h-37c15.4-79.4 18.3-86 12.7-92-5.4-5.8-17.7-4.6-47.4-4.6l-18.8 96.6h-36.5l32.7-168.6zM505 242.5c-8 41.1-36.7 36.3-70.1 36.3l13.7-70.6c38.2 0 63.8-4.1 56.4 34.3zM384.2 350.3H421l8.7-44.8c43.2 0 67.1 2.5 90.2-19.1 26.1-24 32.9-66.7 14.3-88.1-9.7-11.2-25.3-16.7-46.5-16.7H417l-32.8 168.7z" />
          </svg>
        </div>
        <div class="svg-title-container">PHP</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M61.7 169.4l101.5 278C92.2 413 43.3 340.2 43.3 256c0-30.9 6.6-60.1 18.4-86.6zm337.9 75.9c0-26.3-9.4-44.5-17.5-58.7-10.8-17.5-20.9-32.4-20.9-49.9 0-19.6 14.8-37.8 35.7-37.8.9 0 1.8.1 2.8.2-37.9-34.7-88.3-55.9-143.7-55.9-74.3 0-139.7 38.1-177.8 95.9 5 .2 9.7.3 13.7.3 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l77.5 230.4L249.8 247l-33.1-90.8c-11.5-.7-22.3-2-22.3-2-11.5-.7-10.1-18.2 1.3-17.5 0 0 35.1 2.7 56 2.7 22.2 0 56.7-2.7 56.7-2.7 11.5-.7 12.8 16.2 1.4 17.5 0 0-11.5 1.3-24.3 2l76.9 228.7 21.2-70.9c9-29.4 16-50.5 16-68.7zm-139.9 29.3l-63.8 185.5c19.1 5.6 39.2 8.7 60.1 8.7 24.8 0 48.5-4.3 70.6-12.1-.6-.9-1.1-1.9-1.5-2.9l-65.4-179.2zm183-120.7c.9 6.8 1.4 14 1.4 21.9 0 21.6-4 45.8-16.2 76.2l-65 187.9C426.2 403 468.7 334.5 468.7 256c0-37-9.4-71.8-26-102.1zM504 256c0 136.8-111.3 248-248 248C119.2 504 8 392.7 8 256 8 119.2 119.2 8 256 8c136.7 0 248 111.2 248 248zm-11.4 0c0-130.5-106.2-236.6-236.6-236.6C125.5 19.4 19.4 125.5 19.4 256S125.6 492.6 256 492.6c130.5 0 236.6-106.1 236.6-236.6z" />
          </svg>
        </div>
        <div class="svg-title-container">WordPress</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
            <path d="M100.59 334.24c48.57 3.31 58.95 2.11 58.95 11.94 0 20-65.55 20.06-65.55 1.52.01-5.09 3.29-9.4 6.6-13.46zm27.95-116.64c-32.29 0-33.75 44.47-.75 44.47 32.51 0 31.71-44.47.75-44.47zM448 80v352a48 48 0 0 1-48 48H48a48 48 0 0 1-48-48V80a48 48 0 0 1 48-48h352a48 48 0 0 1 48 48zm-227 69.31c0 14.49 8.38 22.88 22.86 22.88 14.74 0 23.13-8.39 23.13-22.88S258.62 127 243.88 127c-14.48 0-22.88 7.84-22.88 22.31zM199.18 195h-49.55c-25-6.55-81.56-4.85-81.56 46.75 0 18.8 9.4 32 21.85 38.11C74.23 294.23 66.8 301 66.8 310.6c0 6.87 2.79 13.22 11.18 16.76-8.9 8.4-14 14.48-14 25.92C64 373.35 81.53 385 127.52 385c44.22 0 69.87-16.51 69.87-45.73 0-36.67-28.23-35.32-94.77-39.38l8.38-13.43c17 4.74 74.19 6.23 74.19-42.43 0-11.69-4.83-19.82-9.4-25.67l23.38-1.78zm84.34 109.84l-13-1.78c-3.82-.51-4.07-1-4.07-5.09V192.52h-52.6l-2.79 20.57c15.75 5.55 17 4.86 17 10.17V298c0 5.62-.31 4.58-17 6.87v20.06h72.42zM384 315l-6.87-22.37c-40.93 15.37-37.85-12.41-37.85-16.73v-60.72h37.85v-25.41h-35.82c-2.87 0-2 2.52-2-38.63h-24.18c-2.79 27.7-11.68 38.88-34 41.42v22.62c20.47 0 19.82-.85 19.82 2.54v66.57c0 28.72 11.43 40.91 41.67 40.91 14.45 0 30.45-4.83 41.38-10.2z" />
          </svg>
        </div>
        <div class="svg-title-container">Git (for GitHub)</div>
      </li>
      <li>
        <div class="about-svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z" />
          </svg>
        </div>
        <div class="svg-title-container">
          Markdown (for GitHub)
        </div>
      </li>
    </ul>
  </div>

  <div class="about-programs">
    <h3 class="white-text">Programs</h3>

    <ul class="grid-list slide-right show-on-scroll">
      <li>
        <div class="svg-container">
          <!-- Created by Karl Horning -->
          <svg class="svg-image" clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5" version="1.1" viewBox="0 0 1080 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
            <g transform="matrix(1.7839 0 0 1.7839 -123.23 -284.38)">
              <path d="m130.77 631.55l-61.689-20.77 150.38-148.66-150.38-148.66 61.689-20.769 148.92 111.98 247.22-243.45 147.59 62.091v477.6l-147.59 62.09-247.22-243.45-148.92 111.98zm226.69-169.42l169.54 127.8v-255.61l-169.54 127.8z" />
            </g>
          </svg>
        </div>
        <div class="svg-title-container">
          Visual Studio Code
        </div>
      </li>
      <li>
        <div class="svg-container">
          <!-- Created by Karl Horning -->
          <svg class="svg-image" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 1080 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
            <path d="m669.18 969.78h-60.235l-31.027-53.813h-383.23l-19.996-34.823-24.666-0.126-80.025-141.5 100.23-176.94 83.432-48.581 128.49-219.37-27.341-48.478 76.259-135.92 161.46 0.083 12.253 20.904h40.578l364.64 634.33-75.951 150.43h-295.9l31.026 53.813zm-81.262-73.813l31.027 53.813h20.235l-31.026-53.813h305.9l75.951-130.43-354.64-614.33h-40.578l-12.253-20.904-141.46-0.083-66.259 115.92 27.341 48.478-138.49 239.37-83.432 48.581-90.234 156.94 70.025 121.5 24.666 0.126 19.996 34.823h383.23zm-33.746-58.451l-127.84-221.24 209.81-364.28-41.628-72.768-380.53 658.28h340.18zm378.95-71.088h-399.31l-82.607-141.91h401.28l80.634 141.91zm-357.94-158.9l-62.275-109.95s-24.89 41.925-43.93 73.998c-4.368 7.357-4.451 16.492-0.219 23.927 4.233 7.435 12.13 12.027 20.686 12.027h85.738zm266.58 0l-195.29-337.86-123.8 211.26 73.396 126.6h245.69z" />
          </svg>
        </div>
        <div class="svg-title-container">Affinity Designer</div>
      </li>
      <li>
        <div class="svg-container">
          <!-- From Font Awesome -->
          <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
            <path d="M257.981 272.971L63.638 467.314c-9.373 9.373-24.569 9.373-33.941 0L7.029 444.647c-9.357-9.357-9.375-24.522-.04-33.901L161.011 256 6.99 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L257.981 239.03c9.373 9.372 9.373 24.568 0 33.941zM640 456v-32c0-13.255-10.745-24-24-24H312c-13.255 0-24 10.745-24 24v32c0 13.255 10.745 24 24 24h304c13.255 0 24-10.745 24-24z" />
          </svg>
        </div>
        <div class="svg-title-container">Terminal</div>
      </li>
      <li>
        <div class="svg-container">
          <!-- Created by Karl Horning -->
          <svg class="svg-image" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 1080 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
            <path d="m425.9 52.085l43.835-25.336c43.471-25.126 97.049-25.126 140.52 0 97.297 56.236 270.81 156.52 357.13 206.42 32.017 18.506 51.737 52.681 51.737 89.662v434.34c0 36.981-19.72 71.156-51.737 89.662-91.839 53.081-282.36 163.2-374.8 216.63-32.539 18.81-72.643 18.81-105.18 0-92.445-53.43-282.96-163.54-374.8-216.63-32.017-18.506-51.737-52.681-51.737-89.662v-434.34c0-36.981 19.72-71.156 51.737-89.662l148.23-85.674v553.68l279.16 161.18 279.16-161.18v-322.35l-279.16-161.18-114.1 65.873v-231.44zm114.1 351.53l118.11 68.193v136.39l-118.11 68.193-118.11-68.193v-136.39l118.11-68.193z" />
          </svg>
        </div>
        <div class="svg-title-container">
          Bitnami WordPress Stack
        </div>
      </li>
      <li>
        <div class="svg-container">
          <!-- Created by Karl Horning -->
          <svg class="svg-image" clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 1080 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
            <path d="m809.23 793.1c0.307 4.739 0.463-0.485 0.463 4.324 0 131.27-115.95 237.85-258.77 237.85-142.4 0-258.09-95.954-258.77-226.69l247.85 179.47 269.23-194.95zm-269.23-770.93l427.63 202.96-23 449.92-404.63 293-404.63-293-23-449.92 427.63-202.96zm-67.367 495.36l-307-178.28 14.135 291.63 292.86 211.55v-324.9zm134.73 0l307-178.28-14.135 291.63-292.86 211.55v-324.9zm-174.72-376.9l-171.28 80.505 278.63 161.91 77.387-45.13-19.915-14.081 38.021-83.553-103.44 35.432 35.616-82.036-176.52 57.662 70.59-96.964-29.083-13.743zm29.335-13.789l37.733 17.831-42.884 58.907 155.9-50.923-35.187 81.047 104.74-35.874-53.483 117.53 12.323 8.714 176.52-102.94-277.63-130.96-78.018 36.67z" />
          </svg>
        </div>
        <div class="svg-title-container">VirtualBox</div>
      </li>
    </ul>
  </div>
</section>

<!-- Portfolio -->
<section id="portfolio">
  <div class="portfolio-intro">
    <h2>Portfolio</h2>
    <p class="section-lead">
      This section is coming soon. In the meantime, you can check
      out my
      <a href="http://github.com/Karl-Horning" target="_blank">GitHub</a>
      and
      <a href="http://codepen.io/karlhorning/" target="_blank">CodePen</a>
      accounts to see some of the projects that I have worked on
      so far.
    </p>
  </div>
  <div class="portfolio-img show-on-scroll">
    <svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" version="1.1" viewBox="0 0 1280 800" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
      <path d="m0 0h1280v800h-1280v-800zm311.06 615.77c-1.316 6.746-4.086 13.084-8.31 19.015-4.225 5.93-10.078 11.056-17.561 15.376-6.817 3.936-13.763 6.449-20.837 7.541-7.074 1.091-13.919 0.803-20.535-0.864-6.616-1.668-12.786-4.674-18.509-9.018-5.723-4.345-10.576-9.967-14.56-16.868-4.08-7.067-6.55-14.176-7.409-21.329-0.86-7.152-0.292-13.993 1.703-20.521s5.279-12.553 9.851-18.075c4.571-5.521 10.224-10.226 16.958-14.114 6.236-3.6 13.003-6.038 20.303-7.315 7.299-1.277 14.044-0.876 20.233 1.205l-6.114 22.818c-3.58-1.592-7.374-2.117-11.385-1.575-4.01 0.542-7.72 1.797-11.128 3.765-3.742 2.16-6.775 4.826-9.101 7.997-2.325 3.172-3.915 6.611-4.767 10.318-0.853 3.708-0.955 7.563-0.306 11.567s2.101 7.96 4.357 11.867c2.304 3.991 5.04 7.289 8.207 9.894 3.167 2.606 6.536 4.457 10.107 5.555 3.571 1.097 7.279 1.423 11.123 0.977 3.844-0.445 7.595-1.724 11.254-3.836 4.24-2.448 7.459-5.416 9.658-8.902 2.2-3.487 3.487-7.113 3.864-10.877l22.904 5.399zm61.314-60.84c2.928 5.071 4.666 10.193 5.213 15.364s0.069 10.103-1.435 14.795c-1.503 4.693-3.877 9.029-7.122 13.008-3.245 3.98-7.237 7.338-11.976 10.074-4.655 2.688-9.539 4.454-14.649 5.298-5.111 0.845-10.053 0.733-14.826-0.336-4.774-1.068-9.263-3.132-13.468-6.191-4.206-3.059-7.772-7.125-10.7-12.196-2.928-5.072-4.654-10.172-5.176-15.302-0.523-5.13-0.042-10.008 1.444-14.635 1.485-4.627 3.895-8.9 7.23-12.821 3.334-3.92 7.33-7.224 11.985-9.912 4.739-2.736 9.619-4.556 14.64-5.46 5.021-0.903 9.927-0.854 14.718 0.149 4.792 1.003 9.278 3.013 13.459 6.031s7.735 7.062 10.663 12.134zm-19.704 11.376c-1.152-1.996-2.612-3.757-4.381-5.285-1.769-1.529-3.697-2.66-5.784-3.395-2.088-0.735-4.31-1.032-6.667-0.89-2.357 0.141-4.741 0.908-7.152 2.3s-4.267 3.073-5.568 5.044c-1.301 1.97-2.134 4.031-2.5 6.182-0.365 2.151-0.308 4.362 0.173 6.635 0.48 2.272 1.296 4.405 2.448 6.401 1.152 1.995 2.592 3.769 4.32 5.321 1.727 1.552 3.659 2.737 5.794 3.555s4.381 1.157 6.738 1.015c2.357-0.141 4.741-0.908 7.152-2.3s4.267-3.073 5.568-5.044c1.301-1.97 2.131-4.085 2.49-6.343s0.299-4.523-0.182-6.795c-0.48-2.272-1.297-4.406-2.449-6.401zm130.06-33.355l-19.584-33.92c-1.008-1.746-2.105-3.358-3.29-4.835-1.186-1.477-2.447-2.606-3.784-3.385-1.337-0.78-2.771-1.2-4.301-1.258-1.531-0.059-3.21 0.44-5.039 1.496-1.746 1.008-3.047 2.258-3.904 3.75s-1.362 3.114-1.515 4.865c-0.152 1.751 0.031 3.557 0.552 5.418 0.52 1.862 1.284 3.665 2.292 5.411l19.368 33.546-20.452 11.808-20.448-35.417c-2.064-3.575-4.403-5.993-7.016-7.256-2.613-1.262-5.458-1.005-8.534 0.771-3.243 1.872-5.014 4.612-5.313 8.222-0.3 3.609 0.631 7.284 2.791 11.025l19.44 33.671-20.577 11.88-35.856-62.104 19.828-11.448 4.968 8.605 0.25-0.144c-0.02-1.762 0.171-3.591 0.574-5.486 0.402-1.895 1.117-3.777 2.145-5.645 1.027-1.868 2.35-3.657 3.968-5.367s3.59-3.237 5.918-4.581c4.49-2.592 8.821-3.873 12.995-3.844s8.118 1.244 11.831 3.644c0.207-4.442 1.379-8.555 3.518-12.34 2.138-3.784 5.535-7.02 10.191-9.708 4.24-2.448 8.238-3.731 11.994-3.849 3.757-0.118 7.216 0.546 10.378 1.99 3.162 1.445 6.013 3.456 8.555 6.035 2.542 2.578 4.653 5.323 6.333 8.232l22.176 38.41-20.452 11.808zm36.165-20.88l-35.856-62.104 20.452-11.808 35.856 62.104-20.452 11.808zm77.444-44.712l-19.584-33.92c-1.008-1.746-2.114-3.325-3.317-4.736-1.203-1.412-2.485-2.529-3.846-3.35-1.361-0.822-2.848-1.238-4.462-1.248-1.613-0.011-3.335 0.512-5.164 1.568s-3.225 2.333-4.189 3.832c-0.964 1.498-1.543 3.135-1.737 4.91-0.195 1.775-0.053 3.605 0.426 5.491 0.479 1.885 1.222 3.7 2.23 5.446l19.44 33.671-20.577 11.88-35.856-62.104 19.829-11.448 4.968 8.605 0.249-0.144c-0.02-1.762 0.201-3.636 0.663-5.62 0.461-1.985 1.239-3.903 2.332-5.753 1.093-1.851 2.428-3.619 4.004-5.305s3.445-3.153 5.607-4.401c4.157-2.4 8.122-3.692 11.896-3.875 3.774-0.184 7.238 0.393 10.394 1.731 3.155 1.337 6.016 3.316 8.582 5.936s4.736 5.468 6.512 8.544l22.176 38.41-20.576 11.88zm98.502-64.685c3.504 6.069 5.679 11.853 6.525 17.35s0.541 10.634-0.914 15.409c-1.455 4.776-4.028 9.199-7.719 13.27s-8.28 7.69-13.768 10.858c-5.487 3.168-11.599 5.589-18.337 7.262-6.739 1.673-13.14 2.154-19.204 1.443l1.802-20.495c4.529 0.933 8.974 0.999 13.335 0.2 4.36-0.8 8.286-2.207 11.778-4.223 5.986-3.456 9.501-7.592 10.545-12.407 1.045-4.815 0.055-9.842-2.969-15.08l-2.16-3.741-0.374 0.216c-0.472 3.598-1.898 7.082-4.276 10.45-2.379 3.369-5.646 6.253-9.803 8.653-4.739 2.736-9.429 4.308-14.072 4.715-4.642 0.408-9.071-0.111-13.286-1.557-4.216-1.446-8.105-3.718-11.667-6.816-3.562-3.097-6.592-6.808-9.088-11.131s-4.206-8.823-5.132-13.498c-0.926-4.676-0.985-9.242-0.177-13.699 0.807-4.457 2.524-8.635 5.15-12.535 2.627-3.899 6.267-7.193 10.923-9.881 3.908-2.256 8.105-3.626 12.592-4.11 4.487-0.485 8.771 0.312 12.853 2.389l0.249-0.144-4.608-7.981 19.33-11.16 32.472 56.243zm-201.3 14.792c0.912 1.58 1.452 3.236 1.62 4.968 0.169 1.731 0.022 3.396-0.442 4.994-0.463 1.597-1.254 3.107-2.373 4.529s-2.468 2.589-4.048 3.501c-3.325 1.92-6.746 2.427-10.263 1.519-3.517-0.907-6.163-2.898-7.939-5.975-0.864-1.496-1.401-3.098-1.611-4.806s-0.063-3.372 0.442-4.994 1.284-3.152 2.337-4.592c1.053-1.439 2.411-2.639 4.074-3.599 1.58-0.912 3.265-1.497 5.056-1.755s3.494-0.188 5.109 0.209c1.616 0.398 3.131 1.103 4.546 2.114 1.416 1.012 2.58 2.308 3.492 3.887zm167.09-29.125c-1.2-2.078-2.705-3.87-4.516-5.374-1.81-1.504-3.801-2.6-5.971-3.287-2.17-0.686-4.41-0.918-6.719-0.693s-4.627 1.009-6.955 2.353-4.146 2.948-5.453 4.811c-1.308 1.863-2.177 3.862-2.608 5.995s-0.427 4.348 0.012 6.644c0.439 2.297 1.282 4.525 2.53 6.687 1.2 2.079 2.685 3.882 4.454 5.41s3.697 2.66 5.784 3.395 4.276 1.023 6.568 0.864c2.291-0.16 4.601-0.911 6.929-2.255s4.175-2.993 5.542-4.945c1.366-1.953 2.286-4.009 2.758-6.166 0.473-2.157 0.511-4.396 0.113-6.716-0.397-2.32-1.22-4.561-2.468-6.723zm95.023-100.09c-3.173-1.272-6.632-1.742-10.375-1.41s-6.987 1.29-9.73 2.874c-1.414 0.816-2.776 1.769-4.087 2.859-1.311 1.089-2.344 2.323-3.1 3.702-0.756 1.378-1.205 2.857-1.347 4.435-0.142 1.579 0.292 3.241 1.3 4.987 0.864 1.496 1.895 2.563 3.095 3.201 1.199 0.638 2.618 0.982 4.255 1.035 1.638 0.052 3.468-0.09 5.491-0.427 2.023-0.336 4.265-0.772 6.728-1.307 3.569-0.73 7.322-1.428 11.261-2.095 3.938-0.666 7.814-0.77 11.626-0.311 3.812 0.46 7.444 1.661 10.893 3.604 3.45 1.944 6.447 5.119 8.991 9.525 2.928 5.072 4.525 9.997 4.79 14.777 0.266 4.779-0.485 9.287-2.252 13.522-1.768 4.235-4.352 8.11-7.754 11.626s-7.264 6.522-11.587 9.018c-6.319 3.648-13.066 6.075-20.24 7.279-7.175 1.205-13.892 0.899-20.152-0.919l5.759-22.281c3.698 1.413 7.829 1.993 12.395 1.74 4.565-0.252 8.594-1.387 12.086-3.403 1.579-0.912 3.021-1.966 4.326-3.162 1.304-1.197 2.302-2.493 2.992-3.89 0.69-1.396 1.008-2.91 0.953-4.541s-0.586-3.319-1.594-5.065c-0.96-1.663-2.192-2.836-3.695-3.52-1.504-0.684-3.3-1.06-5.39-1.128s-4.507 0.163-7.249 0.693-5.832 1.178-9.27 1.943c-3.355 0.718-6.743 1.233-10.165 1.546s-6.757 0.104-10.005-0.625c-3.248-0.73-6.321-2.115-9.217-4.157-2.897-2.041-5.497-5.057-7.801-9.047-2.832-4.905-4.259-9.68-4.279-14.324-0.021-4.644 0.942-9.024 2.888-13.141 1.947-4.116 4.657-7.87 8.131-11.262 3.473-3.391 7.289-6.286 11.446-8.686 4.988-2.88 10.608-4.906 16.86-6.077 6.253-1.171 12.364-1.097 18.336 0.222l-5.313 22.19zm111.44-18.947c2.928 5.071 4.665 10.193 5.212 15.364s0.069 10.103-1.434 14.795c-1.504 4.693-3.878 9.029-7.123 13.008-3.245 3.98-7.237 7.338-11.975 10.074-4.656 2.688-9.539 4.454-14.65 5.298-5.11 0.845-10.052 0.733-14.826-0.336-4.774-1.068-9.263-3.132-13.468-6.191s-7.772-7.125-10.7-12.196c-2.928-5.072-4.653-10.172-5.176-15.302s-0.042-10.008 1.444-14.635 3.896-8.9 7.23-12.821c3.335-3.92 7.33-7.224 11.986-9.912 4.738-2.736 9.618-4.556 14.639-5.46 5.021-0.903 9.927-0.854 14.719 0.149 4.791 1.003 9.277 3.013 13.458 6.031s7.736 7.062 10.664 12.134zm-19.704 11.376c-1.152-1.996-2.613-3.757-4.382-5.285-1.769-1.529-3.697-2.66-5.784-3.395s-4.309-1.032-6.666-0.89c-2.357 0.141-4.741 0.908-7.152 2.3s-4.267 3.073-5.569 5.044c-1.301 1.97-2.134 4.031-2.499 6.182-0.366 2.151-0.308 4.362 0.172 6.635 0.481 2.272 1.297 4.405 2.449 6.401 1.152 1.995 2.592 3.769 4.319 5.321 1.728 1.552 3.659 2.737 5.794 3.555s4.381 1.157 6.738 1.015c2.357-0.141 4.741-0.908 7.152-2.3s4.267-3.073 5.568-5.044c1.301-1.97 2.131-4.085 2.491-6.343 0.359-2.258 0.298-4.523-0.183-6.795-0.48-2.272-1.296-4.406-2.448-6.401zm98.519-56.88c2.928 5.071 4.665 10.193 5.212 15.364s0.069 10.103-1.434 14.795c-1.503 4.693-3.878 9.029-7.122 13.008-3.245 3.98-7.237 7.338-11.976 10.074-4.656 2.688-9.539 4.454-14.65 5.298-5.11 0.845-10.052 0.733-14.826-0.336-4.774-1.068-9.263-3.132-13.468-6.191s-7.772-7.125-10.7-12.196c-2.928-5.072-4.653-10.172-5.176-15.302s-0.042-10.008 1.444-14.635 3.896-8.9 7.23-12.821c3.335-3.92 7.33-7.224 11.986-9.912 4.739-2.736 9.619-4.556 14.64-5.46 5.02-0.903 9.927-0.854 14.718 0.149s9.277 3.013 13.458 6.031 7.736 7.062 10.664 12.134zm-19.704 11.376c-1.152-1.996-2.613-3.757-4.382-5.285-1.769-1.529-3.697-2.66-5.784-3.395s-4.309-1.032-6.666-0.89c-2.357 0.141-4.741 0.908-7.152 2.3s-4.267 3.073-5.568 5.044c-1.301 1.97-2.135 4.031-2.5 6.182-0.366 2.151-0.308 4.362 0.172 6.635 0.481 2.272 1.297 4.405 2.449 6.401 1.152 1.995 2.592 3.769 4.319 5.321 1.728 1.552 3.659 2.737 5.794 3.555s4.381 1.157 6.738 1.015c2.357-0.141 4.741-0.908 7.153-2.3 2.411-1.392 4.267-3.073 5.568-5.044 1.301-1.97 2.131-4.085 2.49-6.343s0.298-4.523-0.182-6.795c-0.481-2.272-1.297-4.406-2.449-6.401zm91.523-11.107l-19.582-33.92c-1.008-1.746-2.114-3.325-3.317-4.736-1.203-1.412-2.485-2.529-3.846-3.35-1.361-0.822-2.848-1.238-4.462-1.248-1.613-0.011-3.334 0.512-5.164 1.568-1.829 1.056-3.225 2.333-4.189 3.832-0.964 1.498-1.543 3.135-1.737 4.91-0.195 1.775-0.053 3.605 0.426 5.491 0.479 1.885 1.222 3.7 2.23 5.446l19.44 33.671-20.577 11.88-35.856-62.104 19.829-11.448 4.968 8.605 0.249-0.144c-0.019-1.762 0.201-3.636 0.663-5.62 0.461-1.985 1.239-3.903 2.332-5.753 1.093-1.851 2.428-3.619 4.004-5.305s3.445-3.153 5.607-4.401c4.157-2.4 8.122-3.692 11.896-3.875 3.774-0.184 7.238 0.393 10.396 1.731 3.15 1.337 6.01 3.316 8.58 5.936s4.74 5.468 6.51 8.544l22.18 38.41-20.58 11.88zm56.36-46.672c0.96 1.663 1.55 3.402 1.77 5.217 0.21 1.815 0.06 3.566-0.46 5.253-0.53 1.687-1.36 3.275-2.49 4.762-1.14 1.488-2.54 2.711-4.2 3.671s-3.39 1.569-5.18 1.828c-1.79 0.258-3.54 0.158-5.24-0.299-1.71-0.456-3.3-1.2-4.78-2.229s-2.71-2.375-3.67-4.038c-0.91-1.58-1.47-3.277-1.69-5.092s-0.09-3.575 0.36-5.279c0.46-1.705 1.26-3.301 2.39-4.789 1.14-1.488 2.54-2.711 4.2-3.671s3.42-1.561 5.28-1.801 3.65-0.165 5.37 0.226 3.31 1.134 4.78 2.229c1.46 1.095 2.65 2.433 3.56 4.012zm-33.64-5.851l-33.91-58.738 20.95-12.096 33.91 58.738-20.95 12.096z" />
    </svg>
  </div>
</section>

<!-- Social -->
<section id="social" class="dark-bg">
  <div class="social-intro">
    <h2 class="white-text">Social</h2>
    <p class="section-lead">
      If you would like to contact me directly, you can use the
      <a id="social-contact">contact form</a> below. If you prefer
      social media, you can find me using these icon links.
    </p>
  </div>
  <div class="social-icons">
    <ul class="grid-list slide-left show-on-scroll">
      <li>
        <a href="http://github.com/Karl-Horning" target="_blank">
          <div class="svg-container">
            <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
              <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z" />
            </svg>
          </div>
          <div class="svg-title-container">GitHub</div>
        </a>
      </li>
      <li>
        <a href="http://codepen.io/karlhorning/" target="_blank">
          <div class="svg-container">
            <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="M502.285 159.704l-234-156c-7.987-4.915-16.511-4.96-24.571 0l-234 156C3.714 163.703 0 170.847 0 177.989v155.999c0 7.143 3.714 14.286 9.715 18.286l234 156.022c7.987 4.915 16.511 4.96 24.571 0l234-156.022c6-3.999 9.715-11.143 9.715-18.286V177.989c-.001-7.142-3.715-14.286-9.716-18.285zM278 63.131l172.286 114.858-76.857 51.429L278 165.703V63.131zm-44 0v102.572l-95.429 63.715-76.857-51.429L234 63.131zM44 219.132l55.143 36.857L44 292.846v-73.714zm190 229.715L61.714 333.989l76.857-51.429L234 346.275v102.572zm22-140.858l-77.715-52 77.715-52 77.715 52-77.715 52zm22 140.858V346.275l95.429-63.715 76.857 51.429L278 448.847zm190-156.001l-55.143-36.857L468 219.132v73.714z" />
            </svg>
          </div>
          <div class="svg-title-container">CodePen</div>
        </a>
      </li>
      <li>
        <a href="https://www.freecodecamp.org/karl-horning" target="_blank">
          <div class="svg-container">
            <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
              <path d="M69.3 144.5c-41 68.5-36.4 163 1 227C92.5 409.7 120 423.9 120 438c0 6.8-6 13-12.8 13C87.7 451 8 375.5 8 253.2c0-111.5 78-186 97.1-186 6 0 14.9 4.8 14.9 11.1 0 12.7-28.3 28.6-50.7 66.2zm195.8 213.8c4.5 1.8 12.3 5.2 12.3-1.2 0-2.7-2.2-2.9-4.3-3.6-8.5-3.4-14-7.7-19.1-15.2-8.2-12.1-10.1-24.2-10.1-38.6 0-32.1 44.2-37.9 44.2-70 0-12.3-7.7-15.9-7.7-19.3 0-2.2.7-2.2 2.9-2.2 8 0 19.1 13.3 22.5 19.8 2.2 4.6 2.4 6 2.4 11.1 0 7-.7 14.2-.7 21.3 0 27 31.9 19.8 31.9 6.8 0-6-3.6-11.6-3.6-17.4 0-.7 0-1.2.7-1.2 3.4 0 9.4 7.7 11.1 10.1 5.8 8.9 8.5 20.8 8.5 31.4 0 32.4-29.5 49-29.5 56 0 1 2.9 7.7 12.1 1.9 29.7-15.1 53.1-47.6 53.1-89.8 0-33.6-8.7-57.7-32.1-82.6-3.9-4.1-16.4-16.9-22.5-16.9-8.2 0 7.2 18.6 7.2 31.2 0 7.2-4.8 12.3-12.3 12.3-11.6 0-14.5-25.4-15.9-33.3-5.8-33.8-12.8-58.2-46.4-74.1-10.4-5-36.5-11.8-36.5-2.2 0 2.4 2.7 4.1 4.6 5.1 9.2 5.6 19.6 21.4 19.6 38.2 0 46.1-57.7 88.2-57.7 136.2-.2 40.3 28.1 72.6 65.3 86.2zM470.4 67c-6 0-14.4 6.5-14.4 12.6 0 8.7 12.1 19.6 17.6 25.4 81.6 85.1 78.6 214.3 17.6 291-7 8.9-35.3 35.3-35.3 43.5 0 5.1 8.2 11.4 13.2 11.4 25.4 0 98.8-80.8 98.8-185.7C568 145.9 491.8 67 470.4 67zm-42.3 323.1H167c-9.4 0-15.5 7.5-15.5 16.4 0 8.5 7 15.5 15.5 15.5h261.1c9.4 0 11.9-7.5 11.9-16.4 0-8.5-3.5-15.5-11.9-15.5z" />
            </svg>
          </div>
          <div class="svg-title-container">freeCodeCamp</div>
        </a>
      </li>
      <li>
        <a href="https://www.linkedin.com/in/karlhorning/" target="_blank">
          <div class="svg-container">
            <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z" />
            </svg>
          </div>
          <div class="svg-title-container">LinkedIn</div>
        </a>
      </li>
      <li>
        <a href="https://twitter.com/KarlHorning" target="_blank">
          <div class="svg-container">
            <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-48.9 158.8c.2 2.8.2 5.7.2 8.5 0 86.7-66 186.6-186.6 186.6-37.2 0-71.7-10.8-100.7-29.4 5.3.6 10.4.8 15.8.8 30.7 0 58.9-10.4 81.4-28-28.8-.6-53-19.5-61.3-45.5 10.1 1.5 19.2 1.5 29.6-1.2-30-6.1-52.5-32.5-52.5-64.4v-.8c8.7 4.9 18.9 7.9 29.6 8.3a65.447 65.447 0 0 1-29.2-54.6c0-12.2 3.2-23.4 8.9-33.1 32.3 39.8 80.8 65.8 135.2 68.6-9.3-44.5 24-80.6 64-80.6 18.9 0 35.9 7.9 47.9 20.7 14.8-2.8 29-8.3 41.6-15.8-4.9 15.2-15.2 28-28.8 36.1 13.2-1.4 26-5.1 37.8-10.2-8.9 13.1-20.1 24.7-32.9 34z" />
            </svg>
          </div>
          <div class="svg-title-container">Twitter</div>
        </a>
      </li>
      <li>
        <a href="https://www.facebook.com/karlhorning" target="_blank">
          <div class="svg-container">
            <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
              <path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z" />
            </svg>
          </div>
          <div class="svg-title-container">Facebook</div>
        </a>
      </li>
      <li>
        <a href="https://www.instagram.com/karl_horning/" target="_blank">
          <div class="svg-container">
            <svg class="svg-image" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
              <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z" />
            </svg>
          </div>
          <div class="svg-title-container">Instagram</div>
        </a>
      </li>
    </ul>
  </div>
</section>

<!-- Contact -->
<section id="contact">
  <div class="contact-intro">
    <h2>Contact</h2>
    <p class="section-lead">
      Send me a message! Your email address will not be shared.
      Required fields are marked with a
      <span class="red-text">*</span>.
    </p>
  </div>

  <form class="contact-form" method="POST" action="/">
    <fieldset id="contact-form-name">
      <label for="name">Name<span class="red-text">*</span></label>
      <input type="text" name="name" id="name" placeholder="John Smith" required />
    </fieldset>
    <fieldset id="contact-form-email">
      <label for="email">Email<span class="red-text">*</span></label>
      <input type="email" name="email" id="email" placeholder="john@example.com" required />
    </fieldset>
    <fieldset id="contact-form-no-bots">
      <label for="bots">Please leave this field empty</label>
      <input type="text" name="bots" id="bots" placeholder="No bots allowed" />
    </fieldset>
    <fieldset id="contact-form-message">
      <label for="message">Message<span class="red-text">*</span></label>
      <textarea name="message" id="message" placeholder="Hi, how are you? Are you available to talk at 18:00 on the twelfth?" cols="30" rows="18" required></textarea>
    </fieldset>
    <button id="contact-form-submit" type="submit">
      Send Message
    </button>
  </form>
</section>

<!-- Footer -->
<footer>
  <p>
    <small id="copyright-text">&copy; Copyright Karl Horning 2019</small>
  </p>
</footer>
              
            
!

CSS

              
                /* Colors */
:root {
  --black: #333;
  --dark-red: rgba(255, 0, 0, 0.5);
  --grey: #666;
  --lighter-black: #19292e;
  --red: rgba(255, 0, 0, 0.75);
  --white: #f9fcff;
}

/* Basic Setup */

html {
  box-sizing: border-box;
  min-width: 400px;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

::selection,
::-moz-selection {
  background: var(--red);
  color: var(--lighter-black);
}

/* Text styles */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"),
    url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff)
      format("woff");
}

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"),
    url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzKRDOzjiPcYnFooOUGCOsRk.woff)
      format("woff");
}

html {
  background: var(--white);
  color: var(--black);
  font-size: 10px;
  font-family: "Avenir Next", Open Sans, sans-serif;
  line-height: 1.15;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-size: 1.8rem;
}

h1 {
  font-size: 4.8rem;
}

h2 {
  font-size: 4.7em;
}

h3 {
  font-size: 2.5em;
  text-align: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--lighter-black);
}

p,
li {
  font-size: 2rem;
  line-height: 1.5;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  box-shadow: inset 0 -0.5em var(--dark-red);
  color: var(--black);
  font-weight: bold;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0, 1, 0.3, 1);
}

a:hover {
  box-shadow: inset 0 -1.5em var(--red);
  color: var(--white);
}

.white-text {
  color: var(--white) !important;
}

.red-text {
  color: var(--red);
}

.text-center {
  text-align: center !important;
}

/* General Styles */
.grid-list {
  display: grid;
  grid-row-gap: 40px;
  grid-template-columns: repeat(4, minmax(100px, 1fr));
  text-align: center;
}

.grid-list > li > a:hover {
  color: var(--red);
}

section {
  align-content: center;
  display: grid;
  justify-content: center;
  min-height: 100vh;
  padding: 40px 30px 100px 30px;
}

section > div {
  max-width: 1000px;
  overflow: hidden;
}

.svg-image {
  fill: var(--white);
  height: 80px;
  padding: 5px;
  width: 80px;
}

/* Header Styles */
header {
  height: 100vh;
  min-height: 1200px;
  overflow: hidden;
  position: relative;
}

header:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.heading {
  color: var(--lighter-black);
  line-height: 1;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  text-shadow: -1px -1px 0 var(--white), 1px -1px 0 var(--white),
    -1px 1px 0 var(--white), 1px 1px 0 var(--white);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 30em;
  z-index: 10;
}

.intro {
  font-size: 8em;
  margin-bottom: 0;
}

.lead {
  color: var(--grey);
  font-size: 2em;
  margin-bottom: 60px;
}

.header-btn {
  background: var(--lighter-black);
  border: 2px solid var(--lighter-black);
  border-radius: 4px;
  box-shadow: none;
  color: var(--white);
  cursor: pointer;
  font-size: 90%;
  font-weight: normal;
  padding: 20px;
  text-shadow: none;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

.header-btn:hover {
  background: var(--white);
  box-shadow: none;
  color: var(--lighter-black);
}

.main-photo {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/781613/profile/profile-512.jpg?1");
  background-position: center;
  background-size: cover;
  border: 7px solid var(--lighter-black);
  border-radius: 50%;
  height: 20em;
  position: absolute;
  top: calc(45% - 25.5em);
  left: calc(50% - 25em);
  width: 20em;
}

.main-photo:before {
  border: 7px solid var(--white);
  border-radius: 50%;
  content: " ";
  position: absolute;
  top: 1px;
  right: 1px;
  bottom: 1px;
  left: 1px;
  z-index: -1;
}

/* Portfolio Styles */

.portfolio-img svg {
  fill: var(--lighter-black);
  width: 100%;
}

.portfolio-img {
  -webkit-transform: translateY(5em);
  transform: translateY(5em);
}

.section-lead {
  margin-bottom: 60px;
}

/* Social Styles */
#social-contact {
  cursor: pointer;
}

/* Contact Form Styles */

fieldset {
  border: none;
  padding: 0;
}

textarea {
  resize: none;
}

input,
textarea,
button {
  background: var(--white);
  border: 5px solid var(--lighter-black);
  border-radius: 4px;
  padding: 1em;
  width: 100%;
}

input:active,
textarea:active {
  outline: var(--red);
}

form label {
  display: block;
  font-weight: bold;
}

.contact-form {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

#contact-form-no-bots,
#contact-form-message,
#contact-form-submit {
  grid-column: 1 / -1;
}

#contact-form-submit {
  background-color: var(--lighter-black);
  color: var(--white);
  cursor: pointer;
  font-weight: bold;
  transition: background 0.3s ease-in-out, color 0.3s ease-in-out;
}

#contact-form-submit:hover {
  background-color: var(--white);
  color: var(--lighter-black);
}

#contact-form-submit:active {
  background-color: var(--red);
  color: var(--lighter-black);
}

/* Footer Styles */
footer {
  background: var(--black);
  color: var(--white);
  padding: 20px 0;
  text-align: center;
}

/* General Styles */
.dark-bg {
  background: var(--lighter-black);
  color: var(--white);
}

.dark-bg a {
  color: var(--white);
  transition: all 0.4s cubic-bezier(0, 1, 0.3, 1);
}

.dark-bg a:hover {
  color: var(--black);
}

/*/////////////////////////////////
// Animation Styles
/////////////////////////////////*/

/* Header */
header {
  opacity: 0;
  -webkit-transition: opacity 0.5s 0.25s ease-out;
  transition: opacity 0.5s 0.25s ease-out;
}

header.is-visible {
  opacity: 1;
}

.main-photo {
  -webkit-transform: scale(0.8);
  transform: scale(0.8);
}

.heading {
  -webkit-transform: translate(-50%, calc(-50% + 5em));
  transform: translate(-50%, calc(-50% + 5em));
}

.is-visible .main-photo {
  -webkit-transform: none;
  transform: none;
}

.is-visible .heading {
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.main-photo,
.heading {
  -webkit-transition: -webkit-transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
  transition: -webkit-transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
  transition: transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1),
    -webkit-transform 4s 0.25s cubic-bezier(0, 1, 0.3, 1);
  will-change: transform;
}

/* Icons Grid List / Portfolio */

.grid-list,
.portfolio-img {
  opacity: 0;
  -webkit-transition: opacity 0.3s 0.25s ease-out,
    -webkit-transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1);
  transition: opacity 0.3s 0.25s ease-out,
    -webkit-transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1);
  transition: transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out;
  transition: transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1),
    opacity 0.3s 0.25s ease-out,
    -webkit-transform 1.5s 0.25s cubic-bezier(0, 1, 0.3, 1);
  will-change: transform, opacity;
}

.grid-list.slide-left {
  -webkit-transform: translateX(-4em);
  transform: translateX(-4em);
}

.grid-list.slide-right {
  -webkit-transform: translateX(4em);
  transform: translateX(4em);
}

.grid-list.is-visible {
  opacity: 1;
  -webkit-transform: translateX(0);
  transform: translateX(0);
}

.portfolio-img.is-visible {
  opacity: 1;
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

/*/////////////////////////////////
// Media Queries
/////////////////////////////////*/

@media only screen and (max-width: 700px) {
  .grid-list {
    grid-template-columns: repeat(3, minmax(100px, 1fr));
  }
}

@media only screen and (max-width: 600px) {
  header {
    min-height: 800px;
    overflow: hidden;
    position: relative;
  }

  .main-photo {
    top: 0;
    left: 0;
  }

  .heading {
    top: 50%;
    width: 20em;
  }

  .intro {
    font-size: 6em;
  }

  .lead {
    font-size: 1.5em;
    width: 100%;
  }

  .grid-list {
    grid-template-columns: repeat(2, minmax(100px, 1fr));
  }
}

@media only screen and (max-width: 550px) {
  .contact-form {
    grid-template-columns: 1fr;
  }
}

@media only screen and (max-width: 450px) {
  h2 {
    font-size: 3.7em;
  }

  .contact-form {
    grid-template-columns: 1fr;
  }
}

              
            
!

JS

              
                // Scroll function from Donovan Hutchinson's Level Up Your CSS Animation Skills Udemy course
// Detect request animation frame
const scroll =
  window.requestAnimationFrame ||
  // IE Fallback
  function (callback) {
    window.setTimeout(callback, 1000 / 60);
  };
const elementsToShow = document.querySelectorAll(".show-on-scroll");

function loop() {
  elementsToShow.forEach(function (element) {
    if (isElementInViewport(element)) {
      element.classList.add("is-visible");
    } else {
      element.classList.remove("is-visible");
    }
  });

  scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826
function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  const rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0 && rect.bottom >= 0) ||
    (rect.bottom >=
      (window.innerHeight || document.documentElement.clientHeight) &&
      rect.top <=
        (window.innerHeight || document.documentElement.clientHeight)) ||
    (rect.top >= 0 &&
      rect.bottom <=
        (window.innerHeight || document.documentElement.clientHeight))
  );
}

// Smooth scroll function
const headerBtn = document.getElementById("header-btn");
const socialContact = document.getElementById("social-contact");
const contactForm = document.getElementById("contact");

function scrollToForm() {
  contactForm.scrollIntoView({ behavior: "smooth" }); // Top
}

headerBtn.addEventListener("click", scrollToForm);
socialContact.addEventListener("click", scrollToForm);

// No bots!
const contactFormNoBots = document.getElementById("contact-form-no-bots");
contactFormNoBots.parentNode.removeChild(contactFormNoBots);

              
            
!
999px

Console