Spaces:
Running
Running
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Trésors du Maroc - Livres Anciens</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> | |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Montserrat:wght@300;400;500&display=swap'); | |
| body { | |
| font-family: 'Montserrat', sans-serif; | |
| background-color: #f8f5f0; | |
| } | |
| .title-font { | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .book-card:hover .book-overlay { | |
| opacity: 1; | |
| } | |
| .book-overlay { | |
| transition: all 0.3s ease; | |
| } | |
| .hero-pattern { | |
| background-image: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1974&q=80'); | |
| background-size: cover; | |
| background-position: center; | |
| background-blend-mode: overlay; | |
| } | |
| .nav-link::after { | |
| content: ''; | |
| display: block; | |
| width: 0; | |
| height: 2px; | |
| background: #8b5a2b; | |
| transition: width .3s; | |
| } | |
| .nav-link:hover::after { | |
| width: 100%; | |
| } | |
| .cart-count { | |
| top: -8px; | |
| right: -8px; | |
| } | |
| </style> | |
| </head> | |
| <body class="text-gray-800"> | |
| <!-- Header --> | |
| <header class="bg-white shadow-sm"> | |
| <div class="container mx-auto px-4 py-4 flex justify-between items-center"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-book-open text-2xl text-amber-800"></i> | |
| <h1 class="title-font text-2xl font-bold text-amber-900">Trésors du Maroc</h1> | |
| </div> | |
| <nav class="hidden md:flex space-x-8"> | |
| <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Accueil</a> | |
| <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Collection</a> | |
| <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Raretés</a> | |
| <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Histoire</a> | |
| <a href="#" class="nav-link font-medium text-gray-700 hover:text-amber-800">Contact</a> | |
| </nav> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <button id="cart-btn" class="text-gray-700 hover:text-amber-800"> | |
| <i class="fas fa-shopping-cart text-xl"></i> | |
| <span id="cart-count" class="cart-count absolute bg-amber-700 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">0</span> | |
| </button> | |
| </div> | |
| <button class="md:hidden text-gray-700"> | |
| <i class="fas fa-bars text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero-pattern bg-amber-900 bg-opacity-70 py-20"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h2 class="title-font text-4xl md:text-5xl font-bold text-white mb-6">Découvrez les Trésors Littéraires du Maroc</h2> | |
| <p class="text-xl text-white max-w-2xl mx-auto mb-8">Une collection exclusive de livres anciens racontant l'histoire, la culture et les traditions du Royaume</p> | |
| <button class="bg-amber-700 hover:bg-amber-800 text-white font-medium py-3 px-8 rounded-full transition duration-300 transform hover:scale-105"> | |
| Explorer la Collection | |
| </button> | |
| </div> | |
| </section> | |
| <!-- Featured Books --> | |
| <section class="py-16 bg-white"> | |
| <div class="container mx-auto px-4"> | |
| <div class="text-center mb-12"> | |
| <h2 class="title-font text-3xl font-bold text-amber-900 mb-4">Nos Raretés</h2> | |
| <p class="max-w-2xl mx-auto text-gray-600">Des ouvrages uniques datant du 18ème au 20ème siècle, témoins de l'histoire riche du Maroc</p> | |
| </div> | |
| <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8"> | |
| <!-- Book 1 --> | |
| <div class="book-card bg-white rounded-lg shadow-md overflow-hidden relative group"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1544947950-fa07a98d237f?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Livre ancien sur le Maroc" class="w-full h-full object-cover"> | |
| <div class="book-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0"> | |
| <button class="add-to-cart bg-amber-700 hover:bg-amber-800 text-white py-2 px-6 rounded-full transition" data-id="1"> | |
| Ajouter au panier | |
| </button> | |
| </div> | |
| </div> | |
| <div class="p-4"> | |
| <h3 class="title-font font-bold text-lg mb-1">Maroc Impérial</h3> | |
| <p class="text-sm text-gray-500 mb-2">Édouard Michaux-Bellaire, 1912</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-bold text-amber-800">€450</span> | |
| <span class="text-xs bg-amber-100 text-amber-800 px-2 py-1 rounded">Édition originale</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Book 2 --> | |
| <div class="book-card bg-white rounded-lg shadow-md overflow-hidden relative group"> | |
| <div class="relative overflow-hidden h-64"> | |
| <img src="https://images.unsplash.com/photo-1589998059171-988d322dfe03?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Livre ancien sur le Maroc" class="w-full h-full object-cover"> | |
| <div class="book-overlay absolute inset-0 bg-black bg-opacity-60 flex items-center justify-center opacity-0"> | |
| <button class="add-to-cart bg-amber-700 hover:bg-amber-800 text-white py-2 px-6 rounded-full transition" data-id="2"> | |
| Ajouter au panier | |
| </html> |