Spaces:

Nityam2007
/

govkum

Running

App Files Files Community

Nityam2007 commited on Jul 7, 2025

Commit

355f43b

verified ·

1 Parent(s): 247171f

make it mobile only and user should click on it as it comes and make it for whatsapp button to enroll lik button will have whatsapp group link and make it better to use and feel - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +193 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Govkum
-emoji: 🐨
-colorFrom: purple
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: govkum
+emoji: 🐳
+colorFrom: blue
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,193 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>Free Beginner Guitar Workshop | BLU X MEDIA</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Raleway:wght@700&display=swap" rel="stylesheet">
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        'guitar-blue': '#0c2461',
+                        'guitar-gold': '#f6b93b',
+                        'guitar-dark': '#1e272e',
+                    },
+                    fontFamily: {
+                        'heading': ['Raleway', 'sans-serif'],
+                        'body': ['Poppins', 'sans-serif'],
+                    }
+                }
+            }
+        }
+    </script>
+    <style type="text/tailwindcss">
+        @layer utilities {
+            .text-shadow {
+                text-shadow: 0 2px 4px rgba(0,0,0,0.5);
+            }
+            .guitar-strings {
+                background-image: repeating-linear-gradient(
+                    to bottom,
+                    transparent,
+                    transparent 8px,
+                    rgba(255,255,255,0.1) 8px,
+                    rgba(255,255,255,0.1) 10px
+                );
+            }
+            .animate-pulse-slow {
+                animation: pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+            }
+            @keyframes pulse {
+                0%, 100% { opacity: 1; }
+                50% { opacity: 0.7; }
+            }
+        }
+    </style>
+</head>
+<body class="bg-guitar-dark overflow-x-hidden">
+    <!-- Hero Section -->
+    <section class="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-guitar-blue/95 to-black/90">
+        <!-- Guitar Strings Background -->
+        <div class="absolute inset-0 guitar-strings"></div>
+        <!-- Decorative Elements -->
+        <div class="absolute top-10 left-10 w-24 h-24 rounded-full border-2 border-guitar-gold/30 animate-pulse"></div>
+        <div class="absolute top-1/3 right-20 w-16 h-16 rounded-full border-2 border-guitar-gold/20 animate-pulse-slow"></div>
+        <div class="absolute bottom-20 left-1/4 w-12 h-12 rounded-full border-2 border-guitar-gold/40 animate-pulse"></div>
+        <div class="absolute bottom-1/3 right-1/3 w-8 h-8 rounded-full border-2 border-guitar-gold/30 animate-pulse-slow"></div>
+        <!-- Guitar Neck Decoration -->
+        <div class="absolute bottom-0 left-0 right-0 h-24 bg-gradient-to-t from-black/70 to-transparent flex justify-center">
+            <div class="w-1/2 h-full flex justify-around items-start">
+                <div class="w-1 h-16 bg-white"></div>
+                <div class="w-1 h-16 bg-white"></div>
+                <div class="w-1 h-16 bg-white"></div>
+                <div class="w-1 h-16 bg-white"></div>
+                <div class="w-1 h-16 bg-white"></div>
+                <div class="w-1 h-16 bg-white"></div>
+            </div>
+        </div>
+        <!-- Content Container -->
+        <div class="relative z-10 max-w-4xl mx-auto px-4 py-16 text-center hero-content">
+            <!-- Badge -->
+            <div class="inline-block bg-guitar-gold text-guitar-dark font-bold py-2 px-6 rounded-full mb-6 transform -rotate-3 shadow-lg">
+                <i class="fas fa-guitar mr-2"></i>FREE WORKSHOP
+            </div>
+            <!-- Main Heading -->
+            <h1 class="text-4xl md:text-6xl lg:text-7xl font-heading font-extrabold text-white mb-6 text-shadow hero-heading">
+                Beginner <span class="text-guitar-gold">Guitar</span> Workshop
+            </h1>
+            <!-- Subheading -->
+            <p class="text-xl md:text-2xl text-gray-200 mb-8 font-body max-w-2xl mx-auto hero-subheading">
+                Master the fundamentals in just 2 hours - perfect for complete beginners!
+            </p>
+            <!-- Instructor Card -->
+            <div class="bg-black/40 backdrop-blur-sm rounded-xl p-6 mb-10 inline-block border border-white/10 transform hover:scale-105 transition-transform duration-300">
+                <div class="flex flex-col sm:flex-row items-center gap-4">
+                    <div class="relative">
+                        <div class="bg-gray-200 border-2 border-dashed rounded-xl w-16 h-16"></div>
+                        <div class="absolute -bottom-2 -right-2 bg-guitar-gold text-guitar-dark p-1 rounded-full">
+                            <i class="fas fa-music text-xs"></i>
+                        </div>
+                    </div>
+                    <div class="text-left">
+                        <p class="text-gray-300 text-sm font-body">Led by</p>
+                        <h3 class="text-xl font-bold text-white font-heading">GOURAV KUMAR</h3>
+                        <p class="text-guitar-gold text-sm flex items-center">
+                            <i class="fas fa-star mr-1"></i>
+                            <i class="fas fa-star mr-1"></i>
+                            <i class="fas fa-star mr-1"></i>
+                            <i class="fas fa-star mr-1"></i>
+                            <i class="fas fa-star mr-1"></i>
+                            Professional Guitarist
+                        </p>
+                    </div>
+                </div>
+            </div>
+            <!-- Details -->
+            <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-10 max-w-2xl mx-auto">
+                <div class="bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10">
+                    <i class="fas fa-calendar-alt text-guitar-gold text-2xl mb-2"></i>
+                    <h3 class="text-white font-bold">Date</h3>
+                    <p class="text-gray-200">July 10th</p>
+                </div>
+                <div class="bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10">
+                    <i class="fas fa-clock text-guitar-gold text-2xl mb-2"></i>
+                    <h3 class="text-white font-bold">Time</h3>
+                    <p class="text-gray-200">8 PM - 10 PM</p>
+                </div>
+                <div class="bg-black/30 backdrop-blur-sm p-4 rounded-lg border border-white/10">
+                    <i class="fas fa-globe text-guitar-gold text-2xl mb-2"></i>
+                    <h3 class="text-white font-bold">Where</h3>
+                    <p class="text-gray-200">Online</p>
+                </div>
+            </div>
+            <!-- Mobile WhatsApp Button -->
+            <div class="fixed bottom-5 left-1/2 transform -translate-x-1/2 z-50 md:hidden animate-bounce-in">
+                <a href="https://wa.me/yourphonenumber?text=I%20want%20to%20join%20the%20free%20guitar%20workshop"
+                   class="flex items-center justify-center bg-[#25D366] text-white font-bold font-heading py-4 px-8 rounded-full text-lg shadow-xl transform transition duration-300 hover:scale-105">
+                    <i class="fab fa-whatsapp mr-3 text-2xl"></i>Join on WhatsApp
+                </a>
+            </div>
+            <!-- Desktop CTA Button (hidden on mobile) -->
+            <div class="hidden md:block">
+                <a href="#" class="group relative inline-block">
+                    <div class="absolute -inset-1 bg-guitar-gold rounded-lg blur opacity-75 group-hover:opacity-100 transition duration-300 animate-pulse-slow"></div>
+                    <button class="relative bg-gradient-to-r from-guitar-gold to-yellow-600 hover:from-yellow-500 hover:to-yellow-700 text-guitar-dark font-bold font-heading py-4 px-12 rounded-lg text-xl tracking-wide transform transition duration-300 group-hover:scale-105 shadow-lg">
+                        <i class="fas fa-guitar mr-3"></i>ENROLL NOW - FREE!
+                    </button>
+                </a>
+            </div>
+            <!-- Presented by -->
+            <p class="mt-10 text-white/80 font-body">
+                Presented by <span class="font-bold text-white">BLU X MEDIA</span>
+            </p>
+        </div>
+        <!-- Floating Guitar Animation (Mobile Only) -->
+        <div class="md:hidden absolute bottom-5 right-5 w-16 h-40 flex justify-center items-start">
+            <div class="relative">
+                <div class="absolute w-24 h-24 bg-guitar-gold/10 rounded-full -top-8 -left-4 animate-ping"></div>
+                <div class="relative z-10">
+                    <i class="fas fa-guitar text-5xl text-white transform rotate-12 animate-bounce-slow" style="animation-duration: 3s;"></i>
+                </div>
+            </div>
+        </div>
+    </section>
+    <style>
+        @keyframes bounce-in {
+            0% {
+                opacity: 0;
+                transform: translate(-50%, 20px);
+            }
+            100% {
+                opacity: 1;
+                transform: translate(-50%, 0);
+            }
+        }
+        .animate-bounce-in {
+            animation: bounce-in 0.5s ease-out forwards;
+        }
+        .animate-bounce-slow {
+            animation: bounce-slow 3s infinite;
+        }
+        @keyframes bounce-slow {
+            0%, 100% { transform: translateY(0) rotate(12deg); }
+            50% { transform: translateY(-20px) rotate(12deg); }
+        }
+    </style>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Nityam2007/govkum" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>