| @@ -0,0 +1,249 @@ | ||
| /* GLOBAL STYLES | ||
| -------------------------------------------------- */ | ||
| /* Padding below the footer and lighter body text */ | ||
|
|
||
| body { | ||
| color: #ffffff; | ||
| height: 100%; | ||
| width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| /* CUSTOMIZE THE NAVBAR | ||
| -------------------------------------------------- */ | ||
|
|
||
| /* Special class on .container surrounding .navbar, used for positioning it into place. */ | ||
| .navbar-wrapper { | ||
| position: absolute; | ||
| right: 100px; | ||
| left: 100px; | ||
| z-index: 20; | ||
| } | ||
|
|
||
| /* Flip around the padding for proper display in narrow viewports */ | ||
| .navbar-wrapper > .container { | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| } | ||
| .navbar-wrapper .navbar { | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| } | ||
| .navbar-wrapper .navbar .container { | ||
| width: auto; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* CUSTOMIZE THE CAROUSEL | ||
| -------------------------------------------------- */ | ||
|
|
||
| /* Carousel base class */ | ||
| .carousel { | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| .carousel .container { | ||
| position: relative; | ||
| z-index: 9; | ||
| } | ||
|
|
||
| .carousel .item { | ||
| height: 100%; | ||
| } | ||
|
|
||
| .carousel-inner { | ||
| overflow:hidden; | ||
| width: 100%; | ||
| min-height: 100%; | ||
| position:relative; | ||
| } | ||
|
|
||
| .carousel img { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .carousel-caption { | ||
| background-color: transparent; | ||
| position: static; | ||
| max-width: 550px; | ||
| padding: 0 20px; | ||
| margin-top: 200px; | ||
| } | ||
| .carousel-caption h1, | ||
| .carousel-caption .lead { | ||
| margin: 0; | ||
| line-height: 1.25; | ||
| color: #fff; | ||
| text-shadow: 0 1px 1px rgba(0,0,0,.4); | ||
| } | ||
| .carousel-caption .btn { | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
|
|
||
| /* RESPONSIVE CSS | ||
| -------------------------------------------------- */ | ||
|
|
||
| @media (max-width: 979px) { | ||
|
|
||
| .container.navbar-wrapper { | ||
| margin-bottom: 0; | ||
| width: auto; | ||
| } | ||
| .navbar-inner { | ||
| border-radius: 0; | ||
| margin: -20px 0; | ||
| } | ||
|
|
||
| .carousel img { | ||
| width: auto; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .featurette { | ||
| height: auto; | ||
| padding: 0; | ||
| } | ||
| .featurette-image.pull-left, | ||
| .featurette-image.pull-right { | ||
| display: block; | ||
| float: none; | ||
| max-width: 40%; | ||
| margin: 0 auto 20px; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @media (max-width: 767px) { | ||
|
|
||
| .navbar-inner { | ||
| margin: -20px; | ||
| } | ||
|
|
||
| .carousel { | ||
| margin-left: -20px; | ||
| margin-right: -20px; | ||
| } | ||
| .carousel img { | ||
| height: 300px; | ||
| } | ||
| .carousel-caption { | ||
| width: 65%; | ||
| padding: 0 70px; | ||
| margin-top: 100px; | ||
| } | ||
| .carousel-caption h1 { | ||
| font-size: 30px; | ||
| } | ||
| .carousel-caption .lead, | ||
| .carousel-caption .btn { | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| .marketing .span4 + .span4 { | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .featurette-heading { | ||
| font-size: 30px; | ||
| } | ||
| .featurette .lead { | ||
| font-size: 18px; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| } | ||
| /* MARKETING CONTENT | ||
| -------------------------------------------------- */ | ||
|
|
||
| /* Center align the text within the three columns below the carousel */ | ||
| .marketing .col-lg-4 { | ||
| margin-bottom: 20px; | ||
| text-align: center; | ||
| } | ||
| .marketing h2 { | ||
| font-weight: normal; | ||
| } | ||
| .marketing .col-lg-4 p { | ||
| margin-right: 10px; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
|
|
||
| /* Featurettes | ||
| ------------------------- */ | ||
|
|
||
| .featurette-divider { | ||
| margin: 80px 0; /* Space out the Bootstrap <hr> more */ | ||
| } | ||
|
|
||
| /* Thin out the marketing headings */ | ||
| .featurette-heading { | ||
| font-weight: 300; | ||
| line-height: 1; | ||
| letter-spacing: -1px; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* RESPONSIVE CSS | ||
| -------------------------------------------------- */ | ||
|
|
||
| @media (min-width: 768px) { | ||
|
|
||
| /* Navbar positioning foo */ | ||
| .navbar-wrapper { | ||
| margin-top: 20px; | ||
| } | ||
| .navbar-wrapper .container { | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| } | ||
| .navbar-wrapper .navbar { | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| /* The navbar becomes detached from the top, so we round the corners */ | ||
| .navbar-wrapper .navbar { | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| /* Bump up size of carousel content */ | ||
| .carousel-caption p { | ||
| font-size: 21px; | ||
| line-height: 1.4; | ||
| } | ||
|
|
||
| .featurette-heading { | ||
| font-size: 50px; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 992px) { | ||
| .featurette-heading { | ||
|
|
||
| } | ||
| } | ||
|
|
||
| html,body{height:100%;} | ||
| .carousel,.item,.active{height:100%;} | ||
| .carousel-inner{height:100%;} | ||
|
|
||
| @media (min-width:769px) { | ||
| ul.nav li.dropdown:hover > ul.dropdown-menu { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;} | ||
| .carousel .active.left {left:0;opacity:0;z-index:2;} | ||
| .carousel .next {left:0;opacity:1;z-index:1;} |
| @@ -0,0 +1,285 @@ | ||
| @import url(animate.css); | ||
| @import url(bootstrap.css); | ||
| @import url(carousel.css); | ||
| @import url(font-awesome.css); | ||
| @import url(style.css); | ||
|
|
||
| .jumbotron | ||
| { | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| /* Carousel.css*/ | ||
|
|
||
| /* GLOBAL STYLES | ||
| -------------------------------------------------- */ | ||
| /* Padding below the footer and lighter body text */ | ||
|
|
||
| body { | ||
| font-family: 'Open Sans'; | ||
| height: 100%; | ||
| width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
| /* CUSTOMIZE THE NAVBAR | ||
| -------------------------------------------------- */ | ||
|
|
||
| /* Special class on .container surrounding .navbar, used for positioning it into place. */ | ||
| .navbar-wrapper { | ||
| z-index: 20; | ||
| } | ||
|
|
||
| /* Flip around the padding for proper display in narrow viewports */ | ||
| .navbar-wrapper > .container { | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| } | ||
| .navbar-wrapper .navbar { | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| } | ||
| .navbar-wrapper .navbar .container { | ||
| width: auto; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* CUSTOMIZE THE CAROUSEL | ||
| -------------------------------------------------- */ | ||
|
|
||
| /* Carousel base class */ | ||
| .carousel { | ||
| margin-bottom: 0px; | ||
| } | ||
|
|
||
| .carousel .container { | ||
| position: relative; | ||
| z-index: 9; | ||
| } | ||
| } | ||
|
|
||
| .carousel-inner { | ||
| overflow:hidden; | ||
| position:relative; | ||
| } | ||
|
|
||
| .carousel img { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| min-width: 100%; | ||
| min-height: 100%; | ||
| } | ||
|
|
||
| .carousel-caption { | ||
| background-color: transparent; | ||
| position: static; | ||
| max-width: 550px; | ||
| padding: 0 20px; | ||
| margin-top: 200px; | ||
| } | ||
| .carousel-caption h1, | ||
| .carousel-caption .lead { | ||
| margin: 0; | ||
| line-height: 1.25; | ||
| color: #fff; | ||
| text-shadow: 0 1px 1px rgba(0,0,0,.4); | ||
| } | ||
| .carousel-caption .btn { | ||
| margin-top: 10px; | ||
| } | ||
|
|
||
|
|
||
| /* RESPONSIVE CSS | ||
| -------------------------------------------------- */ | ||
|
|
||
| @media (max-width: 979px) { | ||
|
|
||
| .container.navbar-wrapper { | ||
| margin-bottom: 0; | ||
| width: auto; | ||
| } | ||
| .navbar-inner { | ||
| border-radius: 0; | ||
| margin: 0; | ||
| } | ||
|
|
||
| .carousel img { | ||
| width: auto; | ||
| height: 100%; | ||
| } | ||
|
|
||
| .featurette { | ||
| height: auto; | ||
| padding: 0; | ||
| } | ||
| .featurette-image.pull-left, | ||
| .featurette-image.pull-right { | ||
| display: block; | ||
| float: none; | ||
| max-width: 40%; | ||
| margin: 0 auto 20px; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| @media (max-width: 767px) { | ||
|
|
||
| .navbar-inner { | ||
| margin: -20px; | ||
| } | ||
|
|
||
| .carousel { | ||
| margin-left: -20px; | ||
| margin-right: -20px; | ||
| } | ||
| .carousel img { | ||
| height: 300px; | ||
| } | ||
| .carousel-caption { | ||
| width: 65%; | ||
| padding: 0 70px; | ||
| margin-top: 100px; | ||
| } | ||
| .carousel-caption h1 { | ||
| font-size: 30px; | ||
| } | ||
| .carousel-caption .lead, | ||
| .carousel-caption .btn { | ||
| font-size: 18px; | ||
| } | ||
|
|
||
| .marketing .span4 + .span4 { | ||
| margin-top: 40px; | ||
| } | ||
|
|
||
| .featurette-heading { | ||
| font-size: 30px; | ||
| } | ||
| .featurette .lead { | ||
| font-size: 18px; | ||
| line-height: 1.5; | ||
| } | ||
|
|
||
| } | ||
| /* MARKETING CONTENT | ||
| -------------------------------------------------- */ | ||
|
|
||
| /* Center align the text within the three columns below the carousel */ | ||
| .marketing .col-lg-4 { | ||
| margin-bottom: 20px; | ||
| text-align: center; | ||
| } | ||
| .marketing h2 { | ||
| font-weight: normal; | ||
| } | ||
| .marketing .col-lg-4 p { | ||
| margin-right: 10px; | ||
| margin-left: 10px; | ||
| } | ||
|
|
||
|
|
||
| /* Featurettes | ||
| ------------------------- */ | ||
|
|
||
| .featurette-divider { | ||
| margin: 80px 0; /* Space out the Bootstrap <hr> more */ | ||
| } | ||
|
|
||
| /* Thin out the marketing headings */ | ||
| .featurette-heading { | ||
| font-weight: 300; | ||
| line-height: 1; | ||
| letter-spacing: -1px; | ||
| } | ||
|
|
||
|
|
||
|
|
||
| /* RESPONSIVE CSS | ||
| -------------------------------------------------- */ | ||
|
|
||
| @media (min-width: 768px) { | ||
|
|
||
| /* Navbar positioning foo */ | ||
| .navbar-wrapper { | ||
| margin-top: 20px; | ||
| } | ||
| .navbar-wrapper .container { | ||
| padding-right: 15px; | ||
| padding-left: 15px; | ||
| } | ||
| .navbar-wrapper .navbar { | ||
| padding-right: 0; | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| /* The navbar becomes detached from the top, so we round the corners */ | ||
| .navbar-wrapper .navbar { | ||
| border-radius: 4px; | ||
| } | ||
|
|
||
| /* Bump up size of carousel content */ | ||
| .carousel-caption p { | ||
| font-size: 21px; | ||
| line-height: 1.4; | ||
| } | ||
|
|
||
| .featurette-heading { | ||
| font-size: 50px; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: 992px) { | ||
| .featurette-heading { | ||
|
|
||
| } | ||
| } | ||
|
|
||
|
|
||
| @media (min-width:769px) { | ||
| ul.nav li.dropdown:hover > ul.dropdown-menu { | ||
| display: block; | ||
| } | ||
| } | ||
|
|
||
| .carousel .item {-webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s;} | ||
| .carousel .active.left {left:0;opacity:0;z-index:2;} | ||
| .carousel .next {left:0;opacity:1;z-index:1;} | ||
|
|
||
| .navbar-wrapper | ||
| { | ||
| display: block; | ||
| text-align: center; | ||
| margin-left: auto; | ||
| margin-right: auto; | ||
| } | ||
|
|
||
| .navbar | ||
| { | ||
|
|
||
| } | ||
|
|
||
| .fa | ||
| { | ||
| color: gray; | ||
| margin-right: 10px; | ||
| } | ||
|
|
||
| .fa-facebook:hover | ||
| { | ||
| color: blue; | ||
| } | ||
|
|
||
| .fa-twitter:hover | ||
| { | ||
| color: skyblue; | ||
| } | ||
|
|
||
| .fa-instagram:hover | ||
| { | ||
| color: brown | ||
| } |
| @@ -0,0 +1,128 @@ | ||
| /*! | ||
| * Start Bootstrap - Simple Sidebar HTML Template (http://startbootstrap.com) | ||
| * Code licensed under the Apache License v2.0. | ||
| * For details, see http://www.apache.org/licenses/LICENSE-2.0. | ||
| */ | ||
|
|
||
| /* Toggle Styles */ | ||
|
|
||
| #wrapper { | ||
| padding-left: 0; | ||
| -webkit-transition: all 0.5s ease; | ||
| -moz-transition: all 0.5s ease; | ||
| -o-transition: all 0.5s ease; | ||
| transition: all 0.5s ease; | ||
| } | ||
|
|
||
| #wrapper.toggled { | ||
| padding-left: 250px; | ||
| } | ||
|
|
||
| #sidebar-wrapper { | ||
| z-index: 1000; | ||
| position: fixed; | ||
| left: 250px; | ||
| width: 0; | ||
| height: 100%; | ||
| margin-left: -250px; | ||
| overflow-y: auto; | ||
| background: #000; | ||
| -webkit-transition: all 0.5s ease; | ||
| -moz-transition: all 0.5s ease; | ||
| -o-transition: all 0.5s ease; | ||
| transition: all 0.5s ease; | ||
| } | ||
|
|
||
| #wrapper.toggled #sidebar-wrapper { | ||
| width: 250px; | ||
| } | ||
|
|
||
| #page-content-wrapper { | ||
| width: 100%; | ||
| position: absolute; | ||
| padding: 15px; | ||
| } | ||
|
|
||
| #wrapper.toggled #page-content-wrapper { | ||
| position: absolute; | ||
| margin-right: -250px; | ||
| } | ||
|
|
||
| /* Sidebar Styles */ | ||
|
|
||
| .sidebar-nav { | ||
| position: absolute; | ||
| top: 50; | ||
| width: 250px; | ||
| margin: 0; | ||
| padding: 0; | ||
| list-style: none; | ||
| } | ||
|
|
||
| .sidebar-nav li { | ||
| text-indent: 20px; | ||
| line-height: 40px; | ||
| } | ||
|
|
||
| .sidebar-nav li a { | ||
| display: block; | ||
| text-decoration: none; | ||
| color: #999999; | ||
| } | ||
|
|
||
| .sidebar-nav li a:hover { | ||
| text-decoration: none; | ||
| color: #fff; | ||
| background: rgba(255,255,255,0.2); | ||
| } | ||
|
|
||
| .sidebar-nav li a:active, | ||
| .sidebar-nav li a:focus { | ||
| text-decoration: none; | ||
| } | ||
|
|
||
| .sidebar-nav > .sidebar-brand { | ||
| height: 65px; | ||
| font-size: 18px; | ||
| line-height: 60px; | ||
| } | ||
|
|
||
| .sidebar-nav > .sidebar-brand a { | ||
| color: #999999; | ||
| } | ||
|
|
||
| .sidebar-nav > .sidebar-brand a:hover { | ||
| color: #fff; | ||
| background: none; | ||
| } | ||
|
|
||
| @media(min-width:768px) { | ||
| #wrapper { | ||
| padding-left: 250px; | ||
| } | ||
|
|
||
| #wrapper.toggled { | ||
| padding-left: 0; | ||
| } | ||
|
|
||
| #sidebar-wrapper { | ||
| width: 250px; | ||
| } | ||
|
|
||
| #wrapper.toggled #sidebar-wrapper { | ||
| width: 0; | ||
| } | ||
|
|
||
| #page-content-wrapper { | ||
| padding: 20px; | ||
| position: relative; | ||
| } | ||
|
|
||
| #wrapper.toggled #page-content-wrapper { | ||
| position: relative; | ||
| margin-right: 0; | ||
| } | ||
| } | ||
|
|
||
| body { background-color: black; height: 100%; } | ||
| h3 { color: white; } |
| @@ -0,0 +1,52 @@ | ||
| @import url(animate.css); | ||
| @import url(bootstrap.css); | ||
| @import url(font-awesome.min.css); | ||
| @import url(http://fonts.googleapis.com/css?family=Open+Sans); | ||
| @import url(http://fonts.googleapis.com/css?family=Muli); | ||
| @import url(http://fonts.googleapis.com/css?family=Pacifico); | ||
| @import url(http://fonts.googleapis.com/css?family=Lato); | ||
| @import url(metro-bootstrap.min.css); | ||
|
|
||
| body | ||
| { | ||
| overflow-x:hidden; | ||
| } | ||
|
|
||
| h1 | ||
| { | ||
| font-size: 54px | ||
| } | ||
|
|
||
| p | ||
| { | ||
| font-size: 24px | ||
| } | ||
|
|
||
| .jumbotron h1 | ||
| { | ||
| font-family: 'Lato'; | ||
| font-size: 100px; | ||
| } | ||
|
|
||
| .jumbotron | ||
| { | ||
| height: 100%; | ||
| background-image: url(../img/bg.jpg); | ||
| background-size: cover; | ||
| background-color: rgba(255,255,255,0.5); | ||
| color: #A52; | ||
| padding-top: 25%; | ||
| background-attachment: fixed; | ||
| margin-bottom: 0; | ||
| } | ||
|
|
||
| .inline | ||
| { | ||
| display: inline; | ||
| } | ||
|
|
||
| .about | ||
| { | ||
| padding-top: 25px; | ||
| padding-bottom: 25px; | ||
| } |
| @@ -0,0 +1,8 @@ | ||
| @import url(animate.css); | ||
| @import url(bootstrap.css); | ||
| @import url(font-awesome.min.css); | ||
| @import url(http://fonts.googleapis.com/css?family=Open+Sans); | ||
| @import url(http://fonts.googleapis.com/css?family=Muli); | ||
| @import url(http://fonts.googleapis.com/css?family=Pacifico); | ||
| @import url(http://fonts.googleapis.com/css?family=Sigmar+One); | ||
| @import url(metro-bootstrap.min.css); |
| @@ -1,43 +1,37 @@ | ||
| <html> | ||
| <head> | ||
| <title>Foodary · Tinder for Food</title> | ||
| <link rel="stylesheet" type="text/css" href="css/style.css"> | ||
| <script type="text/javascript" src="js/jQuery.min.js"></script> | ||
| <script type="text/javascript" src="js/bootstrap.min.js"></script> | ||
| <script type="text/javascript" src="js/ripple.js"></script> | ||
| <script type="text/javascript" src="js/WOW.js"></script> | ||
| <script type="text/javascript">new WOW().init();</script> | ||
| <script type="text/javascript"> | ||
| $(function() { | ||
| $('a[href*=#]:not([href=#])').click(function() { | ||
| if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | ||
| var target = $(this.hash); | ||
| target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | ||
| if (target.length) { | ||
| $('html,body').animate({ | ||
| scrollTop: target.offset().top | ||
| }, 1000); | ||
| return false; | ||
| } | ||
| } | ||
| this.toggleClass("active"); | ||
| }); | ||
| }); | ||
| </script> | ||
| </head> | ||
| <body> | ||
| <div class="jumbotron" align="center"> | ||
| <div class="container"> | ||
| <h1>Foodary</h1> | ||
| <h2>Find the food near you</h2> | ||
| <button class="btn btn-primary"><h4><a href="try.html" style="color:#FFF">Try it(alpha)</a></h4></button> | ||
| </div> | ||
| </div> | ||
| </body> | ||
| </html> |
| @@ -0,0 +1,93 @@ | ||
| window.onload = function(){ | ||
| //canvas init | ||
| var canvas = document.getElementById("canvas"); | ||
| var ctx = canvas.getContext("2d"); | ||
|
|
||
| //canvas dimensions | ||
| var W = window.innerWidth; | ||
| var H = window.innerHeight; | ||
| canvas.width = W; | ||
| canvas.height = H; | ||
|
|
||
| //snowflake particles | ||
| var mp = 25; //max particles | ||
| var particles = []; | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| particles.push({ | ||
| x: Math.random()*W, //x-coordinate | ||
| y: Math.random()*H, //y-coordinate | ||
| r: Math.random()*4+1, //radius | ||
| d: Math.random()*mp //density | ||
| }) | ||
| } | ||
|
|
||
| //Lets draw the flakes | ||
| function draw() | ||
| { | ||
| ctx.clearRect(0, 0, W, H); | ||
|
|
||
| ctx.fillStyle = "rgba(255, 255, 255, 0.8)"; | ||
| ctx.beginPath(); | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| var p = particles[i]; | ||
| ctx.moveTo(p.x, p.y); | ||
| ctx.arc(p.x, p.y, p.r, 0, Math.PI*2, true); | ||
| } | ||
| ctx.fill(); | ||
| update(); | ||
| } | ||
|
|
||
| //Function to move the snowflakes | ||
| //angle will be an ongoing incremental flag. Sin and Cos functions will be applied to it to create vertical and horizontal movements of the flakes | ||
| var angle = 0; | ||
| function update() | ||
| { | ||
| angle += 0.01; | ||
| for(var i = 0; i < mp; i++) | ||
| { | ||
| var p = particles[i]; | ||
| //Updating X and Y coordinates | ||
| //We will add 1 to the cos function to prevent negative values which will lead flakes to move upwards | ||
| //Every particle has its own density which can be used to make the downward movement different for each flake | ||
| //Lets make it more random by adding in the radius | ||
| p.y += Math.cos(angle+p.d) + 1 + p.r/2; | ||
| p.x += Math.sin(angle) * 2; | ||
|
|
||
| //Sending flakes back from the top when it exits | ||
| //Lets make it a bit more organic and let flakes enter from the left and right also. | ||
| if(p.x > W+5 || p.x < -5 || p.y > H) | ||
| { | ||
| if(i%3 > 0) //66.67% of the flakes | ||
| { | ||
| particles[i] = {x: Math.random()*W, y: -10, r: p.r, d: p.d}; | ||
| } | ||
| else | ||
| { | ||
| //If the flake is exitting from the right | ||
| if(Math.sin(angle) > 0) | ||
| { | ||
| //Enter from the left | ||
| particles[i] = {x: -5, y: Math.random()*H, r: p.r, d: p.d}; | ||
| } | ||
| else | ||
| { | ||
| //Enter from the right | ||
| particles[i] = {x: W+5, y: Math.random()*H, r: p.r, d: p.d}; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| //animation loop | ||
| setInterval(draw, 33); | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
| @@ -0,0 +1,16 @@ | ||
| $(function() { | ||
| $('a[href*=#]:not([href=#])').click(function() { | ||
| if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { | ||
|
|
||
| var target = $(this.hash); | ||
| target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); | ||
| if (target.length) { | ||
| $('html,body').animate({ | ||
| scrollTop: target.offset().top | ||
| }, 1000); | ||
| return false; | ||
| } | ||
| } | ||
| this.toggleClass("active"); | ||
| }); | ||
| }); |
| @@ -0,0 +1,9 @@ | ||
| $(".navitem").click(function(e) { | ||
| e.preventDefault(); | ||
| $("#sidebar-wrapper").toggleClass("active"); | ||
| }); | ||
|
|
||
| $("#menu-toggle").click(function(e) { | ||
| e.preventDefault(); | ||
| $("#sidebar-wrapper").toggleClass("active"); | ||
| }); |
| @@ -0,0 +1,333 @@ | ||
| // The MIT License (MIT) | ||
|
|
||
| // Typed.js | Copyright (c) 2014 Matt Boldt | www.mattboldt.com | ||
|
|
||
| // Permission is hereby granted, free of charge, to any person obtaining a copy | ||
| // of this software and associated documentation files (the "Software"), to deal | ||
| // in the Software without restriction, including without limitation the rights | ||
| // to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
| // copies of the Software, and to permit persons to whom the Software is | ||
| // furnished to do so, subject to the following conditions: | ||
|
|
||
| // The above copyright notice and this permission notice shall be included in | ||
| // all copies or substantial portions of the Software. | ||
|
|
||
| // THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
| // IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
| // FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
| // AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
| // LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
| // OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN | ||
| // THE SOFTWARE. | ||
|
|
||
|
|
||
|
|
||
|
|
||
| !function($){ | ||
|
|
||
| "use strict"; | ||
|
|
||
| var Typed = function(el, options){ | ||
|
|
||
| // chosen element to manipulate text | ||
| this.el = $(el); | ||
|
|
||
| // options | ||
| this.options = $.extend({}, $.fn.typed.defaults, options); | ||
|
|
||
| // text content of element | ||
| this.baseText = this.el.text() || this.el.attr('placeholder') || ''; | ||
|
|
||
| // typing speed | ||
| this.typeSpeed = this.options.typeSpeed; | ||
|
|
||
| // add a delay before typing starts | ||
| this.startDelay = this.options.startDelay; | ||
|
|
||
| // backspacing speed | ||
| this.backSpeed = this.options.backSpeed; | ||
|
|
||
| // amount of time to wait before backspacing | ||
| this.backDelay = this.options.backDelay; | ||
|
|
||
| // input strings of text | ||
| this.strings = this.options.strings; | ||
|
|
||
| // character number position of current string | ||
| this.strPos = 0; | ||
|
|
||
| // current array position | ||
| this.arrayPos = 0; | ||
|
|
||
| // number to stop backspacing on. | ||
| // default 0, can change depending on how many chars | ||
| // you want to remove at the time | ||
| this.stopNum = 0; | ||
|
|
||
| // Looping logic | ||
| this.loop = this.options.loop; | ||
| this.loopCount = this.options.loopCount; | ||
| this.curLoop = 0; | ||
|
|
||
| // for stopping | ||
| this.stop = false; | ||
|
|
||
| // show cursor | ||
| this.showCursor = this.isInput ? false : this.options.showCursor; | ||
|
|
||
| // custom cursor | ||
| this.cursorChar = this.options.cursorChar; | ||
|
|
||
| // attribute to type | ||
| this.isInput = this.el.is('input'); | ||
| this.attr = this.options.attr || (this.isInput ? 'placeholder' : null); | ||
|
|
||
| // All systems go! | ||
| this.build(); | ||
| }; | ||
|
|
||
| Typed.prototype = { | ||
|
|
||
| constructor: Typed | ||
|
|
||
| , init: function(){ | ||
| // begin the loop w/ first current string (global self.string) | ||
| // current string will be passed as an argument each time after this | ||
| var self = this; | ||
| self.timeout = setTimeout(function() { | ||
| // Start typing | ||
| self.typewrite(self.strings[self.arrayPos], self.strPos); | ||
| }, self.startDelay); | ||
| } | ||
|
|
||
| , build: function(){ | ||
| // Insert cursor | ||
| if (this.showCursor === true){ | ||
| this.cursor = $("<span class=\"typed-cursor\">" + this.cursorChar + "</span>"); | ||
| this.el.after(this.cursor); | ||
| } | ||
| this.init(); | ||
| } | ||
|
|
||
| // pass current string state to each function, types 1 char per call | ||
| , typewrite: function(curString, curStrPos){ | ||
| // exit when stopped | ||
| if(this.stop === true) | ||
| return; | ||
|
|
||
| // varying values for setTimeout during typing | ||
| // can't be global since number changes each time loop is executed | ||
| var humanize = Math.round(Math.random() * (100 - 30)) + this.typeSpeed; | ||
| var self = this; | ||
|
|
||
| // ------------- optional ------------- // | ||
| // backpaces a certain string faster | ||
| // ------------------------------------ // | ||
| // if (self.arrayPos == 1){ | ||
| // self.backDelay = 50; | ||
| // } | ||
| // else{ self.backDelay = 500; } | ||
|
|
||
| // contain typing function in a timeout humanize'd delay | ||
| self.timeout = setTimeout(function() { | ||
| // check for an escape character before a pause value | ||
| // format: \^\d+ .. eg: ^1000 .. should be able to print the ^ too using ^^ | ||
| // single ^ are removed from string | ||
| var charPause = 0; | ||
| var substr = curString.substr(curStrPos); | ||
| if (substr.charAt(0) === '^') { | ||
| var skip = 1; // skip atleast 1 | ||
| if(/^\^\d+/.test(substr)) { | ||
| substr = /\d+/.exec(substr)[0]; | ||
| skip += substr.length; | ||
| charPause = parseInt(substr); | ||
| } | ||
|
|
||
| // strip out the escape character and pause value so they're not printed | ||
| curString = curString.substring(0,curStrPos)+curString.substring(curStrPos+skip); | ||
| } | ||
|
|
||
| // timeout for any pause after a character | ||
| self.timeout = setTimeout(function() { | ||
| if(curStrPos === curString.length) { | ||
| // fires callback function | ||
| self.options.onStringTyped(self.arrayPos); | ||
|
|
||
| // is this the final string | ||
| if(self.arrayPos === self.strings.length-1) { | ||
| // animation that occurs on the last typed string | ||
| self.options.callback(); | ||
|
|
||
| self.curLoop++; | ||
|
|
||
| // quit if we wont loop back | ||
| if(self.loop === false || self.curLoop === self.loopCount) | ||
| return; | ||
| } | ||
|
|
||
| self.timeout = setTimeout(function(){ | ||
| self.backspace(curString, curStrPos); | ||
| }, self.backDelay); | ||
| } else { | ||
|
|
||
| /* call before functions if applicable */ | ||
| if(curStrPos === 0) | ||
| self.options.preStringTyped(self.arrayPos); | ||
|
|
||
| // start typing each new char into existing string | ||
| // curString: arg, self.baseText: original text inside element | ||
| var nextString = self.baseText + curString.substr(0, curStrPos+1); | ||
| if (self.attr) { | ||
| self.el.attr(self.attr, nextString); | ||
| } else { | ||
| self.el.text(nextString); | ||
| } | ||
|
|
||
| // add characters one by one | ||
| curStrPos++; | ||
| // loop the function | ||
| self.typewrite(curString, curStrPos); | ||
| } | ||
| // end of character pause | ||
| }, charPause); | ||
|
|
||
| // humanized value for typing | ||
| }, humanize); | ||
|
|
||
| } | ||
|
|
||
| , backspace: function(curString, curStrPos){ | ||
| // exit when stopped | ||
| if (this.stop === true) { | ||
| return; | ||
| } | ||
|
|
||
| // varying values for setTimeout during typing | ||
| // can't be global since number changes each time loop is executed | ||
| var humanize = Math.round(Math.random() * (100 - 30)) + this.backSpeed; | ||
| var self = this; | ||
|
|
||
| self.timeout = setTimeout(function() { | ||
|
|
||
| // ----- this part is optional ----- // | ||
| // check string array position | ||
| // on the first string, only delete one word | ||
| // the stopNum actually represents the amount of chars to | ||
| // keep in the current string. In my case it's 14. | ||
| // if (self.arrayPos == 1){ | ||
| // self.stopNum = 14; | ||
| // } | ||
| //every other time, delete the whole typed string | ||
| // else{ | ||
| // self.stopNum = 0; | ||
| // } | ||
|
|
||
| // ----- continue important stuff ----- // | ||
| // replace text with base text + typed characters | ||
| var nextString = self.baseText + curString.substr(0, curStrPos); | ||
| if (self.attr) { | ||
| self.el.attr(self.attr, nextString); | ||
| } else { | ||
| self.el.text(nextString); | ||
| } | ||
|
|
||
| // if the number (id of character in current string) is | ||
| // less than the stop number, keep going | ||
| if (curStrPos > self.stopNum){ | ||
| // subtract characters one by one | ||
| curStrPos--; | ||
| // loop the function | ||
| self.backspace(curString, curStrPos); | ||
| } | ||
| // if the stop number has been reached, increase | ||
| // array position to next string | ||
| else if (curStrPos <= self.stopNum) { | ||
| self.arrayPos++; | ||
|
|
||
| if(self.arrayPos === self.strings.length) { | ||
| self.arrayPos = 0; | ||
| self.init(); | ||
| } else | ||
| self.typewrite(self.strings[self.arrayPos], curStrPos); | ||
| } | ||
|
|
||
| // humanized value for typing | ||
| }, humanize); | ||
|
|
||
| } | ||
|
|
||
| // Start & Stop currently not working | ||
|
|
||
| // , stop: function() { | ||
| // var self = this; | ||
|
|
||
| // self.stop = true; | ||
| // clearInterval(self.timeout); | ||
| // } | ||
|
|
||
| // , start: function() { | ||
| // var self = this; | ||
| // if(self.stop === false) | ||
| // return; | ||
|
|
||
| // this.stop = false; | ||
| // this.init(); | ||
| // } | ||
|
|
||
| // Reset and rebuild the element | ||
| , reset: function(){ | ||
| var self = this; | ||
| clearInterval(self.timeout); | ||
| var id = this.el.attr('id'); | ||
| this.el.after('<span id="' + id + '"/>') | ||
| this.el.remove(); | ||
| this.cursor.remove(); | ||
| // Send the callback | ||
| self.options.resetCallback(); | ||
| } | ||
|
|
||
| }; | ||
|
|
||
| $.fn.typed = function (option) { | ||
| return this.each(function () { | ||
| var $this = $(this) | ||
| , data = $this.data('typed') | ||
| , options = typeof option == 'object' && option; | ||
| if (!data) $this.data('typed', (data = new Typed(this, options))); | ||
| if (typeof option == 'string') data[option](); | ||
| }); | ||
| }; | ||
|
|
||
| $.fn.typed.defaults = { | ||
| strings: ["These are the default values...", "You know what you should do?", "Use your own!", "Have a great day!"], | ||
| // typing speed | ||
| typeSpeed: 0, | ||
| // time before typing starts | ||
| startDelay: 0, | ||
| // backspacing speed | ||
| backSpeed: 0, | ||
| // time before backspacing | ||
| backDelay: 500, | ||
| // loop | ||
| loop: false, | ||
| // false = infinite | ||
| loopCount: false, | ||
| // show cursor | ||
| showCursor: true, | ||
| // character for cursor | ||
| cursorChar: "|", | ||
| // attribute to type (null == text) | ||
| attr: null, | ||
| // call when done callback function | ||
| callback: function() {}, | ||
| // starting callback function before each string | ||
| preStringTyped: function() {}, | ||
| //callback for every typed string | ||
| onStringTyped: function() {}, | ||
| // callback for reset | ||
| resetCallback: function() {} | ||
| }; | ||
|
|
||
|
|
||
| }(window.jQuery); | ||
|
|
| @@ -0,0 +1,16 @@ | ||
| // Bordered & Pulled | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-border { | ||
| padding: .2em .25em .15em; | ||
| border: solid .08em @fa-border-color; | ||
| border-radius: .1em; | ||
| } | ||
|
|
||
| .pull-right { float: right; } | ||
| .pull-left { float: left; } | ||
|
|
||
| .@{fa-css-prefix} { | ||
| &.pull-left { margin-right: .3em; } | ||
| &.pull-right { margin-left: .3em; } | ||
| } |
| @@ -0,0 +1,12 @@ | ||
| // Base Class Definition | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix} { | ||
| display: inline-block; | ||
| font-family: FontAwesome; | ||
| font-style: normal; | ||
| font-weight: normal; | ||
| line-height: 1; | ||
| -webkit-font-smoothing: antialiased; | ||
| -moz-osx-font-smoothing: grayscale; | ||
| } |
| @@ -0,0 +1,6 @@ | ||
| // Fixed Width Icons | ||
| // ------------------------- | ||
| .@{fa-css-prefix}-fw { | ||
| width: (18em / 14); | ||
| text-align: center; | ||
| } |
| @@ -0,0 +1,17 @@ | ||
| /*! | ||
| * Font Awesome 4.1.0 by @davegandy - http://fontawesome.io - @fontawesome | ||
| * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License) | ||
| */ | ||
|
|
||
| @import "variables.less"; | ||
| @import "mixins.less"; | ||
| @import "path.less"; | ||
| @import "core.less"; | ||
| @import "larger.less"; | ||
| @import "fixed-width.less"; | ||
| @import "list.less"; | ||
| @import "bordered-pulled.less"; | ||
| @import "spinning.less"; | ||
| @import "rotated-flipped.less"; | ||
| @import "stacked.less"; | ||
| @import "icons.less"; |
| @@ -0,0 +1,13 @@ | ||
| // Icon Sizes | ||
| // ------------------------- | ||
|
|
||
| /* makes the font 33% larger relative to the icon container */ | ||
| .@{fa-css-prefix}-lg { | ||
| font-size: (4em / 3); | ||
| line-height: (3em / 4); | ||
| vertical-align: -15%; | ||
| } | ||
| .@{fa-css-prefix}-2x { font-size: 2em; } | ||
| .@{fa-css-prefix}-3x { font-size: 3em; } | ||
| .@{fa-css-prefix}-4x { font-size: 4em; } | ||
| .@{fa-css-prefix}-5x { font-size: 5em; } |
| @@ -0,0 +1,19 @@ | ||
| // List Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-ul { | ||
| padding-left: 0; | ||
| margin-left: @fa-li-width; | ||
| list-style-type: none; | ||
| > li { position: relative; } | ||
| } | ||
| .@{fa-css-prefix}-li { | ||
| position: absolute; | ||
| left: -@fa-li-width; | ||
| width: @fa-li-width; | ||
| top: (2em / 14); | ||
| text-align: center; | ||
| &.@{fa-css-prefix}-lg { | ||
| left: -@fa-li-width + (4em / 14); | ||
| } | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| // Mixins | ||
| // -------------------------- | ||
|
|
||
| .fa-icon-rotate(@degrees, @rotation) { | ||
| filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation); | ||
| -webkit-transform: rotate(@degrees); | ||
| -moz-transform: rotate(@degrees); | ||
| -ms-transform: rotate(@degrees); | ||
| -o-transform: rotate(@degrees); | ||
| transform: rotate(@degrees); | ||
| } | ||
|
|
||
| .fa-icon-flip(@horiz, @vert, @rotation) { | ||
| filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=@rotation, mirror=1); | ||
| -webkit-transform: scale(@horiz, @vert); | ||
| -moz-transform: scale(@horiz, @vert); | ||
| -ms-transform: scale(@horiz, @vert); | ||
| -o-transform: scale(@horiz, @vert); | ||
| transform: scale(@horiz, @vert); | ||
| } |
| @@ -0,0 +1,14 @@ | ||
| /* FONT PATH | ||
| * -------------------------- */ | ||
|
|
||
| @font-face { | ||
| font-family: 'FontAwesome'; | ||
| src: ~"url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}')"; | ||
| src: ~"url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype')", | ||
| ~"url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff')", | ||
| ~"url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype')", | ||
| ~"url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg')"; | ||
| // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts | ||
| font-weight: normal; | ||
| font-style: normal; | ||
| } |
| @@ -0,0 +1,9 @@ | ||
| // Rotated & Flipped Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-rotate-90 { .fa-icon-rotate(90deg, 1); } | ||
| .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); } | ||
| .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); } | ||
|
|
||
| .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); } | ||
| .@{fa-css-prefix}-flip-vertical { .fa-icon-flip(1, -1, 2); } |
| @@ -0,0 +1,32 @@ | ||
| // Spinning Icons | ||
| // -------------------------- | ||
|
|
||
| .@{fa-css-prefix}-spin { | ||
| -webkit-animation: spin 2s infinite linear; | ||
| -moz-animation: spin 2s infinite linear; | ||
| -o-animation: spin 2s infinite linear; | ||
| animation: spin 2s infinite linear; | ||
| } | ||
|
|
||
| @-moz-keyframes spin { | ||
| 0% { -moz-transform: rotate(0deg); } | ||
| 100% { -moz-transform: rotate(359deg); } | ||
| } | ||
| @-webkit-keyframes spin { | ||
| 0% { -webkit-transform: rotate(0deg); } | ||
| 100% { -webkit-transform: rotate(359deg); } | ||
| } | ||
| @-o-keyframes spin { | ||
| 0% { -o-transform: rotate(0deg); } | ||
| 100% { -o-transform: rotate(359deg); } | ||
| } | ||
| @keyframes spin { | ||
| 0% { | ||
| -webkit-transform: rotate(0deg); | ||
| transform: rotate(0deg); | ||
| } | ||
| 100% { | ||
| -webkit-transform: rotate(359deg); | ||
| transform: rotate(359deg); | ||
| } | ||
| } |
| @@ -0,0 +1,20 @@ | ||
| // Stacked Icons | ||
| // ------------------------- | ||
|
|
||
| .@{fa-css-prefix}-stack { | ||
| position: relative; | ||
| display: inline-block; | ||
| width: 2em; | ||
| height: 2em; | ||
| line-height: 2em; | ||
| vertical-align: middle; | ||
| } | ||
| .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x { | ||
| position: absolute; | ||
| left: 0; | ||
| width: 100%; | ||
| text-align: center; | ||
| } | ||
| .@{fa-css-prefix}-stack-1x { line-height: inherit; } | ||
| .@{fa-css-prefix}-stack-2x { font-size: 2em; } | ||
| .@{fa-css-prefix}-inverse { color: @fa-inverse; } |
