Skip to content

Commit 2581ba5

Browse files
JeevaRamanathanJeevaRamanathan
authored
feat: added hourglass sand timer (#931)
* added hourglass sand timer Signed-off-by: JeevaRamanathan <[email protected]> * update readme file Signed-off-by: JeevaRamanathan <[email protected]> * added README.md file Signed-off-by: JeevaRamanathan <[email protected]> --------- Signed-off-by: JeevaRamanathan <[email protected]>
1 parent 91a0335 commit 2581ba5

File tree

4 files changed

+433
-0
lines changed

4 files changed

+433
-0
lines changed

‎Hourglass Sand Timer/README.md‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
# ⏳ Hourglass Timer
2+
3+
A pure **HTML + CSS** animated hourglass timer that visually represents sand flowing from the top to the bottom.
4+
This project demonstrates use of **CSS gradients, animations, and keyframes** to simulate a realistic hourglass effect — no JavaScript required.
5+
6+
## 🖼️ Preview
7+
8+
The actual hourglass timer animates continuously, with the upper glass emptying and the lower one filling up over time.
9+
10+
<img width="926" height="657" alt="image" src="https://github.com/user-attachments/assets/54792ffa-c529-46a3-837d-cb2645c295cb" />
11+
12+
13+

‎Hourglass Sand Timer/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Hourglass Timer</title>
8+
<link rel="stylesheet" href="./style.css" />
9+
</head>
10+
11+
<body>
12+
<div class="hourglass">
13+
14+
<div class="frame"></div>
15+
16+
<div class="glassUpper">
17+
<div class="sandUpper">
18+
</div>
19+
</div>
20+
21+
<div class="glassBottom">
22+
<div class="sandBottom">
23+
<div class="fillet">
24+
</div>
25+
</div>
26+
</div>
27+
28+
</div>
29+
</body>
30+
31+
</html>

0 commit comments

Comments
 (0)