Portfolio Zipline

In this example below you will see how to do a Portfolio Zipline with some HTML / CSS and Javascript

Created for the freecodecamp zipine: Portfolio Zipline.

Thumbnail
This awesome code was written by edwin0258, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright edwin0258 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Portfolio Zipline</title>
  
  
  <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> 
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>



<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <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>
      <div class="navbar navbar-name text-center">Devin Miller</div>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="home" id="home">Home</a></li>
        <li><a href="home" id="about">About</a></li>
        <li><a href="home" id="portfolio">Portfolio</a></li>
        <li><a href="home" id="contact">Contact</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>






<a name="body1"></a>
<div class="body1 text-center">
  <h1>Devin's Web Design Studio</h1>
  <h4>Where Awesomeness Is Brought To Life.
  </h4>
  <hr>
  <div class="row">
    <a href="https://twitter.com/edwin0258">    <button class="btn">
          <i class="fa fa-twitter">
          </i> Twitter
      </button>
    </a>
    <a href="https://github.com/edwin0258">
      <button class="btn">
        <i class="fa fa-github">
        </i> Github
      </button>
    </a>
    <a href="https://www.linkedin.com/profile/view?id=AAMAABso2VYBtrcpNArC2ce9vMdNUKkVB6-Z0GI&trk=hp-identity-name">
      <button class="btn">
        <i class="fa fa-linkedin">
        </i> Linkedin
      </button>
    </a>
    <a href="https://freecodecamp.com/edwin0258">
      <button class="btn">
         <i class="fa fa-fire">
         </i> freeCodeCamp
      </button>
    </a>
  </div>
</div>
<a name="body2"></a>
<div class="body2">
  <div class="row">
    <div class="col-md-4 col-md-offset-1 col-sm-6 col-sm-offset-1 col-xs-offset-1" id="information-area">
      <h1>Devin's Web Design Studio</h1>
      <h4>Lorem ipsum<span style="color:white;">dolor sit</span> amet, consectetur adipiscing elit. Donec suscipit, nisi et elementum euismod, orci mi pulvinar eros, ac lacinia nisi augue pellentesque diam. Integer mollis erat ac dui fringilla aliquam. Pellentesque in imperdiet justo, ut maximus nisl. Quisque ipsum lectus, sagittis eu viverra non, faucibus a neque. Duis sit amet urna dolor. Pellentesque lacinia dignissim diam quis sollicitudin. Sed malesuada egestas justo nec volutpat.<h4>
    </div>
    <div class="image-container col-md-3 col-md-offset-2 col-sm-2 col-sm-offset-1">
       
      <img src="https://i.imgur.com/A8haXLq.jpg">
    </div>
  </div>
</div>
<a name="body3"></a>
<div class="body3 text-center center-block">
  <b><h1>Awesomeness Portfolio.</h1></b>
  <h4>Below you will find some of my recent works</h4>
      <div class="fluid container center-block text-center">
        <div class="row center-block">
          <div class="project-box col-md-4 col-sm-4 col-xs-12">
            <div class="overlay">
              <i class="fa fa-fire"></i>
            </div>
            <img src="http://www.digitaldutch.com/arles/images/Arles-Web-Page-Creator-Screenshot.png">
            <div class="project-info">
              <h2>Art</h2>
              <p>This is a test</p>
            </div>
          </div>
          <div class="project-box col-sm-4 col-xs-12">
            <div class="overlay">
              <i class="fa fa-fire"></i>
            </div>
            <img src="https://moonmicrosystem1.files.wordpress.com/2013/12/web-page-design-for-travel-website.jpg">
            <div class="project-info">
              <h2>Painting</h2>
              <p>This is a test</p>
            </div>

          </div>
          <div class="project-box col-sm-4 col-xs-12">
            <div class="overlay">
              <i class="fa fa-fire"></i>
            </div>

            <img src="http://nornstein.com/wp-content/uploads/2012/11/webpages.jpg">
            <div class="project-info">
              <h2>Fox</h2>
              <p>This is a test</p>
            </div>
          </div>
        </div>
      </div>
      <div class="fluid container center-block">
        <div class="row center-block">
          <div class="project-box col-sm-4 col-xs-12">
            <div class="overlay">
              <i class="fa fa-fire"></i>
            </div>
            <img src="https://www.quackit.com/pix/make-your-own-website/example1.gif">
            <div class="project-info">
              <h2>Art</h2>
              <p>This is a test</p>
            </div>
          </div>
          <div class="project-box col-sm-4 col-xs-12">
            <div class="overlay">
              <i class="fa fa-fire"></i>
            </div>
            <img src="http://blog.surfulater.com/images/news_bbc_V295022_full%20%5B520w%20x%20nH%5D.jpg">
            <div class="project-info">
              <h2>Painting</h2>
              <p>This is a test</p>
            </div>

          </div>
          <div class="project-box col-sm-4 col-xs-12">
            <div class="overlay">
              <i class="fa fa-fire"></i>
            </div>

            <img src="http://blogs.adobe.com/edtechatadobe/files/edtechatadobe/google_web_page_1.jpg">
            <div class="project-info">
              <h2>Fox</h2>
              <p>This is a test</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a name="body4"></a>
    <div class="body4">
      <div class="row">
        <div class="col-md-6 col-md-offset-2" id="information-area">
          <h1>Connect with Devin's Web Design Studio:</h1>
          <h4>edwin0258@gmail.com<h4>
      </div>
      <div class="button-container col-md-3 col-md-offset-1">
        <button class="btn"><i class="fa fa-twitter"></i> Twitter</button><br>
      <button class="btn"><i class="fa fa-github"></i> Github</button><br>
      <button class="btn"><i class="fa fa-linkedin"></i> Linkedin</button><br>
      <button class="btn"><i class="fa fa-home"></i> freeCodeCamp</button>
      </div>
    </div>
