Flat Clock
How do I make an flat clock?
What is a flat clock? How do you make a flat clock? This script and codes were developed by Julien Lepoivre on 02 October 2022, Sunday.
Flat Clock Previews
Flat Clock - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flat Clock</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <ul id="clock-in"> <li id="sec"></li> <li id="hour"></li> <li id="min"></li> </ul> <p>inspired by : <a href="http://dribbble.com/shots/939010-Flat-Clock?list=users">Owen Campbell-Moore</a></p>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Flat Clock - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Open+Sans); body{ background-color: #f0f2f8; } * { margin: 0; padding: 0; } #main { position: relative; width: 400px; height: 300px; margin: 20px auto 0 auto; list-style: none; background-color: #f0f2f8; border: 15px solid white; border-radius: 4px; -webkit-box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2); box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.2); } #clock-in { position: relative; width: 185px; height: 185px; margin: auto; top: 50px; list-style: none; background-color: #f3f3f3; border-radius: 200px; border: 8px solid #d04a40; } #sec, #min, #hour { position: absolute; width: 30px; border-radius: 200px; } li{ background-color: fuchsia; width: 30px; } #sec { background-color: #d04a40; width: 3px; height: 160px; top: 12px; left: 92px; z-index: 3; margin-bottom:-97px; border-radius: 200px; background: -moz-linear-gradient(top, rgba(208,74,64,1) 0%, rgba(208,74,64,1) 64%, rgba(208,74,64,0) 65%, rgba(208,74,64,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,74,64,1)), color-stop(64%,rgba(208,74,64,1)), color-stop(65%,rgba(208,74,64,0)), color-stop(100%,rgba(208,74,64,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(208,74,64,1) 0%,rgba(208,74,64,1) 64%,rgba(208,74,64,0) 65%,rgba(208,74,64,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(208,74,64,1) 0%,rgba(208,74,64,1) 64%,rgba(208,74,64,0) 65%,rgba(208,74,64,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(208,74,64,1) 0%,rgba(208,74,64,1) 64%,rgba(208,74,64,0) 65%,rgba(208,74,64,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(208,74,64,1) 0%,rgba(208,74,64,1) 64%,rgba(208,74,64,0) 65%,rgba(208,74,64,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d04a40', endColorstr='#00d04a40',GradientType=0 ); /* IE6-9 */ } #min { background-color: #545454; width: 6px; height: 160px; top: 12px; left: 92px; z-index: 2; border-radius: 3px; background: -moz-linear-gradient(top, rgba(84,84,84,1) 0%, rgba(84,84,84,1) 50%, rgba(84,84,84,0) 51%, rgba(84,84,84,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(84,84,84,1)), color-stop(50%,rgba(84,84,84,1)), color-stop(51%,rgba(84,84,84,0)), color-stop(100%,rgba(84,84,84,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#00545454',GradientType=0 ); /* IE6-9 */ } #hour { background: #545454; width: 6px; height: 90px; top: 45px; left: 92px; z-index: 1; border-radius: 3px; background: -moz-linear-gradient(top, rgba(84,84,84,1) 0%, rgba(84,84,84,1) 50%, rgba(84,84,84,0) 51%, rgba(84,84,84,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(84,84,84,1)), color-stop(50%,rgba(84,84,84,1)), color-stop(51%,rgba(84,84,84,0)), color-stop(100%,rgba(84,84,84,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(84,84,84,1) 0%,rgba(84,84,84,1) 50%,rgba(84,84,84,0) 51%,rgba(84,84,84,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#545454', endColorstr='#00545454',GradientType=0 ); /* IE6-9 */ } p { text-align: center; padding: 100px 0 0 0; font-family: 'Open Sans', sans-serif; font-size: 12px; color:#545454; } a{ text-decoration: none; color:#d04a40; }
Flat Clock - Script Codes JS Codes
$(document).ready(function() { setInterval( function() { var seconds = new Date().getSeconds(); var sdegree = seconds * 6; var srotate = "rotate(" + sdegree + "deg)"; $("#sec").css({"-moz-transform" : srotate, "-webkit-transform" : srotate}); }, 1000 ); setInterval( function() { var hours = new Date().getHours(); var mins = new Date().getMinutes(); var hdegree = hours * 30 + (mins / 2); var hrotate = "rotate(" + hdegree + "deg)"; $("#hour").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate}); }, 1000 ); setInterval( function() { var mins = new Date().getMinutes(); var mdegree = mins * 6; var mrotate = "rotate(" + mdegree + "deg)"; $("#min").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate}); }, 1000 ); });
| Developer | Julien Lepoivre |
| Username | BigPepper |
| Uploaded | October 02, 2022 |
| Rating | 3 |
| Size | 2,809 Kb |
| Views | 16,192 |
Do you need developer help for Flat Clock?
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!
Julien Lepoivre (BigPepper) Script Codes
| Name | Size |
| POST-IT website | 2,737 Kb |
| Radial Background | 1,630 Kb |
| Bach.js | 2,408 Kb |
| Red. | 5,042 Kb |
| CSS3 Working Clock | 4,462 Kb |
| Pure CSS Facebook IOS ICON | 2,367 Kb |
| Hello Pepper Plane | 4,265 Kb |
| Reactive Background | 1,765 Kb |
| Realtime Delaunay Triangulation | 5,846 Kb |
| A Pen by Julien Lepoivre | 2,479 Kb |
Create amazing Facebook ads 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 |
| Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
| Scroll using CSS | Casperovic | 2,159 Kb |
| Voting App - register | MatheusLima92 | 1,948 Kb |
| Pure CSS Tooltip | APinix | 2,815 Kb |
| Scifi-style Interative Form | Aaronchuo | 4,566 Kb |
| JS Beispiel getElementsByClassName 3 | HSZG-Frontend-Kurs | 1,988 Kb |
| Simple, flat contact form | Zeaklous | 2,719 Kb |
| Off Canvas | Mariamarica | 1,870 Kb |
| Blockquote design | Sjmcpherson | 1,863 Kb |
| Video Player Custom Controls | EleftheriaBatsou | 3,665 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!