App - Copy this React, Tailwind Component to your project
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="UTF 8"> <meta name="viewport" content="width=device width, initial scale=1.0"> <meta name="description" content="Education Plateforme éducative pour télécharger des leçons interactives en Mathématiques, Physique, Chimie et SVT."> <meta name="keywords" content="éducation, leçons, mathématiques, physique, chimie, SVT, télécharger"> <meta name="author" content="OmarFable"> <title>Education Leçons à Télécharger</title> <link rel="stylesheet" href="/2.css" /> <script src="https://cdn.tailwindcss.com"></script> <style> body { margin: 0; background color: #0d0d0d; /* Dark background */ color: #e0e0e0; /* Light text */ font family: 'Arial', sans serif; } .header { background: linear gradient(90deg, rgba(0, 123, 255, 1) 0%, rgba(0, 123, 255, 0.5) 100%); padding: 2rem; text align: center; border bottom: 2px solid #007bff; } .logo { width: 100px; /* Set your desired logo width */ height: auto; /* Maintain aspect ratio */ margin bottom: 1rem; /* Space below the logo */ } .fade in { animation: fadeIn 0.5s ease in; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .btn { background color: #007bff; /* Primary button */ color: white; padding: 0.8rem 1.5rem; border radius: 30px; text decoration: none; transition: background color 0.3s, transform 0.2s; display: inline block; margin top: 1rem; } .btn:hover { background color: #0056b3; /* Darker blue on hover */ transform: translateY( 2px); } .nav link { color: white; padding: 0.5rem 1rem; text decoration: none; transition: background color 0.3s, color 0.3s; border radius: 20px; /* Rounded corners */ } .nav link:hover, .nav link.active { background color: rgba(255, 255, 255, 0.1); /* Light background on hover */ color: #007bff; /* Change text color on hover */ } .card { background color: #1c1c1c; /* Card background */ border radius: 12px; padding: 2rem; box shadow: 0 4px 20px rgba(0, 0, 0, 0.5); transition: transform 0.2s, box shadow 0.2s; } .card:hover { transform: translateY( 5px); box shadow: 0 8px 30px rgba(0, 0, 0, 0.7); } .footer { background color: #1c1c1c; /* Dark footer */ padding: 2rem; text align: center; } .section title { font size: 2rem; margin: 2rem 0 1rem; color: #007bff; text shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); } .section description { font size: 1.1rem; color: #c0c0c0; margin bottom: 1.5rem; } /* Responsive styles */ @media (max width: 768px) { .container { padding: 0 1rem; } } </style> </head> <body> <! Loader > <div id="loader" class="fixed inset 0 bg black opacity 50 flex items center justify center z 50"> <div class="spinner border 4 border transparent border t 4 border red 500 rounded full w 16 h 16 animate spin"></div> </div> <header class="header"> <img src="URL_DU_LOGO" alt="Logo" class="logo"> <! Replace with your logo URL > <h1 class="text 4xl font bold text white">Education</h1> <nav class="mt 4"> <a href="#math" class="nav link">Mathématiques</a> <a href="#prog" class="nav link">Physique et Chimique</a> <a href="#sciences" class="nav link">S.V.T</a> </nav> </header> <main class="container mx auto py 6"> <div class="text center mb 8 fade in"> <h2 class="text 3xl font bold text red 500">Découvrez nos leçons interactives</h2> <p class="mt 2 text gray 300 section description">Plongez dans des cours pratiques et amusants!</p> </div> <! Sections for lessons > <section id="math" class="mb 12 fade in"> <h3 class="section title">Mathématiques</h3> <div class="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> <div class="card"> <h4 class="font semibold text lg">Les équations</h4> <p class="text sm">Introduction aux vecteurs, matrices et systèmes d'équations.</p> <div class="text xs text gray 400">45 minutes • PDF 2.4 MB</div> <a href="#" class="btn">Télécharger</a> </div> <div class="card"> <h4 class="font semibold text lg">Polynômes</h4> <p class="text sm">Comprendre les polynômes et leurs propriétés.</p> <div class="text xs text gray 400">50 minutes • PDF 3.1 MB</div> <a href="#" class="btn">Télécharger</a> </div> <div class="card"> <h4 class="font semibold text lg">Statistiques</h4> <p class="text sm">Introduction aux statistiques et à l'analyse de données.</p> <div class="text xs text gray 400">40 minutes • PDF 2.0 MB</div> <a href="#" class="btn">Télécharger</a> </div> </div> </section> <section id="prog" class="mb 12 fade in"> <h3 class="section title">Physique et Chimique</h3> <div class="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> <div class="card"> <h4 class="font semibold text lg">Introduction à la Physique</h4> <p class="text sm">Bases de la physique et concepts fondamentaux.</p> <div class="text xs text gray 400">60 minutes • PDF 3.2 MB</div> <a href="#" class="btn">Télécharger</a> </div> <div class="card"> <h4 class="font semibold text lg">Chimie Organique</h4> <p class="text sm">Principes de la chimie organique et réactions chimiques.</p> <div class="text xs text gray 400">55 minutes • PDF 3.5 MB</div> <a href="#" class="btn">Télécharger</a> </div> <div class="card"> <h4 class="font semibold text lg">Thermodynamique</h4> <p class="text sm">Introduction aux lois de la thermodynamique.</p> <div class="text xs text gray 400">65 minutes • PDF 4.0 MB</div> <a href="#" class="btn">Télécharger</a> </div> </div> </section> <section id="sciences" class="mb 12 fade in"> <h3 class="section title">S.V.T</h3> <div class="grid grid cols 1 md:grid cols 2 lg:grid cols 3 gap 6"> <div class="card"> <h4 class="font semibold text lg">Biologie Cellulaire</h4> <p class="text sm">Introduction à la biologie cellulaire et aux organismes vivants.</p> <div class="text xs text gray 400">50 minutes • PDF 2.8 MB</div> <a href="#" class="btn">Télécharger</a> </div> <div class="card"> <h4 class="font semibold text lg">Écologie</h4> <p class="text sm">Principes de l'écologie et interactions des écosystèmes.</p> <div class="text xs text gray 400">55 minutes • PDF 3.0 MB</div> <a href="#" class="btn">Télécharger</a> </div> <div class="card"> <h4 class="font semibold text lg">Génétique</h4> <p class="text sm">Introduction à la génétique et transmission des caractères.</p> <div class="text xs text gray 400">45 minutes • PDF 2.5 MB</div> <a href="#" class="btn">Télécharger</a> </div> </div> </section> <section id="contact" class="mb 12 fade in"> <h3 class="section title">Contactez nous</h3> <form action="#" method="POST" class="space y 4"> <div> <label for="name" class="block">Nom</label> <input type="text" name="name" id="name" placeholder="Votre nom" class="w full p 2 border border gray 700 rounded bg gray 800 text gray 300"> </div> <div> <label for="email" class="block">Email</label> <input type="email" name="email" id="email" placeholder="Votre email" class="w full p 2 border border gray 700 rounded bg gray 800 text gray 300"> </div> <div> <label for="message" class="block">Message</label> <textarea name="message" id="message" rows="4" placeholder="Votre message" class="w full p 2 border border gray 700 rounded bg gray 800 text gray 300"></textarea> </div> <button type="submit" class="btn">Envoyer</button> </form> </section> </main> <footer class="footer"> <p class="text xs">© 2023 Education. Tous droits réservés.</p> </footer> <script> window.addEventListener('load', function() { const loader = document.getElementById('loader'); loader.style.display = 'none'; }); </script> </body> </html>
