A Pen by Kris Gesling

HTML

            
              <!--
The brief:
Reverse Engineer - https://codepen.io/ThiagoFerreir4/full/eNMxEp

As a user, I can access all of the portfolio webpage's content just by scrolling.

As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.

As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)

As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.
-->
<!--    <?php

if($_POST["submit"]) {
    $recipient="hi@gez.bz";
    $adminemail="hi@gez.bz";
    $subject="Postcard via Gez.Bz";
    $sender=$_POST["user_name"];
    $senderEmail=$_POST["user_email"];
    $message=$_POST["user_message"];
    $header="From: " . $adminemail . "\r\n" . "Reply-To: " . $senderEmail . "\r\n";

    $mailBody="Name: $sender\nEmail: $senderEmail\n\n$message";

    mail($recipient, $subject, $mailBody, $header);

    $thankYou="<p>Thank you! Your message has been sent.</p>";
    echo ("<style>#contactme {display:none;}</style>");
}

?>-->
<div class="container-responsive">
<nav class="navbar navbar-default navbar-static-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-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="#">Kris Gesling</a>
    </div>
    <div class="collapse navbar-collapse" id="bs-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li class="active"><a href="#home">Home</a></li>
        <li><a href="#about">About<span class="sr-only">(current)</span></a></li>
        <li><a href="#portfolio">Portfolio</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="row" id="home" name="home">
  <div class="page-header col-xs-12 text-center">
    <h1>Creating change through collaboration<br><small>Software solutions built on mutual understanding</small></h1>
  </div>
  <div class="col-xs-12 text-center" id="primary-social">
    <a href="https://www.twitter.com/krisgesling" target="_blank" class="btn btn-default"><i class="fa fa-twitter"></i> Twitter</a>
    <a href="https://au.linkedin.com/in/krisgesling" target ="_blank" class="btn btn-default"><i class="fa fa-linkedin-square"></i> LinkedIn</a>
    <a href="https://github.com/krisgesling" target="_blank" class="btn btn-default"><i class="fa fa-github"></i> Github</a>
    <a href="https://www.freecodecamp.com/krisgesling" target="_blank" class="btn btn-default"><i class="fa fa-fire"></i> freeCodeCamp</a>
  </div>
</div>
<div class="row jumbotron" id="about" name="about">
  <div class="col-xs-8 col-xs-offset-2">
    <p>I am passionate about finding innovative solutions to complex problems through open dialogue and community collaborations.</p>
    <p>Writing code is just one way that I support such projects, but it is one of the most fun.</p>
    <p>Please take a look at some of my work and get in touch if you think I could be of help.</p>
  </div>
</div>
<div class="row" id="portfolio" name="portfolio">
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <a href="http://www.standwithjono.org" target="_blank"><img src="http://c.gez.bz/img/swj.png" alt="StandWithJono.org"></a>
      <div class="caption">
        <h3>StandWithJono.org</h3>
        <p>Created in collaboration with a diverse collective of campaign supporters. The 'Stand With Jono' campaign website was a central location for news and information. A simple interface to enable first time visitors to understand the campaign and stay involved, ensure supporters have tangible ways to contribute.</p>
        <p><span class="builtWith">Built with WordPress including Flickr and Mailchimp integration.</span></p>
        <p class="text-center"><a href="http://www.standwithjono.org" target="_blank" class="btn btn-primary text-right" role="button"><i class="fa fa-external-link"></i> Visit the site</a></p>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <a href="http://www.standwithjono.org" target="_blank"><img src="http://c.gez.bz/img/KnitYourRevoltTeam.png" alt="StandWithJono.org"></a>
      <div class="caption">
        <h3>Knit Your Revolt</h3>
        <p>Created in one day as a part of <a href="http://pressjam.net" target="_blank">PressJam</a>, a fun, fast and competitive event that brings not-for-profit groups together with developers, designers and other creatives for just 24 hours. The brief was to create a showcase of work, track upcoming events, and acknowledge community contributions in the lead up to the 2013 Australian federal election.</p>
        <p><span class="builtWith">Built with WordPress including custom plugin modifications.</span></p>
        <p class="text-center"><a data-toggle="modal" data-target="#KYRvideo" class="btn btn-primary text-right" role="button"><i class="fa fa-play"></i> Watch the video</a></p>
      </div>
    </div>
  </div>
  <div class="modal fade" id="KYRvideo" role="dialog">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-body">
          <p><a class="close text-right" data-dismiss="modal"><i class="fa fa-close"></i></a></p><br>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Bk9Oof_GYrs"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <a href="http://www.gez.bz"><img src="http://c.gez.bz/img/swj.png" alt="Gez.bz"></a>
      <div class="caption">
        <h3>Gez.bz</h3>
        <p>A clean and simple portfolio page to showcase my work and connect with the world at large.<br><span class="builtWith">Built with HTML5, PHP, CSS3 and Bootstrap.js.</span></p>
        <p class="text-center"><a href="https://codepen.io/krisgesling/pen/ZGdBpV" target="_blank" class="btn btn-primary text-right" role="button"><i class="fa fa-code"></i> Checkout the code</a></p>
      </div>
    </div>
  </div>
