You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
47 lines
1.1 KiB
47 lines
1.1 KiB
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Clocks, Bro</title>
|
|
|
|
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
|
|
<script type="text/javascript" src="clock.js"></script>
|
|
<style>
|
|
@import url(http://fonts.googleapis.com/css?family=Bevan);
|
|
|
|
body {
|
|
background: black;
|
|
}
|
|
img {
|
|
position: absolute;
|
|
left: 50%;
|
|
margin-left: -125px;
|
|
/* Check out http://easings.net/ for more info on this!*/
|
|
-webkit-transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
transition: all 600ms cubic-bezier(0.215, 0.61, 0.355, 1);
|
|
}
|
|
div {
|
|
width: 250px;
|
|
height: 250px;
|
|
border-radius:100%;
|
|
border: deeppink 5px solid;
|
|
margin:8% auto;
|
|
}
|
|
.title {
|
|
font-family: Bevan;
|
|
font-size: 100px;
|
|
text-align: center;
|
|
color: cornflowerblue;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1 class="title">Clock.</h1>
|
|
|
|
<div class="clock">
|
|
<img src="img/secondhand.png" id="second-hand">
|
|
<img src="img/minutehand.png" id="minute-hand">
|
|
<img src="img/hourhand.png" id="hour-hand">
|
|
</div>
|
|
</body>
|
|
</html> |