Meme Generator+

Developer
Yang Li
Size
2,410 Kb
Views
56,672
  1. Meme Generator+ Previews
  2. Meme Generator+ HTML Codes
  3. Meme Generator+ CSS Codes
  4. Meme Generator+ JS Codes

How do I make an meme generator+?

What is a meme generator+? How do you make a meme generator+? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.

Meme Generator+ Previews
IQ Test

Meme Generator+ - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Meme Generator+</title> <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h1>Meme Generator</h1>
<div id="container"> <div id="meme"> <h2 id="top">Top Text</h2> <img id="memepic" src="https://cdn.meme.am/cache/images/folder805/2729805.jpg" alt="" /> <h2 id="bottom">Bottom Text</h2> </div> <div id="form"> <h3>Create your meme:</h3> <form action=""> <label>Image URL:</label> <input id="image-url" type="text" class="form-control"> <label>Top text:</label> <input id="top-text" type="text" class="form-control"> <label>Bottom text:</label> <input id="bottom-text" type="text" class="form-control"> </form> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Meme Generator+ - Script Codes CSS Codes

body{ margin: 0; padding: 0; font-family: 'Varela Round', sans-serif;
}
h1 { display: block; text-align: center; background-color: cyan; padding: 10px;
}
#container { display: flex; justify-content: space-around; vertical-align: center; width: 70%; margin: auto
}
#container div { display: block; border: 1px dotted brown; width: 49%; padding-top: 35%; position: relative; overflow: hidden;
}
img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1;
}
#meme h2 { color: white; display: block; text-align: center; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
#top, h3 { text-align: center; position: absolute; top: 5px; left: 0; right: 0;
}
form { position: absolute; width: 90%; height: 60%; top: 80px; left: 10px; display: flex; flex-direction: column; justify-content: space-around;
}
input { height: 35px; font-size: 1.15em; color: grey; border: none; border-bottom: 2px solid red; outline: none;
}
@media screen and (max-width: 800px) { #container{ flex-wrap: wrap; } #container div{ width: 90%; padding-top: 70%; }
}

Meme Generator+ - Script Codes JS Codes

 $('#top-text').keyup(function() {	var toptext = $('#top-text').val(); $('#top').text(toptext); }); $('#bottom-text').keyup(function() {	var bottomtext = $('#bottom-text').val(); $('#bottom').text(bottomtext); });	$('#image-url').keyup(function() {	var imageurl = $('#image-url').val(); $('#memepic').attr('src', imageurl); });
Meme Generator+ - Script Codes
Meme Generator+ - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded July 13, 2022
Rating 3
Size 2,410 Kb
Views 56,672
Do you need developer help for Meme Generator+?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yang Li (aussieyang) Script Codes
Name
Responding Boxes
Googly Eye
Simple Hamburger Menu
Mac Bar
Fellowship of the Ring
Animated Clock
Click Me, Name Me
Hamburger Menu Starter
Recreate Google Starter
Animated Clock Starter
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!