123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <html>
  <head>
    <title>Faddah Wolf Portfolio</title>
  </head>
  <body>
    <!-- Navbar -->
    <nav class="navbar navbar-default sticky-top navbar-light" id="top">
      <div class="container-fluid" id="nav-animation">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header nav-title-spacing">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
          <a class="navbar-brand" href="#">
            <img src="https://s6.postimg.org/n3w41idfl/Faddah_FF_Avatar.jpg" class="img-fluid img-circle" id="brand-icon" height="64px" alt="Brand Icon Cartoon Pic of Faddah Wolf."/>
          </a>
          <p id="nav-title">
            <em>The Portfolio of Faddah Wolf</em>
          </p>
        </div>
        <div class="collapse navbar-collapse">
          <div class="nav navbar-nav pull-right">
            <div class="navbar-right-side">
              <div class="navbar-search pull-left">
                <!-- <form class="navbar-form search-box" role="search">
                  <div class="form-group">
                    <input type="text" class="form-control navbar-right" id="search-box" placeholder="Search">
                  </div>
                  <button type="submit" class="btn btn-success" id="search-button" onclick="doSearch(this.form.Query);">Get It!</button>
                </form> -->
              </div>
              <div class="btn-group navbar-buttons">
                <button type="button" class="btn btn-success about-btn">About <span class="glyphicon glyphicon-arrow-down"></span></button>
                <button type="button" class="btn btn-success portfolio-btn">Portfolio <span class="glyphicon glyphicon-arrow-down"></span></button>
                <button type="button" class="btn btn-success contact-btn">Contact <span class="glyphicon glyphicon-arrow-down"></span></button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </nav>
    <!-- End Navbar -->
    <!-- Begin Header/Jumbotron -->
    <header>
      <hgroup>
        <div class="jumbotron portfolio-header">
          <div class="container vcenter text-center">
            <h1 style="color: cornsilk">Portfolio</h1>
            <p>Faddah Wolf</p>
            <div class="btn-group navbar-buttons">
              <button type="button" class="btn btn-primary about-btn">About <span class="glyphicon glyphicon-arrow-down"></span></button>
              <button type="button" class="btn btn-primary portfolio-btn">Portfolio <span class="glyphicon glyphicon-arrow-down"></span></button>
              <button type="button" class="btn btn-primary contact-btn">Contact <span class="glyphicon glyphicon-arrow-down"></span></button>
            </div>
          </div>
        </div>
      </hgroup>
    </header>
    <!-- End Jumbotron Portfolio Header -->
    <!-- Begin About/Bio section -->
    <div class="about" id="about">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-6 about-pic">
            <a href="https://codepen.io/faddah/" alt="">
              <img src="https://s6.postimg.org/xul49b5vl/84_A82389_C0_FF_45_F6_A8_F5_E84475463_D72.jpg" alt="Photo of Faddah Wolf" />
            </a>
          </div>
          <div class="col-md-6 center-block bio">
            <h2 class="text-center">Faddah Wolf</h2>
            <ul>
              <li>
                <h4><em>zen dawg medi-'tater in pdx</em></h4></li>
              <li>
                <h4><em>techno-geek — HTML5, CSS3, JavaScript, jQuery, Node.JS, Express.JS, Angular.JS, React.JS, WordPress, etc.</em></h4></li>
              <li>
                <h4><em>gypsy-jazzer/djangophile</em></h4></li>
              <li>
                <h4><em>yoga deep-fried prawna</em></h4></li>
              <li>
                <h4><em>bicycle guy</em></h4></li>
              <li>
                <h4><em>pleasure activist</em></h4></li>
              <li>
                <h4><em>beer snob...</em></h4></li>
            </ul>
          </div>
        </div>
        <button type="button" class="btn btn-default top-btn" value="Back To Top">Back To Top <span class="glyphicon glyphicon-arrow-up"></span></button>
      </div>
    </div>
    <!-- End About/Bio section -->
    <!-- Begin Portfolio section -->
    <div class="portfolio" id="portfolio">
      <div class="row">
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail span4">
            <iframe src="https://codepen.io/faddah/full/qRXmLy/"></iframe>
            <div class="caption">
              <h3>Tribute Page to Django Reinhardt in HTML &amp; CSSS</h3>
              <p>First Free Code Camp Project — A Simple Tribute Page, this one to Django Reinhardt, in HTML5 &amp; CSS3.</p>
              <p><a href="https://codepen.io/faddah/full/qRXmLy/" class="btn btn-primary" role="button" target="_blank">Take Me There</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail span4">
            <iframe src="https://codepen.io/faddah/full/GjvGOg/"></iframe>
            <div class="caption">
              <h3>React Calc</h3>
              <p>A simple calculator app done in React.JS.</p><br /><br />
              <p><a href="https://codepen.io/faddah/full/GjvGOg/" class="btn btn-primary" role="button" target="_blank">Take Me There</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail span4">
            <iframe src="http://martianartstattoo.com/" alt="The Martian Arts Tattoo Studio Web Site"></iframe>
            <div class="caption">
              <h3>Martian Arts Tattoo Studio Web Site</h3>
              <p>Web Site for small Portland Business featuring art galleries for each studio Artist, done in WordPress using NavThemes TheWestPro theme derived as a child theme.</p>
              <p><a href="http://martianartstattoo.com/" class="btn btn-primary" role="button" target="_blank">Take Me There</a></p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail span4">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVhMmYyY2QwYzcgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWEyZjJjZDBjNyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44NTkzNzUiIHk9IjEwNS4xIj4yNDJ4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+"
              alt="...">
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>Listicle retro fam direct trade echo park gentrify. Squid lyft vegan sartorial, tilde meggings yr. Thundercats authentic neutra, single-origin coffee lomo trust fund salvia food truck.</p>
              <p><a href="#" class="btn btn-primary" role="button">Take Me There</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail span4">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVhMmYyY2QwYzcgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWEyZjJjZDBjNyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44NTkzNzUiIHk9IjEwNS4xIj4yNDJ4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+"
              alt="...">
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>Listicle retro fam direct trade echo park gentrify. Squid lyft vegan sartorial, tilde meggings yr. Thundercats authentic neutra, single-origin coffee lomo trust fund salvia food truck.</p>
              <p><a href="#" class="btn btn-primary" role="button">Take Me There</a></p>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-4">
          <div class="thumbnail span4">
            <img src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjQyIiBoZWlnaHQ9IjIwMCIgdmlld0JveD0iMCAwIDI0MiAyMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MjAwCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVhMmYyY2QwYzcgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxMnB0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWEyZjJjZDBjNyI+PHJlY3Qgd2lkdGg9IjI0MiIgaGVpZ2h0PSIyMDAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI4OS44NTkzNzUiIHk9IjEwNS4xIj4yNDJ4MjAwPC90ZXh0PjwvZz48L2c+PC9zdmc+"
              alt="...">
            <div class="caption">
              <h3>Thumbnail label</h3>
              <p>Listicle retro fam direct trade echo park gentrify. Squid lyft vegan sartorial, tilde meggings yr. Thundercats authentic neutra, single-origin coffee lomo trust fund salvia food truck.</p>
              <p><a href="#" class="btn btn-primary" role="button">Take Me There</a></p>
            </div>
          </div>
        </div>
      </div>
      <button type="button" class="btn btn-default top-btn" value="Back to Top">Back To Top <span class="glyphicon glyphicon-arrow-up"></span></button>
    </div>
    <!-- End Portfolio section -->
    <!-- Begin Contact section -->
    <div class="contact" id="contact">
      <div class="container-fluid center-block">
        <div class="row">
          <ul>
            <li>
              <a href="http://lnked.in/faddah/" class="icon-17 linkedin" title="LinkedIn" target="_blank">
                <svg viewBox="0 0 512 512">
                      <path d="M186.4 142.4c0 19-15.3 34.5-34.2 34.5 -18.9 0-34.2-15.4-34.2-34.5 0-19 15.3-34.5 34.2-34.5C171.1 107.9 186.4 123.4 186.4 142.4zM181.4 201.3h-57.8V388.1h57.8V201.3zM273.8 201.3h-55.4V388.1h55.4c0 0 0-69.3 0-98 0-26.3 12.1-41.9 35.2-41.9 21.3 0 31.5 15 31.5 41.9 0 26.9 0 98 0 98h57.5c0 0 0-68.2 0-118.3 0-50-28.3-74.2-68-74.2 -39.6 0-56.3 30.9-56.3 30.9v-25.2H273.8z"/>
                    </svg>
                <!--[if lt IE 9]><em>LinkedIn</em><![endif]-->
              </a>
            </li>
            <li>
              <a href="https://codepen.io/faddah/" class="icon-4 codepen" title="CodePen" target="_blank">
                <svg viewBox="0 0 512 512">
                      <path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/>
                    </svg>
                <!--[if lt IE 9]><em>CodePen</em><![endif]-->
              </a>
            </li>
            <li>
              <a href="https://github.com/faddah" class="icon-13 github" title="GitHub" target="_blank">
                <svg viewBox="0 0 512 512">
                      <path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"/>
                    </svg>
                <!--[if lt IE 9]><em>GitHub</em><![endif]-->
              </a>
            </li>
            <li>
              <a href="http://stackoverflow.com/users/2255638/faddah" class="icon-23 stackoverflow" title="StackOverflow" target="_blank">
                <svg viewBox="0 0 512 512">
                      <path d="M294.8 361.2l-122 0.1 0-26 122-0.1L294.8 361.2zM377.2 213.7L356.4 93.5l-25.7 4.5 20.9 120.2L377.2 213.7zM297.8 301.8l-121.4-11.2 -2.4 25.9 121.4 11.2L297.8 301.8zM305.8 267.8l-117.8-31.7 -6.8 25.2 117.8 31.7L305.8 267.8zM321.2 238l-105-62 -13.2 22.4 105 62L321.2 238zM346.9 219.7l-68.7-100.8 -21.5 14.7 68.7 100.8L346.9 219.7zM315.5 275.5v106.5H155.6V275.5h-20.8v126.9h201.5V275.5H315.5z"/>
                    </svg>
                <!--[if lt IE 9]><em>StackOverflow</em><![endif]-->
              </a>
            </li>
            <li>
              <a href="https://www.instagram.com/faddah/" class="icon-15 instagram" title="Instagram" target="_blank"><svg viewBox="0 0 512 512">
                    <g>
                      <path d="M256 109.3c47.8 0 53.4 0.2 72.3 1 17.4 0.8 26.9 3.7 33.2 6.2 8.4 3.2 14.3 7.1 20.6 13.4 6.3 6.3 10.1 12.2 13.4 20.6 2.5 6.3 5.4 15.8 6.2 33.2 0.9 18.9 1 24.5 1 72.3s-0.2 53.4-1 72.3c-0.8 17.4-3.7 26.9-6.2 33.2 -3.2 8.4-7.1 14.3-13.4 20.6 -6.3 6.3-12.2 10.1-20.6 13.4 -6.3 2.5-15.8 5.4-33.2 6.2 -18.9 0.9-24.5 1-72.3 1s-53.4-0.2-72.3-1c-17.4-0.8-26.9-3.7-33.2-6.2 -8.4-3.2-14.3-7.1-20.6-13.4 -6.3-6.3-10.1-12.2-13.4-20.6 -2.5-6.3-5.4-15.8-6.2-33.2 -0.9-18.9-1-24.5-1-72.3s0.2-53.4 1-72.3c0.8-17.4 3.7-26.9 6.2-33.2 3.2-8.4 7.1-14.3 13.4-20.6 6.3-6.3 12.2-10.1 20.6-13.4 6.3-2.5 15.8-5.4 33.2-6.2C202.6 109.5 208.2 109.3 256 109.3M256 77.1c-48.6 0-54.7 0.2-73.8 1.1 -19 0.9-32.1 3.9-43.4 8.3 -11.8 4.6-21.7 10.7-31.7 20.6 -9.9 9.9-16.1 19.9-20.6 31.7 -4.4 11.4-7.4 24.4-8.3 43.4 -0.9 19.1-1.1 25.2-1.1 73.8 0 48.6 0.2 54.7 1.1 73.8 0.9 19 3.9 32.1 8.3 43.4 4.6 11.8 10.7 21.7 20.6 31.7 9.9 9.9 19.9 16.1 31.7 20.6 11.4 4.4 24.4 7.4 43.4 8.3 19.1 0.9 25.2 1.1 73.8 1.1s54.7-0.2 73.8-1.1c19-0.9 32.1-3.9 43.4-8.3 11.8-4.6 21.7-10.7 31.7-20.6 9.9-9.9 16.1-19.9 20.6-31.7 4.4-11.4 7.4-24.4 8.3-43.4 0.9-19.1 1.1-25.2 1.1-73.8s-0.2-54.7-1.1-73.8c-0.9-19-3.9-32.1-8.3-43.4 -4.6-11.8-10.7-21.7-20.6-31.7 -9.9-9.9-19.9-16.1-31.7-20.6 -11.4-4.4-24.4-7.4-43.4-8.3C310.7 77.3 304.6 77.1 256 77.1L256 77.1z"/><path d="M256 164.1c-50.7 0-91.9 41.1-91.9 91.9s41.1 91.9 91.9 91.9 91.9-41.1 91.9-91.9S306.7 164.1 256 164.1zM256 315.6c-32.9 0-59.6-26.7-59.6-59.6s26.7-59.6 59.6-59.6 59.6 26.7 59.6 59.6S288.9 315.6 256 315.6z"/>
                      <circle cx="351.5" cy="160.5" r="21.5"/>
                    </g></svg><!--[if lt IE 9]><em>Instagram</em><![endif]-->
                  </a>
            </li>
            <li>
              <a href="https://www.twitter.com/yuetsu/" class="icon-26 twitter" title="Twitter" target="_blank">
                <svg viewBox="0 0 512 512">
                      <path d="M419.6 168.6c-11.7 5.2-24.2 8.7-37.4 10.2 13.4-8.1 23.8-20.8 28.6-36 -12.6 7.5-26.5 12.9-41.3 15.8 -11.9-12.6-28.8-20.6-47.5-20.6 -42 0-72.9 39.2-63.4 79.9 -54.1-2.7-102.1-28.6-134.2-68 -17 29.2-8.8 67.5 20.1 86.9 -10.7-0.3-20.7-3.3-29.5-8.1 -0.7 30.2 20.9 58.4 52.2 64.6 -9.2 2.5-19.2 3.1-29.4 1.1 8.3 25.9 32.3 44.7 60.8 45.2 -27.4 21.4-61.8 31-96.4 27 28.8 18.5 63 29.2 99.8 29.2 120.8 0 189.1-102.1 185-193.6C399.9 193.1 410.9 181.7 419.6 168.6z"/>
                    </svg>
                <!--[if lt IE 9]><em>Twitter</em><![endif]-->
              </a>
            </li>
            <li>
              <a href="mailto:faddah@ialsowent.com" class="icon-8 email" title="Email">
                <svg viewBox="0 0 512 512">
                      <path d="M101.3 141.6v228.9h0.3 308.4 0.8V141.6H101.3zM375.7 167.8l-119.7 91.5 -119.6-91.5H375.7zM127.6 194.1l64.1 49.1 -64.1 64.1V194.1zM127.8 344.2l84.9-84.9 43.2 33.1 43-32.9 84.7 84.7L127.8 344.2 127.8 344.2zM384.4 307.8l-64.4-64.4 64.4-49.3V307.8z"/>
                    </svg>
                <!--[if lt IE 9]><em>Email</em><![endif]-->
              </a>
            </li>
          </ul>
        </div>
      </div>
      <button type="button" class="btn btn-default top-btn" value="Back to Top">Back To Top <span class="glyphicon glyphicon-arrow-up"></span></button>
    </div>
    <!-- End Contact section -->
    <!-- Begin Footer -->
    <footer>
      <div>
        <hr>
        <p class="text-center colophon">Designed, written & coded by <a href="https://github.com/faddah/" alt="Faddah Wolf's GitHub Repositories." target="blank_">Faddah Wolf</a>, &copy;<span id="cw-year"></span>.</p>
      </div>
    </footer>
    <!-- End Footer -->
  </body>
