⭐ Projet Vedette

Street Life - Magazine Web Lifestyle

Site web lifestyle présentant du contenu sur la culture urbaine et la vie de rue. Magazine web avec navigation multi-pages (Accueil, Archives, Panorama, Contact, À propos), design responsive moderne et architecture CSS modulaire avec classes utilitaires. Design sophistiqué démontrant une maîtrise de la typographie élégante, espaces blancs stratégiques, et maquettes de formulaires. Projet purement HTML/CSS déployé sur GitHub Pages avec domaine personnalisé.

2026

HTML5CSS3DockerApacheResponsive DesignFlexboxCSS VariablesTypography SystemGitHub Pages

Code source

Métriques du Projet

Pages

Articles

12+

Images

Réseaux sociaux

Vue d'ensemble

Ce projet est un magazine web lifestyle sur la culture urbaine ('Street Life - The jungle groove') démontrant une approche éditoriale sophistiquée avec navigation multi-pages (Accueil, Archives, Panorama, À propos, Contact). Le design utilise HTML5 sémantique et CSS3 moderne avec classes utilitaires (Flexbox, variables CSS, typographie système). Architecture comprenant un header avec logo et navigation horizontale bleu, sections de contenu avec grilles d'articles (images, dates, titres, descriptions), et footer avec liens sociaux (Pinterest, Google, Facebook, Twitter, LinkedIn). Pages Archives, Panorama et À propos avec contenu démonstratif (Lorem ipsum). Formulaire Contact avec alert explicite '⚠️ Placeholder visuel'. Site déployé via Docker/Apache et hébergé sur GitHub Pages avec domaine personnalisé (html-avancer-1-devoir-exercice-2.clairtyx.com).

Fonctionnalités Clés

Design Lifestyle Moderne

Design 'Street Life - The jungle groove' avec header logo/titre centré et navigation bleue horizontale. Système typographique cohérent avec variables CSS (text-xs à text-5xl), font-weights variés (300-700) et line-heights optimisés. Palette de couleurs avec bleu principal (#0087cc), texte (#555), et dates (#929292). Layout éditorial avec grilles d'articles incluant images, dates, titres et descriptions.

Architecture CSS Modulaire

Header avec logo (80x80) et titre h1 centré, navigation bleue avec liens (Accueil, Archives, Panorama, Contact, À propos). Container responsive avec max-width adaptatif. Grilles d'articles Flexbox (flex-row, justify-between) avec cards incluant dates, titres h2, images et textes. Footer centré avec branding et 5 icônes réseaux sociaux (Pinterest, Google, Facebook, Twitter, LinkedIn).

Navigation Multi-Pages Cohérente

5 pages principales : Accueil (index.html) avec articles 'Jungle street lives' et 'Marquee Moon', Archives/Panorama/À propos avec contenus démonstratifs Lorem ipsum (Pellentesque, Mauris, Vivamus, etc.) et articles factices (Joe Cowards, Marquee Moon), Contact avec formulaire placeholder et alerte visuelle '⚠️ Placeholder visuel'. Navigation horizontale cohérente avec hover underline. Footer uniforme 'Street Life LTD Hambourg Germany' sur chaque page.

Système CSS Variables Cohérent

Variables CSS pour couleurs (--color-blue: #0087cc, --color-text: #555, --color-date: #929292, --color-menu, --color-link), typographie (--text-xs à --text-5xl avec line-heights), espacements (--spacing: .25rem), et weights (--font-weight-light: 300 à --font-weight-bold: 700). Classes utilitaires modernes (.text-center, .flex, .container, .hover:underline). Architecture modulaire style.css avec reset et composants.

Déploiement Docker & GitHub Pages

Infrastructure Docker avec docker-compose.yaml et configuration Apache (apache.conf). Site containerisé pour environnement de développement reproductible. Déploiement automatisé sur GitHub Pages depuis dossier /docs (copie de /site). Domaine personnalisé configuré (html-avancer-1-devoir-exercice-2.clairtyx.com) avec fichier CNAME. Images optimisées (/img) pour performance web.

Contenu Démonstratif & Placeholders

Pages Archives, Panorama et À propos contiennent du contenu Lorem ipsum démonstratif (Pellentesque vitae volutpat, Mauris pulvinar metus, Vivamus congue consectetur, etc.) avec articles factices répétés. Page Contact avec formulaire soigné (champs Nom, Email, Sujet, Message) et alert jaune explicite '⚠️ Placeholder visuel - Ce formulaire n'est pas fonctionnel'. Tous les champs et bouton désactivés (disabled, opacity-50, cursor-not-allowed) pour démonstration visuelle uniquement.

Défis Relevés

Créer une architecture multi-pages cohérente avec navigation contextuelle (5 pages)
Implémenter un design responsive avec Flexbox pour layouts complexes (header, grilles, footer)
Développer un système CSS modulaire avec variables et classes utilitaires réutilisables
Créer une hiérarchie typographique élégante avec système cohérent (xs à 5xl)
Concevoir un formulaire de contact visuellement attractif avec placeholder explicatif
Mettre en place le déploiement Docker/Apache et hébergement GitHub Pages avec domaine personnalisé
Assurer une expérience utilisateur fluide avec design moderne et espaces blancs stratégiques

Exemples de Code

HTML Structure

CSS Styles

Dockerfile

Apache Configuration

Intéressé par ce projet ?

Consultez le code source ou visitez le site en ligne pour voir le résultat final.

Code source