-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
24 lines (23 loc) · 2.38 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Analog Clock</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.tailwindcss.com"></script>
<script src="index.js"></script>
</head>
<body>
<!--Formulas used in this project to calculate rotation of hour, minute and sec hands are written in copy-->
<div class="clock flex items-center justify-center h-[100vh]"> <!--h-[100vh] is given so that this div covers overall screen height and then inside div aligns vertically center of the screen accordingly, otherwise its height will be less and inside div aligns accordingly and not perfectly center of the web page -->
<div class="bg-[url('clock.png')] bg-no-repeat bg-contain h-[40vw] w-[41vw] relative clockcontainer"> <!--we have done it relative so, hands of clock will resize and align acc to this container when screen size decreases and not acc to html and with the help of this they will always remain on same position respective of this container; we have background image using a new method, we have used background:no repeat and bg-contain property which helps to contain the bg image inside container and prevents it from overflowing or hidden edges-->
<!--importance of % -> Always try to use % instead of px if vh and vw is not possible for responsiveness,as it resizes like 30% of parent container, so when parent container size decreases its resizes accordingly-->
<div class="absolute bg-black rounded-lg w-3 h-[25%] top-[25%] left-[47.5%] origin-bottom" id="hour"></div> <!--"rounded-lg" helped to give it a shape like of hands of clock(curvy from ends)-->
<div class="absolute bg-black rounded-lg w-2 h-[34%] top-[14.7%] left-[48.2%] origin-bottom" id="minute"></div> <!--"top" and "left" are used to position it from top and left as we used to do with absolute items-->
<div class="absolute bg-black rounded-lg w-1 h-[34%] top-[14.7%] left-[48.3%] origin-bottom" id="second"></div> <!-- "origin-bottom" is used so, that transform and rotation of hands of clock will start from their bottom (where,they are attached with each other) and not from center(which it does by default) for proper alignment of hands of clock-->
</div>
</div>
</body>
</html>