html
html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!--Inspired by a dribbble illustration "Coffee - O'Clock" by R A D I O -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="machine">
<div class="upper"></div>
<div class="middle">
<div class="timer">
<div class="dot1"></div>
<div class="dot2"></div>
<div class="dot3"></div>
<div class="dot4"></div>
<div class="dot5"></div>
<div class="dot6"></div>
<div class="dot7"></div>
<div class="dot8"></div>
<div class="hand"></div>
</div>
<div class="btn1"></div>
<div class="btn2">
<div class="btn0"></div>
</div>
</div>
<div class="b1">
<div class="b2"></div>
Enter to Rename, Shift+Enter to Preview
css
css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
body{
background-color: #efb54a;
}
a{
color: white;
position:relative ;
left:26px;
font-size:20px;
bottom :20px;
}
.machine{
height: 0px;
width: 160px;
border-top: 70px solid #735123;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
position:absolute;
top:30%;
left:25%;
}
.lower{
height:30px;
width:160px;
background-color: #735123;
border-radius:5px 5px 0px 0px;
position: relative;
left:3px;
Enter to Rename, Shift+Enter to Preview
js
js
1
alert("Tap on the Coffee Machine to enjoy a hot steaming cup of coffee")
Enter to Rename, Shift+Enter to Preview
BROWSER
Console
Run