Meme generator
- From Codecademy jQuery Project
A Pen by Sonya Moisset on CodePen.
Created
October 21, 2015 05:02
-
-
Save SonyaMoisset/23169f1679dc3a2ec017 to your computer and use it in GitHub Desktop.
Create Your Meme
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> | |
| <head> | |
| <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <div class="container"> | |
| <img src="http://vignette3.wikia.nocookie.net/fantendo/images/d/dc/Nyancat.png/revision/latest?cb=20130215170144"> | |
| <h1>Nyan Meme</h1> | |
| </div> | |
| </div> | |
| <div class="main"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-md-6"> | |
| <div class="meme thumbnail"> | |
| <img id="meme" src="https://www.petfinder.com/wp-content/uploads/2012/11/140272627-grooming-needs-senior-cat-632x475.jpg"> | |
| <h1 class="top-caption">Miou Miou</h1> | |
| <h1 class="bottom-caption">Miou</h1> | |
| </div> | |
| </div> | |
| <div class="col-md-6"> | |
| <div class="tool"> | |
| <h2>Create your meme</h2> | |
| <form role="form"> | |
| <div class="form-group"> | |
| <label>Enter an Image URL</label> | |
| <input id="image-url" type="text" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label> Enter Top text</label> | |
| <input id="top-text" type="text" class="form-control"> | |
| </div> | |
| <div class="form-group"> | |
| <label>Enter Bottom text</label> | |
| <input id="bottom-text" type="text" class="form-control"> | |
| </div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="app.js"></script> | |
| </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
| var main = function() { | |
| $('#top-text').keyup(function() { | |
| var top = $(this).val(); | |
| $('.top-caption').text(top); | |
| }); | |
| $('#bottom-text').keyup(function() { | |
| var bottom = $(this).val(); | |
| $('.bottom-caption').text(bottom); | |
| }); | |
| $('#image-url').keyup(function() { | |
| var image = $(this).val(); | |
| $('#meme').attr('src', image); | |
| }); | |
| }; | |
| $(document).ready(main); |
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> |
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, | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| font-family: "Open Sans", sans-serif; | |
| } | |
| .header { | |
| background: #74d795; | |
| margin-bottom: 40px; | |
| padding: 10px 0; | |
| } | |
| .header img { | |
| width: 90px; | |
| margin: -10px 10px 0 0; | |
| } | |
| .header h1 { | |
| color: #fff; | |
| text-transform: uppercase; | |
| display: inline-block; | |
| } | |
| .tool h2 { | |
| font-size: 25px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| padding-top: 15px; | |
| } | |
| .meme { | |
| position: relative; | |
| } | |
| .top-caption, | |
| .bottom-caption { | |
| font-family: Impact, sans-serif; | |
| color: #fff; | |
| text-shadow: #000 0px 0px 6px; | |
| text-transform: uppercase; | |
| text-align: center; | |
| font-size: 50px; | |
| } | |
| .top-caption { | |
| top: 10px; | |
| left: 0; | |
| right: 0; | |
| margin: 0 auto; | |
| position: absolute; | |
| } | |
| .bottom-caption { | |
| bottom: 10px; | |
| left: 0; | |
| right: 0; | |
| margin: 0 auto; | |
| position: absolute; | |
| } | |
| .tool h2 { | |
| margin-top: 0; | |
| margin-bottom: 20px; | |
| font-size: 25px; | |
| } | |
| .tool form label { | |
| margin-bottom: 10px; | |
| } | |
| .tool input { | |
| border-radius: 0; | |
| border: 0; | |
| border-bottom: 5px solid #74d795; | |
| box-shadow: none; | |
| } | |
| input[type="text"]:focus { | |
| border: 0; | |
| border-bottom: 5px solid #1a7171; | |
| outline: 0; | |
| box-shadow: none; | |
| } |
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" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
hi lmk if you'd love some collabs on making meme videos