Hugging Face's logo

Spaces:
Tingchenliang
/
undefined
Running

App Files Community
Tingchenliang commited on
Commit
4bc1eac
·
verified ·
1 Parent(s): 1a7d85f

make a markdown for yoga classroom's intro

Browse files
Files changed (3) hide show
  1. README.md +9 -5
  2. classroom-intro.html +139 -0
  3. index.html +194 -18
README.md CHANGED
@@ -1,10 +1,14 @@
1
  ---
2
- title: Undefined
3
- emoji: 👁
4
- colorFrom: blue
5
- colorTo: purple
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: undefined
3
+ colorFrom: purple
4
+ colorTo: blue
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://deepsite.hf.co).
14
+
classroom-intro.html ADDED
@@ -0,0 +1,139 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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>Classroom Intro - ZenFlow Yoga</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+
17
+ .sansita-font {
18
+ font-family: 'Playfair Display', serif;
19
+ }
20
+
21
+ .classroom-bg {
22
+ background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('http://static.photos/wellness/1200x630/23') no-repeat center center;
23
+ background-size: cover;
24
+ }
25
+
26
+ .content-card {
27
+ backdrop-filter: blur(10px);
28
+ background: rgba(255, 255, 255, 0.95);
29
+ }
30
+ </style>
31
+ </head>
32
+ <body class="bg-gray-50">
33
+ <!-- Navigation -->
34
+ <nav class="bg-white shadow-lg">
35
+ <div class="container mx-auto px-6 py-4">
36
+ <div class="flex items-center justify-between">
37
+ <div class="flex items-center">
38
+ <i data-feather="moon" class="text-green-600 mr-2"></i>
39
+ <span class="sansita-font text-2xl font-bold text-gray-800">ZenFlow</span>
40
+ </div>
41
+ <div class="hidden md:flex items-center space-x-8">
42
+ <a href="index.html" class="text-gray-800 font-medium hover:text-green-600 transition">Home</a>
43
+ <a href="classroom-intro.html" class="text-green-600 font-medium transition">Classroom</a>
44
+ <a href="#" class="text-gray-800 font-medium hover:text-green-600 transition">Teachers</a>
45
+ <a href="#" class="text-gray-800 font-medium hover:text-green-600 transition">About</a>
46
+ <a href="#" class="px-4 py-2 bg-green-600 text-white rounded-full hover:bg-green-700 transition">Book Now</a>
47
+ </div>
48
+ <div class="md:hidden">
49
+ <button class="text-gray-800 focus:outline-none">
50
+ <i data-feather="menu"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </div>
55
+ </nav>
56
+
57
+ <!-- Classroom Hero -->
58
+ <section class="classroom-bg text-white py-32">
59
+ <div class="container mx-auto px-6 text-center">
60
+ <h1 class="sansita-font text-5xl md:text-7xl font-bold mb-6">Our Classroom</h1>
61
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">A sacred space designed for your journey to inner peace and physical wellness</p>
62
+ </div>
63
+ </section>
64
+
65
+ <!-- Classroom Content -->
66
+ <section class="py-20 bg-white">
67
+ <div class="container mx-auto px-6">
68
+ <div class="max-w-4xl mx-auto">
69
+ <div class="content-card rounded-2xl shadow-xl p-8 md:p-12 mb-12">
70
+ <h2 class="sansita-font text-3xl font-bold text-gray-800 mb-6">Welcome to Your Sanctuary</h2>
71
+
72
+ <div class="prose prose-lg max-w-none">
73
+ <p class="text-gray-700 mb-6">Our yoga classroom is more than just a space—it's a carefully crafted environment designed to support your practice and nurture your wellbeing.</p>
74
+
75
+ <h3 class="text-2xl font-bold text-gray-800 mt-8 mb-4">🌟 What to Expect</h3>
76
+ <ul class="list-disc list-inside text-gray-700 space-y-2 mb-6">
77
+ <li><strong>Serene Atmosphere:</strong> Soft lighting, calming colors, and peaceful ambiance</li>
78
+ <li><strong>Premium Equipment:</strong> High-quality mats, blocks, and props available</li>
79
+ <li><strong>Optimal Temperature:</strong> Perfectly maintained for comfort and flexibility</li>
80
+ <li><strong>Clean & Sanitized:</strong> Impeccable hygiene standards for your peace of mind</li>
81
+ </ul>
82
+
83
+ <h3 class="text-2xl font-bold text-gray-800 mt-8 mb-4">🧘‍♀️ Class Guidelines</h3>
84
+ <ul class="list-disc list-inside text-gray-700 space-y-2 mb-6">
85
+ <li>Arrive 10-15 minutes early to settle in</li>
86
+ <li>Wear comfortable, breathable clothing</li>
87
+ <li>Bring water and any personal props you prefer</li>
88
+ <li>Silence electronic devices before entering</li>
89
+ <li>Listen to your body and honor its limits</li>
90
+ </ul>
91
+
92
+ <h3 class="text-2xl font-bold text-gray-800 mt-8 mb-4">📋 Class Levels</h3>
93
+ <div class="grid md:grid-cols-2 gap-6 mb-8">
94
+ <div class="bg-green-50 p-6 rounded-lg">
95
+ <h4 class="font-bold text-green-800 mb-2">Beginner</h4>
96
+ <p class="text-green-700 text-sm">Perfect for newcomers. Focus on foundational poses and proper alignment.</p>
97
+ </div>
98
+ <div class="bg-blue-50 p-6 rounded-lg">
99
+ <h4 class="font-bold text-blue-800 mb-2">Intermediate</h4>
100
+ <p class="text-blue-700 text-sm">Build strength and flexibility with more challenging sequences.</p>
101
+ </div>
102
+ <div class="bg-purple-50 p-6 rounded-lg">
103
+ <h4 class="font-bold text-purple-800 mb-2">Advanced</h4>
104
+ <p class="text-purple-700 text-sm">For experienced practitioners seeking deeper practice and mastery.</p>
105
+ </div>
106
+ <div class="bg-orange-50 p-6 rounded-lg">
107
+ <h4 class="font-bold text-orange-800 mb-2">Gentle/Restorative</h4>
108
+ <p class="text-orange-700 text-sm">Slow-paced classes focusing on relaxation and stress relief.</p>
109
+ </div>
110
+ </div>
111
+
112
+ <div class="bg-yellow-50 border-l-4 border-yellow-400 p-6 rounded-lg mb-8">
113
+ <div class="flex items-start">
114
+ <i data-feather="info" class="text-yellow-600 mr-3 mt-1"></i>
115
+ <div>
116
+ <h4 class="font-bold text-yellow-800 mb-2">Important Note</h4>
117
+ <p class="text-yellow-700">Please inform your instructor of any injuries or medical conditions before class begins. Your safety is our priority.</p>
118
+ </div>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ </div>
123
+
124
+ <div class="text-center">
125
+ <h3 class="sansita-font text-3xl font-bold text-gray-800 mb-6">Ready to Begin Your Journey?</h3>
126
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-4">
127
+ <a href="#" class="px-8 py-3 bg-green-600 text-white rounded-full hover:bg-green-700 transition font-medium">Book Your First Class</a>
128
+ <a href="#" class="px-8 py-3 border border-green-600 text-green-600 rounded-full hover:bg-green-600 hover:text-white transition font-medium">View Schedule</a>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ </div>
133
+ </section>
134
+
135
+ <script>
136
+ feather.replace();
137
+ </script>
138
+ </body>
139
+ </html>
index.html CHANGED
@@ -1,19 +1,195 @@
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>ZenFlow Yoga Studio</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <style>
11
+ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;600;700&display=swap');
12
+
13
+ body {
14
+ font-family: 'Poppins', sans-serif;
15
+ }
16
+
17
+ .hero-bg {
18
+ background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('http://static.photos/nature/1200x630/42') no-repeat center center;
19
+ background-size: cover;
20
+ }
21
+
22
+ .sansita-font {
23
+ font-family: 'Playfair Display', serif;
24
+ }
25
+
26
+ .pose-animation {
27
+ animation: float 6s ease-in-out infinite;
28
+ }
29
+
30
+ @keyframes float {
31
+ 0% { transform: translateY(0px); }
32
+ 50% { transform: translateY(-20px); }
33
+ 100% { transform: translateY(0px); }
34
+ }
35
+ </style>
36
+ </head>
37
+ <body class="bg-gray-50">
38
+ <!-- Navigation -->
39
+ <nav class="bg-white shadow-lg">
40
+ <div class="container mx-auto px-6 py-4">
41
+ <div class="flex items-center justify-between">
42
+ <div class="flex items-center">
43
+ <i data-feather="moon" class="text-green-600 mr-2"></i>
44
+ <span class="sansita-font text-2xl font-bold text-gray-800">ZenFlow</span>
45
+ </div>
46
+ <div class="hidden md:flex items-center space-x-8">
47
+ <a href="index.html" class="text-gray-800 font-medium hover:text-green-600 transition">Home</a>
48
+ <a href="classroom-intro.html" class="text-gray-800 font-medium hover:text-green-600 transition">Classroom</a>
49
+ <a href="#" class="text-gray-800 font-medium hover:text-green-600 transition">Teachers</a>
50
+ <a href="#" class="text-gray-800 font-medium hover:text-green-600 transition">About</a>
51
+ <a href="#" class="px-4 py-2 bg-green-600 text-white rounded-full hover:bg-green-700 transition">Book Now</a>
52
+ </div>
53
+ <div class="md:hidden">
54
+ <button class="text-gray-800 focus:outline-none">
55
+ <i data-feather="menu"></i>
56
+ </button>
57
+ </div>
58
+ </div>
59
+ </div>
60
+ </nav>
61
+
62
+ <!-- Hero Section -->
63
+ <section class="hero-bg text-white py-32">
64
+ <div class="container mx-auto px-6 text-center">
65
+ <h1 class="sansita-font text-5xl md:text-7xl font-bold mb-6">Find Your Balance</h1>
66
+ <p class="text-xl md:text-2xl mb-8 max-w-2xl mx-auto">Join our yoga community and discover mindfulness through movement. Begin your journey to inner peace today.</p>
67
+ <div class="flex justify-center space-x-4">
68
+ <a href="#" class="px-8 py-3 bg-green-600 text-white rounded-full hover:bg-green-700 transition font-medium">Start Free Trial</a>
69
+ <a href="#" class="px-8 py-3 border border-white text-white rounded-full hover:bg-white hover:text-gray-800 transition font-medium">Learn More</a>
70
+ </div>
71
+ </div>
72
+ </section>
73
+
74
+ <!-- Features -->
75
+ <section class="py-20 bg-white">
76
+ <div class="container mx-auto px-6">
77
+ <div class="text-center mb-16">
78
+ <h2 class="sansita-font text-4xl font-bold text-gray-800 mb-4">Why Choose ZenFlow</h2>
79
+ <p class="text-gray-600 max-w-2xl mx-auto">We combine traditional yoga with modern techniques to help you achieve your wellness goals.</p>
80
+ </div>
81
+
82
+ <div class="grid md:grid-cols-3 gap-12">
83
+ <div class="text-center">
84
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
85
+ <i data-feather="activity" class="text-green-600 w-10 h-10"></i>
86
+ </div>
87
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Expert Instructors</h3>
88
+ <p class="text-gray-600">Our certified teachers guide you safely through every pose with personalized attention.</p>
89
+ </div>
90
+
91
+ <div class="text-center">
92
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
93
+ <i data-feather="heart" class="text-green-600 w-10 h-10"></i>
94
+ </div>
95
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Holistic Approach</h3>
96
+ <p class="text-gray-600">We focus on physical postures, breathing techniques, meditation, and relaxation.</p>
97
+ </div>
98
+
99
+ <div class="text-center">
100
+ <div class="w-20 h-20 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-6">
101
+ <i data-feather="users" class="text-green-600 w-10 h-10"></i>
102
+ </div>
103
+ <h3 class="text-xl font-bold text-gray-800 mb-3">Community</h3>
104
+ <p class="text-gray-600">Join a supportive environment where you can grow and connect with like-minded individuals.</p>
105
+ </div>
106
+ </div>
107
+ </div>
108
+ </section>
109
+
110
+ <!-- Class Highlight -->
111
+ <section class="py-20 bg-gray-100">
112
+ <div class="container mx-auto px-6">
113
+ <div class="flex flex-col md:flex-row items-center">
114
+ <div class="md:w-1/2 mb-10 md:mb-0">
115
+ <img src="http://static.photos/nature/640x360/12" alt="Yoga Class" class="rounded-lg shadow-xl pose-animation">
116
+ </div>
117
+ <div class="md:w-1/2 md:pl-12">
118
+ <h2 class="sansita-font text-4xl font-bold text-gray-800 mb-6">Beginner's Vinyasa Flow</h2>
119
+ <p class="text-gray-600 mb-6">Our most popular class for newcomers. Learn the foundations of yoga in a welcoming environment designed for beginners.</p>
120
+ <ul class="mb-8 space-y-3">
121
+ <li class="flex items-center">
122
+ <i data-feather="check" class="text-green-600 mr-2"></i>
123
+ <span class="text-gray-700">All equipment provided for your convenience</span>
124
+ </li>
125
+ </ul>
126
+ <a href="classroom-intro.html" class="inline-block px-6 py-3 bg-green-600 text-white rounded-full hover:bg-green-700 transition font-medium">Explore Our Classroom</a>
127
+ </div>
128
+ </div>
129
+ </div>
130
+ </section>
131
+
132
+ <!-- Footer -->
133
+ <footer class="bg-gray-800 text-white py-12">
134
+ <div class="container mx-auto px-6">
135
+ <div class="grid md:grid-cols-4 gap-8">
136
+ <div>
137
+ <div class="flex items-center mb-4">
138
+ <i data-feather="moon" class="text-green-400 mr-2"></i>
139
+ <span class="sansita-font text-xl font-bold">ZenFlow</span>
140
+ </div>
141
+ <p class="text-gray-400">Find your balance, discover your peace, transform your life.</p>
142
+ </div>
143
+ <div>
144
+ <h4 class="font-bold mb-4">Quick Links</h4>
145
+ <ul class="space-y-2">
146
+ <li><a href="index.html" class="text-gray-400 hover:text-white transition">Home</a></li>
147
+ <li><a href="classroom-intro.html" class="text-gray-400 hover:text-white transition">Classroom</a></li>
148
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Schedule</a></li>
149
+ <li><a href="#" class="text-gray-400 hover:text-white transition">Teachers</a></li>
150
+ </ul>
151
+ </div>
152
+ <div>
153
+ <h4 class="font-bold mb-4">Contact</h4>
154
+ <ul class="space-y-2 text-gray-400">
155
+ <li>123 Yoga Street</li>
156
+ <li>Serenity City, SC 12345</li>
157
+ <li>info@zenflowyoga.com</li>
158
+ <li>(555) 123-4567</li>
159
+ </ul>
160
+ </div>
161
+ <div>
162
+ <h4 class="font-bold mb-4">Follow Us</h4>
163
+ <div class="flex space-x-4">
164
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="facebook"></i></a>
165
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="instagram"></i></a>
166
+ <a href="#" class="text-gray-400 hover:text-white transition"><i data-feather="twitter"></i></a>
167
+ </div>
168
+ </div>
169
+ </div>
170
+ <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
171
+ <p>&copy; 2024 ZenFlow Yoga Studio. All rights reserved.</p>
172
+ </div>
173
+ </div>
174
+ </footer>
175
+
176
+ <script>
177
+ feather.replace();
178
+ </script>
179
+ </body>
180
  </html>
181
+ span class="text-gray-700">Gentle introduction to basic poses</span>
182
+ </li>
183
+ <li class="flex items-center">
184
+ <i data-feather="check" class="text-green-600 mr-2"></i>
185
+ <span class="text-gray-700">Breath-focused movement</span>
186
+ </li>
187
+ <li class="flex items-center">
188
+ <i data-feather="check" class="text-green-600 mr-2"></i>
189
+ <span class="text-gray-700">Small class sizes for personal attention</span>
190
+ </li>
191
+ <li class="flex items-center">
192
+ <i data-feather="check" class="text-green-600 mr-2"></i>
193
+ <
194
+ </body>
195
+ </html>