Letter
How do I make an letter?
Like at Gravatar. What is a letter? How do you make a letter? This script and codes were developed by Roman Budnikov on 20 January 2023, Friday.
Letter - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Letter</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='letter'> <div id='left_top'></div> <div id='right_top'></div> <div id='letter_body'> <div id='text'>Wazzup?</div> </div> <div id='right_bottom'></div> <div id='left_bottom'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Letter - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300&subset=latin,cyrillic);
#letter { width: 600px; height: 300px; margin: 50px auto;
}
#letter #left_top { position: absolute; width: 20px; height: 100px; margin: -50px -10px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -transform: rotate(45deg); -webkit-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -webkit-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -moz-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -o-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); z-index: 101; background-color: white;
}
#letter #right_top { position: absolute; width: 20px; height: 100px; margin: -50px 590px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -transform: rotate(-45deg); -webkit-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -webkit-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -moz-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -o-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); z-index: 101; background-color: white;
}
#letter #letter_body { z-index: 100; position: absolute; width: 600px; height: 300px; -webkit-box-shadow: 0px 0px 0px 1px rgba(150, 150, 150, 0.4), 0px 0px 25px 10px rgba(150, 150, 150, 0.2); -moz-box-shadow: 0px 0px 0px 1px rgba(150, 150, 150, 0.4), 0px 0px 25px 10px rgba(150, 150, 150, 0.2); -o-box-shadow: 0px 0px 0px 1px rgba(150, 150, 150, 0.4), 0px 0px 25px 10px rgba(150, 150, 150, 0.2); -box-shadow: 0px 0px 0px 1px rgba(150, 150, 150, 0.4), 0px 0px 25px 10px rgba(150, 150, 150, 0.2);
}
#letter #letter_body #text { font-family: 'Open Sans Condensed', sans-serif; font-size: 6.4em; text-align: center; color: #969696; margin-top: 60px; width: auto;
}
#letter #right_bottom { position: absolute; width: 20px; height: 100px; margin: 250px -10px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -transform: rotate(-45deg); -webkit-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -webkit-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -moz-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -o-box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); -box-shadow: 1px 0px 0px 0px rgba(150, 150, 150, 0.5); z-index: 101; background-color: white;
}
#letter #left_bottom { position: absolute; width: 20px; height: 100px; margin: 250px 590px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -transform: rotate(45deg); -webkit-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -webkit-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -moz-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -o-box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); -box-shadow: -1px 0px 0px 0px rgba(150, 150, 150, 0.5); z-index: 101; background-color: white;
}
Letter - Script Codes JS Codes
(function() {
}).call(this);
Developer | Roman Budnikov |
Username | supro |
Uploaded | January 20, 2023 |
Rating | 3 |
Size | 3,032 Kb |
Views | 6,072 |
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!
Name | Size |
404 page | 64,234 Kb |
AngularJS Skills | 3,312 Kb |
Flat animated buttons | 3,210 Kb |
A Pen by Roman Budnikov | 16,608 Kb |
Compact menu | 3,181 Kb |
Rating | 2,426 Kb |
App header | 4,968 Kb |
Foundle.com redesign | 9,901 Kb |
Flex barcket | 3,460 Kb |
Rodeo-004 example | 10,586 Kb |
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!
Name | Username | Size |
Spiralator 9000 | AdmiralPotato | 4,671 Kb |
Custom checkbox example | Capelo | 3,495 Kb |
Welcome | Nakome | 6,076 Kb |
CSS 3D Radio buttons | Andreasnylin | 1,650 Kb |
To Do List with Delete | Mattlbrody | 2,068 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
SVG Animation | Pollardld | 3,133 Kb |
Carousel Test | Sbirchall | 1,509 Kb |
BlueBox Fork | Huskynation | 12,675 Kb |
Scarlett Johansson Tribute Page | Diomed | 3,233 Kb |
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!