CodePen Embed - Portfolio

<header id="top-header">  
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <!--collapse button-->
        <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#collapseNav" 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> 
      </div>
      <div id="collapseNav" class="collapse navbar-collapse">
        <ul class="nav navbar-nav pull-right">
          <li><a href="#about" class="scrollable">About me</a></li>
          <li><a href="#portfolio" class="scrollable">Portfolio</a></li>
          <li><a href="#contact" class="scrollable">Contact</a></li>
        </ul>      
      </div>
    </div>     
  </nav> 
</header>
<div id="contentSection" class="container-fluid">
  <main>
    <section id="about">
      <div id="bg-overlay">
        <img src="https://scontent.fotp3-3.fna.fbcdn.net/v/t1.0-9/12019795_1061411970544636_7137443514902779471_n.jpg?oh=5f58b3e98ebc899c8e3a57957b43e81b&oe=599F9427" width="150" class="img-responsive">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer blandit dolor metus, nec malesuada augue facilisis nec. Duis feugiat nisi ligula, sit amet tempus metus dictum ut.</p>
      </div>
    </section>
    <hr>
    <section id="portfolio">
      <!-- ToDo: check css property 'clip' for cropping images -->
      <h2>Portfolio</h2>
      <div class="panel-group">
        <div id="images-grid">
          <div class="panel panel-default">
            <div class="individual-wrapper">
              <img src="http://i67.tinypic.com/2jcyepv.png" alt="no link provided" width="300" class="img-responsive"> 
              <p class="portfolio-descriptions">Wordpress theme modified for Wheels of Life moto club</p>
            </div>
            <div id="collapseOne" class="collapsible" role="tabpanel">
              Few modifications of a Wordpress theme. 
              <p><a href="http://wheelsoflife.ro">wheelsoflife.ro</a></p>
            </div>
          </div>

          <div class="panel panel-default">  
            <div class="individual-wrapper">
               <img src="http://i64.tinypic.com/sfwcqb.png" alt="no link provided" width="300" class="img-responsive"> 
               <p class="portfolio-descriptions">Social network-like site from zero</p> 
            </div>
            <div id="collapseTwo" class="collapsible" role="tabpanel">
              My attempt to build a social network site from scratch. Technologies used: PHP, MySQL, AJAX, jQuery, CSS, HTML, websockets (pusher.com)
              <p><a href="http://randomain.cf/public/index.php">social network-like</a></p>
            </div>
          </div>

          <div class="panel panel-default">
            <div class="individual-wrapper">
              <img src="http://i66.tinypic.com/nmmakh.png" alt="no link provided" width="300" class="img-responsive">
              <p class="portfolio-descriptions">Tribut page - FreeCodeCamp challenge</p>
            </div>
            <div id="collapseThree" class="collapsible" role="tabpanel">
              Page made with HTML, CSS(3), jQuery
              <p><a href="https://codepen.io/unendlichkeit/full/dRYXEW/">freeCodeCamp challenge - Tribute Page</a></p>
            </div>
          </div>  
        </div>
      </div>
    </section>
    <hr>
    <section id="contact">
      <h2>Contact</h2>
      <p>If you'd like to leave a message...</p>
      <form id="contact-form">
        <div class="row">
          <div class="col-xs-6">
            <label for="username">Name: </label><input type="text" name="username">
          </div>
          <div class="col-xs-6">
            <label for="usermail">Mail address: </label><input type="text" name="useremail">
          </div>
        </div>
        <div class="row">  
          <div class="col-xs-12">
            <label for="usermessage">Message: </label><textarea name="usermessage"></textarea>
          </div>
        </div>
        
        <div class="row">
          <div class="col-xs-12">
            <input type="submit" value="Send" name="submitMessage">
            <div id="submit-error"></div>
          </div>
        </div>
      </form>
    </section>
    <footer>
      <span class="social">Social links</span>
      <div class="social">
        <a href="#"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
        
        <a href="#"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
        
        <a href="#"><i class="fa fa-github" aria-hidden="true"></i></a>
      </div>
      <span id="author">When: 2017 / Who: IrinaB.</span>
    </footer>
  </main>