</html>
            
          
!
            
              /***** - Import Fonts Needed - *****/

@import url('https://fonts.googleapis.com/css?family=Raleway|Source+Sans+Pro');
/* Bootstrap Needed for Glyphicon fonts */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css');

/***** - Main HTML tag formatting - *****/

body {
  font-family: Raleway, Helvetica, sans-serif;
  background-color: #460904; /* #951c1c #C47714; */
  width: 100%;
}

p {
  font-family: 'Source Sans Pro', sans-serif;
}

span {
  font-family: 'Glyphicons Halflings';
  font-size: 1.0rem;
}

input[type="text"] {
  margin-right: .25%;
  background-color: teal;
  color: cornsilk;
}

button[type="submit"] {
  margin-left: 10px;
}

hr {
  color: cornsilk;
}

svg {
  height: 70%;
  width: 70%;
  stroke: cornsilk;
  fill: cornsilk;
}

footer {
  background-color: darkslategray;
  height: 75px;
}

footer > div > p > a {
  color: orange;
}

footer > div > p > a:hover {
  color: gold;
}

/***** - Set Main Section Dimensions - *****/

footer, .about, .portfolio, .contact {
  height: 100%;
  width: 100%;
}

/***** - Top Navbar Formatting - *****/

#top {
  height: 60px;
}

