My first Free Code Camp Zipline
Created
December 20, 2015 05:33
-
-
Save JackEdwardLyons/9fed1eda195bf7fefef4 to your computer and use it in GitHub Desktop.
Jack @ FreeCodeCamp
This file contains 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
| <head> | |
| <title>Jack Edward Lyons: Professional Portfolio</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| </head> | |
| <body> | |
| <nav class="navbar navbar-default"> | |
| <div class="container"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="#">Jack Lyons</a> | |
| </div> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#who">WHO</a></li> | |
| <li><a href="#done">WHAT</a></li> | |
| <li><a href="#contactme">WHERE</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <div class="container-fluid bg-1 text-center"> | |
| <h1 class="text-primary">Hi, I'm Jack.</h1> | |
| <img id="jack" src="https://upload.wikimedia.org/wikipedia/commons/f/fa/718smiley.png" alt="Jack Lyons Face"> | |
| <h2>I'm an adventure loving, aspiring digital nomad.</h3> | |
| </div> | |
| <div class="container-fluid bg-2 text-center"> | |
| <h2><a name="who"></a>What I'm about</h2> | |
| <p class="what-i-do">I'm a passionate traveller, rock climber, book reader, cross fitter and all around life lover. I'm passionate about urban and environmental planning and really want to learn the intricacies of web development so that I can help make make the world a better place. Plus I really want to create some cool shit!</p> | |
| </div> | |
| <div class="container-fluid bg-3 text-center bg-3"> | |
| <h2><a name="done"></a>My Projects</h2> | |
| <p>Hey dudes, I'm awesome!</p><br> | |
| <div class="row"> | |
| <div class="col-sm-4"> | |
| <p class="project-text">Project One</p> | |
| <img class="portfolio-images img-responsive" src="http://patitucciphoto.com/wp-content/uploads/2014/11/Kalymnos-climbing_5.jpg" alt="Image"> | |
| <p class="portfolio-paragraph">Hello</p> | |
| </div> | |
| <div class="col-sm-4"> | |
| <p class="project-text">Project Two</p> | |
| <img class="portfolio-images img-responsive" src="http://patitucciphoto.com/wp-content/uploads/2014/11/Kalymnos-climbing_5.jpg" alt="Image"> | |
| <p class="portfolio-paragraph">Hello</p> | |
| </div> | |
| <div class="col-sm-4"> | |
| <p class="project-text">Project Three</p> | |
| <img class="portfolio-images img-responsive" src="http://patitucciphoto.com/wp-content/uploads/2014/11/Kalymnos-climbing_5.jpg" alt="Image"> | |
| <p class="portfolio-paragraph">Hello</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="container-fluid bg-4"> | |
| <h2 class="contact text-center"><a name="contactme"></a>Contact me.</h2> | |
| <div class="row"> | |
| <div class="col-sm-5"> | |
| <p>Contact me if you're looking for a kick ass web developer to help you on your next project.</p> | |
| <p><span class="glyphicon glyphicon-map-marker"></span> Brisbane, AUS</p> | |
| <p><span class="glyphicon glyphicon-phone"></span> +61 424 036 281</p> | |
| <p><span class="glyphicon glyphicon-envelope"></span> jack.edward.lyons@gmail.com</p> | |
| </div> | |
| <div class="col-sm-7"> | |
| <div class="row"> | |
| <div class="col-sm-6 form-group"> | |
| <input class="form-control" id="name" name="name" placeholder="Name" type="text" required> | |
| </div> | |
| <div class="col-sm-6 form-group"> | |
| <input class="form-control" id="email" name="email" placeholder="Email" type="email" required> | |
| </div> | |
| </div> | |
| <textarea class="form-control" id="comments" name="comments" placeholder="Comment" rows="2"></textarea><br> | |
| <div class="row"> | |
| <div class="col-sm-12 form-group"> | |
| <button class="btn btn-default pull-right" type="submit">Send</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="container-fluid bg-5 text-center"><br><a href="http://www.adventureinmyveins.com" target="_blank"><i class="fa fa-rss fa-2x"></i></a><span><a href="https://www.instagram.com/jacksinstadventure" target="_blank"><i class="fa fa-instagram fa-2x"></i></a><a href="https://github.com/JackEdwardLyons" target="_blank"><i class="fa fa-github fa-2x"></i></a><a href="https://twitter.com/jack___lyons" target="_blank"><i class="fa fa-twitter fa-2x"></i></a> | |
| </span><a href="https://au.linkedin.com/in/jacklyons89" target="_blank"><i class="fa fa-linkedin fa-2x"></i></a><br> | |
| <p class="footer-text">Made with ♥ by Jack Lyons. 2015.</p> | |
| </footer> | |
| </body> | |
| </html> |
This file contains 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(){ $("h1").addClass("animated bounce"); }); |
This file contains 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> |
This file contains 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*/ | |
| /*NAVIGATION*/ | |
| .navbar { | |
| padding-top: 10px; | |
| padding-bottom: 10px; | |
| border: 0; | |
| border-radius: 0; | |
| margin-bottom: 0; | |
| font-family: 'Raleway', sans-serif; | |
| font-size: 12px; | |
| font-weight: bold; | |
| letter-spacing: 5px; | |
| background-color: #1abc9c; | |
| } | |
| .nav.navbar-nav.navbar-right li a { | |
| color: darkblue; | |
| font-weight: bold; | |
| } | |
| .nav.navbar-nav.navbar-right li a:hover { | |
| color:white; | |
| } | |
| .navbar .navbar-brand { | |
| font-weight:bold; | |
| color: darkblue; | |
| } | |
| .navbar .navbar-brand:hover { | |
| color:white; | |
| } | |
| /* IMAGES */ | |
| #jack { | |
| width: 200px; | |
| height: 200px; | |
| margin: 10px; | |
| } | |
| .portfolio-images { | |
| height: 80%; | |
| width: 100%; | |
| } | |
| .portfolio-images:hover { | |
| opacity: .5; | |
| cursor: pointer; | |
| transition-delay:0.02s; | |
| } | |
| /*BACKGROUND */ | |
| .container-fluid { | |
| padding: 25px; | |
| } | |
| .bg-1 { | |
| background-color: #1abc9c; | |
| color: #ffffff; | |
| } | |
| .bg-2 { | |
| background-color: #418DAB; | |
| color: #ffffff; | |
| } | |
| .bg-3 { | |
| background-color: #ffffff; | |
| color: #374e5d; | |
| } | |
| .bg-4 { | |
| background-color: #00CC66; | |
| color: #ffffff; | |
| } | |
| .bg-5 { | |
| background-color: #1B241F; | |
| color: #ffffff; | |
| } | |
| /* TEXT */ | |
| .what-i-do { | |
| margin: 0px 50px 20px 50px; | |
| } | |
| .text-primary { | |
| font-family: 'Roboto Slab', serif; | |
| font-weight: bold; | |
| color: darkblue; | |
| padding: 10px; | |
| } | |
| h2, h3 { | |
| font-family: 'Roboto Slab', serif; | |
| padding: 10px; | |
| } | |
| p { | |
| font-family: 'Slabo 27px', serif; | |
| font-size: 1.3em; | |
| } | |
| .project-text { | |
| font-weight: bold; | |
| } | |
| .portfolio-paragraph { | |
| padding-top: 10px; | |
| } | |
| .contact { | |
| padding-bottom: 10px; | |
| font-family: 'Slabo 27px', serif; | |
| } | |
| .footer-text { | |
| margin-top: 10px; | |
| } | |
| /*ICONS*/ | |
| i { | |
| margin: 0px 5px 0px 5px; | |
| color: #ffffff; | |
| } | |
| i:hover { | |
| color: lightblue; | |
| } |
This file contains 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" /> | |
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment