Arthur junior EFFA shared you an appPour un site web avec plusieurs pages, une navbar fonctionnelle, une sidebar rétractable, et une page principale affichant des articles sous forme de petits carrés, voici un prompt détaillé pour la création du site : --- **Prompt pour la Création d'un Site Web avec Navigation Multi-pages et Sidebar Rétractable :** --- ### 1. **Structure du Site :** #### **En-tête (Header) :** - **Navbar (Barre de Navigation) :** - **Disposition** : - **Logo / Nom du Site** : Aligné à gauche dans la navbar. - **Menu de Navigation** : Liens vers les différentes pages du site : Accueil, Dernières Avancées en IA, À Propos, Contact. - **Menu Déroulant** : Bouton ou icône (menu hamburger avec trois lignes horizontales) pour ouvrir la sidebar sur les petits écrans. - **Style** : - **Fond** : Bleu ciel (#87CEEB) - **Texte** : Blanc (#FFFFFF) - **Liens** : Polices modernes (Lato, Roboto), taille moyenne. Effet de survol (changement de couleur ou soulignement). - **Exemple de Disposition** : ```html <header> <nav> <div class="logo">Nom du Site</div> <ul class="nav-links"> <li><a href="index.html">Accueil</a></li> <li><a href="avances.html">Dernières Avancées en IA</a></li> <li><a href="apropos.html">À Propos</a></li> <li><a href="contact.html">Contact</a></li> </ul> <button class="sidebar-toggle">☰</button> </nav> </header> ``` #### **Contenu Principal (Main) :** - **Sidebar (Barre Latérale)** : - **Disposition** : - **Position** : Sur le côté gauche de la page. Peut être rétractable pour les petits écrans. - **Menu de Navigation** : Liens rapides vers les sections du site, incluant des sous-menus si nécessaire. - **Recherche** : Champ de recherche en haut de la sidebar. - **Options** : Filtres pour trier les articles ou actualités. - **Style** : - **Fond** : Vert citron (#D4E157) - **Texte** : Blanc (#FFFFFF) - **Liens** : Polices modernes, taille moyenne. Icônes pour options si possible. - **Exemple de Disposition** : ```html <aside class="sidebar"> <div class="search-bar"> <input type="text" placeholder="Recherche..."> </div> <ul class="sidebar-links"> <li><a href="index.html">Accueil</a></li> <li><a href="avances.html">Dernières Avancées en IA</a></li> <li><a href="recherche.html">Recherche</a></li> <li><a href="articles.html">Articles</a></li> </ul> <div class="filters"> <h3>Filtres</h3> <label><input type="checkbox"> Par date</label> <label><input type="checkbox"> Par popularité</label> </div> </aside> ``` - **Page Principale (Accueil)** : - **Disposition** : - **Section des Articles** : Affichage de 10 articles sous forme de petits carrés ou cartes. - **Chaque carré** contient : une image miniature, un titre, un court extrait, et un lien vers l'article complet. - **Style** : - **Carrés/Cartes** : Utilisez une disposition en grille pour les articles, avec une taille uniforme pour chaque carte. - **Fond de Carte** : Blanc (#FFFFFF) avec une ombre légère pour donner de la profondeur. - **Texte** : Titre en bleu ciel (#87CEEB) et extrait en gris foncé pour un contraste agréable. - **Exemple de Disposition** : ```html <main> <section class="articles-grid"> <div class="article-card"> <img src="image1.jpg" alt="Article 1"> <h3><a href="article1.html">Titre de l'Article 1</a></h3> <p>Extrait de l'article...</p> </div> <!-- Répétez pour les 10 articles --> </section> </main> ``` #### **Pied de page (Footer) :** - **Disposition** : - Informations de contact, liens vers les réseaux sociaux, formulaire d'inscription à la newsletter, message de copyright. - Liens vers les mentions légales et conditions d'utilisation. - **Style** : - **Fond** : Bleu ciel (#87CEEB) ou blanc (#FFFFFF) avec texte en gris foncé ou bleu ciel. - **Formulaire** : Simple et bien aligné. - **Exemple de Disposition** : ```html <footer> <div class="footer-content"> <div class="contact-info"> <p>Email : contact@monsite.com</p> <p>Téléphone : 123-456-7890</p> </div> <div class="social-links"> <a href="#">Facebook</a> <a href="#">Twitter</a> <a href="#">LinkedIn</a> </div> <div class="newsletter-signup"> <h3>Inscrivez-vous à notre Newsletter</h3> <form> <input type="email" placeholder="Votre email"> <button type="submit">S'abonner</button> </form> </div> <div class="legal-links"> <a href="mentions-legales.html">Mentions Légales</a> <a href="conditions-utilisation.html">Conditions d'utilisation</a> </div> </div> <p>© 2024 Nom du Site. Tous droits réservés.</p> </footer> ``` ### 2. **Style et Visuel :** - **Navbar** : - **Hauteur** : Environ 60px à 80px. - **Espacement** : Liens espacés uniformément. - **Effets de Survol** : Changement de couleur ou soulignement. - **Sidebar** : - **Largeur** : Environ 250px à 300px. - **Rétractable** : Fonctionnalité de rétraction pour petits écrans. - **Bordures** : Légères ombres pour séparer les sections. - **Page d'Accueil** : - **Disposition des Carrés/Cartes** : Utilisez un système de grille (par exemple, 2 colonnes ou 3 colonnes) pour une présentation claire des articles. - **Style des Cartes** : Inclure des images, titres et extraits avec une mise en forme soignée. ### 3. **Fonctionnalités JavaScript :** - **Navbar** : - **Menu Déroulant** : Script pour gérer l’ouverture/fermeture de la sidebar. - **Effets de Transition** : Pour le menu et les effets de survol des liens. - **Sidebar** : - **Rétractable** : Script pour rendre la sidebar rétractable ou la faire apparaître en basculant un bouton. - **Recherche et Filtrage** : Script pour gérer les fonctionnalités de recherche et de filtrage dynamiques. - **Page d’Accueil** : - **Animation des Cartes** : Ajoutez des animations légères pour les cartes lorsqu’elles sont survolées ou chargées. --- Ce prompt détaillé vous aidera à créer un site web avec une navigation claire, une sidebar fonctionnelle et une page d'accueil visuellement attrayante. Vous pouvez adapter les détails en fonction des spécificités de votre projet.
