Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. 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

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en">

<head>
  <title>Portfolio by John van den Elzen</title>
  <meta charset="UTF-8" />
  <meta name="author" content="John van den Elzen" />
  <meta name="description" content="My personal portfolio" />
  <meta name="keywords" content="portfolio, css, html, javascript, jquery, bootstrap, webdesigner, front, end" />
  <meta name="viewport" content="width=device-width, initial-scal=1">
  <link href='https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
  <link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'>
  <script src="https://use.fontawesome.com/11896eaabf.js"></script>
  <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
</head>

<body>
  <div class="container-fluid">
    <!-- CONTAINER-FLUID DIV OPENING -->


    <!--
                    **************************
                        NAVIGATION SECTION
                    **************************
-->

    <nav class="navbar navbar-inverse navbar-fixed-top customnav">
      <div class="navbar-header">
        <a target="_blank" href="//www.digi-xp.com/" class="navbar-brand">
          <p id="navTitle">Digi-XP.com</p>
        </a>

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      </div>

      <div class="navbar-collapse collapse" id="navbar">
        <ul class="nav navbar-nav">
          <li><a href="#" class="slide-toggle-story naventry">My Story</a></li>
          <li><a href="#" class="slide-toggle-port naventry">Portfolio</a></li>
          <li><a href="#" class="slide-toggle-contact naventry">Contact Me</a></li>
        </ul>


        <ul class="nav navbar-nav navbar-right">

          <!-- BEGINOF IMPLEMENT -->
          <li class="dropdown">
            <a href="#" class="dropdown-toggle naventry" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Social Media <span class="caret"></span></a>

            <ul class="dropdown-menu customnav">
              <!-- ENDOF IMPLEMENT -->

              <li><a class="naventry" target="_blank" href="https://www.facebook.com/profile.php?id=100012612877886"><i class="fa fa-facebook-official" aria-hidden="true"></i> Facebook</a></li>
              <li><a class="naventry" target="_blank" href="https://www.linkedin.com/in/john-van-den-elzen-65b815123"><i class="fa fa-linkedin-square" aria-hidden="true"></i> LinkedIn</a></li>
              <li><a class="naventry" target="_blank" href="https://github.com/John102"><i class="fa fa-github-square" aria-hidden="true"></i> Github </a></li>
              <li><a class="naventry" target="_blank" href="https://codepen.io/John102/#"><i class="fa fa-codepen" aria-hidden="true"></i> Codepen</a></li>
            </ul>
          </li>
        </ul>
      </div>

    </nav>

    <!--
                    **************************
                       MAIN CONTENT SECTION
                    **************************
-->

    <section>

      <div class="row" id="contentrow">
        <!-- CONTENT ROW (MAIN DIV) -->

        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
          <!-- CONTENT ROW (MAIN GRID DIV) -->

<!-- DIGITAL JOHN IMAGE GRID (4/12) -->

          <div class="col-sm-4 col-md-4 col-lg-4 visible-sm visible-md visible-lg">

            <img id="digitaljohn" class="img-responsive pull-right" src="//www.digital-john.nl/external_images/portfolio/digitaljohn_3.png" alt="Digital John Portrait" />

          </div>


          <!--
                    **************************
                      BEGINOF NESTED BUBBLES
                    **************************
-->

          <div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
 
 <!--
                    **************************
                          INTRODUCTION PIC
                    **************************
-->
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
            
              <div id="intropic">
              <img class="img-responsive" id="intropicture" title="Click me to remove me!" src="//www.digital-john.nl/external_images/portfolio/intropic.png" alt="Welcome to my digital hangout!" />
              </div>              
            </div>
            <!--
                    **************************
                          STORY BUBBLE
                    **************************
-->

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">


              <div id="textbox-story">
                <div class="row textbox">

                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">

                    <p class="shout">Wow, it's a beautiful sunny day out here on the internet!</p>
                    <p>Oh... well hello there! First of all, welcome! How nice of you to take a minute of your time to check out my personal portfolio. My name is John van den Elzen and I am currently studying webdevelopment (<i>HTML, CSS, Javascript</i>).
                      My goal is to earn the full stack certification at <a target="_blank" id="naventry" href="//www.freecodecamp.com/">freecodecamp.com</a> by the end of 2017 and land a dream job as a webdeveloper at which I can continue to develop
                      my skills and put them into useful practice!</p>
                    <p>In the meanwhile, keep visiting my portfolio on a regular basis to ensure you're not missing out on any of my projects.</p>
                    <p> <button type="button" class="btn btn-success btn-lg slide-toggle-moreinfo slide-toggle-story"> <span class="glyphicon glyphicon-paperclip"></span> Tell me more about you John!</button></p>

                  </div>
                </div>

                <div class="row textbox">

                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <p class="text-right"><a href="#" class="slide-toggle-story"><span class="glyphicon glyphicon-remove"></span> Close </a></p>
                  </div>

                </div>
              </div>
            </div>


            <!--
                    **************************
                         MORE INFO BUBBLE
                    **************************
