Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Portfolio Vidéaste | Créateur de Contenu Visuel</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"> | |
| <style> | |
| .hero { | |
| background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| } | |
| .video-thumbnail { | |
| position: relative; | |
| transition: all 0.3s ease; | |
| } | |
| .video-thumbnail:hover { | |
| transform: scale(1.03); | |
| } | |
| .video-thumbnail::after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: rgba(0, 0, 0, 0.4); | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .video-thumbnail:hover::after { | |
| opacity: 1; | |
| } | |
| .play-icon { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| z-index: 2; | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .video-thumbnail:hover .play-icon { | |
| opacity: 1; | |
| } | |
| .nav-link { | |
| position: relative; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| position: absolute; | |
| width: 0; | |
| height: 2px; | |
| bottom: -2px; | |
| left: 0; | |
| background-color: white; | |
| transition: width 0.3s ease; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| </style> | |
| </head> | |
| <body class="font-sans bg-gray-50 text-gray-800"> | |
| <!-- Navigation --> | |
| <nav class="fixed w-full bg-black bg-opacity-90 text-white z-50"> | |
| <div class="container mx-auto px-6 py-4 flex justify-between items-center"> | |
| <a href="#" class="text-2xl font-bold">VIDEO<span class="text-blue-500">CREA</span></a> | |
| <div class="hidden md:flex space-x-8"> | |
| <a href="#home" class="nav-link">Accueil</a> | |
| <a href="#services" class="nav-link">Prestations</a> | |
| <a href="#portfolio" class="nav-link">Réalisations</a> | |
| <a href="#about" class="nav-link">À propos</a> | |
| <a href="#contact" class="nav-link">Contact</a> | |
| </div> | |
| <button class="md:hidden focus:outline-none"> | |
| <i class="fas fa-bars text-2xl"></i> | |
| </button> | |
| </div> | |
| </nav> | |
| <!-- Hero Section --> | |
| <section id="home" class="hero min-h-screen flex items-center justify-center text-white pt-20"> | |
| <div class="container mx-auto px-6 text-center"> | |
| <h1 class="text-4xl md:text-6xl font-bold mb-6">CRÉATEUR DE CONTENU VISUEL</h1> | |
| <p class="text-xl md:text-2xl mb-12 max-w-3xl mx-auto">Je donne vie à vos idées à travers l'image et le son. Capturer l'émotion, raconter des histoires, créer l'impact.</p> | |
| <div class="flex flex-col sm:flex-row justify-center gap-4"> | |
| <a href="#portfolio" class="bg-blue-600 hover:bg-blue-700 text-white px-8 py-3 rounded-full font-semibold transition duration-300">Voir mon travail</a> | |
| <a href="#contact" class="bg-transparent border-2 border-white hover:bg-white hover:text-black text-white px-8 py-3 rounded-full font-semibold transition duration-300">Me contacter</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Services Section --> | |
| <section id="services" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">MES PRESTATIONS</h2> | |
| <div class="grid md:grid-cols-3 gap-10"> | |
| <!-- Service 1 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-video"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Tournage Professionnel</h3> | |
| <p class="text-gray-600">Captation d'événements, interviews, reportages avec du matériel professionnel pour une qualité d'image optimale.</p> | |
| </div> | |
| <!-- Service 2 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-film"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Montage Vidéo</h3> | |
| <p class="text-gray-600">Montage dynamique, étalonnage colorimétrique, intégration de musique et effets sonores pour des vidéos impactantes.</p> | |
| </div> | |
| <!-- Service 3 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-ad"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Publicité & Promotion</h3> | |
| <p class="text-gray-600">Création de spots publicitaires, teasers et vidéos promotionnelles pour booster votre communication digitale.</p> | |
| </div> | |
| <!-- Service 4 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-music"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Clip Musical</h3> | |
| <p class="text-gray-600">Réalisation de clips musicaux avec une approche artistique et narrative pour mettre en valeur votre musique.</p> | |
| </div> | |
| <!-- Service 5 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-drone-alt"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Vidéos Aériennes</h3> | |
| <p class="text-gray-600">Prises de vues aériennes par drone pour des plans spectaculaires et des perspectives uniques.</p> | |
| </div> | |
| <!-- Service 6 --> | |
| <div class="bg-gray-50 p-8 rounded-lg shadow-sm hover:shadow-md transition duration-300"> | |
| <div class="text-blue-600 text-4xl mb-4"> | |
| <i class="fas fa-graduation-cap"></i> | |
| </div> | |
| <h3 class="text-xl font-bold mb-3">Formation</h3> | |
| <p class="text-gray-600">Ateliers et formations personnalisés pour apprendre les bases de la vidéo et du montage.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Portfolio Section --> | |
| <section id="portfolio" class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">MES RÉALISATIONS</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"> | |
| <!-- Video 1 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative"> | |
| <img src="https://images.unsplash.com/photo-1579389083078-4e7018379f7e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Projet vidéo" class="w-full h-64 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-4xl text-white bg-blue-600 rounded-full p-4"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white z-10"> | |
| <h3 class="font-bold text-lg">Clip Musical - "Horizon"</h3> | |
| <p class="text-sm">2023 • Réalisation & Montage</p> | |
| </div> | |
| </div> | |
| <!-- Video 2 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative"> | |
| <img src="https://images.unsplash.com/photo-1551269901-5c5e14c25df7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Projet vidéo" class="w-full h-64 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-4xl text-white bg-blue-600 rounded-full p-4"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white z-10"> | |
| <h3 class="font-bold text-lg">Documentaire Entreprise</h3> | |
| <p class="text-sm">2023 • Tournage & Post-production</p> | |
| </div> | |
| </div> | |
| <!-- Video 3 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative"> | |
| <img src="https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Projet vidéo" class="w-full h-64 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-4xl text-white bg-blue-600 rounded-full p-4"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white z-10"> | |
| <h3 class="font-bold text-lg">Publicité Immobilière</h3> | |
| <p class="text-sm">2022 • Drone & Montage</p> | |
| </div> | |
| </div> | |
| <!-- Video 4 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative"> | |
| <img src="https://images.unsplash.com/photo-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Projet vidéo" class="w-full h-64 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-4xl text-white bg-blue-600 rounded-full p-4"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white z-10"> | |
| <h3 class="font-bold text-lg">Reportage Événementiel</h3> | |
| <p class="text-sm">2022 • Multi-caméras</p> | |
| </div> | |
| </div> | |
| <!-- Video 5 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative"> | |
| <img src="https://images.unsplash.com/photo-1521791055366-0d403874e3cd?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Projet vidéo" class="w-full h-64 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-4xl text-white bg-blue-600 rounded-full p-4"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white z-10"> | |
| <h3 class="font-bold text-lg">Série Web - Épisode 1</h3> | |
| <p class="text-sm">2021 • Scénario & Réalisation</p> | |
| </div> | |
| </div> | |
| <!-- Video 6 --> | |
| <div class="video-thumbnail rounded-lg overflow-hidden relative"> | |
| <img src="https://images.unsplash.com/photo-1508700115892-45ecd05ae2ad?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2069&q=80" alt="Projet vidéo" class="w-full h-64 object-cover"> | |
| <div class="play-icon"> | |
| <i class="fas fa-play text-4xl text-white bg-blue-600 rounded-full p-4"></i> | |
| </div> | |
| <div class="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black to-transparent p-4 text-white z-10"> | |
| <h3 class="font-bold text-lg">Motion Design</h3> | |
| <p class="text-sm">2021 • Animation & Sound Design</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mt-12"> | |
| <a href="#" class="inline-block border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white px-6 py-2 rounded-full font-medium transition duration-300">Voir plus de projets</a> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- About Section --> | |
| <section id="about" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col lg:flex-row items-center gap-12"> | |
| <div class="lg:w-1/2"> | |
| <img src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80" alt="Vidéaste au travail" class="rounded-lg shadow-lg w-full"> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <h2 class="text-3xl md:text-4xl font-bold mb-8">À PROPOS DE MOI</h2> | |
| <p class="text-lg mb-6">Passionné par l'image et le son depuis mon plus jeune âge, j'ai transformé ma passion en métier après des études en audiovisuel et plusieurs années d'expérience dans le domaine.</p> | |
| <p class="text-lg mb-8">Mon approche allie technicité et sens artistique pour créer des vidéos qui captivent et communiquent efficacement votre message. Je m'adapte à chaque projet avec une écoute attentive de vos besoins.</p> | |
| <div class="mb-8"> | |
| <h3 class="text-xl font-bold mb-4">MES COMPÉTENCES</h3> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Montage vidéo</span> | |
| <span>95%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 95%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Tournage</span> | |
| <span>90%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Étalonnage</span> | |
| <span>85%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 85%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between mb-1"> | |
| <span>Motion Design</span> | |
| <span>75%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <h3 class="text-xl font-bold mb-4">OUTILS MAÎTRISÉS</h3> | |
| <div class="flex flex-wrap gap-3"> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full">Adobe Premiere Pro</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full">After Effects</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full">DaVinci Resolve</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full">Final Cut Pro</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full">Photoshop</span> | |
| <span class="bg-gray-100 px-3 py-1 rounded-full">Lightroom</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Testimonials Section --> | |
| <section class="py-20 bg-gray-50"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">ILS M'ONT FAIT CONFIANCE</h2> | |
| <div class="grid md:grid-cols-3 gap-8"> | |
| <!-- Testimonial 1 --> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl mr-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Un travail exceptionnel sur notre clip musical. Le vidéaste a su capter parfaitement l'essence de notre musique et la traduire en images. Le montage est dynamique et l'étalonnage sublime chaque plan."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Sarah L.</h4> | |
| <p class="text-sm text-gray-500">Artiste Musicienne</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 2 --> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl mr-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Nous avons collaboré pour notre campagne de communication et le résultat a dépassé nos attentes. Professionnalisme, créativité et réactivité. Je recommande vivement ce vidéaste talentueux."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Thomas R.</h4> | |
| <p class="text-sm text-gray-500">Directeur Marketing</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial 3 --> | |
| <div class="bg-white p-8 rounded-lg shadow-sm"> | |
| <div class="flex items-center mb-4"> | |
| <div class="text-yellow-400 text-xl mr-1"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star-half-alt"></i> | |
| </div> | |
| </div> | |
| <p class="text-gray-600 mb-6">"Le reportage de notre événement corporate était parfait. Les angles de vue variés, le montage rythmé et les interviews bien mises en valeur. Un vrai travail de pro qui a impressionné tous nos partenaires."</p> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-10 h-10 rounded-full mr-3"> | |
| <div> | |
| <h4 class="font-bold">Élodie M.</h4> | |
| <p class="text-sm text-gray-500">Responsable Événementiel</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Contact Section --> | |
| <section id="contact" class="py-20 bg-white"> | |
| <div class="container mx-auto px-6"> | |
| <h2 class="text-3xl md:text-4xl font-bold text-center mb-16">TRABAILONS ENSEMBLE</h2> | |
| <div class="flex flex-col lg:flex-row gap-12"> | |
| <div class="lg:w-1/2"> | |
| <form class="space-y-6"> | |
| <div> | |
| <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Votre nom</label> | |
| <input type="text" id="name" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Votre email</label> | |
| <input type="email" id="email" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="subject" class="block text-sm font-medium text-gray-700 mb-1">Sujet</label> | |
| <input type="text" id="subject" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label for="message" class="block text-sm font-medium text-gray-700 mb-1">Votre message</label> | |
| <textarea id="message" rows="5" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"></textarea> | |
| </div> | |
| <button type="submit" class="w-full bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300">Envoyer le message</button> | |
| </form> | |
| </div> | |
| <div class="lg:w-1/2"> | |
| <div class="bg-gray-50 p-8 rounded-lg h-full"> | |
| <h3 class="text-2xl font-bold mb-6">COORDONNÉES</h3> | |
| <div class="space-y-6"> | |
| <div class="flex items-start"> | |
| <div class="text-blue-600 text-xl mt-1 mr-4"> | |
| <i class="fas fa-envelope"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Email</h4> | |
| <p class="text-gray-600">contact@videocrea.com</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-600 text-xl mt-1 mr-4"> | |
| <i class="fas fa-phone-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Téléphone</h4> | |
| <p class="text-gray-600">+33 6 12 34 56 78</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-600 text-xl mt-1 mr-4"> | |
| <i class="fas fa-map-marker-alt"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Localisation</h4> | |
| <p class="text-gray-600">Paris, France<br>Disponible pour des déplacements en région</p> | |
| </div> | |
| </div> | |
| <div class="flex items-start"> | |
| <div class="text-blue-600 text-xl mt-1 mr-4"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold mb-1">Horaires</h4> | |
| <p class="text-gray-600">Lundi - Vendredi : 9h - 19h<br>Week-end : Sur rendez-vous</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8"> | |
| <h4 class="font-bold mb-4">SUIVEZ-MOI</h4> | |
| <div class="flex space-x-4"> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 text-xl"><i class="fab fa-instagram"></i></a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 text-xl"><i class="fab fa-vimeo-v"></i></a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 text-xl"><i class="fab fa-youtube"></i></a> | |
| <a href="#" class="text-gray-700 hover:text-blue-600 text-xl"><i class="fab fa-linkedin-in"></i></a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer class="bg-black text-white py-12"> | |
| <div class="container mx-auto px-6"> | |
| <div class="flex flex-col md:flex-row justify-between items-center"> | |
| <div class="mb-6 md:mb-0"> | |
| <a href="#" class="text-2xl font-bold">VIDEO<span class="text-blue-500">CREA</span></a> | |
| <p class="mt-2 text-gray-400">Créateur de contenu visuel - Vidéaste & Monteur Professionnel</p> | |
| </div> | |
| <div class="flex flex-col items-center md:items-end"> | |
| <div class="flex space-x-6 mb-4"> | |
| <a href="#home" class="hover:text-blue-400 transition duration-300">Accueil</a> | |
| <a href="#services" class="hover:text-blue-400 transition duration-300">Prestations</a> | |
| <a href="#portfolio" class="hover:text-blue-400 transition duration-300">Réalisations</a> | |
| <a href="#about" class="hover:text-blue-400 transition duration-300">À propos</a> | |
| <a href="#contact" class="hover:text-blue-400 transition duration-300">Contact</a> | |
| </div> | |
| <p class="text-gray-400 text-sm">© 2023 VideoCrea. Tous droits réservés.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Simple mobile menu toggle (would need more JS for full functionality) | |
| document.querySelector('.md\\:hidden').addEventListener('click', function() { | |
| // In a real implementation, you would toggle a mobile menu here | |
| alert('Menu mobile à implémenter'); | |
| }); | |
| // Video thumbnail click handler | |
| document.querySelectorAll('.video-thumbnail').forEach(thumbnail => { | |
| thumbnail.addEventListener('click', function() { | |
| // In a real implementation, this would open a lightbox with the video | |
| alert('Lecture de la vidéo à implémenter'); | |
| }); | |
| }); | |
| </script> | |
| <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=tochska/projetriven" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |