Gravatar monogram playground
How do I make an gravatar monogram playground?
What is a gravatar monogram playground? How do you make a gravatar monogram playground? This script and codes were developed by Tom on 30 November 2022, Wednesday.
Gravatar monogram playground Previews
Gravatar monogram playground - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Gravatar monogram playground</title> <link href="https://fonts.googleapis.com/css?family=Bungee|Bungee+Shade|Galada|Jomhuria|Lobster|Mogra|Roboto+Slab|Suez+One" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="main"></div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>Gravatar monogram playground - Script Codes CSS Codes
body { text-align: center; margin: 0; background: #242728;
}
p { color: white; font-size: 30px;
}
ul { display: block; float: left; width: 100%; list-style: none; margin: 0 auto 1em; padding: 0; line-height: 1.9;
}
li { display: block; float: left; width: 265px; height: 265px; margin: 10px; padding: 0; border-radius: 50%; background: white; outline: 1px solid white; overflow: hidden;
}Gravatar monogram playground - Script Codes JS Codes
'use strict';
var monogramOptions = [{ font: 'Galada', set: 'tr tpr TR', setStyle: 'font-size: 210px; line-height: 1.5;', myStyle: {} }, { font: 'Jomhuria', set: 't tr tpr T TR TPR', setStyle: 'font-size: 260px; line-height: 1.2;', myStyle: { 'T': 'font-size: 590px; line-height: 0.65;', 'TR': 'font-size: 400px; line-height: 0.8' } }, { font: 'Jomhuria', set: 'TR', setStyle: 'font-size: 260px; line-height: 1.2;', myStyle: { 'TR': '' } }, { font: 'Lobster', set: 't tr tpr T TR TPR', setStyle: 'font-size: 210px; line-height: 1.2;', myStyle: {} }, { font: 'Roboto Slab', set: 't tr tpr T TR TPR', setStyle: 'font-size: 150px; line-height: 1.7;', myStyle: {} }, { font: 'Suez One', set: 't tr tpr T TR TPR', setStyle: 'font-size: 310px; line-height: 0.9;', myStyle: {} }, { font: 'Bungee Shade', set: 't tr tpr T TR TPR', setStyle: 'font-size: 210px; line-height: 1.2;', myStyle: {} }, { font: 'Bungee', set: 't tr tpr T TR TPR', setStyle: 'font-size: 230px; line-height: 1.2;', myStyle: {} }, { font: 'Mogra', set: 't tr tpr T TR TPR', setStyle: 'font-size: 220px; line-height: 1.5;', myStyle: {} }];
// font * monogram
var elements = { main: $('#main')
};
monogramOptions.forEach(function (monogramSet) { var font = monogramSet.font; var setStyle = monogramSet.setStyle; var set = monogramSet.set; var run = $('<ul style="font-family: \'' + font + '\'; ' + setStyle + '">'); set.split(' ').forEach(function (txt) { var myStyle = monogramSet.myStyle[txt] || ''; run.append($('<li style="' + myStyle + '">' + txt + '</li>')); }); elements.main.append($('<p>' + font + '</p>')); elements.main.append(run);
});
| Developer | Tom |
| Username | tomprogers |
| Uploaded | November 30, 2022 |
| Rating | 3 |
| Size | 3,235 Kb |
| Views | 10,120 |
Do you need developer help for Gravatar monogram playground?
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!
Tom (tomprogers) Script Codes
| Name | Size |
| Crawford - layout | 4,049 Kb |
| JQueryUI widemeter widget | 2,648 Kb |
| JQueryUI Capacity Meter widget | 2,612 Kb |
| Demo of some course-list filtering | 9,852 Kb |
| Dark theme search box | 2,187 Kb |
| Table styling | 3,298 Kb |
| Progress bar | 1,974 Kb |
| Web component sandbox | 1,936 Kb |
| Static doc search | 5,255 Kb |
| Encoding | 3,245 Kb |
Create amazing sales emails 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!
Similar Scripts & Codes
| Name | Username | Size |
| Vanilla JS - A toggleClass function | Woodwork | 2,532 Kb |
| Very Simple Slider | Doodlemarks | 2,682 Kb |
| Growing Root - Scroll control - CANVAS | Cjonasw | 2,342 Kb |
| A Pen by Miro Olma | Programiro | 2,342 Kb |
| Clock Face Idea | Chrisburnell | 3,196 Kb |
| Toggle Time | Petebot | 5,345 Kb |
| To Do List with Delete | Mattlbrody | 2,068 Kb |
| Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
| Ball bouncing loading animation | Adam2326 | 3,144 Kb |
| Flip test | Madhes | 1,635 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!