-
Notifications
You must be signed in to change notification settings - Fork 0
/
test.html
58 lines (53 loc) · 2.34 KB
/
test.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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<div class="relative flex size-full justify-center items-end h-screen bg-[#87CEEB] overflow-hidden p-0">
<!-- Snowfall -->
<div class="absolute top-0 left-0 w-full h-full flex flex-col items-center justify-between p-8">
<!-- Multiple layers of snowflakes for a falling effect -->
<div class="space-y-8 w-full flex justify-between">
<!-- Top layer of snowflakes -->
<div class="w-3 h-3 bg-[#FFFFFF] rounded-full"></div>
<div class="w-2 h-2 bg-[#FFFFFF] rounded-full"></div>
<!-- ... (more snowflakes here) ... -->
</div>
<div class="space-y-10 w-full flex justify-around">
<!-- Middle layer of snowflakes -->
<div class="w-4 h-4 bg-[#FFFFFF] rounded-full"></div>
<div class="w-1 h-1 bg-[#FFFFFF] rounded-full"></div>
<!-- ... (more snowflakes here) ... -->
</div>
<div class="space-y-12 w-full flex justify-between">
<!-- Bottom layer of snowflakes -->
<div class="w-2 h-2 bg-[#FFFFFF] rounded-full"></div>
<div class="w-3 h-3 bg-[#FFFFFF] rounded-full"></div>
<!-- ... (more snowflakes here) ... -->
</div>
</div>
<!-- Snowman container -->
<div class="space-y-2 mb-10">
<!-- Head -->
<div class="w-24 h-24 bg-[#FFFFFF] rounded-full mx-auto flex items-center justify-center">
<!-- Eyes and mouth -->
<div class="space-y-1">
<!-- Eyes -->
<div class="flex justify-between px-6">
<div class="w-2 h-2 bg-[#000000] rounded-full"></div>
<div class="w-2 h-2 bg-[#000000] rounded-full"></div>
</div>
<!-- Mouth -->
<div class="w-1 h-1 bg-[#000000] rounded-full mx-auto mt-2"></div>
</div>
</div>
<!-- Middle -->
<div class="w-32 h-32 bg-[#FFFFFF] rounded-full mx-auto flex justify-center items-end pb-4">
<!-- Buttons -->
<div class="flex flex-col items-center space-y-2">
<div class="w-3 h-3 bg-[#000000] rounded-full"></div>
<div class="w-3 h-3 bg-[#000000] rounded-full"></div>
</div>
</div>
<!-- Bottom -->
<div class="w-40 h-40 bg-[#FFFFFF] rounded-full mx-auto"></div>
</div>
<!-- Ground snow -->
<div class="absolute bottom-0 left-0 w-full h-20 bg-[#FFFFFF]"></div>
<img id="snowflake" class="top-[0px] left-[0px] absolute w-full h-full" src="https://www.pngall.com/wp-content/uploads/13/Snowflake-PNG-Image-File.png"></img>
</div>