Portfolio Zipline

Developer
Devin
Size
5,335 Kb
Views
18,216
  1. Portfolio Zipline Previews
  2. Portfolio Zipline HTML Codes
  3. Portfolio Zipline CSS Codes
  4. Portfolio Zipline JS Codes

How do I make an portfolio zipline?

Created for the freecodecamp zipine: Portfolio Zipline.. What is a portfolio zipline? How do you make a portfolio zipline? This script and codes were developed by Devin on 23 November 2022, Wednesday.

Portfolio Zipline Previews
IQ Test

Portfolio Zipline - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<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>[email protected]<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>

Portfolio Zipline - Script Codes CSS Codes

/* 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; }
}

Portfolio Zipline - Script Codes JS Codes

$(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');
});
Portfolio Zipline - Script Codes
Portfolio Zipline - Script Codes
Home Page Home
Developer Devin
Username edwin0258
Uploaded November 23, 2022
Rating 3
Size 5,335 Kb
Views 18,216
Do you need developer help for Portfolio Zipline?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Devin (edwin0258) Script Codes
Name
Sonar Svg
Mondrian Generator
Artist Card Widget
A Pen by Devin
React Musical Scale Display
Daily UI 011 - Flash Message
Descriptive Tags
Twitch Zipline
Pomodoro Clock
Snake
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!