-->

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div id="textbox-moreinfo">
                <div class="row textbox">
                  <div class="col-xs-12 col-sm-5 col-md-5 col-lg-5">

                    <img class="img-responsive center-block" src="//www.digital-john.nl/external_images/portfolio/digitaljohn.png" />

                  </div>
                  <div class="col-xs-12 col-sm-7 col-md-7 col-lg-7">
                    <p class="shout">My Story</p>
                    <p> Well allright, allright... let's dive a little into my past... but not too far... or you'll get lost!</p>
                    <p> I was born in the year 1986 in a city called Breda in the southern part of the Netherlands. Growing up I have always been surrounded by computers and gaming consoles because my father really enjoyed the virtual age as much as I currently
                      do. At the age of 13 my father gave me my first Personal Computer. I spent hours and hours on that machine nearly every day! As I grew more experienced into computing and internet usage in general I started to develop a need for
                      building websites because to me, building your own website is like expressing your creativity and feelings and share them worldwide. Beside these factors it was such an awesome skill to have because you were allowed to join a whole
                      bunch of online gaming clans just for your webdevelopment and webdesign skills.</p>

                    <p>So how did I start practicing my development skills?</P>

                    <p>Well back in the days I found out that if I ripped HTML code from existing websites and stored them locally on my PC I could actually change attributes of the HTML elements and completely change the front end of the webpage. I could
                      even display that page locally without hosting it on a webserver! It was like magic... and it still is! Back then the ripped HTML codes together with the 'most commonly used search engine' (<i>Altavista I believe</i>) were my holy
                      teachers.</p>

                    <p>At the age of 16 I quit college to attend an IT education specifically because of my interests. It was a bad move in general because I was doing quite well in college and could have finished it easily but my motivation for an IT education
                      got to me. Despite the fact that IT meant and still means a whole lot to me I didn't finish the second year of my IT education. Young (18) and ignorant as I was I quit my education because of a few setbacks. The regrets I have nowadays
                      are endlessly miserable.</p>

                    <p>By the age of 20 I decided to go back to school and graduate for sure this time but, by the time I had everything figured out, my girlfriend and I became pregnant. The consequence of this situation meant 'no education for me'. I had
                      to keep my job and make money to provide for my family.</p>

                    <p>As the years passed by I became older and more experienced in life in general and slowly but surely it got to me. <span class="emphasise">The dream that I once had</span> to become a webdeveloper had been pushed away in a dark place
                      on the back of my mind because life happened to me. But... what of that dream? There must still be an option for me to realize it. How can I just ignore what I want the most? And I can't any longer. The idea that I will have a job
                      that I never dreamt about while I could actually be living my dream.</p>
                    <p>I will fight for my dream and I'm gonna make it! <span class="emphasise">I WILL be a webdeveloper!</span></p>


                  </div>
                </div>
                <div class="row textbox">
                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <p class="text-right"><a href="#" class="slide-toggle-moreinfo"><span class="glyphicon glyphicon-remove"></span> Close </a></p>
                  </div>
                </div>


              </div>
            </div>
            <!-- CONTENT GRID (8/12) -->


            <!--
                    **************************
                        PORTFOLIO BUBBLE
                    **************************
-->

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div id="textbox-port">
                <div class="row textbox">

                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <p class="shout text-center">Check out my projects!</p>

                    <div class="row text-center">
                      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

                        <a target="_blank" href="https://codepen.io/John102/full/begeVv/">
                          <img src="//www.digital-john.nl/external_images/portfolio/thumb_tribut.png" class="img-thumb" alt="Tribute Page Project: Lemmy" />
                        </a>
                      </div>
                      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

                        <img src="//www.digital-john.nl/external_images/portfolio/thumb_soon.png" class="img-thumb" alt="Project: Coming Soon" />

                      </div>
                      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">

                        <img src="//www.digital-john.nl/external_images/portfolio/thumb_soon.png" class="img-thumb" alt="Project: Coming Soon" />

                      </div>
                    </div>
                  </div>
                </div>
                <div class="row textbox">

                  <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <p class="text-right"><a href="#" class="slide-toggle-port"><span class="glyphicon glyphicon-remove"></span> Close </a></p>
                  </div>

                </div>
              </div>
            </div>

            <!--
                    **************************
                         CONTACT BUBBLE
                    **************************
-->

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
              <div id="textbox-contact">
                <div class="row textbox">
                  <p class="shout">So you wish to stalk me?</p>

                  <form>
                    <div class="form-group">
                      <label for="contact_name"><p>What is your name?</p></label>
                      <input type="text" class="form-control" id="contact_name" placeholder="e.g. John" required>
                    </div>
                    <div class="form-group">
                      <label for="contact_email"><p>How do I contact you?</p></label>
                      <input type="email" class="form-control" id="contact_email" placeholder="e.g. ikben@digital-john.nl" required>
                    </div>
                    <div class="form-group">
                      <label for="contact_message"><p>Go crazy!</p></label>
                      <textarea class="form-control" rows="3" placeholder="Your message here." required></textarea>
                    </div>
                    <button type="submit" name="submit" class="btn btn-default">Send Message</button>
                  </form>
                </div>
                <div class="row textbox">
                  <p class="text-right"><a href="#" class="slide-toggle-contact"><span class="glyphicon glyphicon-remove"></span> Close </a></p>
                </div>
              </div>
            </div>

            <!-- ENDOF NESTED COLUMNS (BUBBLES) -->

          </div>
        </div>
      </div>

    </section>

    <!--
                    **************************
                          FOOTER SECTION
                    **************************