</div>
<div class="row" id="contact" name="contact">
  <div class="col-xs-12">
    <div class="panel">
      <div class="panel-body">
            <?=$thankYou ?>
                <form method="POST" action="index.php">
                    <div id="message">
                        <textarea id="msg" name="user_message" placeholder="Drop me a line, I'm always excited to talk about new possibilities and why things are the way they are." value="' . $_POST['user_message'] . '" autofocus></textarea>
                    </div>
                    <div id="to">
                        <label for="to">To:</label> 
                        <span id="recipient">Gez</span>
                    </div>
                    <div id="from">
                        <label for="name">from:</label>
                        <input type="text" id="name" name="user_name" placeholder="Your Name">
                    </div>
                    <div id="reply">
                        <label for="mail">reply via:</label>
                        <input type="email" id="mail" name="user_email" placeholder="your@somewhere.com">
                    </div>
                    <div class="button">
                        <button type="submit" name="submit" value="submit">Post it</button>
                    </div>
                </form>
            <p class="text-center fineprint">'Postcard from Ubud' respectfully stolen from <a href="https://wanderingseniors.wordpress.com/2012/02/21/postcard-from-bali-indonesia/" target="_blank">wanderingseniors.wordpress.com</a></p>
      </div>
    </div>
  </div>
</div>

<div class="row" id="footer">
  <nav class="navbar navbar-inverse navbar-static-bottom">
    <div class="container">
      <div class="text-right">
        <p>Stay in touch via <a href="mailto:hi@gez.bz" title="email"><i class="fa fa-envelope"></i></a> <a href="https://www.twitter.com/krisgesling" target="_blank" title="Twitter"><i class="fa fa-twitter" alt="Twitter"></i></a> <a href="https://au.linkedin.com/in/krisgesling" target ="_blank" title="LinkedIn"><i class="fa fa-linkedin-square" alt="LinkedIn"></i></a> <a href="https://github.com/krisgesling" target="_blank" title="Github"><i class="fa fa-github" alt="Github"></i></a> <a href="https://www.freecodecamp.com/krisgesling" target="_blank" title="Free Code Camp"><i class="fa fa-fire" alt="Free Code Camp"></i></a>
        </p>
      </div>
    </div>
  </div>
</div>
</div>

CSS

            
              .navbar-default, .navbar-static-top, .page-header {
  background-color: transparent;
  margin-bottom: 0;
  border:0;
}
.navbar-default .navbar-nav>li>a {
  color: #222;
}
.navbar-default .navbar-nav>li>a:hover {
  color: #fff;
}
.navbar-default .navbar-nav>.active>a {
  background-color: transparent;
  color: #fff;
}
.navbar-default .navbar-nav>.active>a:hover {
  color: #fff;
  background-color: transparent;
}
.navbar-default .navbar-brand {
  /*color:#333;*/
  font-size:2em;
}
body {
  background: #fff url('http://collabed.net/wp-content/uploads/mountain-bg.jpg') no-repeat fixed;
  background-size: cover;
  background-repeat:no-repeat;
  height: 100%;
}

