A Pen by Shahid Foy on CodePen.
Created
December 25, 2015 21:31
-
-
Save shahidfoy/b4153a581fb926e719d2 to your computer and use it in GitHub Desktop.
Yoda Quote Generator
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>Yoda Quotes</title> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> | |
| <div class="jumbotron"> | |
| <div class="container"> | |
| <br> | |
| <div class="info"> | |
| <a href="http://fontmeme.com/star-wars-font/"> | |
| <img src="http://fontmeme.com/embed.php?text=star&name=Starjedi.ttf&size=50&style_color=F3FA1B" alt="Star Wars Font"> | |
| </a> | |
| <br> | |
| <img class="starwarsBottom" src="http://fontmeme.com/embed.php?text=wars&name=Starjedi.ttf&size=50&style_color=F3FA1B" alt="Star Wars Font"> | |
| <br> | |
| <img class="yodaFont" src="http://fontmeme.com/embed.php?text=Yoda%20quote%20Generator&name=Starjedi.ttf&size=100&style_color=F7F7FA" alt="Star Wars Font"> | |
| </div> | |
| <br> | |
| <div class"quote-generator"> | |
| <button class="btn btn-primary"> USE THE FORCE <i class="fa fa-hand-paper-o"> </i></button> | |
| <br> | |
| <br> | |
| <a href="https://twitter.com/share" class="twitter-share-button"{count} data-url="http://codepen.io/shahidfoy/full/MKjaBr/" data-hashtags="theForce">Tweet</a> | |
| <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script> | |
| <br> | |
| <br> | |
| <br> | |
| <div class="quotes"> | |
| <div class="container"> | |
| <p id="yodaQuotes"></p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
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() { | |
| $("img").addClass("animated bounce"); | |
| function quoteGenerator() { | |
| var quotes = ["\"Fear is the path to the dark side. Fear leads to anger. Anger leads to hate. Hate leads to suffering.\" - Yoda", "\"Death is a natural part of life. Rejoice for those around you who transform into the Force. Mourn them do not. Miss them do not. Attachment leads to jealously. The shadow of greed, that is.\" - Yoda", "\"Always pass on what you have learned.\"- Yoda", "\"You will know (the good from the bad) when you are calm, at peace. Passive. A Jedi uses the Force for knowledge and defense, never for attack.\"- Yoda", "\"[Luke:] I can’t believe it. [Yoda:] That is why you fail.\"", "\"Yes, a Jedi’s strength flows from the Force. But beware of the dark side. Anger, fear, aggression; the dark side of the Force are they. Easily they flow, quick to join you in a fight. If once you start down the dark path, forever will it dominate your destiny, consume you it will, as it did Obi-Wan’s apprentice.\"- Yoda", "\"Powerful you have become, the dark side I sense in you.\"- Yoda", "\"PATIENCE YOU MUST HAVE my young padawan\"", "\"You must unlearn what you have learned.\"- Yoda", "\"When you look at the dark side, careful you must be. For the dark side looks back.\"-Yoda"]; | |
| var random = Math.floor((Math.random()*10)+1); | |
| var theForce = quotes[random]; | |
| $("#yodaQuotes").text(theForce); | |
| } | |
| $("button").click(function(){ | |
| quoteGenerator(); | |
| }); | |
| }); |
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 { | |
| background-color: white; | |
| text-align: center; | |
| max-width: 920px; | |
| min-width: 300px; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| .jumbotron { | |
| background-image: url("http://wallpaperesque.com/wp-content/uploads/plixpapers1504/star_wars_wallpaper_background_34150-640x480.jpg"); | |
| background-size: cover; | |
| height: 600px; | |
| } | |
| .starwarsBottom { | |
| margin-top: -28px; | |
| } | |
| .yodaFont { | |
| min-width: 100px; | |
| max-width: 300px; | |
| border-bottom: solid 4px Lime; | |
| border-left: solid 1px Lime; | |
| border-right: solid 1px Lime; | |
| border-top: solid 1px Lime; | |
| padding: 8px; | |
| border-radius: 5px; | |
| } | |
| .yodaPic img { | |
| border-radius: 50%; | |
| width: 20%; | |
| height: 20%; | |
| border: solid 5px Yellow; | |
| } | |
| .quotes { | |
| background-color: LimeGreen; | |
| color: white; | |
| padding: 5px; | |
| border-radius: 5px; | |
| border: solid 5px white; | |
| opacity: 0.8; | |
| width: 80%; | |
| position: relative; | |
| margin-left: 80px; | |
| } | |
| .quotes p { | |
| color: white; | |
| } | |
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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment