Upload Form with a Grumpy Cat
How do I make an upload form with a grumpy cat?
Inspired by this: http://dribbble.com/shots/1079162-Account-Setup-Rebound?list=popular&offset=305. What is a upload form with a grumpy cat? How do you make a upload form with a grumpy cat? This script and codes were developed by Aleks on 14 October 2022, Friday.
Upload Form with a Grumpy Cat - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Upload Form with a Grumpy Cat</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ @import url(https://fonts.googleapis.com/css?family=Nunito);
body { overflow: hidden; font-family: 'Nunito', sans-serif; background: #616159; text-align: center;
}
#center { background: #252523; width: 300px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -200px; border-radius: 4px; box-shadow: 0px 0px 10px 0px #252523;
}
#text { padding-top: 15px; color: #958A3A; height: 30px;
}
#image { padding-top: 10px;
}
#image img { width: 200px; border-radius: 50%;
}
#dots { margin-top: 10px;
}
.dot { display: inline-block; margin: 0 20px 0px 20px; width: 10px; height: 10px; border-radius: 50%; background: #5F5F57;
}
.dot:first-child { animation: 1s blink 0s infinite; animation-direction: alternate;
}
.dot:nth-child(2) { animation: 1s blink 1s infinite; animation-direction: alternate;
}
.dot:nth-child(3) { animation: 1s blink 2s infinite; animation-direction: alternate;
}
@keyframes blink { from {background: ##5F5F57;} to {background: #958A3A;}
}
#progress-bar { margin-top: 10px; height: 20px; width: 300px; background: #A19F92;
}
#bar { width: 0px; height: 20px; background: #958A3A; animation: 5s load 0s infinite ease-out;
}
@keyframes load { from {width: 0px;} to {width: 300px;}
}
#save-button { width: 300px; height: 84px; background: #FFFFFF; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
#save-button button { color: #FFF; width: 100px; height: 30px; margin-top: 30px; border: none; border-bottom: 2px solid #665D1A; background: #958A3A; font-family: 'Nunito', sans-serif; border-radius: 2px; cursor: pointer;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="center"> <div id="text">1. Upload Your Photo</div> <div id="image"><img src="http://data.whicdn.com/images/51796538/The-Shire-Grumpy-Cat-Meme_large.jpg" /></div> <div id="dots"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <div id="progress-bar"> <div id="bar"></div> </div> <div id="save-button"> <button>Save</button> </div>
</div>
</body>
</html>
Upload Form with a Grumpy Cat - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Nunito);
body { overflow: hidden; font-family: 'Nunito', sans-serif; background: #616159; text-align: center;
}
#center { background: #252523; width: 300px; height: 400px; position: absolute; left: 50%; top: 50%; margin-left: -150px; margin-top: -200px; border-radius: 4px; box-shadow: 0px 0px 10px 0px #252523;
}
#text { padding-top: 15px; color: #958A3A; height: 30px;
}
#image { padding-top: 10px;
}
#image img { width: 200px; border-radius: 50%;
}
#dots { margin-top: 10px;
}
.dot { display: inline-block; margin: 0 20px 0px 20px; width: 10px; height: 10px; border-radius: 50%; background: #5F5F57;
}
.dot:first-child { animation: 1s blink 0s infinite; animation-direction: alternate;
}
.dot:nth-child(2) { animation: 1s blink 1s infinite; animation-direction: alternate;
}
.dot:nth-child(3) { animation: 1s blink 2s infinite; animation-direction: alternate;
}
@keyframes blink { from {background: ##5F5F57;} to {background: #958A3A;}
}
#progress-bar { margin-top: 10px; height: 20px; width: 300px; background: #A19F92;
}
#bar { width: 0px; height: 20px; background: #958A3A; animation: 5s load 0s infinite ease-out;
}
@keyframes load { from {width: 0px;} to {width: 300px;}
}
#save-button { width: 300px; height: 84px; background: #FFFFFF; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px;
}
#save-button button { color: #FFF; width: 100px; height: 30px; margin-top: 30px; border: none; border-bottom: 2px solid #665D1A; background: #958A3A; font-family: 'Nunito', sans-serif; border-radius: 2px; cursor: pointer;
}
Developer | Aleks |
Username | achudars |
Uploaded | October 14, 2022 |
Rating | 3.5 |
Size | 2,944 Kb |
Views | 16,192 |
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 |
Flaky in pure CSS | 7,114 Kb |
Scroll Percentage | 2,088 Kb |
Star Wars Storm Trooper in pure CSS | 5,811 Kb |
Envelope with a Letter | 2,336 Kb |
Harley Quinn in pure CSS | 5,634 Kb |
Do not forget | 2,384 Kb |
Gem Fox | 2,905 Kb |
Letter A | 2,219 Kb |
Pixelated Progress Bar | 2,474 Kb |
Stylish and Dark Login Form | 3,279 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 |
Slider css only | Armandobau | 2,161 Kb |
P5.js data visualization | Enginarslan | 2,233 Kb |
Lecture 1 | Law | 0 Kb |
CSS Colors | Alexpate | 2,232 Kb |
Drag in vanilla js using dotval math instead of translate | Paulq | 2,662 Kb |
Buttons for autumn | Nikazawila | 1,795 Kb |
Pure CSS Menu | Bronsrobin | 3,321 Kb |
Material design buttons | Fischaela | 4,381 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
Confirm Close Of Foundation Reveal Modal | Winghouchan | 1,818 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!