Portfolio Zipline for FreeCodeCamp
Created
January 19, 2016 13:01
-
-
Save db001/bc774bd634a14d4c6ac0 to your computer and use it in GitHub Desktop.
Portfolio for FreeCodeCamp
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html lang="en"> | |
| <head> | |
| <title>Dave B Portfolio</title> | |
| <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-inverse navbar-static-top navbar-fixed-top"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="#">Dave B</a> | |
| </div> | |
| <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#home">Home</a></li> | |
| <li><a href="#about">About</a></li> | |
| <li><a href="#projects">Projects</a></li> | |
| <li><a href="#contact">Contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="jumbotron"> | |
| <a name="home"></a> | |
| <div class="container"> | |
| <h1>Dave B Portfolio</h1> | |
| <p>Front End Web Dev</p> | |
| <a class="btn btn-default btn-lg" href="https://github.com/" role="button" target="_blank"><img src="http://goo.gl/GJHJSu"> Github</a> | |
| <a class="btn btn-default btn-lg" href="http://www.freecodecamp.com/db001" role="button" target="_blank"><img src="https://goo.gl/dr8zbW"> freeCodeCamp</a> | |
| <a class="btn btn-default btn-lg" href="https://gb.linkedin.com/" role="button" target="_blank"><img src="https://goo.gl/AySnEQ"> LinkedIn</a> | |
| <a class="btn btn-default btn-lg" href="https://twitter.com/?lang=en" role="button" target="_blank"><img src="http://goo.gl/bMCH5x"> Twitter</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="aboutme"> | |
| <a name="about"></a> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <h1>About Me</h1> | |
| <p>I am a self taught web developer from the UK. | |
| <br> I'm currently working through the curriculum on FreeCodeCamp, but have also used resources such as <a href="https://www.codecademy.com/">Codecademy</a> and <a href="http://www.theodinproject.com/">The Odin Project</a> to improve my abilities.</p> | |
| <p>My skills include:</p> | |
| <ul> | |
| <li>HTML</li> | |
| <li>CSS</li> | |
| <li>Javascript</li> | |
| </ul> | |
| <p>With knowledge of:</p> | |
| <ul> | |
| <li>Git</li> | |
| <li>Ruby</li> | |
| <li>Rails</li> | |
| <li>Python</li> | |
| </ul> | |
| </div> | |
| <div class="col-md-6"> | |
| <img class="img-circle img-responsive" src="http://goo.gl/kdrXoP"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="portfolio"> | |
| <a name="projects"></a> | |
| <div class="container"> | |
| <h1>My Portfolio</h1> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| </div> | |
| <br> | |
| <br> | |
| <br> | |
| <div class="row"> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| <div class="col-md-3"> | |
| <img src="http://goo.gl/sPLTvK"> | |
| <p>Project</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="contact"> | |
| <a name="contact"></a> | |
| <div class="container"> | |
| <h1>Contact Me</h1> | |
| <p>Get in touch through one of the links below</p> | |
| <a class="btn btn-default btn-lg" href="https://github.com/" role="button" target="_blank"><img src="http://goo.gl/GJHJSu"> Github</a> | |
| <a class="btn btn-default btn-lg" href="http://www.freecodecamp.com/db001" role="button" target="_blank"><img src="https://goo.gl/dr8zbW"> freeCodeCamp</a> | |
| <a class="btn btn-default btn-lg" href="https://gb.linkedin.com/" role="button" target="_blank"><img src="https://goo.gl/AySnEQ"> LinkedIn</a> | |
| <a class="btn btn-default btn-lg" href="https://twitter.com/?lang=en" role="button" target="_blank"><img src="http://goo.gl/bMCH5x"> Twitter</a> | |
| </div> | |
| </div> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* $(document).ready(function(){ | |
| }); */ |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
| <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| font-family: "Montserrat", sans-serif; | |
| } | |
| .navbar { | |
| margin-bottom: 0px; | |
| background-color: #000000; | |
| } | |
| /* Why doesn't this work? */ | |
| .nav li { | |
| color: #23395B; | |
| } | |
| .jumbotron { | |
| background-image: url('http://goo.gl/rDkWcM'); | |
| background-attachment: fixed; | |
| background-size: cover; | |
| color: #23395B; | |
| margin-bottom: 0px; | |
| height: 600px; | |
| } | |
| .jumbotron .container { | |
| padding-top: 100px; | |
| } | |
| .jumbotron .container .btn { | |
| margin-top: 20px; | |
| margin-right: 10px; | |
| background-color: #23395B; | |
| border: 0px; | |
| color: #ffffff; | |
| } | |
| .btn img { | |
| width: 25px; | |
| } | |
| .aboutme { | |
| background-image: url("http://goo.gl/DbzCTQ"); | |
| background-size: cover; | |
| background-attachment: fixed; | |
| color: #ffffff; | |
| padding: 10px; | |
| padding-bottom: 40px; | |
| } | |
| .aboutme h1 { | |
| font-size: 48px; | |
| } | |
| .aboutme p, | |
| li { | |
| font-size: 20px; | |
| } | |
| .aboutme a { | |
| color: #a9a9a9; | |
| } | |
| .aboutme img { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| height: 450px; | |
| margin-top: 40px; | |
| /* Half the height */ | |
| margin-left: -150px; | |
| /* Half the width */ | |
| } | |
| #portfolio { | |
| text-align: center; | |
| background-image: url('http://goo.gl/KSjf9Q'); | |
| padding-bottom: 50px; | |
| background-attachment: fixed; | |
| background-size: cover; | |
| } | |
| #portfolio h1 { | |
| margin: 50px 0px; | |
| } | |
| #portfolio img { | |
| width: 150px; | |
| } | |
| #portfolio p { | |
| margin-top: 10px; | |
| } | |
| #linespace { | |
| margin-top: 60px; | |
| } | |
| #contact { | |
| background-image: url('http://goo.gl/mfcVxQ'); | |
| color: #23395B; | |
| height: 300px; | |
| background-attachment: fixed; | |
| background-size: cover; | |
| } | |
| #contact h1 { | |
| text-shadow: 2px 2px 5px white; | |
| padding-top: 40px; | |
| } | |
| #contact p { | |
| font-size: 20px; | |
| color: #ffffff; | |
| margin-bottom: 50px; | |
| } | |
| #contact .btn { | |
| margin-right: 10px; | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> | |
| <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment