david-p
9/11/2015 - 5:12 PM

Zipline: Portfolio Webpage

Zipline: Portfolio Webpage

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="//maxcdn.bootstrapcdn.com/bootswatch/3.3.5/superhero/bootstrap.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" />
body {

}

.navbar {font-size: 16px;}

.btn a:link {
	color: #fff;
	text-decoration: none;
	font-weight: normal;
}
.btn a:visited {
	color: #fff;
	text-decoration: none;
	font-weight: normal;
}
.btn a:hover {
	
	text-decoration: none;
	font-weight: normal;
}
.btn a:active {
	color: #fff;
	text-decoration: none;
	font-weight: normal;
}
	
.title {
	font-size: 50px;
}


#home-pic {
	width: 300px;
margin-top: 125px;
margin-bottom: 40px;
}



.btn {
	margin: 5px ;
}


.bg-wrapper {
	padding: 30px 0;
	margin: 0;
	width: 100%;
}
/*
#about {
	   position: relative;
   border-top: 40px solid transparent;
   margin: -30px 0 0;
   -webkit-background-clip: padding-box;
   -moz-background-clip: padding;
   background-clip: padding-box;
}
*/



.bg-about {
	background: url(https://lh3.googleusercontent.com/du6Hah9u4GQKxzCXMxjL5tSlI8dqKlM08YuLJN28DQ=w67-h100-no) center fixed;
padding-bottom: 100px;
}

.about-content {
	font-size: 26px;
	
	
}


.bg-port {
	background: url(https://lh3.googleusercontent.com/LTU1uW6nhbr5UyOrjCRprWcQ7EyYBMG8N0oh2mzyuWk=s200-no) center fixed;
padding-bottom: 300px;
}

#portfolio img {
	padding-top: 5px;
	padding-bottom: 20px;
}

.bg-contact {
	background: url(https://lh3.googleusercontent.com/9CniEQy0lNtCESM5vDPck1Mou4ZEkEpbipLvEKkAvg=w294-h235-no) center fixed;
	padding-bottom: 100px;
}

.bg-contact ul {
	
	padding: 35px 0 20px 0;
	list-style: none;
}

.bg-footer {
	padding-top: 100px;
}
 
.vspace02 { margin-top: 2px; }
.vspace05 { margin-top: 5px; }
.vspace10 { margin-top: 10px; }
.vspace15 { margin-top: 15px; }
.vspace30 { margin-top: 30px; }
.vspace40 { margin-top: 40px; }
.vbottom {margin-bottom: 200px; }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ -->

<div id='home' class='container'>
		<nav class="navbar navbar-default navbar-fixed-top">
				<div class="container">
						<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
										<span class="sr-only">Toggle navigation</span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
										<span class="icon-bar"></span>
								</button>
								<a class="navbar-brand" href="#home">Zipline: Portfolio Website</a>
						</div>
						<div id="navbar" class="navbar-collapse collapse">
								<ul class="nav navbar-nav navbar-right">
										<li class="active"><a href="#home">Home</a></li>
										<li class="active"><a href="#about">About</a></li>
										<li class="active"><a href="#portfolio">Portfolio</a></li>
										<li class="active"><a href="#contact">Contact</a></li>
								</ul>
						</div>
						<!--/.nav-collapse -->
				</div>
		</nav>
</div>


<!-- **** Home **** -->
<div class='bg-wrapper bg-home'>
		<div class='container'>

				<img id='home-pic' class='center-block img-circle' src="https://lh3.googleusercontent.com/5bhfK0v62FF4DqBWJR0gubtrE3GEoNhmBhXoETL8Pw=s609-no">
				<h1 class="text-center title">David Petrey</h1>
				<h2 class="text-center">Welcome to my Free Code Camp Portfolio</h2>

				<div class="text-center vspace30 vbottom">
						<button type="button" class="btn btn-default"><a href="https://github.com/davidpetrey">Github</a></button>
						<button type="button" class="btn btn-default"><a href="https://www.linkedin.com/in/davidpetrey">Linkedin</a></button>
						<button type="button" class="btn btn-default"><a href="http://freecodecamp.com/davidpetrey">Free Code Camp</a></button>
				</div>

		</div>
</div>
<!-- bg-wrapper bg-home -->


<!-- **** About **** -->
<div id='about' class='bg-wrapper bg-about'>
		<div class='container'>
				<div class='row about-content'>
						<div class='col-md-7'>
								<h1>About:</h1>
								<p>
										I am currently a Web Development student at Free Code Camp from Dallas, Texas. Currently I am familiar with these technologies and languages:</p>
								<ul>
										<li>Html</li>
										<li>Css3</li>
										<li>Javascript</li>
										<li>JQuery</li>
										<li>Github</li>
								</ul>
								<p>
										When finished with Free Code Camp I will be familiar with the MEAN stack, Agile Software Development and the following:
								</p>
								<ul>
										<li>Node.js</li>
										<li>Express.js</li>
										<li>MongoDB</li>
										<li>AngularJS</li>

								</ul>
								<p>
										I also will have worked on a few real world projects. </p>
						</div>
				</div>

		</div>
</div>


<!-- **** Portfolio **** -->
<div id='portfolio' class='bg-wrapper bg-port'>
		<div class='container'>
				<h1>Portfolio:</h1>
				<div class='row'>
						<div class='col-md-4'>
							<img class='img-responsive' src='https://lh3.googleusercontent.com/B2Ohbr9awocipa_5yVhoNhZXuxSYFyO49Pos50ziuDA=w1141-h713-no'>
						</div>
						<div class='col-md-4'><img class='img-responsive' src='https://lh3.googleusercontent.com/B2Ohbr9awocipa_5yVhoNhZXuxSYFyO49Pos50ziuDA=w1141-h713-no'>
						</div>
						<div class='col-md-4'><img class='img-responsive' src='https://lh3.googleusercontent.com/B2Ohbr9awocipa_5yVhoNhZXuxSYFyO49Pos50ziuDA=w1141-h713-no'>
						</div>
						<div class='col-md-4'><img class='img-responsive' src='https://lh3.googleusercontent.com/B2Ohbr9awocipa_5yVhoNhZXuxSYFyO49Pos50ziuDA=w1141-h713-no'>
						</div>
						<div class='col-md-4'><img class='img-responsive' src='https://lh3.googleusercontent.com/B2Ohbr9awocipa_5yVhoNhZXuxSYFyO49Pos50ziuDA=w1141-h713-no'>
						</div>
						<div class='col-md-4'><img class='img-responsive' src='https://lh3.googleusercontent.com/B2Ohbr9awocipa_5yVhoNhZXuxSYFyO49Pos50ziuDA=w1141-h713-no'>
						</div>
				</div>
		</div>
</div>
<!-- bg-wrapper bg- -->


<!-- **** Contact **** -->
<div id='contact' class='bg-wrapper bg-contact'>
		<div class='container'>
				<h1>Contact:</h1>
				<div class='row'>
						<div class='col-md-4'>
								<h2>davidpetrey@yahoo.com</h2></div>
						<div class='col-md-4'></div>
						<div class='col-md-4'>
								<ul>
										<li>
												<button type="button" class="btn btn-default"><a href="https://github.com/davidpetrey">Github</a></button>
										</li>
										<li>
												<button type="button" class="btn btn-default"><a href="https://www.linkedin.com/in/davidpetrey">Linkedin</a></button>
										</li>
										<li>
												<button type="button" class="btn btn-default"><a href="http://freecodecamp.com/davidpetrey">Free Code Camp</a></button>
										</li>
								</ul>

						</div>
				</div>

		</div>
</div>
<!-- bg-wrapper bg- -->


<!-- **** Footer **** -->
<div class='bg-wrapper bg-footer'>
		<div class='container'>
				<div class='footer'>
						<ul>
								<li>
										<ul class="list-inline">
												<li><a href="#home">Home</a></li>
												<li><a href="#about">About</a></li>
												<li><a href="#portfolio">Portfolio</a></li>
												<li><a href="#contact">Contact</a></li>
										</ul>
								</li>
								<li>Copyright © Big Peach Web Design 2015. All Rights Reserved
								</li>
						</ul>
				</div>
		</div>
</div>

Zipline: Portfolio Webpage

Forked from Free Code Camp's Pen mJNqQj.

A Pen by David Petrey on CodePen.

License.