« Génère le code complet (HTML5/CSS3) pour le site ‘SFN TECH’ en version Ultra-Responsive (Mobile First).
Navigation & Architecture (Desktop + Mobile) :
▪ Header : Barre fixe avec effet Glassmorphism.
▪ Menu de Navigation : Implémente des menus déroulants (dropdowns) au survol :
▫ Actualités : sans Sous-catégories
▫ Cloud M365 : Sous-catégories : Azure AD (Entra ID), Teams, SharePoint, Exchange Online.
▫ Système : Sous-catégories : Active Directory, Windows Server, Windows Client, Scripting
▪ Version Mobile : Remplace la navigation par un Menu Hamburger (icône ☰) fonctionnel qui ouvre un menu latéral ou plein écran.
Design & Composants :
▪ Recherche : Un champ de recherche compact, adaptatif sur mobile.
▪ Hero Section : Texte centré, ajustant sa taille sur smartphone pour ne pas déborder.
▪ Grille d’articles : Utilise grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) pour que les cartes passent de 3 colonnes (PC) à 1 colonne (Mobile) automatiquement.
▪ Couleurs : Fond #0b0e14, accents Bleu Microsoft #0078D4. Style ‘Tech-Enterprise’.
Footer & Réseaux :
▪ Section ‘FOLLOW US’ avec icônes (LinkedIn, X, GitHub, YouTube).
▪ Liens ‘À Propos’ et ‘Contact’ bien espacés pour être cliquables au doigt sur mobile.
Contraintes Techniques :
▪ Utilise des Media Queries CSS pour le responsive.
▪ Inclure un petit script JavaScript simple pour l’ouverture/fermeture du menu mobile.
▪ Tout le code doit être dans un seul bloc HTML/CSS/JS. »