Mise à jour version anglaise

README.md

@@ -16,17 +16,18 @@
 ## VERSION FRANÇAISE
 
 ## Sommaire
-- <a href="#description-du-projet">Description du projet</a>
-- <a href="#technologies">Technologies</a>
-- <a href="#compétences-évaluées">Compétences évaluées</a>
-- <a href="#scénario-fictif">Scénario fictif</a>
-- <a href="#objectifs">Objectifs</a>
-- <a href="#maquettes">Maquettes</a>
-- <a href="#contraintes-techniques">Contraintes Techniques</a>
-- <a href="#fonctionnalités">Fonctionnalités</a>
-- <a href="#effets-graphiques-et-animations">Effets Graphiques et Animations</a>
-- <a href="#outils-utilisés">Outils utilisés</a>
-- <a href="#auteur">Auteur</a>
+
+- [Description du projet](#description-du-projet)
+- [Technologies](#technologies)
+- [Compétences évaluées](##compétences-évaluées)
+- [Scénario fictif](#scénario-fictif)
+- [Objectifs](#objectifs)
+- [Maquettes](#maquettes)
+- [Contraintes Techniques](#contraintes-techniques)
+- [Fonctionnalités](#fonctionnalités)
+- [Effets Graphiques et Animations](#effets-graphiques-et-animations)
+- [Outils utilisés](#outils-utilisés)
+- [Auteur](#auteur)
 
 ## Description du Projet
 
@@ -73,16 +74,16 @@ En plus des systèmes classiques de réservation, les clients pourront composer
     <div>
     <strong>Maquettes des 4 Pages Menu</strong>
     <p align="center">
-      <img src="/images/maquettes/a_la_française.png" alt="Maquette page A la Française">
+      <img src="/images/maquettes/a_la_française.png" alt="A la Française">
     </p>
     <p align="center">
-      <img src="/images/maquettes/la_note_enchantée.png" alt="Maquette page La Note Enchantée">
+      <img src="/images/maquettes/la_note_enchantée.png" alt="La Note Enchantée">
     </p>
     <p align="center">
-      <img src="/images/maquettes/la_palette_du_goût.png" alt="Maquette page La Palette du Goût">
+      <img src="/images/maquettes/la_palette_du_goût.png" alt="La Palette du Goût">
     </p>
     <p align="center">
-      <img src="/images/maquettes/le délice_des_sens.png" alt="Maquette page Le Délice des Sens">
+      <img src="/images/maquettes/le délice_des_sens.png" alt="Le Délice des Sens">
     </p>
     </div>
 </div>
@@ -147,5 +148,141 @@ En plus des systèmes classiques de réservation, les clients pourront composer
 - [**Portfolio**](https://portfolio-test.com)
 
 
+---
+
+## ENGLISH VERSION
+
+## Create An Engaging Website With CSS Animations
+
+*Project #3 : Web Developer Training [OpenClassrooms](https://openclassrooms.com/fr/paths/717-developpeur-web)*
+
+
+## Table of Contents
+- [Description](#project-description)
+- [Technologies](#technologies)
+- [Assessed Skills](#assessed-skills)
+- [Fictional Scenario](#fictional-scenario)
+- [Objectives](#objectives)
+- [Mockups](#mockups)
+- [Technical Constraints](#technical-constraints)
+- [Features](#features)
+- [Graphic Effects and Animations](#graphic-effects-and-animations)
+- [Tools Used](#tools-used)
+- [Author](#author)
+
+## Project Description
+
+The objective of this project is to develop a 100% mobile website that lists menus from gourmet restaurants for Ohmyfood! – an online meal ordering company. Based on the provided [mockups](#mockups), my mission was to create a dynamic mobile site using HTML and CSS while integrating graphic effects and animations.
+
+## Technologies:
+
+- HTML5
+- SASS
+- GIT
+
+## Assessed Skills
+
+- Implement advanced CSS graphic effects.
+- Ensure the graphic consistency of a website.
+- Set up the Front-End environment.
+- Establish a navigation structure for a website.
+- Use a version control system for project tracking and hosting.
+
+## Fictional Scenario
+
+I have just been recruited at Ohmyfood! as a junior developer.
+
+The site's concept allows users to create their own menu and reduce waiting time in restaurants, as their menu is prepared in advance. No more time wasted browsing the menu!
+
+In addition to conventional reservation systems, customers can compose their meal menu so that the dishes are ready upon arrival.
+
+## Objectives
+
+- Develop a site offering the menu of 4 major Parisian restaurants.
+- Enable online reservation and menu composition.
+
+## Mockups
+
+<div style="display: flex; justify-content: space-between;">
+  <div>
+    <strong>Homepage Mockup</strong>
+    <p align="center">
+      <img src="/images/maquettes/accueil.png" alt="Homepage Mockup">
+    </p>
+    </div>
+    <div>
+    <strong>Mockups of the 4 Menu Pages</strong>
+    <p align="center">
+      <img src="/images/maquettes/a_la_française.png" alt="A la Française">
+    </p>
+    <p align="center">
+      <img src="/images/maquettes/la_note_enchantée.png" alt="La Note Enchantée">
+    </p>
+    <p align="center">
+      <img src="/images/maquettes/la_palette_du_goût.png" alt="La Palette du Goût">
+    </p>
+    <p align="center">
+      <img src="/images/maquettes/le délice_des_sens.png" alt="Le Délice des Sens">
+    </p>
+    </div>
+</div>
+
+### Technical Constraints
+
+- Mobile-first approach.
+- Responsive design.
+- Breakpoints: 480px, 768px, 1280px.
+- Code versioned on Github and the site accessible on Github Pages.
+- Recommended usage of SASS.
+- No JavaScript.
+- No framework.
+- Graphic identity:
+  - Colors: Primary ![#9356DC](https://dummyimage.com/15/9356dc/000000.png&text=+) `#9356DC` - Secondary ![#FF79DA](https://dummyimage.com/15/FF79da/000000.png&text=+) `#FF79DA` - Tertiary ![#99E2D0](https://dummyimage.com/15/99e2d0/000000.png&text=+) `#99E2D0`
+  - Fonts: Logo and titles: Shrikhand - Text: Roboto
+- Compatible with the latest desktop versions of Chrome and Firefox.
+
+## Features 
+
+- **Homepage:**
+  - Display of restaurant locations. Eventually, it will be possible to choose a location to find restaurants near a specific place.
+  - A short presentation of the company.
+  - A section containing the 4 menus in card form. Clicking on the card redirects the user to the menu page.
+
+- **Header:**
+  - Present on all pages.
+  - On the homepage, it contains the logo.
+  - On the menu pages, it contains a back button to the homepage.
+
+- **Footer:**
+  - The footer is identical on all pages.
+  - Clicking on "Contact" redirects to an email address.
+
+## Graphic Effects and Animations
+
+- **Homepage:**
+  - Integration of a "loader spinner" that should appear for 1 to 3 seconds covering the entire screen.
+
+- **Buttons:**
+  - On hover, the background color of the main buttons should slightly lighten.
+  - A heart-shaped "Like" button. Clicking should gradually fill it. The effect appears on hover on desktop instead of click.
+
+- **Menu Pages:**
+  - Upon arrival on the page, menus should appear progressively with a slight time lag.
+  - To select a dish: Clicking on a dish should reveal a small sliding checkmark to the right of the dish. The effect can appear on hover on desktop instead of click. If the dish title is too long, it should be truncated with ellipses.
+
+## Tools Used
+-   [Visual Studio Code](https://code.visualstudio.com/) 
+-   [Sass](https://sass-lang.com/)
+-   [Google Font](https://fonts.google.com/)
+-   [Font Awesome](https://fontawesome.com/) 
+-   [GitHub](https://github.com/) 
+-   [GitHub Pages](https://pages.github.com/)
+-   [W3C Validator](https://validator.w3.org/) 
+
+## Author
+- [@hileene](https://www.github.com/Hileene) 
+- [**Portfolio**](https://portfolio-test.com)
+
+