</div>
<div class="footer">
  <div class="row">
    <div class="col-md-4 col-md-offset-2">
          <a href="#body1">Home</a><span> - </span>
          <a href="#body2">About</a><span> - </span>
          <a href="#body3">Portfolio</a><span> - </span>
          <a href="#body4">Contact</a><br>
      <small>Copyright © Devin's Web Design Studio 2015. All Rights Reserved</small>
    </div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/edwin0258/portfolio-zipline-xwWLmp */
/* body */
body{
  height:700px;
  overflow-x:hidden;
}
/* navbar */
.navbar{
  width:100%;
  background-color:#bfbfbf;
  border-radius:1px;
  border-bottom:2px solid grey;
  position:fixed;
  top:0px;
  z-index:100;
}
.navbar-name{
  margin-left:50px;
  margin-top:3px;
  width:120px;
  background:linear-gradient(120deg,#bfbfbf, #C5C5C5);
  background: -webkit-linear-gradient(120deg,#bfbfbf, #C5C5C5);
  background: -o-linear-gradient(120deg,#bfbfbf, #C5C5C5);
  background: -moz-linear-gradient(120deg,#bfbfbf, #C5C5C5);
  border:0px;
  border-bottom:4px solid grey;
  padding-top:12px;
}
.navbar-name:hover, .navbar-right li:hover{
  background:#d3d3d3;
}
.navbar-right{
  background-color:#aeaeae;
  margin-right:20px;
  width:322px;
  display:inline-block;
}
.navbar-option{
  padding-top:12px;
  width:80px;
  height:47px;
  cursor:pointer;
}
/* section 1 */
.body1{ 
 background:url("https://40.media.tumblr.com/1b916597d3e174399cb7adadddb66ede/tumblr_nt5uk4psl31ud7rr3o1_1280.jpg");
    height:100%;
    margin-top:50px;
    padding-top:270px;
    background-size:cover;
    background-repeat:no-repeat;
    position:relative;
}
.body1 h1{
    color:#bfbfbf;
    font-size:80px;
    text-shadow:2px 1px black;
    font-family:"oswald", sans-serif;
}
.body1 h4{
    font-size:30px;
    color:black;
    letter-spacing:1.5px;
    font-family:"oswald", sans-serif;
    border:none;
}
.body1 button, .body4 button{
  height:50px;
  letter-spacing:1.5px;
  background-color:#bfbfbf;
  margin-left:10px;
  font-size:15px;
  font-weight:800;
  font-shadow:2px 2px 10px grey;
  border:2px solid black;
  box-shadow:2px 2px 10px black;
  margin-bottom:20px;
}
.body1 button:hover, .body4 button:hover{
  background:#d3d3d3;
}
/* section 2 */
.body2{
  height:700px;
  background: url("https://41.media.tumblr.com/eb2382a5a4c996cfdab27bc0d1eb51ff/tumblr_nt5umxS1FY1ud7rr3o1_1280.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}
#information-area{
  margin-top:100px;
}
#information-area h1{
  color:black;
  font-weight:600;
}
#information-area h4{
  color:black;
  font-size:20px;
  font-weight:600;
  letter-spacing:1.5px;
  line-height:120%;
}
.image-container{
  background-position:-300px 100px;
  height:250px;
  width:250px;
  border-radius:100%;
  margin-top:200px;
}
.image-container img{
  height:250px;
  width:250px;
  border-radius:50%;
  box-shadow: 2px 1px 1px black;
}
/* section 3 */
.body3{
  background: url("https://41.media.tumblr.com/92e61775d4c3edcc5145936e3703d125/tumblr_nt5uo9fH9y1ud7rr3o1_1280.jpg");
  background-position:center;
  height:800px;
  padding-top:100px;
  background-size:cover;
  width:100%;
  background-repeat:no-repeat;
}
.body3 h1, .body3 h4{
  text-weight:800;
  color:black;
  font-family:"oswald", sans-serif;
}
.body3 h1{
  font-size:50px;
}
.body3 h2{
  font-size:25px;
  font-weight:600;
  color:white;
}
.body3 p{
  font-size:15px;
  font-weight:800;
  color:white;
  font-style:italic;
}
.body3 h4{
  font-size:30px;
}
.project-box{
  border:1px solid #b4b6b7;
  height:250px;
  margin-bottom:20px;
  margin-top:10px;
}
.project-box img, .overlay{
  width:90%;
  height:100%;
  margin:0px;
  float:top;
  overflow-y:hidden;
  position:absolute;
  left:20px;
  z-index:0;
}
.overlay{
  background-color:black;
  padding-top:70px;
  font-size:40px;
  color:white;
}
.project-box img:hover{
  background-color:black;
  animation-fill-mode: forwards;
}
.project-box:hover{
  animation-name: shadowAdd;
  animation-duration: 1s;
  -webkit-animation: shadowAdd 1s;
  animation-fill-mode: forwards;
}
.project-info{
  background:linear-gradient(150deg, black, grey);
  background: -webkit-linear-gradient(150deg, black, grey);;
  background: -o-linear-gradient(150deg, black, grey);
  background: -moz-linear-gradient(150deg, black, grey);
  height:100px;
  top:125px;
  left:1px;
  width:100%;
  z-index:1;
  opacity:.9;
  position:relative;
  color:black;
  line-height:.4;
  padding-top:10px;
  
}
/* section 4 */
.body4{
  height:500px;
  background: url("https://41.media.tumblr.com/ac46aa24b44b5036e9200abb71f810d9/tumblr_nt5vzxV6Us1ud7rr3o1_1280.jpg");
  background-size:cover;
  background-repeat:no-repeat;
}
.button-container{
  padding-top:130px;
}

.footer{
  height:100px;
  background-color:#555;
  list-style:none;
}
.footer a{
  display:inline-block;
  color:#B2B2FF;
  padding-top:40px;
  padding-left:5px;
}
/* keyframe animations */
@keyframes shadowAdd{
  from{box-shadow: none;}
  to{box-shadow: 5px 10px 5px black;}
}
@-webkit-keyframes shadowAdd{
  from{box-shadow: none;}
  to{box-shadow: 5px 10px 5px black;}
}
/* media queries */
@media(max-width:992px){
  .body4 .button-container{
  padding-top:0px;
   }
}
@media(max-width:780px){
  .image-container{
    display:none;
  }
  .information-area{
    padding-left:10px;
  }
  .body3{
    background: grey;
    height:2000px;
  } 
}
@media(max-width:530px){
  .body1{
    padding-top:120px;
    margin-top:0px;
  }
}
@media(max-width:385px){
  .body1{
    padding-top:20px;
    margin-top:0px;
  }
  .body2{
    height:800px;
  }
}

/*Downloaded from https://www.codeseek.co/edwin0258/portfolio-zipline-xwWLmp */
$(document).ready(function(){
    $(".project-box img").mouseenter(
    function() {
    $(this).stop().animate({opacity: ".1"});
  });
  $(".project-box img").mouseleave(
    function() {
      //keep jQuery from repeating using stop
    $(this).stop().animate({opacity: "1"});
  });
});
function scrollToSection(id){
    var aTag = $("a[name='"+ id +"']");
    $('html,body').animate({scrollTop: aTag.offset().top}, 1000);
}
//Scroll Code revised from http://stackoverflow.com/questions/8579643/simple-jquery-scroll-to-anchor-up-or-down-the-page
$("#home").click(function() {
   scrollToSection('body1');
});
$("#about").click(function() {
   scrollToSection('body2');
});
$("#portfolio").click(function() {
   scrollToSection('body3');
});
$("#contact").click(function() {
   scrollToSection('body4');
});

Comments