Skip to content

Instantly share code, notes, and snippets.

@lotterfriends

lotterfriends/analog-clock.html

Created February 7, 2016 18:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lotterfriends/fd479dead0d1e781e1d2 to your computer and use it in GitHub Desktop.
Save lotterfriends/fd479dead0d1e781e1d2 to your computer and use it in GitHub Desktop.
Download ZIP
analog clock
Raw
analog-clock.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href='https://fonts.googleapis.com/css?family=Roboto:700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
font-size: 14px;
}
p.analog-clock {
box-sizing: border-box;
-webkit-box-sizing: border-box;
margin: 0;
padding: 0;
line-height: 1;
font-size: 2em;
font-family: 'Roboto', sans-serif;
text-shadow: 0 0 .1em #000;
font-weight: bold;
color: #fff;
float: left;
padding: .25em 0;
border-top: 1px solid #000;
border-radius: .1em;
margin-right: 1px;
background: linear-gradient(to bottom, rgba(68,68,68,1) 0%,rgba(14,14,14,1) 100%);
box-shadow: 0 0 .1em #666;
width: 1em;
text-align: center;
}
p.analog-clock::after {
content: ' ';
display: block;
border-top: 1px solid #000;
margin-top: -.5em;
width: 1em;
position: absolute;
}
</style>
</head>
<body>
<p class="analog-clock">0</p>
<p class="analog-clock">1</p>
<p class="analog-clock">2</p>
<p class="analog-clock">3</p>
<p class="analog-clock">4</p>
<p class="analog-clock">5</p>
<p class="analog-clock">6</p>
<p class="analog-clock">7</p>
<p class="analog-clock">8</p>
<p class="analog-clock">9</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment