<!-- 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">© Copyright Karl Horning 2019</small>
</p>
</footer>/* 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;
}
}
// 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);
External CSS
External JavaScript
This Pen doesn't use any external JavaScript resources.