Selman Bouzlafa
Thème

Site web d’un lieu de loisirs fictif

Site HTML/CSS responsive et validé W3C pour un lieu de loisirs fictif, conçu de A à Z.

Année
BUT1, 2025
Type
SAÉ
Domaine
Web
Période
janvier – juin 2025
Stack
HTML, CSS
Page d’accueil du site Multiverse Quest sur fond noir à circuits bleus : bandeau d’en-tête bleu avec le logo et le nom du site, trois boutons de navigation « Nous Découvrir », « Activités » et « Contact », le titre rouge « Explorez l’univers du divertissement immersif », puis les sections « Notre concept », « Découvrir », « Soyez les premiers à réserver ! » et « Accessibilité et innovation », titres violets et paragraphes blancs centrés.
Accueil, premier écran, rendu du dépôt, hors ligne7 écransOuvrir la visite

En bref

Problème
Concevoir de A à Z le site d’un lieu de loisirs fictif, responsive et valide W3C.
Ce que j’ai réalisé
Une identité visuelle et un site HTML/CSS multilingue avec vidéos, formulaires et une image de plan prise sur Google Maps.
Résultat
Le code HTML et CSS passe la validation W3C ; la mise en page s’adapte au mobile.
Rôle
Conception et intégration, en binôme.
Équipe
2 personnes
Statut
Terminé

Le site, page par page

Captures d’un rendu local du dépôt, tel quel et hors ligne : le site d’un lieu de loisirs fictif, projet de première année. Les polices déclarées par le site sont absentes du dépôt, le navigateur a rendu ses polices de repli ; les pieds de page, nominatifs, sont hors cadre.

01 sur 04

Accueil, premier écran

Le premier écran de la page d’accueil à 1 920 px de large : bandeau d’en-tête, navigation à trois entrées, accroche, puis les sections « Notre concept », « Découvrir » et « Accessibilité et innovation ».

Accueil

  • Page d’accueil du site Multiverse Quest sur fond noir à circuits bleus : bandeau d’en-tête bleu avec le logo et le nom du site, trois boutons de navigation « Nous Découvrir », « Activités » et « Contact », le titre rouge « Explorez l’univers du divertissement immersif », puis les sections « Notre concept », « Découvrir », « Soyez les premiers à réserver ! » et « Accessibilité et innovation », titres violets et paragraphes blancs centrés., ouvrir la capture complète
    Accueil, premier écran Le premier écran de la page d’accueil à 1 920 px de large : bandeau d’en-tête, navigation à trois entrées, accroche, puis les sections « Notre concept », « Découvrir » et « Accessibilité et innovation ».
  • Page d’accueil en format téléphone : bandeau bleu avec le logo et « MULTIVERSE QUEST » sur deux lignes, trois boutons de navigation empilés, « Nous Découvrir », « Activités » et « Contact », le titre rouge « Explorez l’univers du divertissement immersif » sur quatre lignes, puis le début du paragraphe de présentation., ouvrir la capture complète
    Accueil, version mobile La même page à 390 px de large : le nom du site passe sur deux lignes, les trois liens de navigation s’empilent et l’accroche occupe toute la largeur.

Activités

  • Page des activités sur fond noir à circuits bleus : bandeau « LES ACTIVITÉS », navigation, grand titre rouge « Nos Activités disponibles », une section sur la réalité virtuelle avec un paragraphe et la photo d’une personne portant un casque, une section « Laser game » avec un paragraphe et la photo d’un joueur dans une arène éclairée en violet, puis le titre « Paintball »., ouvrir la capture complète
    Activités, premier écran Le premier écran de la page des activités : le titre « Nos Activités disponibles », puis une section par activité, titre violet, paragraphe et illustration, ici la réalité virtuelle et le laser game.
  • Page des activités entière, très haute : sous le bandeau et la navigation, sept sections d’activité avec titre violet, paragraphe et illustration centrée, puis le titre rouge « Les tarifs et Pass journée » et cinq pass, Infinity, Quantum, Voyageur, Dimensional Key et Portal, chacun avec son visuel et une ligne de description., ouvrir la capture complète
    Activités, page entière La page des activités de haut en bas : sept activités (réalité virtuelle, laser game, paintball, escape game, bowling, jeu d’arcade, casino), puis « Les tarifs et Pass journée », cinq pass illustrés, de l’Infinity Pass au Portal Pass.
  • Page des activités en format téléphone : bandeau bleu « LES ACTIVITÉS » avec le logo, trois boutons de navigation empilés, le titre rouge « Nos Activités disponibles » sur trois lignes, la dernière coupée par le bord droit, puis le titre violet de la section réalité virtuelle., ouvrir la capture complète
    Activités, version mobile La page des activités à 390 px : navigation empilée ; le titre « Nos Activités disponibles », à taille fixe, déborde du bord droit, tel que le site le rend.

