Hugging Face's logo

Spaces:
vivekin
/
astro
Running

App Files Community
vivekin commited on
Commit
2526aef
·
verified ·
1 Parent(s): 278083e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +284 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Astro
3
- emoji: 📊
4
- colorFrom: blue
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: astro
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: yellow
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,284 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Gemstone Universe - Discover the Power of Precious Stones</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Poppins:wght@300;400;600&display=swap');
11
+
12
+ body {
13
+ font-family: 'Poppins', sans-serif;
14
+ background-color: #f9f7f5;
15
+ color: #333;
16
+ }
17
+
18
+ .title-font {
19
+ font-family: 'Playfair Display', serif;
20
+ }
21
+
22
+ .gem-card {
23
+ transition: all 0.3s ease;
24
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
25
+ }
26
+
27
+ .gem-card:hover {
28
+ transform: translateY(-5px);
29
+ box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
30
+ }
31
+
32
+ .hero {
33
+ background: linear-gradient(135deg, rgba(21, 101, 192, 0.8), rgba(155, 89, 182, 0.8)), url('https://images.unsplash.com/photo-1605100804763-247f67b3557e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
34
+ background-size: cover;
35
+ background-position: center;
36
+ }
37
+
38
+ .nav-link {
39
+ position: relative;
40
+ }
41
+
42
+ .nav-link:after {
43
+ content: '';
44
+ position: absolute;
45
+ width: 0;
46
+ height: 2px;
47
+ bottom: 0;
48
+ left: 0;
49
+ background-color: #9c27b0;
50
+ transition: width 0.3s ease;
51
+ }
52
+
53
+ .nav-link:hover:after {
54
+ width: 100%;
55
+ }
56
+
57
+ .zodiac-icon {
58
+ width: 60px;
59
+ height: 60px;
60
+ display: flex;
61
+ align-items: center;
62
+ justify-content: center;
63
+ border-radius: 50%;
64
+ margin: 0 auto 10px;
65
+ font-size: 24px;
66
+ }
67
+
68
+ .birthstone-icon {
69
+ width: 80px;
70
+ height: 80px;
71
+ display: flex;
72
+ align-items: center;
73
+ justify-content: center;
74
+ border-radius: 50%;
75
+ margin: 0 auto 15px;
76
+ font-size: 36px;
77
+ box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
78
+ }
79
+
80
+ .shape-icon {
81
+ width: 70px;
82
+ height: 70px;
83
+ display: flex;
84
+ align-items: center;
85
+ justify-content: center;
86
+ margin: 0 auto 15px;
87
+ font-size: 30px;
88
+ }
89
+
90
+ .color-dot {
91
+ width: 40px;
92
+ height: 40px;
93
+ border-radius: 50%;
94
+ margin: 0 auto;
95
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
96
+ }
97
+
98
+ .calculator-input {
99
+ background-color: rgba(255, 255, 255, 0.1);
100
+ border: 1px solid rgba(255, 255, 255, 0.2);
101
+ color: white;
102
+ }
103
+
104
+ .calculator-input::placeholder {
105
+ color: rgba(255, 255, 255, 0.7);
106
+ }
107
+ </style>
108
+ </head>
109
+ <body>
110
+ <!-- Navigation -->
111
+ <nav class="bg-white shadow-lg sticky top-0 z-50">
112
+ <div class="max-w-7xl mx-auto px-4">
113
+ <div class="flex justify-between items-center py-4">
114
+ <div class="flex items-center space-x-2">
115
+ <i class="fas fa-gem text-purple-600 text-2xl"></i>
116
+ <span class="title-font text-xl font-bold text-gray-800">Gemstone Universe</span>
117
+ </div>
118
+ <div class="hidden md:flex space-x-8">
119
+ <a href="#popular-gems" class="nav-link text-gray-700 hover:text-purple-600 py-2">Popular Gems</a>
120
+ <a href="#benefits" class="nav-link text-gray-700 hover:text-purple-600 py-2">Benefits</a>
121
+ <a href="#birthstones" class="nav-link text-gray-700 hover:text-purple-600 py-2">Birthstones</a>
122
+ <a href="#zodiac" class="nav-link text-gray-700 hover:text-purple-600 py-2">Zodiac Stones</a>
123
+ <a href="#calculator" class="nav-link text-gray-700 hover:text-purple-600 py-2">Gem Finder</a>
124
+ </div>
125
+ <button class="md:hidden text-gray-700 focus:outline-none">
126
+ <i class="fas fa-bars text-xl"></i>
127
+ </button>
128
+ </div>
129
+ </div>
130
+ </nav>
131
+
132
+ <!-- Hero Section -->
133
+ <section class="hero text-white py-20 md:py-32">
134
+ <div class="max-w-7xl mx-auto px-4 text-center">
135
+ <h1 class="title-font text-4xl md:text-6xl font-bold mb-6">Discover the Magic of Gemstones</h1>
136
+ <p class="text-xl md:text-2xl mb-10 max-w-3xl mx-auto">Explore the healing properties, astrological benefits, and beauty of precious stones from around the world.</p>
137
+ <div class="flex flex-col md:flex-row justify-center gap-4">
138
+ <a href="#popular-gems" class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-8 rounded-full transition duration-300">Explore Gems</a>
139
+ <a href="#calculator" class="bg-white hover:bg-gray-100 text-purple-600 font-bold py-3 px-8 rounded-full transition duration-300">Find Your Stone</a>
140
+ </div>
141
+ </div>
142
+ </section>
143
+
144
+ <!-- Popular Gems Section -->
145
+ <section id="popular-gems" class="py-16 bg-white">
146
+ <div class="max-w-7xl mx-auto px-4">
147
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-center mb-4">Popular Gemstones</h2>
148
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Discover the most sought-after gemstones and their unique properties</p>
149
+
150
+ <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-8">
151
+ <!-- Ruby -->
152
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
153
+ <div class="h-48 bg-red-100 flex items-center justify-center">
154
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Ruby" class="h-full w-full object-cover">
155
+ </div>
156
+ <div class="p-6">
157
+ <h3 class="title-font text-xl font-bold mb-2">Ruby</h3>
158
+ <p class="text-gray-600 mb-4">The king of gems, symbolizing passion, protection, and prosperity.</p>
159
+ <div class="flex justify-between items-center">
160
+ <span class="text-sm font-medium text-red-600">July Birthstone</span>
161
+ <span class="text-sm font-medium">♌ Leo Stone</span>
162
+ </div>
163
+ </div>
164
+ </div>
165
+
166
+ <!-- Emerald -->
167
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
168
+ <div class="h-48 bg-green-100 flex items-center justify-center">
169
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Emerald" class="h-full w-full object-cover">
170
+ </div>
171
+ <div class="p-6">
172
+ <h3 class="title-font text-xl font-bold mb-2">Emerald</h3>
173
+ <p class="text-gray-600 mb-4">Stone of wisdom and growth, promoting harmony and intuition.</p>
174
+ <div class="flex justify-between items-center">
175
+ <span class="text-sm font-medium text-green-600">May Birthstone</span>
176
+ <span class="text-sm font-medium">♉ Taurus Stone</span>
177
+ </div>
178
+ </div>
179
+ </div>
180
+
181
+ <!-- Sapphire -->
182
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
183
+ <div class="h-48 bg-blue-100 flex items-center justify-center">
184
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Sapphire" class="h-full w-full object-cover">
185
+ </div>
186
+ <div class="p-6">
187
+ <h3 class="title-font text-xl font-bold mb-2">Sapphire</h3>
188
+ <p class="text-gray-600 mb-4">Symbol of truth and royalty, enhancing mental clarity.</p>
189
+ <div class="flex justify-between items-center">
190
+ <span class="text-sm font-medium text-blue-600">September Birthstone</span>
191
+ <span class="text-sm font-medium">♍ Virgo Stone</span>
192
+ </div>
193
+ </div>
194
+ </div>
195
+
196
+ <!-- Diamond -->
197
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
198
+ <div class="h-48 bg-gray-100 flex items-center justify-center">
199
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Diamond" class="h-full w-full object-cover">
200
+ </div>
201
+ <div class="p-6">
202
+ <h3 class="title-font text-xl font-bold mb-2">Diamond</h3>
203
+ <p class="text-gray-600 mb-4">The ultimate symbol of strength, purity, and eternal love.</p>
204
+ <div class="flex justify-between items-center">
205
+ <span class="text-sm font-medium text-gray-600">April Birthstone</span>
206
+ <span class="text-sm font-medium">♈ Aries Stone</span>
207
+ </div>
208
+ </div>
209
+ </div>
210
+
211
+ <!-- Amethyst -->
212
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
213
+ <div class="h-48 bg-purple-100 flex items-center justify-center">
214
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Amethyst" class="h-full w-full object-cover">
215
+ </div>
216
+ <div class="p-6">
217
+ <h3 class="title-font text-xl font-bold mb-2">Amethyst</h3>
218
+ <p class="text-gray-600 mb-4">Powerful protective stone that promotes calm and balance.</p>
219
+ <div class="flex justify-between items-center">
220
+ <span class="text-sm font-medium text-purple-600">February Birthstone</span>
221
+ <span class="text-sm font-medium">♓ Pisces Stone</span>
222
+ </div>
223
+ </div>
224
+ </div>
225
+
226
+ <!-- Topaz -->
227
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
228
+ <div class="h-48 bg-yellow-100 flex items-center justify-center">
229
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Topaz" class="h-full w-full object-cover">
230
+ </div>
231
+ <div class="p-6">
232
+ <h3 class="title-font text-xl font-bold mb-2">Topaz</h3>
233
+ <p class="text-gray-600 mb-4">Stone of joy and abundance, enhancing creativity.</p>
234
+ <div class="flex justify-between items-center">
235
+ <span class="text-sm font-medium text-yellow-600">November Birthstone</span>
236
+ <span class="text-sm font-medium">♏ Scorpio Stone</span>
237
+ </div>
238
+ </div>
239
+ </div>
240
+
241
+ <!-- Pearl -->
242
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
243
+ <div class="h-48 bg-white flex items-center justify-center">
244
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Pearl" class="h-full w-full object-cover">
245
+ </div>
246
+ <div class="p-6">
247
+ <h3 class="title-font text-xl font-bold mb-2">Pearl</h3>
248
+ <p class="text-gray-600 mb-4">Symbol of purity and wisdom, offering calming energy.</p>
249
+ <div class="flex justify-between items-center">
250
+ <span class="text-sm font-medium text-gray-600">June Birthstone</span>
251
+ <span class="text-sm font-medium">♋ Cancer Stone</span>
252
+ </div>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Garnet -->
257
+ <div class="gem-card bg-white rounded-lg overflow-hidden">
258
+ <div class="h-48 bg-red-100 flex items-center justify-center">
259
+ <img src="https://images.unsplash.com/photo-1599643478518-a784e5dc4c8f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80" alt="Garnet" class="h-full w-full object-cover">
260
+ </div>
261
+ <div class="p-6">
262
+ <h3 class="title-font text-xl font-bold mb-2">Garnet</h3>
263
+ <p class="text-gray-600 mb-4">Stone of commitment and regeneration, boosting energy.</p>
264
+ <div class="flex justify-between items-center">
265
+ <span class="text-sm font-medium text-red-600">January Birthstone</span>
266
+ <span class="text-sm font-medium">♑ Capricorn Stone</span>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+ </div>
272
+ </section>
273
+
274
+ <!-- Benefits Section -->
275
+ <section id="benefits" class="py-16 bg-gray-50">
276
+ <div class="max-w-7xl mx-auto px-4">
277
+ <h2 class="title-font text-3xl md:text-4xl font-bold text-center mb-4">Gemstone Benefits</h2>
278
+ <p class="text-gray-600 text-center max-w-2xl mx-auto mb-12">Discover how gemstones can enhance different aspects of your life</p>
279
+
280
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
281
+ <!-- Physical Health -->
282
+ <div class="bg-white p-8 rounded-lg shadow-md">
283
+ <div class="w
284
+ </html>