https://github.com/aperbet56/run_project

https://github.com/aperbet56/run_project

css3 flexbox grid html5 if-else javascript observer-api prefers-color-scheme pseudo-elements regex responsive responsive-design transition-animation

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/aperbet56/run_project
• Owner: aperbet56
• Created: 2025-05-08T16:06:24.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2025-10-12T16:48:31.000Z (7 months ago)
• Last Synced: 2025-10-24T01:47:10.365Z (6 months ago)
• Topics: css3, flexbox, grid, html5, if-else, javascript, observer-api, prefers-color-scheme, pseudo-elements, regex, responsive, responsive-design, transition-animation
• Language: CSS
• Homepage: https://aperbet56.github.io/run_project/
• Size: 14.8 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
## PROJET RUN

MODE CLAIR :

![Design preview for the run project](./img/preview.png)

MODE NUIT :

![Design preview for the run project](./img/preview_dark_mode.png)

## Le challenge

Création du projet Run en HTML5, CSS et JavaScript avec la mise en place d'un mode light et dark (@media(prefers-colors-scheme)), une apparition des sections du site en fonction du scroll sur la page et la validation du formulaire (mise enplace de regex...)

## Démonstration

Lien vers le projet : https://aperbet56.github.io/run_project/

## Projet développé avec

- Utilisation des balises sémantiques HTML5

- CSS3

- Flexbox

- Grid

- Animation css (transition)

- Page web responsive

- Desktop first

- Utilisation d'un normaliseur : le fichier normalize.css

- Importation de la police "Source Sans Pro"

- Commentaires HTML

- Commentaires CSS

- Mise en place d'un mode light et dark via @media (prefers-color-scheme)

- JavaScript

- Code JavaScript commenté

- Condition if...else