#home{
  Padding: 10% 0 12% 0;
}
.row{
  /*margin-bottom: 40px;
  Height: 90%;*/
}
#primary-social a {
  margin: 0 10px 40px 10px;
}
#about {
  background: #000 url('https://c2.staticflickr.com/4/3679/13752381513_46aa6e8656_b.jpg') 0 0/100% no-repeat;
  color: #fff;
  padding: 15% 0 15% 0;
}
img {
  width: 100%;
}
#portfolio {
  margin:0 10px 0 10px;
}

.builtWith {
  font-style: italic;
}
/* Postcard form */
.panel {
	background: transparent;
  margin: 0 15% 0 15%;
}
@font-face{
  font-family : "handwriting";

  src : url('../font/journal.eot');
  src : url('../font/journal.eot?') format('eot'),
        url('../font/journal.woff') format('woff'),
        url('../font/journal.ttf') format('truetype');
}

@font-face{
  font-family : "typewriter";

  src : url('../font/veteran_typewriter.eot');
  src : url('../font/veteran_typewriter.eot?') format('eot'),
        url('../font/veteran_typewriter.woff') format('woff'),
        url('../font/veteran_typewriter.ttf') format('truetype');
}

form {
  /*position: relative;*/
  max-width: 100%;
  width  : 740px;
  height : 498px;
  margin : 0 auto;
  background: #FFF url('http://c.gez.bz/img/pc-background.jpg');
  box-shadow: 2px 2px 2px grey;
  font  : 21px sans-serif;

}
#to {
  position : absolute;
  left : 56.1%;
  top  : 235px;
 
  font : 1em "typewriter", sans-serif;
}

#from {
  position: absolute;
  left : 55.1%;
  top  : 280px;
}

#reply {
  position: absolute;
  left : 53%;
  top  : 330px;
}

#message {
  position: absolute;
  left : 26%;
  top  : 30px;
}
label {
  font : .8em "typewriter", sans-serif;
}
input, textarea, #recipient {
  font    : .9em/1.5em "handwriting", sans-serif;

  border  : none;
  padding : 0 10px;
  margin  : 0;
  width   : 214px;

  background: none;
}
input:focus, textarea:focus {
  background   : rgba(0,0,0,.1);
  border-radius: 5px;
  outline      : none;
}
input {
    height: 2.5em; /* for IE */
    vertical-align: middle; /* for IE */
}
textarea {
  display : block;

  padding : 10px;
  margin  : 10px 0 0 -10px;
  width   : 320px;
  height  : 360px;

  resize  : none;
  overflow: auto;
}

button {
  position     : absolute;
  left         : 60%;
  top          : 400px;
  padding      : 5px;
  font         : bold .6em sans-serif;
  border       : 2px solid #333;
  border-radius: 5px;
  background   : none;
  cursor       : pointer;

-webkit-transform: rotate(-1.5deg);
   -moz-transform: rotate(-1.5deg);
    -ms-transform: rotate(-1.5deg);
     -o-transform: rotate(-1.5deg);
        transform: rotate(-1.5deg);
}

button:after {
  content: " >>>";
}

button:hover,
button:focus {
  outline   : none;
  background: #333;
  color   : #FFF;
}
.fineprint {
  font-size: 0.8em;
}

/* Footer */
#footer>.navbar {
  margin:0;
  border:0;
  border-radius:0;
}
.navbar-inverse>div>div>p {
  margin: 0 auto;
  color: #fff;
}

JS

            
              $(document).ready(function() { 
});

999px

Loading ..................

Insecure Resource

About JavaScript Preprocessors

About External Resources

HTML

CSS

JS

Console

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Use npm Packages

Code Indentation

Save Automatically?

Auto-Updating Preview

HTML

CSS

JS

Console

Editor Commands

HTML Specific

Misc

Pen Actions