body > nav.navbar {
  background-color: #460904; /* #951c1c C47714; */
  border: none;
}

.navbar-right-side {
  padding-top: 2.25rem;
  vertical-align: middle;
}

nav > div > div > a.navbar-header {
  display: block;
}

.nav-title-spacing {
  width: 250px;
}

.search-box {
  margin-top: 0;
}

#button-row-nav, .btn-group.navbar-buttons {
  vertical-align: middle;
}

.btn.btn-primary, .btn.btn-success {
  margin: 0 10px;
  opacity: 0.5;
  transition: all .2s ease-in-out;
}

.btn.btn-primary:hover, .btn.btn-success:hover {
  transform: scale(1.15);
  opacity: 1.0;
}

.about-btn, .portfolio-btn, .contact-btn {
  
}

.top-btn {
  margin-left: 3rem;
  background: cornsilk;
}

#nav-animation {
  background-color: darkslategray;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  /* box-shadow: 10px -5px 12px #708090; */
  animation: slide-in 2.5s 1;
}

@keyframes slide-in { from { transform: translateX(100%); } to { transform: translateX(0%) } }

.navbar-header {
  height: 80px;
}

#nav-title {
  font-family: 'Source Sans Pro', sans-serif;
  color: cornsilk;
  font-size: 18px;
  text-align: center;
  padding-top: 4%;
}