</div>

@import url('https://fonts.googleapis.com/css?family=Alex+Brush|Sofia');
@import url("https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css");

html, body { width: 100%; height:100%; margin:0; padding:0; position:relative; }
h2 
{
  font-family: Sofia;
  font-weight:600;
}
hr
{
  position:relative;
  border-top:1px solid black;
  margin-top:40px;
  margin-bottom:40px;
}
hr::after
{
  content:"";
  position:absolute;
  
  background:#fff url("https://s-media-cache-ak0.pinimg.com/originals/b3/3a/21/b33a213782e07f8a158db8cfd8f0c911.png") center no-repeat;
  background-size:50px 50px;
  display:block;
  width:60px;
  height:50px;
  top:-25px;
  left:50%;
  margin-left:-30px;
}
/** Header part **/
.navbar
{
  background-color:cadetblue;
  z-index:1;
}
.nav > li
{
  display:  inline-flex;
}
.navbar-header { height: 60px; }
.navbar-default .navbar-nav>li>a
{
  color:white;
  text-shadow: 0 -1px #99bdf7, 0 1px #042a68;
}
.navbar-default .navbar-nav>li>a:hover,navbar-default .navbar-nav>li>a:focus, navbar-default .navbar-nav>li>a:active
{
  color:rgb(85, 85, 85);
  text-shadow:none;
}
.navbar-default .navbar-nav > .active > a
{
  text-shadow:none;
}
.row { display:-webkit-box; }

.center-block
{
  display:block;
  margin:0 auto;  
}

/**main content part**/

  /* About section */
main {  }
#about
{
  margin: 60px -15px 20px -15px;
  text-align:center;
  font-family:"Alex Brush";
  font-size:25px;
  background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/21555/Melissani-cave-natural.jpg);
  background-size:cover;
  background-position:center center;
  background-attachment:fixed; 
  -webkit-background-attachment:fixed;
  height:30em;
}

#bg-overlay
{
  background: rgba(0,0,0,0.5) url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAACCAYAAACddGYaAAAAD0lEQVQIW2NkQABjRmQOAAM+AGkQsDBSAAAAAElFTkSuQmCC) repeat;
  height:inherit; 
  text-align:center;
  
}
#bg-overlay>img
{
  display:inline-block;
  margin-top:10px;
  border-radius:100%;
  border:1px solid gray;
}
#bg-overlay>p /* direct descendant selector (doesn't go deeper in the hierarchy) */ 
{
  padding: 15px 5px 15px 5px;
  width:90%;
  margin:0 auto;
  border-top:1px solid white;
  border-bottom:1px solid white;
  color:#dddddd;
  transform:translateY(2em);
}

  /* Portfolio section */
#portfolio
{
  margin-bottom:20px;
  text-align:center;
}
#portfolio h3 { margin-bottom: 20px; margin-top:50px;}
#portfolio .row
{
  margin-bottom:50px;
}
.panel-default
{
  position:relative;
  margin-top:25px;
  margin-bottom:20px !important;
  border:none;
  border-left:1px solid rgba(1, 84, 84, 0.3); 
  background:linear-gradient(90deg, rgba(194, 209, 209, 0.3) 1%, rgba(0, 0, 0, 0) 5%);
}
#portfolio img, #portfolio .individual-wrapper
{
  display:inline-block;
}
.individual-wrapper
{
  position:relative;
  border:1px dashed cadetblue;
  margin-top:5px;
  margin-bottom:5px;
  padding:5px;
}
.individual-wrapper p
{
  display:none;
}

.individual-wrapper:hover p
{
  display:block;
  color:white;
  padding-top:20%;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0, 0, 0, 0.5);
}

.collapsible
{
  display:inline-block;
  width:50%;
  ;
}
.hid { display:none; }

  /* Contact section */
