Réagencement des versions anglaise et française

Hileene · Jan 12, 2024 · 69be3d6 · 69be3d6
1 parent bdc1421
commit 69be3d6
Showing 1 changed file with 136 additions and 131 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,153 @@
-# Dynamisez un site Web avec des animations CSS
+# Create An Engaging Website With CSS Animations
 
 <p align="center">
   <img src="/images/logo/Banner-Ohmyfood.png" alt="Ohmyfood Logo">
 </p>
 
-*Projet #3 : Formation Développeur Web [OpenClassrooms](https://openclassrooms.com/fr/paths/717-developpeur-web)*
+*Project #3 : Web Developer Training [OpenClassrooms](https://openclassrooms.com/fr/paths/717-developpeur-web)*
 
 
 [![forthebadge](https://forthebadge.com/images/badges/validated-html5.svg)](https://validator.w3.org/nu/?doc=https%3A%2F%2Fhileene.github.io%2FBehalalAline_3_15102022%2F) <a href="https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fhileene.github.io%2FBehalalAline_3_15102022%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=en"><img src="/images/uses-sass.svg" alt="For the Badge SASS image" /></a> [![forthebadge](https://forthebadge.com/images/badges/uses-git.svg)](https://forthebadge.com) <img src="/images/powered-by-candy.svg" alt="For The Badge Candy image" />
 
-[Ohmyfood](https://hileene.github.io/BehalalAline_3_15102022/) - <a href="#version-française">README FR</a> - <a href="#english-version">README EN</a>
+[Ohmyfood](https://hileene.github.io/BehalalAline_3_15102022/) - <a href="#version-française">README FR</a> 
+
+---
+
+## Table of Contents
+- [Project Description](#project-description)
+- [Technologies](#technologies)
+- [Assessed Skills](#assessed-skills)
+- [Fictional Scenario](#fictional-scenario)
+- [Objectives](#objectives)
+- [Mockups](#mockups)
+- [Technical Requirements](#technical-requirements)
+- [Functional Requirements](#functional-requirements)
+- [Graphic Effects and Animations](#graphic-effects-and-animations)
+- [Built with](#built-with)
+- [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 Requirements
 
+- 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.
+
+## Functional Requirements
+
+- **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.
+
+## Built with
+-   [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)
 
 ---
+
 ## VERSION FRANÇAISE
 
+## Dynamisez un site Web avec des animations CSS
+
+*Projet #3 : Formation Développeur Web [OpenClassrooms](https://openclassrooms.com/fr/paths/717-developpeur-web)*
+
+
 ## Sommaire
 
 - [Description du Projet](#description-du-projet)
@@ -148,140 +281,12 @@ 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
-- [Project Description](#project-description)
-- [Technologies](#technologies)
-- [Assessed Skills](#assessed-skills)
-- [Fictional Scenario](#fictional-scenario)
-- [Objectives](#objectives)
-- [Mockups](#mockups)
-- [Technical Requirements](#technical-requirements)
-- [Functional Requirements](#functional-requirements)
-- [Graphic Effects and Animations](#graphic-effects-and-animations)
-- [Built with](#built-with)
-- [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 Requirements
-
-- 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.
 
-## Functional Requirements
 
-- **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.
 
-## Built with
--   [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)