#brand-icon {
  z-index: 1;
  margin-top: -12.5%;
  animation: fadein 4s 1;
}
@keyframes fadein { from { opacity: 0.0; } to { opacity: 1.0; } }

/***** - Header/Jumbotron Section Formatting - *****/

.portfolio-header {
  color: cornsilk;
  height: 75rem;
  padding: 2.5rem;
  background-image: url('https://s6.postimg.org/8brea67i9/Top_view.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: top center;
  background-color: teal;
  -webkit-border-radius: 2.5rem;
  -moz-border-radius: 2.5rem;
  -o-border-radius: 2.5rem;
  -ms-border-radius: 2.5rem;
  border-radius: 2.5rem;
}

/* .color-overlay {
    z-index: 1;
    background-color: rgba(0, 128, 128, 0.4);
    position: absolute;
    width: 100%;
} */

.vcenter {
  padding-top: .25rem;
}

/***** - About Section Formatting - *****/

/* Empty formatting for the button in jQuery action */
#about {
  
}

.about {
  height: absolute;
  background-color: darkslategrey;
  border-radius: 4rem;
  margin: 0rem 1rem 1rem 1rem;
}

div.col-md-6.about-pic {
  height: 135vh;
  width: 50%;
  float: right;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 0px;
  padding-top: 2rem;
  background-color: teal;
  border-left: 5px solid rgba(128,128,128,0.8);
  border-top-right-radius: 2.5rem;
  border-bottom-right-radius: 2.5rem;
}