-->
    <footer>
      <div class="row footer navbar-fixed-bottom" id="footerrow">
        <div class="visible-sm visible-md visible-lg col-xs-12 col-sm-12 col-md-12">
          <p class="text-center footer">Code and design by John van den Elzen. If you would like to use any of my art, please feel free to contact me.</p>
        </div>
        <div class="visible-xs col-xs-12 col-sm-12 col-md-12">
          <p class="text-center footer">Code and design by John van den Elzen.</p>
        </div>
      </div>
    </footer>
  </div>
  <!-- CONTAINER-FLUID DIV CLOSING -->

</body>

</html>
              
            
!

CSS

              
                html,
body {
  height: 100%;
  background: #aab5ad;
  font-family: 'Yanone Kaffeesatz', sans-serif;
  background-image: url("//www.digital-john.nl/external_images/portfolio/backgroundone.png");
  background-repeat: repeat-x;
  background-attachment: fixed;
}
header, nav, aside, article, footer, section, main {
  display: block;
}

/** Font Properties **/
p#navTitle {
  font-size: 30px;
  color: #fff;
  text-shadow: 2px 2px 1px #000;
  font-family: 'Yanone Kaffeesatz', sans-serif;
}
a:link, a:active, a:visited {
  color: #86ad86;
}
a:hover {
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
  text-decoration: none;
}
a.naventry {
  font-size: 23px;
  color: #b9b9b9 !important;
  text-shadow: 2px 2px 1px #000;
}
a.naventry:hover {
  color: #c6dbc6 !important;
  text-shadow: 2px 2px 1px #000;
}
form {
  font-family: 'Arial', Sans-serif;
}
p {
  font-size: 14px;
  color: #000;
  font-family: 'Arial', Sans-serif;
  line-height: 25px;
}
label p {
  font-size: 15px;
}
p.shout {
  color: #fff;
  font-size: 30px;
  text-shadow: 2px 2px 1px rgba(0,0,0,0.5);
}
.emphasise {
  color: #86ad86;
  font-size: 14px;
}
p.footer {
  font-size: 13px;
  color: #707070;
}
/** DIV Sections **/
#contentrow {
  padding-top: 200px;
  padding-bottom: 200px;
}
#footerrow {
  background: #1c1c1c;
  padding-top: 10px;
}
/** Digital John Image **/
#digitaljohn {
  position: fixed;
  left: 420px;
}
/** THUMBNAILS **/
.img-thumb {
  width: 150px;
  height: 150px;
  border: 1px dashed rgba(0,0,0,0.5);
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0,0,0,0.5);
  margin: 20px;
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.img-thumb:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
/** Digital John Speech **/
.textbox {
  background: rgba(255,255,255,0.5);
  box-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 0px;
  border: 1px solid #fff;
  border-radius: 5px;
  margin: 5px;
}
#textbox-story {
  float: left;
  overflow: hidden;
  display: none;
}
#textbox-port {
  float: left;
  overflow: hidden;
  display: none;
}
#textbox-contact {
  float: left;
  overflow: hidden;
  display: none;
}
#textbox-moreinfo {
  float: left;
  overflow: hidden;
  display: none;
}
#intropic {
  float: center;
  overflow: hidden;
}
/** Top Navigation Properties **/
@media (max-width: 768px) {
  .navbar-header {
    float: none;
  }
  .navbar-toggle {
    display: block;
  }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
  }
  .navbar-collapse collapse {
    display: none!important;
  }
  .navbar nav {
    float: none!important;
    margin: 7.5px -15px;
  }
  .navbar-nav>li {
    float: none;
  }
  .navbar-nav>li>a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {
    display: block !important;
  }
}
.customnav {
  background: #303030;
  box-shadow: 0px 3px 1px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 3px 1px rgba(0,0,0,0.5);
  -webkit-box-shadow: 0px 3px 1px rgba(0,0,0,0.5);
}
.navbar-right {
  margin-right: 10px;
}
/** Forms **/
textarea {
  resize: none;
}
.btn {
margin-bottom: 10px;
}
              
            
!

JS

              
                $(document).ready(function(){
  
  $(".slide-toggle-story").click(function() {
    $("#textbox-story").slideToggle();
  });
  
  $(".slide-toggle-port").click(function() {
    $("#textbox-port").slideToggle();
  });
  
  $(".slide-toggle-contact").click(function() {
    $("#textbox-contact").slideToggle();
  });
  
  $(".slide-toggle-moreinfo").click(function() {
    $("#textbox-moreinfo").slideToggle();
  });
  
  $("#intropic").click(function() {
    $("#intropic").fadeOut(2500);
  });
  $("#intropicture").tooltip();
});
              
            
!
999px

Console