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.