div.col-md-6.about-pic > a {
  height: 100%;
  padding: 2rem;
  border-radius: 50%;
}

div.col-md-6.about-pic > a > img {
  /* vertical-align: middle; */
  /* margin-left: 20%; */
  float: none;
  height: 90%;
  width: 90%;
  border-radius: 50%;
  border: 4px solid cornsilk;
  box-shadow: 5px 5px 0px #460904, -5px -5px 0px #460904, 11px 11px 7px darkslategray;
}

.bio {
  height: 100%;
  width: 50%;
  float: left;
  background-color: darkslategrey;
  padding: 9rem 0rem 9rem 4rem;
  font-family: Raleway, Helvetica, sans-serif;
  color: cornsilk;
  border-top-left-radius: 2.5rem;
  border-bottom-left-radius: 2.5rem;
}

.bio > h2 {
  font-weight: 700;
  text-decoration: underline;
  margin-bottom: 2rem;
}

.bio > ul {
  margin-right: 6rem;
  padding: 3rem;
  background-color: teal;
  border: 4px solid #460904;
  border-radius: 5rem;
  box-shadow: 6px 6px 4px rgb(128,128,128);
}

.bio > button {
  /* margin-top: 20rem;
  margin-top: 3rem; */
  background-color: cornsilk;
}

/***** - Portfolio Section Formatting - *****/

.portfolio {
  background-color: darkslategray;
  border-radius: 2rem;
}

div.thumbnail {
  border-radius: 4rem;
  background-color: teal;
  box-shadow: 5px 5px 8px #c0c0c0;
}

div.thumbnail > div.caption {
  color: cornsilk;
}

div.thumbnail > img, div.thumbnail > iframe {
  height: 200px;
  width: 100%;
  border-top-left-radius: 4rem;
  border-top-right-radius: 4rem;
  display: block;
}

