Spaces:

Rony00
/

cinemagic-explorer

Running

App Files Files Community

Rony00 commited on Oct 15, 2025

Commit

c049be9

verified ·

1 Parent(s): 5c66273

https://comavidstcp.netlify.app/

Browse files

Files changed (2) hide show

index.html +23 -25
videos.html +160 -0

index.html CHANGED Viewed

@@ -3,8 +3,8 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MyWebsite - Home</title>
-    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
@@ -16,31 +16,29 @@
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
-                    <span class="text-xl font-bold text-blue-600">MyWebsite</span>
-                </div>
                 <div class="flex items-center space-x-8">
                     <a href="index.html" class="text-blue-600 font-medium">Home</a>
                     <a href="about.html" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
-                    <a href="services.html" class="text-gray-600 hover:text-blue-600 transition-colors">Services</a>
-                    <a href="contact.html" class="text-gray-600 hover:text-blue-600 transition-colors">Contact</a>
                 </div>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
     <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-            <h1 class="text-5xl font-bold mb-6">Welcome to MyWebsite</h1>
-            <p class="text-xl mb-8 max-w-2xl mx-auto">A modern, responsive website built with Tailwind CSS and beautiful animations.</p>
             <div class="space-x-4">
-                <a href="about.html" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors">Learn More</a>
                 <a href="contact.html" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition-colors">Get Started</a>
             </div>
         </div>
     </section>
-    <!-- Features Section -->
     <section class="py-16 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-12">
@@ -50,35 +48,35 @@
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div class="text-center p-6">
                     <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="zap" class="text-blue-600"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Fast Performance</h3>
-                    <p class="text-gray-600">Lightning-fast loading times and smooth animations for the best user experience.</p>
                 </div>
                 <div class="text-center p-6">
                     <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="smartphone" class="text-green-600"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Responsive Design</h3>
-                    <p class="text-gray-600">Looks great on all devices, from mobile phones to desktop computers.</p>
                 </div>
                 <div class="text-center p-6">
                     <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
-                        <i data-feather="code" class="text-purple-600"></i>
                     </div>
-                    <h3 class="text-xl font-semibold mb-2">Modern Tech</h3>
-                    <p class="text-gray-600">Built with the latest web technologies and best practices.</p>
                 </div>
             </div>
-        </div>
     </section>
     <!-- Footer -->
     <footer class="bg-gray-800 text-white py-8">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center">
-                <p>&copy; 2024 MyWebsite. All rights reserved.</p>
-            </div>
         </div>
     </footer>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ComaVids - Home</title>
+<link rel="icon" type="image/x-icon" href="/static/favicon.ico">
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="flex justify-between h-16">
                 <div class="flex items-center">
+                    <span class="text-xl font-bold text-blue-600">ComaVids</span>
+</div>
                 <div class="flex items-center space-x-8">
                     <a href="index.html" class="text-blue-600 font-medium">Home</a>
                     <a href="about.html" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
+                <a href="videos.html" class="text-gray-600 hover:text-blue-600 transition-colors">Videos</a>
+<a href="contact.html" class="text-gray-600 hover:text-blue-600 transition-colors">Contact</a>
                 </div>
             </div>
         </div>
     </nav>
     <!-- Hero Section -->
     <section class="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center hero-content">
+            <h1 class="text-5xl font-bold mb-6">Welcome to ComaVids</h1>
+            <p class="text-xl mb-8 max-w-2xl mx-auto">Your premier destination for high-quality video content and streaming services.</p>
             <div class="space-x-4">
+                <a href="videos.html" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition-colors">Browse Videos</a>
                 <a href="contact.html" class="bg-transparent border-2 border-white text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-blue-600 transition-colors">Get Started</a>
             </div>
         </div>
     </section>
+<!-- Features Section -->
     <section class="py-16 bg-white">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center mb-12">
             <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
                 <div class="text-center p-6">
                     <div class="w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="video" class="text-blue-600"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-2">HD Quality</h3>
+                    <p class="text-gray-600">Crystal clear high-definition videos with superior audio quality.</p>
                 </div>
                 <div class="text-center p-6">
                     <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="play-circle" class="text-green-600"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-2">Seamless Streaming</h3>
+                    <p class="text-gray-600">Buffer-free streaming experience across all your devices.</p>
                 </div>
                 <div class="text-center p-6">
                     <div class="w-16 h-16 bg-purple-100 rounded-full flex items-center justify-center mx-auto mb-4">
+                        <i data-feather="users" class="text-purple-600"></i>
                     </div>
+                    <h3 class="text-xl font-semibold mb-2">Community Driven</h3>
+                    <p class="text-gray-600">Content curated by and for our amazing community of viewers.</p>
                 </div>
             </div>
+</div>
     </section>
     <!-- Footer -->
     <footer class="bg-gray-800 text-white py-8">
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <div class="text-center">
+                <p>&copy; 2024 ComaVids. All rights reserved.</p>
+</div>
         </div>
     </footer>

videos.html ADDED Viewed

	@@ -0,0 +1,160 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ComaVids - Videos</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/animejs/lib/anime.iife.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50">
+    <!-- Navigation -->
+    <nav class="bg-white shadow-sm">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-16">
+                <div class="flex items-center">
+                    <span class="text-xl font-bold text-blue-600">ComaVids</span>
+                </div>
+                <div class="flex items-center space-x-8">
+                    <a href="index.html" class="text-gray-600 hover:text-blue-600 transition-colors">Home</a>
+                    <a href="about.html" class="text-gray-600 hover:text-blue-600 transition-colors">About</a>
+                    <a href="videos.html" class="text-blue-600 font-medium">Videos</a>
+                    <a href="contact.html" class="text-gray-600 hover:text-blue-600 transition-colors">Contact</a>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Videos Section -->
+    <section class="py-16 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-12">
+                <h1 class="text-4xl font-bold text-gray-900 mb-4">Our Video Collection</h1>
+                <p class="text-gray-600 max-w-2xl mx-auto">Explore our extensive library of high-quality video content</p>
+            </div>
+            <!-- Video Grid -->
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 mb-12">
+                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <img src="http://static.photos/technology/640x360/1" alt="Technology Video" class="absolute h-full w-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold mb-2">Technology Insights</h3>
+                        <p class="text-gray-600 mb-4">Latest trends and innovations in the tech world</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500">
+                            <span>45 min</span>
+                            <span>HD</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <img src="http://static.photos/travel/640x360/2" alt="Travel Video" class="absolute h-full w-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold mb-2">World Travel Guide</h3>
+                        <p class="text-gray-600 mb-4">Explore beautiful destinations around the globe</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500">
+                            <span>28 min</span>
+                            <span>4K</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <img src="http://static.photos/education/640x360/3" alt="Education Video" class="absolute h-full w-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold mb-2">Learning Series</h3>
+                        <p class="text-gray-600 mb-4">Educational content for skill development</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500">
+                            <span>1h 15m</span>
+                            <span>HD</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <img src="http://static.photos/nature/640x360/4" alt="Nature Video" class="absolute h-full w-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold mb-2">Nature Wonders</h3>
+                        <p class="text-gray-600 mb-4">Breathtaking footage of natural landscapes</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500">
+                            <span>36 min</span>
+                            <span>4K</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <img src="http://static.photos/food/640x360/5" alt="Food Video" class="absolute h-full w-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold mb-2">Culinary Arts</h3>
+                        <p class="text-gray-600 mb-4">Master the art of cooking with expert chefs</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500">
+                            <span>52 min</span>
+                            <span>HD</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow">
+                    <div class="relative pb-[56.25%] bg-gray-200">
+                        <img src="http://static.photos/sport/640x360/6" alt="Sports Video" class="absolute h-full w-full object-cover">
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-semibold mb-2">Sports Highlights</h3>
+                        <p class="text-gray-600 mb-4">Exciting moments from various sports events</p>
+                        <div class="flex justify-between items-center text-sm text-gray-500">
+                            <span>1h 8m</span>
+                            <span>HD</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Call to Action -->
+            <div class="text-center">
+                <h2 class="text-2xl font-bold text-gray-900 mb-4">Want More Content?</h2>
+                <p class="text-gray-600 mb-6">Subscribe to our premium plan for unlimited access to all videos</p>
+                <a href="contact.html" class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition-colors">Subscribe Now</a>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer class="bg-gray-800 text-white py-8">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center">
+                <p>&copy; 2024 ComaVids. All rights reserved.</p>
+            </div>
+        </div>
+    </footer>
+    <script>
+        // Initialize Feather Icons
+        feather.replace();
+        // Animation for video cards
+        document.addEventListener('DOMContentLoaded', function() {
+            anime({
+                targets: '.bg-white.rounded-lg',
+                translateY: [20, 0],
+                opacity: [0, 1],
+                delay: anime.stagger(100),
+                easing: 'easeOutCubic'
+            });
+        });
+    </script>
+</body>
+</html>