LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




  
    
    
  
  

ZIPLINE

BUILD A PERSONAL PORTFOLIO WEBPAGE

ABOUT

Objective: Build a CodePen.io app that successfully reverse-engineers this

Rule #1: Don't look at the example project's code on CodePen. Figure it out for yourself.

Rule #2: You may use whichever libraries or APIs you need.

Rule #3: Reverse engineer the example project's functionality, and also feel free to personalize it.

Hint: If you don't want to start from scratch, you can fork this simple Bootstrap portfolio template on CodePen

Here are the user stories you must enable, and optional bonus user stories:

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

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

User Story: 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.)

Bonus User Story: As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.

Don't worry if you don't have anything to showcase on your portfolio yet - you will build several apps on the next few CodePen challenges, and can come back and update your portfolio later.

There are many great portfolio templates out there, but for this challenge, you'll need to build a portfolio page yourself. Using Bootstrap will make this much easier for you.

Remember to use Read-Search-Ask if you get stuck.

When you are finished, click the "I've completed this challenge" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.

PORTFOLIO

Below you'll find some of my recent work.

Project Dummy

Sample Project #1

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Project Dummy

Sample Project #2

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Project Dummy

Sample Project #3

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Project Dummy

Sample Project #4

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Project Dummy

Sample Project #5

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

CONTACT

Don't be shy! Say Hello!

