Created
August 22, 2015 10:22
-
-
Save tolkadot/b6802cacc2f448dfdf11 to your computer and use it in GitHub Desktop.
tolkadot website
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> | |
| <link href='http://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'> | |
| <link href='http://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,900' rel='stylesheet' type='text/css'> | |
| </head> | |
| <!-- NAV --> | |
| <nav class="navbar navbar-default"> | |
| <div class="container-fluid"> | |
| <div class="navbar-header"> | |
| <a class="navbar-brand" href="#">tolka dot</a> | |
| </div> | |
| <div> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#">home</a></li> | |
| <li><a href="#">about</a></li> | |
| <li><a href="#">portfolio</a></li> | |
| <li><a href="#">contact</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| </nav> | |
| <!-- Home --> | |
| <section id="home" data-speed="10" data-type="background"> <article> | |
| <div class="container"> | |
| <h1 id="banner"> tolka dot web design </h1> | |
| <h3> clean useable websites </h3> | |
| </div></article> | |
| </section> | |
| <!-- About --> | |
| <section id="about" data-speed="10" data-type="background"><article> | |
| <div class="container"> | |
| <p>I am a webdesigner - looking forward to helping you out with your next project. <p> | |
| </div></article> | |
| </section> | |
| <!-- Portfolio --> | |
| <section id="portfolio" data-speed="10" data-type="background"> | |
| <div class="container"> | |
| <article> Portfolio! </article> | |
| </div> | |
| </section> | |
| <!--Contact --> | |
| <section id="contact" data-speed="10" data-type="background"> | |
| <div class="container"> | |
| <article> Contact me </article> | |
| </div> | |
| </section> |
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
| $(documnet).ready(function(){ | |
| $("#banner").addClass("animated bounce") | |
| }); | |
| $(document).ready(function(){ | |
| // cache the window object | |
| $window = $(window); | |
| $('section[data-type="background"]').each(function(){ | |
| // declare the variable to affect the defined data-type | |
| var $scroll = $(this); | |
| $(window).scroll(function() { | |
| // HTML5 proves useful for helping with creating JS functions! | |
| // also, negative value because we're scrolling upwards | |
| var yPos = -($window.scrollTop() / $scroll.data('speed')); | |
| // background position | |
| var coords = '50% '+ yPos + 'px'; | |
| // move the background | |
| $scroll.css({ backgroundPosition: coords }); | |
| }); // end window scroll | |
| }); // end section function | |
| }); // close out 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
| <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
| /* Home */ | |
| #home { | |
| background: url(http://puckettpages.com/wp-content/uploads/2011/07/clouds-blue-sky-blurred-background-backdrop1.jpg) 50% 0 repeat fixed; min-height: 1000px; | |
| height: 1000px; | |
| margin: 0 auto; | |
| width: 100%; | |
| max-width: 1920px; | |
| position: relative; | |
| } | |
| #home article { | |
| height: 458px; | |
| position: absolute; | |
| text-align: center; | |
| top: 150px; | |
| width: 100%; | |
| font-family: 'Poiret One', cursive; | |
| } | |
| /* ABOUT */ | |
| #about { | |
| background: url(https://williamlounsbury.files.wordpress.com/2011/03/20110327_sb_099tonedbw.jpg) 50% 0 repeat fixed; min-height: 1000px; | |
| height: 1000px; | |
| margin: 0 auto; | |
| width: 100%; | |
| max-width: 1920px; | |
| position: relative; | |
| -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); | |
| box-shadow: 0 0 50px rgba(0,0,0,0.8); | |
| } | |
| #about article { | |
| height: 458px; | |
| position: absolute; | |
| text-align: center; | |
| top: 150px; | |
| width: 100%; | |
| font-family: 'Alegreya Sans SC', sans-serif; | |
| font-size: 500%; | |
| color: white; | |
| } | |
| /* PORTFOLIO */ | |
| #portfolio { | |
| background:url(http://ak.picdn.net/shutterstock/videos/3898370/preview/stock-footage-white-silver-background-loop.jpg) 50% 0 repeat fixed; min-height: 1000px; | |
| height: 1000px; | |
| margin: 0 auto; | |
| width: 100%; | |
| max-width: 1920px; | |
| position: relative; | |
| -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); | |
| box-shadow: 0 0 50px rgba(0,0,0,0.8); | |
| } | |
| #portfolio article { | |
| height: 458px; | |
| position: absolute; | |
| text-align: center; | |
| top: 150px; | |
| width: 100%; | |
| font-family: 'Alegreya Sans SC', sans-serif; | |
| font-size: 500%; | |
| color: dark-gray; | |
| } | |
| /* CONTACT */ | |
| #contact { | |
| background:url(http://newartcolorz.com/images/2014/10/free-silver-background-18848-19328-hd-wallpapers.jpg) 50% 0 repeat fixed; min-height: 1000px; | |
| height: 1000px; | |
| margin: 0 auto; | |
| width: 100%; | |
| max-width: 1920px; | |
| position: relative; | |
| -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); | |
| box-shadow: 0 0 50px rgba(0,0,0,0.8); | |
| } | |
| #contact article { | |
| height: 458px; | |
| position: absolute; | |
| text-align: center; | |
| top: 150px; | |
| width: 100%; | |
| font-family: 'Alegreya Sans SC', sans-serif; | |
| font-size: 500%; | |
| color: black; | |
| } |
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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment