| | <!DOCTYPE html> |
| | <html lang="en"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Tutorials | FaceFusion Fiesta</title> |
| | <link rel="stylesheet" href="style.css"> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| | <script src="components/navbar.js"></script> |
| | </head> |
| | <body class="bg-gray-100 min-h-screen"> |
| | <custom-navbar></custom-navbar> |
| | |
| | <main class="container mx-auto px-4 py-8"> |
| | <h1 class="text-3xl font-bold mb-8">Tutorials & Guides</h1> |
| | |
| | <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <div class="aspect-video bg-gray-200 rounded-lg mb-4 overflow-hidden"> |
| | <img src="http://static.photos/technology/640x360/101" class="w-full h-full object-cover"> |
| | </div> |
| | <h2 class="text-xl font-bold mb-2">Getting Started Guide</h2> |
| | <p class="text-gray-600 mb-4">Learn how to create your first face swap in just 5 minutes.</p> |
| | <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">Watch Tutorial →</a> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <div class="aspect-video bg-gray-200 rounded-lg mb-4 overflow-hidden"> |
| | <img src="http://static.photos/technology/640x360/102" class="w-full h-full object-cover"> |
| | </div> |
| | <h2 class="text-xl font-bold mb-2">Advanced Editing Techniques</h2> |
| | <p class="text-gray-600 mb-4">Master the editor tools for professional-looking results.</p> |
| | <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">Watch Tutorial →</a> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <div class="aspect-video bg-gray-200 rounded-lg mb-4 overflow-hidden"> |
| | <img src="http://static.photos/technology/640x360/103" class="w-full h-full object-cover"> |
| | </div> |
| | <h2 class="text-xl font-bold mb-2">Best Practices for Photos</h2> |
| | <p class="text-gray-600 mb-4">Learn which photos work best for seamless face swaps.</p> |
| | <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">Watch Tutorial →</a> |
| | </div> |
| | |
| | <div class="bg-white rounded-xl shadow-md p-6"> |
| | <div class="aspect-video bg-gray-200 rounded-lg mb-4 overflow-hidden"> |
| | <img src="http://static.photos/technology/640x360/104" class="w-full h-full object-cover"> |
| | </div> |
| | <h2 class="text-xl font-bold mb-2">Troubleshooting Guide</h2> |
| | <p class="text-gray-600 mb-4">Fix common issues and get answers to frequently asked questions.</p> |
| | <a href="#" class="text-purple-600 hover:text-purple-800 font-medium">Watch Tutorial →</a> |
| | </div> |
| | </div> |
| | </main> |
| | |
| | <script src="script.js"></script> |
| | <script> |
| | feather.replace(); |
| | </script> |
| | </body> |
| | </html> |