#contact
{
  position:relative;
  height:500px;
  margin-bottom:20px;
  border-bottom:1px solid darkgray;
  box-sizing:border-box;
}
#contact .row { margin:0; }

form 
{ 
  padding:10px;
  border:1px solid gainsboro;
  border-bottom:none;
  border-radius:10px;
  font-size: 15px;
  font-family:Sofia;
}
input, textarea { width:100%;}
textarea
{
  resize:vertical;
}
input[type=submit]
{
  background-color:cadetblue;
  border:none;
  padding: 4px;
  color: white;
}
#contact::after
{
  position:absolute;
  bottom:-1px;
  right:0px;
/*   border-top: 20px solid #8FBC8F;
  border-left: 20px solid #8FBC8F;
  border-bottom: 20px solid transparent;
  border-right: 20px solid transparent; */
  background: -webkit-linear-gradient(-45deg, rgba(169, 169, 169, 0) 30%, rgba(169,169,169,0.9) 48%, rgba(169,169,169,0) 50%);
  background: linear-gradient(-45deg, rgba(255, 255, 255, 1) 30%, rgba(169,169,169,0.9) 48%, rgba(169,169,169,0) 50%);
  background-origin:border-box;
  box-shadow:inset 3px 3px 10px -2px darkgray;
  display:block;
  width:50px;
  height:50px;
  box-sizing:border-box;
  content:"";
}
/** Footer section **/
footer
{
  height:100px;
  position:relative;
  background:Bisque;
}

footer span, footer div
{
  position:absolute;
  top:40px;
  color:white;
  /*text shadow for IE<10 */
  filter: progid:DXImageTransform.Microsoft.Shadow(color=#996633,direction=45);
  text-shadow: 0px 0px 3px #996633, 0px 0px 3px #996633;
  font-size: 15px;
  font-family: Sofia;
}
footer .social { left:20px; }
footer div.social { top:70px; }
footer div.social a { color:white; }
footer div.social i { margin-right:10px; }
footer div.social i:hover { color:#996633; text-shadow:none;}
footer #author { right:20px; }

//make header top fixed while scrolling
var element = $("#top-header");
var headerTopOffset = element.offset().top;
var scrollOffset = 0;
var newHeaderOffset;
window.addEventListener("scroll", function()
{
  scrollOffset = window.pageYOffset;
  newHeaderOffset = headerTopOffset + scrollOffset;
  //adjust header top offset while scrolling
  element.offset({top: newHeaderOffset});
});

//hide menu list after click
$('.navbar-collapse ul li a').click(function() 
{
  $(".navbar-collapse").collapse("hide");
});

$(document).ready(function(){
  //test output of offset().top
  console.log($("#portfolio").offset().top);
  //scroll page to chosen section/navigation button+fix the problem with the offset because of the fixed navbar
  $("html, body").on("click", "a.scrollable", function(event){
    //console.log($(this).attr("href"));
    //console.log($($(this).attr("href")).offset().top);
    console.log($("#portfolio").offset().top);
    $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top-100 },1000);

    event.preventDefault();
  }); 
  
  //highlight menu items on scroll
  $("body").scrollspy({target: ".navbar", offset: 100});
  
  //slide to right for portfolio items' descriptions
  $(".collapsible").hide();
  $(".portfolio-descriptions").on("click", function(e)
  {
    $(this).parent().next().toggle("slide", 1000);
  });
  
  //contact form modifications:
  //add focus on fields on hover
  $("#contact-form input[type=text], #contact-form textarea").hover(
    function(){
      $(this).focus();
      $(this).prev().css({"color": "#015454"});
  }, function(){
      $(this).blur();
      $(this).prev().css({"color": "black"});
  });
  
  //print message on submit click
  $("#contact-form input[type=submit]").on("click", function(e){
    $(this).next().html("<p>The form doesn't have functionality! :p</p>").css("color","#015454");
    e.preventDefault();
  });
});

This Pen is owned by Irina on CodePen.

See more by @unendlichkeit on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

External CSS

External JavaScript