CSS
/*--- GENERAL STYLES ---*/
body { font-size: 16px; line-height: 1.5em; font-family: 'Quattrocento Sans', sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: 'Montserrat', serif; font-weight: 700; color: #1a1a1a; }
.content-section { min-height: 100vh; padding-top: 70px; padding-bottom: 20px; }
.content-section h1 { color: #9C9C9C; font-weight: 400; font-size: 30px; display: inline-block; }
.content-section h1:after { content: ''; display: block; border-bottom: 1px solid #DFDFDF; padding-top: 3px; }
.content-section p.lead { font-family: 'Cardo', serif; font-size: 19px; line-height: 1.35em; margin-bottom: 25px; }
.content-section p.lead em { font-size: 14px; }
.content-section p em { font-size: 14px;}
.content-section p mark em { font-size: inherit;}
.content-section img.pull-right { border:1px solid #DFDFDF; margin-top: 140px;  }

@media screen and (min-width: 768px) {
  .content-section { padding-top: 130px; }
  .content-section h1 { font-size: 34px; }
  .content-section p.lead { margin-bottom: 30px; }
}

@media screen and (min-width: 992px) {
  .content-section { padding-top: 160px; }
  .content-section h1 { font-size: 38px; }
  .content-section h1:after { padding-top: 5px; }
  .content-section p.lead { font-size: 21px; margin-bottom: 35px; }
}

@media screen and (min-width: 1200px) {
  .content-section { padding-top: 160px; }
  .content-section h1:after { padding-top: 7px; }
  .content-section p.lead { font-size: 22px; margin-bottom: 35px; }
}


/*--- NAVBAR ---*/
.navbar-default { font-family: 'Montserrat', serif; background: #FFFFFF; border-bottom-color: #DFDFDF; height: 60px; margin-bottom: 0; }
.navbar-header .navbar-toggle { margin-top: 12px; }
.navbar-header .navbar-brand { letter-spacing: -0.03em; height: 60px; padding: 30px 10px 0 10px; font-size: 36px; line-height: 0px; font-weight: 700; color: #111; white-space: nowrap; }
.navbar-default .navbar-brand:focus { color: #111; }
.navbar-default .navbar-nav { background: #FFF; margin-top: 0; }
.navbar-default .navbar-nav>li>a { color: #222; padding: 10px; border-bottom: 1px solid #DFDFDF; }
.navbar-default .navbar-nav>li>a.selected { color: #E64B36; }
.navbar-default a.navbar-brand:hover .navbar-default .navbar-nav>li>a:hover { background-color: #DFDFDF; }
.navbar-default .navbar-brand:hover { color: #E64B36; }

@media screen and (min-width: 768px) {
  .navbar-default { height: 100px; }
  .navbar-header { width: 100%; }
  .navbar-header .navbar-brand { height: 70px; padding: 40px 0 0 15px; font-size: 42px; }
  .navbar-default .navbar-nav>li>a { padding: 0px 20px 9px 0; }
  .navbar-default .navbar-nav>li>a:hover { background-color: transparent; color: #E64B36; }
}

@media screen and (min-width: 992px) {
  .navbar-default { height: 120px; }
  .navbar-header .navbar-brand { height: 80px; padding: 45px 0 0 15px; font-size: 48px; }
  .navbar-default .navbar-nav>li>a { padding: 10px 25px 9px 0; }
}

  
/*--- HOME ---*/
#home {
  background: url('https://s17.postimg.org/m4bfqfgn3/fog_1005445_1920.jpg') no-repeat center center fixed;
  background-size: cover; text-shadow: 1px 1px 0 rgba(255,255,255,0.5); text-align: center;
}
#home h1 { font-family: 'Advent Pro', sans-serif; font-size: 96px; color: #000; display: inline-block; margin: 0; padding: 0; line-height: 90px; margin-top: 60px; }
#home h1:after { border-bottom: 1px solid #AAA;  }
#home h5 { font-size: 16px; color: #555; }

@media screen and (min-width: 768px) {
  #home h1 { font-size: 120px; line-height: 114px; }
  #home h5 { font-size: 19px; }
}

@media screen and (min-width: 992px) {
  #home h1 { font-size: 132px; margin-top: 70px; }
  #home h5 { font-size: 21px; }
}

@media screen and (min-width: 1200px) {
  #home h1 { font-size: 142px; line-height: 124px; }
  #home h5 { font-size: 24px; }
}


/*--- PORTFOLIO ---*/
.content-section .thumbnail { position: relative; overflow: hidden; cursor: pointer; }
.content-section .thumbnail * { transition: all .25s; }
.content-section .thumbnail h4 { font-size: 19px; font-weight: 400; }
.content-section .thumbnail p { line-height: 24px; }
.content-section .thumbnail:hover h4, .content-section .thumbnail:hover p { color: #AFAFAF; }
.content-section .thumbnail:hover img { opacity: 0.25;  }
.content-section .thumbnail:after { font-family: 'FontAwesome'; content: '\f121'; color: #FFF; font-size: 48px; line-height: 80px; top: 70%; position: absolute; text-align: center; display: inline-block; width: 100%; transition: all .35s; opacity: 0; width: 86px; height: 86px; margin-left: auto; margin-right: auto; left: 0; right: 0; border-radius: 50%; background: transparent; border:3px solid transparent; }
.content-section .thumbnail:hover:after { top: 25%; opacity: 1; color: #FFFFFF; background: #AF6204; border:3px solid #FFFFFF; }


/*--- CONTACT ---*/
#contact {
  background: url('https://s18.postimg.org/z7eckrogp/seagulls_984529_1920.jpg') no-repeat top center fixed;
  background-size: cover;
}

.social-cont { max-width: 400px; }
a.btn-default { height: 44px; border-radius: 0; border: 0; width: 180px; text-align: left; margin: 0 5px 10px 0; position: relative; background-color: #FFFFFF; padding: 10px; transition: all .35s; padding: 0; line-height: 47px; overflow: hidden; }
a.btn-default i { display: block; float: left; position: absolute; left: 12px; top: 10px; font-size: 24px; color: #FFFFFF; position: relative; z-index: 1;  }
a.btn-default span { position: relative; z-index: 1; padding-left: 30px; }
a.btn-default:after { content: ''; display: block; width: 44px; height: 44px; position: absolute; top: 0; left: 0; z-index: 0; transition: all .35s; }
a.twitter-btn:after { background-color: #55ACEE; }
a.github-btn:after { background-color: #171515; }
a.linkedin-btn:after { background-color: #0077B5; }
a.fcc-btn:after { background-color: #4B2B0D; }
a.btn-default:hover, a.btn-default:focus { background-color: #FFFFFF; color: #FFFFFF; }
a.btn-default:hover:after { width: 100%; }
JS
$(document).ready(function(){ 
	$(".scroll").click(function(event){
		event.preventDefault();
		$("html,body").animate({scrollTop:$(this.hash).offset().top}, 500);
		$('.navbar-default a').removeClass('selected');
		$(this).addClass('selected');
    	});
});
Host Instantly Drag and Drop Website Builder

 

Description

Project for freeCodeCamp course
Term
Mon, 11/27/2017 - 21:38

Related Codes

Pen ID
Pen ID
Pen ID