/***** - Contact Section  & Footer - *****/

.contact {
  margin: 1rem 0;
  background-color: teal;
  border-radius: 4rem;
}

div.contact > div.container-fluid.center-block > div.row > ul {
  padding: 2rem 0 0 0;
  margin-bottom: 0;
  display: flex;
  flex-direction: row;
  list-style: none;
  list-style-type: none;
}

.colophon {
  font-family:  'Source Sans Pro', sans-serif;
  color: cornsilk;
  padding: 1.5rem 0;
}
            
          
!
            
              $(function() {
  let portfolioHeader = $('.portfolio-header').position().top;
  console.log(portfolioHeader);
  $('.about-btn').on('click touch', function() {
    const about = $('#about').position().top;
    console.log(about);
    $('html, body').animate(
      {
        scrollTop: about
      }, 600, 'easeOutCirc', () => {console.log('livin\' it up while i\'m goin\' down!');});
  });
  $('.portfolio-btn').on('click touch', function(e) {
    const portfolio = $('#portfolio').position().top;
    console.log(portfolio);
    $('html, body').animate(
      {
        scrollTop: portfolio
      }, 600, 'easeOutCirc', () => {console.log('livin\' it up while i\'m goin\' down!');});
  });
  $('.contact-btn').on('click touch', function(e) {
    const contact = $('#contact').position().top;
    console.log(contact);
    $('html, body').animate(
      {
        scrollTop: contact
      }, 600, 'easeOutCirc', () => {console.log('livin\' it up while i\'m goin\' down!');});
  });
  $('.top-btn').on('click touch', function(e) {
    const top = $('#top').position().top;
    console.log(top);
    $('html, body').animate(
      {
        scrollTop: top
      }, 600, 'easeOutCirc');
  });
  const startYear = 2017;
  let thisYear = (new Date).getFullYear()
  if(thisYear === startYear) {
    $('#cw-year').html(startYear).css('font-size', '13px');
  } else {
    $('#cw-year').html(startYear + '-' + thisYear).css('font-size', '13px');;
  }; 
});

/*  *  *  *  *  *  *  *  *  *

To fix —
Navbar —
√ •  do animation so buttons on left are display:none until animation ends, the quickly fade in with display:block or display:flex.
•  make search button/controller work or get rid of search

Header —
•  If it's possible to round the corners of the background pic itself, do it.

About —
•  fix formatting on left side
   -  darkslategrey div goes all the way to the bottom of containing div.
   -  "Back To Top" button goes to the bottom of that div too.
   –  fix spacing/centering on name
   –  fix spacing/centering on bullet points
•  fix formatting on right side
   -  center pic vertically
   -  center pic horizontally
   √ -  get rid of failed red border
   -  add red border & shadow in using multiple box shadows
   
Portfolio —
•  fix top overlapping square edges of iframe on Martian Arts thumbnail box

Contact —
•  Bootstrap Tooltips over icons w/ their i.d. (e.g., "Faddah's LinkedIn," "Faddah's Instagram," etc.)

*  *  *  *  *  *  *  *  *  */


/* function googleSearch() {
    var cx = '018300457617410184591:gbg3sp39sog';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
}; */

/*  *  *  *  *  *  *  *  *  *

function openDbRelativeURL( url, target ){
  //Check we have a target window;
  target = (target == null ) ? window : target;
  //Work out the path of the database;
  path = location.pathname.split('.nsf')[0] + '.nsf/';
  target.location.href = path + url;
}

function doSearch ( s ) {
  var regExp1 = /\bfield\b/;
  var regExp2 = /[(,),<,>,\[,\]]/;
  var str = s.value; if ( str == "" ){ 
    alert("Please be sure to enter something to search for.");
    s.focus();
  } else { 
    if ( typeof regExp1.source != 'undefined' ) //supports regular expression testing 
      if ( regExp1.test( str ) || regExp2.test( str ) ){
        var alrt = "Please note that you can not include:"; 
        alrt += "\n\nThe reserved word 'field'\nthe characters [, ], (, ), < or >";
        alrt += "\n\nin your search query!\n\nIf you are confident that you know";
        alrt += "\nwhat you are doing, then you can\nmanually produce the URL required."
        s.focus();
        return alert( alrt );
      }
    openDbRelativeURL("All?SearchView&Query=" + escape( str ) + "&start=1&count=10");
  }
}

*  *  *  *  *  *  *  *  *  */
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console