Hugging Face's logo

Spaces:
Jonell01
/
Botpack
Sleeping

App Files Community
Jonell01 commited on
Commit
abac963
·
verified ·
1 Parent(s): f7e1fa7

Create cover/index.html

Browse files
Files changed (1) hide show
  1. includes/cover/index.html +153 -0
includes/cover/index.html ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <script src="https://use.fontawesome.com/d1341f9b7a.js"></script>
6
+ <title>BotPack</title>
7
+ <style>
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ }
12
+ body {
13
+ background-color: #190096;
14
+ }
15
+ .bg {
16
+ width: 100%;
17
+ height: 100vh;
18
+ background-image: linear-gradient(45deg, #243aff 0%,
19
+ #4687f0 46%,
20
+ #5800d4 100%);
21
+ }
22
+ .glass {
23
+ position: absolute;
24
+ top: 0;
25
+ left: 0;
26
+ width: 100%;
27
+ height: 100%;
28
+ overflow: hidden;
29
+ }
30
+ .glass li {
31
+ position: absolute;
32
+ display: block;
33
+ list-style: none;
34
+ width: 20px;
35
+ height: 20px;
36
+ background: rgba(255, 255, 255, 0.1);
37
+ border: 1px solid rgba(255, 255, 255, 0.18);
38
+ animation: spin 5s linear infinite;
39
+ bottom: -150px;
40
+ }
41
+ .glass li:nth-child(1) {
42
+ left: 35%;
43
+ width: 150px;
44
+ height: 150px;
45
+ animation-delay: 0s;
46
+ }
47
+ .glass li:nth-child(2) {
48
+ left: 10%;
49
+ width: 20px;
50
+ height: 20px;
51
+ animation-delay: 2s;
52
+ animation-duration: 12s;
53
+ }
54
+ .glass li:nth-child(3) {
55
+ left: 70%;
56
+ width: 20px;
57
+ height: 20px;
58
+ animation-delay: 4s;
59
+ }
60
+ .glass li:nth-child(4) {
61
+ left: 40%;
62
+ width: 60px;
63
+ height: 60px;
64
+ animation-delay: 0s;
65
+ animation-duration: 18s;
66
+ }
67
+ .glass li:nth-child(5) {
68
+ left: 65%;
69
+ width: 20px;
70
+ height: 20px;
71
+ animation-delay: 0s;
72
+ }
73
+ .glass li:nth-child(6) {
74
+ left: 75%;
75
+ width: 110px;
76
+ height: 110px;
77
+ animation-delay: 3s;
78
+ }
79
+ .glass li:nth-child(7) {
80
+ left: 35%;
81
+ width: 150px;
82
+ height: 150px;
83
+ animation-delay: 7s;
84
+ }
85
+ .glass li:nth-child(8) {
86
+ left: 50%;
87
+ width: 25px;
88
+ height: 25px;
89
+ animation-delay: 15s;
90
+ animation-duration: 45s;
91
+ }
92
+ .glass li:nth-child(9) {
93
+ left: 20%;
94
+ width: 15px;
95
+ height: 15px;
96
+ animation-delay: 2s;
97
+ animation-duration: 35s;
98
+ }
99
+ .glass li:nth-child(10) {
100
+ left: 85%;
101
+ width: 150px;
102
+ height: 150px;
103
+ animation-delay: 0s;
104
+ animation-duration: 11s;
105
+ }
106
+ .glass li:nth-child(11) {
107
+ left: 10%;
108
+ width: 110px;
109
+ height: 110px;
110
+ animation-delay: 0s;
111
+ animation-duration: 11s;
112
+ }
113
+ glass li:nth-child(12) {
114
+ left: 45%;
115
+ width: 160px;
116
+ height: 160px;
117
+ animation-delay: 2s;
118
+ animation-duration: 5s;
119
+ }
120
+
121
+ @keyframes spin {
122
+ 0% {
123
+ transform: translateY(0) rotate(0deg);
124
+ opacity: 1;
125
+ border-radius: 80%;
126
+ }
127
+ 100% {
128
+ transform: translateY(-1000px) rotate(720deg);
129
+ opacity: 0;
130
+ border-radius: 100%;
131
+ }
132
+ }
133
+ </style>
134
+ </head>
135
+ <body>
136
+ <div class="bg">
137
+ <ul class="glass">
138
+ <li></li>
139
+ <li></li>
140
+ <li></li>
141
+ <li></li>
142
+ <li></li>
143
+ <li></li>
144
+ <li></li>
145
+ <li></li>
146
+ <li></li>
147
+ <li></li>
148
+ <li></li>
149
+ <li></li>
150
+ </ul>
151
+ </div>
152
+ </body>
153
+ </html>