Contact

  • Page de contact : bandeau « CONTACT », navigation, titre violet « Nous Contacter », consigne rouge « Merci de remplir le formulaire ci-dessous pour réserver votre pass ou nous poser vos questions. », puis un formulaire blanc avec les champs Nom, Prénom et Email, les listes « Choisir un Pass » et « Choisir un moyen de paiement », un champ de date et un bouton bleu « Envoyer »., ouvrir la capture complète
    Contact, le formulaire Le premier écran de la page de contact : un formulaire sur fond blanc pour réserver un pass ou poser une question, nom, prénom, e-mail, deux listes déroulantes (pass et moyen de paiement), une date de visite et un bouton « Envoyer ».
  • Page de contact entière : sous le formulaire, un encart gris clair titré « Contactez-nous et trouvez-nous facilement », une adresse à Cergy-le-Haut, la mention de la station « Cergy le Haut » (RER A), le logo Google Maps et un plan de quartier intégré., ouvrir la capture complète
    Contact, page entière La page de contact de haut en bas : le formulaire, puis l’encart « Contactez-nous et trouvez-nous facilement » avec l’adresse du lieu fictif, la station de RER la plus proche et un plan d’accès.

01 sur 01

Accueil, premier écran

Sommaire6 sections

Contexte

Il fallait inventer un lieu de loisirs et lui donner une présence web, de l’identité visuelle au site livré.

Démarche et décisions

Nous avons défini un nom, un logo, un slogan, une palette et des typographies, puis rédigé des textes adaptés à différents publics (visiteurs, partenaires, employés). Le site est en HTML et CSS, rendu responsive avec Flexbox et des media queries. J’y ai intégré des vidéos, des formulaires et, sur la page contact, une image de plan prise sur Google Maps.

Écran 03Accueil, version mobile
Grand écran : rangée Flexbox Mobile : empilé FR / EN vidéo planimage Google Maps formulaire pied de page @media point de rupture FR / EN vidéo planimage formulaire pied
Fig. 1 — Une même page à deux largeurs : rangées Flexbox sur grand écran, une seule colonne sur mobile, de part et d’autre du point de rupture fixé par une media query.

La figure 2 reproduit ce comportement sur une maquette dont la largeur se règle de 320 à 1 200 px.

Sans JavaScript, la maquette est rendue à la largeur de la colonne ; étirez son coin inférieur droit pour la rétrécir et voir les règles s’appliquer.

Fig. 2 — Maquette d’un lieu fictif, en HTML et CSS. Ses requêtes de conteneur (@container) jouent le rôle des media queries du site : une colonne sous 600 px, deux dès 600 px, trois dès 900 px.

Résultat

Le projet s’est conclu par une soutenance orale, préparée sans support de présentation.

Ce que j’ai appris

Deux techniques ont été travaillées sur ce site : la mise en page responsive, avec Flexbox et les media queries, et l’intégration de contenus externes. Rédiger ses textes pour des publics différents m’a exercé à l’argumentation écrite.

Écran 08Contact, page entière

Limites et suite

Les formulaires s’arrêtent côté client : aucun serveur ne traite leurs envois. Il leur manque un traitement back-end pour être fonctionnels.

Écran 07Contact, le formulaire

Compétences BUT mobilisées

Compétences du référentiel BUT Informatique démontrées dans ce projet : niveau, ce que le projet montre et preuve.
CompétenceNiveauCe que le projet montre, et preuve
RéaliserRéaliser un développement d’applicationNiveau 1Développer une interface web responsive.Preuve : Site HTML/CSS multilingue avec Flexbox et media queries, validé W3C.
CollaborerTravailler dans une équipe informatiqueNiveau 1Travailler en équipe et présenter un travail.Preuve : Répartition des tâches en binôme et soutenance orale sans support.

Projets liés