Haml Clock

Developer
Katy DeCorah
Size
7,246 Kb
Views
20,240
  1. Haml Clock Previews
  2. Haml Clock HTML Codes
  3. Haml Clock CSS Codes
  4. Haml Clock JS Codes

How do I make an haml clock?

Haml provides the initial time and then CSS keeps the clock ticking. As the days progresses the background gradually gets darker. And it's responsive! Default timezone is set to UTC-4/EST. Try your own zone. Design inspiration from Dribbble. What is a haml clock? How do you make a haml clock? This script and codes were developed by Katy DeCorah on 16 October 2022, Sunday.

Haml Clock Previews
IQ Test

Haml Clock - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Haml Clock</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='css/23c0352cf1813420a04865d33.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 "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
$bodyBackground: invert(tomato);
$clockBackground: #333;
$fixtures: #ebebeb;
$accent: tomato;
$font: 'Josefin Sans', sans-serif;
/* Light Scheme
$clockBackground: #eee;
$bodyBackground: invert(tomato);
$fixtures: #333;
$accent: tomato;
*/
@mixin putOnCircle( $nb-items, $circle-size, $item-size) { $half-item: $item-size / 2; $half-parent: $circle-size / 2; position: relative; width: $circle-size; height: $circle-size; padding: 0; border-radius: 50%; list-style: none; @include box-sizing(content-box); > * { display: block; position: absolute; top: 50%; left: 50%; width: $item-size; height: $item-size; margin: -$half-item; $angle: 360 / $nb-items; $rot: 0; @for $i from 1 to $nb-items+1 { &:nth-of-type(#{$i}) {@include transform(rotate(#{$rot}deg) translate($half-parent) rotate(-#{$rot}deg));} $rot: $rot + $angle; } } } * { @include box-sizing(border-box); } html { width:100%; height:100%; } body { width:100%; height:100%; @include display-box; @include box-align(center); @include box-pack(center); background:$bodyBackground; @include transition(font-size .5s cubic-bezier(.88,.23,.3,1.25)); } .container {position:relative;} .clock { position:relative; width:10em; height:10em; background:$clockBackground; border-radius:100%; border:0.5em solid darken($clockBackground,5%); display:none; z-index:1; &:before { content:""; width:0.5em; height:0.5em; border:0.2em solid $fixtures; background:$accent; position:absolute; border-radius:100%; top:4em; left:4em; color:black; z-index:1; } &:hover ~ .time { @include opacity(1); top:100%; } } .hour,.min, .sec { width:0.25em; height:10em; top:-0.5em; left:4.35em; @include background-image(linear-gradient(transparent 25%, $fixtures 25%, $fixtures 50%,transparent 50%)); position:absolute; } .sec { width:1px; @include background-image(linear-gradient(transparent 15%, $accent 15%, $accent 57%,transparent 57%)); z-index:1; } .hour { @include background-image(linear-gradient(transparent 35%, $fixtures 35%, $fixtures 50%,transparent 50%)); } .numbers { @include putOnCircle(60, 8em, 0); color:rgba($fixtures,0.25); position:absolute; top:0.4em; left:0.4em; li { border:.05em solid rgba($fixtures,0.1); border-radius:100%; &:nth-child(5n + 1) { border-width:.1em; } } } .time { font-family:$font; width:100%; text-align:center; font-size:1.5em; @include transition(all .25s ease-in-out); } @for $i from 1 to 7 { @media (min-width: $i*10em) and (min-height:$i*10em) { body {font-size:$i*10px;} @if $i == 1 { .time { top:50%; position:absolute; @include opacity(0); } .clock {display:block;} } } } </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <style> body {background: rgba(#009cb8, 0.6041666666666666); } .sec {animation: seconds 60s infinite linear forwards} @keyframes seconds { 0% {transform:rotate(78deg)} 100% {transform:rotate(438deg)} } .min {animation: minutes 3600s infinite linear forwards} @keyframes minutes { 0% {transform:rotate(228deg)} 100% {transform:rotate(588deg)} } .hour {animation: hours 36000s infinite linear forwards} @keyframes hours { 0% {transform:rotate(169.0deg)} 100% {transform:rotate(360deg)} }
</style>
<div class='container'> <div class='clock'> <div class='sec'></div> <div class='min'></div> <div class='hour'></div> <ul class='numbers'> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <div class='time'>5:38</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>

Haml Clock - Script Codes CSS Codes

@import "compass/css3";
@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
$bodyBackground: invert(tomato);
$clockBackground: #333;
$fixtures: #ebebeb;
$accent: tomato;
$font: 'Josefin Sans', sans-serif;
/* Light Scheme
$clockBackground: #eee;
$bodyBackground: invert(tomato);
$fixtures: #333;
$accent: tomato;
*/
@mixin putOnCircle( $nb-items, $circle-size, $item-size) { $half-item: $item-size / 2; $half-parent: $circle-size / 2; position: relative; width: $circle-size; height: $circle-size; padding: 0; border-radius: 50%; list-style: none; @include box-sizing(content-box); > * { display: block; position: absolute; top: 50%; left: 50%; width: $item-size; height: $item-size; margin: -$half-item; $angle: 360 / $nb-items; $rot: 0; @for $i from 1 to $nb-items+1 { &:nth-of-type(#{$i}) {@include transform(rotate(#{$rot}deg) translate($half-parent) rotate(-#{$rot}deg));} $rot: $rot + $angle; } } } * { @include box-sizing(border-box); } html { width:100%; height:100%; } body { width:100%; height:100%; @include display-box; @include box-align(center); @include box-pack(center); background:$bodyBackground; @include transition(font-size .5s cubic-bezier(.88,.23,.3,1.25)); } .container {position:relative;} .clock { position:relative; width:10em; height:10em; background:$clockBackground; border-radius:100%; border:0.5em solid darken($clockBackground,5%); display:none; z-index:1; &:before { content:""; width:0.5em; height:0.5em; border:0.2em solid $fixtures; background:$accent; position:absolute; border-radius:100%; top:4em; left:4em; color:black; z-index:1; } &:hover ~ .time { @include opacity(1); top:100%; } } .hour,.min, .sec { width:0.25em; height:10em; top:-0.5em; left:4.35em; @include background-image(linear-gradient(transparent 25%, $fixtures 25%, $fixtures 50%,transparent 50%)); position:absolute; } .sec { width:1px; @include background-image(linear-gradient(transparent 15%, $accent 15%, $accent 57%,transparent 57%)); z-index:1; } .hour { @include background-image(linear-gradient(transparent 35%, $fixtures 35%, $fixtures 50%,transparent 50%)); } .numbers { @include putOnCircle(60, 8em, 0); color:rgba($fixtures,0.25); position:absolute; top:0.4em; left:0.4em; li { border:.05em solid rgba($fixtures,0.1); border-radius:100%; &:nth-child(5n + 1) { border-width:.1em; } } } .time { font-family:$font; width:100%; text-align:center; font-size:1.5em; @include transition(all .25s ease-in-out); } @for $i from 1 to 7 { @media (min-width: $i*10em) and (min-height:$i*10em) { body {font-size:$i*10px;} @if $i == 1 { .time { top:50%; position:absolute; @include opacity(0); } .clock {display:block;} } } }

Haml Clock - Script Codes JS Codes

// Design inspiration from Dribbble: http://dribbble.com/shots/1221456-Flat-Watch-2
// Items on Circle mixin from: http://hugogiraudel.com/2013/04/02/items-on-circle/
Haml Clock - Script Codes
Haml Clock - Script Codes
Home Page Home
Developer Katy DeCorah
Username katydecorah
Uploaded October 16, 2022
Rating 4.5
Size 7,246 Kb
Views 20,240
Do you need developer help for Haml 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!

Katy DeCorah (katydecorah) Script Codes
Name
Google Font Explorer
END by Catt
Ice Cream Pattern by Dorottya Porkolab
BLOOD
Rabbit by Beard Chicken
Instagram
Twinner Spinner II
Snowflaker 2016
Double Vision
Twinner Spinner
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!