cinema-website

KO | EN

gitlite — search

#javascript #reactjs #tensorflow #nlp #awesome #editor #generative-ai #ios #ai-agent #monitoring

(★ 9)

No description available.

File Explorer

ZIP Download

- - foundation.css
  - main.css
  - pages.css
  - programme.css
  - reservation.css
  - responsive.css
  - site.css
.gitattributes
.nojekyll
contact.html
evenements.html
index.html
programme.html
README.md
reservation.html
robots.txt
sitemap.xml

# Use via CDN

jsDelivr

jsDelivr serves any public GitHub repository as a CDN with zero setup. Pick a version and a file to get a ready-to-paste link and snippet.

Version

File

Link

Example

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

Site vitrine multipage réalisé en HTML5 et CSS vanilla pour Culture Parc, un espace de cinéma, de loisirs et de divertissement présent à Brazzaville et Pointe-Noire.

![Aperçu du site Culture Parc](https://raw.githubusercontent.com/Osiris-Balonga/cinema-website/main/assets/images/previews/readme-preview.png)

## Démo

- GitHub Pages : https://osiris-balonga.github.io/cinema-website/
- Repository : https://github.com/Osiris-Balonga/cinema-website

## Objectif

Ce projet répond au livrable `Projet 6.1 - Site vitrine 3 pages` de la phase 2 HTML/CSS/Git. Il propose une expérience complète autour de la programmation Culture Parc, tout en respectant la contrainte d’une interface sans JavaScript.

Le projet comprend :

- une identité visuelle cohérente avec le logo Culture Parc ;
- une navigation partagée entre toutes les pages ;
- une page d’accueil éditoriale et responsive ;
- un programme de cinéma en vue calendrier ou tableau ;
- un parcours de réservation et de sélection des places ;
- un agenda pour les événements culturels et sportifs ;
- une page de contact avec formulaire et localisation des salles ;
- des modes clair et sombre pilotés uniquement en HTML et CSS.

## Pages

- `index.html` : accueil, films à l’affiche, réservation en quelques étapes, événements, salles et newsletter ;
- `programme.html` : programmation hebdomadaire, filtres et séances ;
- `reservation.html` : choix du film, des places et présentation du parcours de paiement ;
- `evenements.html` : concerts, rencontres, projections sportives et événements Culture Parc ;
- `contact.html` : formulaire, coordonnées, FAQ et cartes des salles Mfoa et Ndjindji.

## Fonctionnalités

- mise en page mobile first ;
- navigation desktop et barre de navigation mobile ;
- thème clair/sombre sans JavaScript ;
- composants interactifs basés sur CSS et les API HTML natives ;
- cartes et rails horizontaux responsive ;
- sélection de places via contrôles de formulaire ;
- fenêtres de recherche, compte et détails de film ;
- images locales optimisées en WebP avec `srcset` ;
- formulaires accessibles avec labels associés ;
- gestion de `prefers-reduced-motion` ;
- sitemap et directives pour les moteurs de recherche.

## Technologies

- HTML5 sémantique
- CSS3
- Flexbox et CSS Grid
- Variables CSS et design tokens
- Google Fonts : Fredoka et Source Sans 3
- Hugeicons
- Images responsive avec `picture` et `srcset`
- Git et GitHub Pages

## Aperçu local

Ouvrir directement `index.html` dans un navigateur, ou lancer un serveur statique depuis le dossier du projet :

```bash
cd projects/cinema-website
python -m http.server 8000
```

Puis ouvrir `http://127.0.0.1:8000`.

## Structure

```text
cinema-website/
  assets/
    css/
      foundation.css
      main.css
      pages.css
      programme.css
      reservation.css
      responsive.css
      site.css
    images/
      booking/
      brand/
        favicon/
        logos/
        source/
      events/
      hero/
        home/
        programme/
      movies/
        banners/
        posters/
        titles/
      previews/
  contact.html
  evenements.html
  index.html
  programme.html
  reservation.html
  robots.txt
  sitemap.xml
  README.md
```

## Responsive et accessibilité

L’interface s’adapte aux téléphones, tablettes, ordinateurs portables et écrans larges. Les points de rupture couvrent notamment les largeurs inférieures à 420 px ainsi que les mises en page à partir de 720 px et 1100 px.

Les images possèdent un texte alternatif, les champs sont associés à des labels et les états de focus restent visibles au clavier.

## Crédits

- visuels de films utilisés à des fins pédagogiques ;
- cérémonie de remise des diplômes : Faustin Tuyambaze, domaine public CC0, via Wikimedia Commons ;
- public dans un stade de football : Pexels, licence Pixabay ;
- stade de nuit : Alexormes, domaine public, via Wikimedia Commons ;
- photographie de salle de cinéma : Felix Mooneeram, via Unsplash.

## Auteur

Osiris Balonga - [GitHub](https://github.com/Osiris-Balonga)

cinema-website

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

cinema-website

Owner Repos

File Explorer

# Use via CDN

Was this content helpful?

Recent Feedback

Download README