diff --git "a/BUT 1_SA\303\251 1.05_1.06_SA_G6.pdf" "b/BUT 1_SA\303\251 1.05_1.06_SA_G6.pdf"
new file mode 100644
index 0000000000000000000000000000000000000000..3ef6385a74e5d162214ce6c30d7ec0b501bdf2ea
Binary files /dev/null and "b/BUT 1_SA\303\251 1.05_1.06_SA_G6.pdf" differ
diff --git a/Maquette.pdf b/Maquette.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..39f63979c9b146f7378bad737ce901038f65ea98
Binary files /dev/null and b/Maquette.pdf differ
diff --git a/README.md b/README.md
index 465d75ce1a1c9279217baa20d3eec9c7529711bd..28222662802891b2f7e8dedec899c5c4a6a81911 100644
--- a/README.md
+++ b/README.md
@@ -1,93 +1 @@
-# SAÉ 1.05 1.06 RDB-EE-SITE
-
-
-
-## Getting started
-
-To make it easy for you to get started with GitLab, here's a list of recommended next steps.
-
-Already a pro? Just edit this README.md and make it your own. Want to make it easy? [Use the template at the bottom](#editing-this-readme)!
-
-## Add your files
-
-- [ ] [Create](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#create-a-file) or [upload](https://docs.gitlab.com/ee/user/project/repository/web_editor.html#upload-a-file) files
-- [ ] [Add files using the command line](https://docs.gitlab.com/ee/gitlab-basics/add-file.html#add-a-file-using-the-command-line) or push an existing Git repository with the following command:
-
-```
-cd existing_repo
-git remote add origin https://gitlab.univ-lille.fr/alexandre.dehaine.etu/sae-1.05-1.06-rdb-ee-site.git
-git branch -M main
-git push -uf origin main
-```
-
-## Integrate with your tools
-
-- [ ] [Set up project integrations](https://gitlab.univ-lille.fr/alexandre.dehaine.etu/sae-1.05-1.06-rdb-ee-site/-/settings/integrations)
-
-## Collaborate with your team
-
-- [ ] [Invite team members and collaborators](https://docs.gitlab.com/ee/user/project/members/)
-- [ ] [Create a new merge request](https://docs.gitlab.com/ee/user/project/merge_requests/creating_merge_requests.html)
-- [ ] [Automatically close issues from merge requests](https://docs.gitlab.com/ee/user/project/issues/managing_issues.html#closing-issues-automatically)
-- [ ] [Enable merge request approvals](https://docs.gitlab.com/ee/user/project/merge_requests/approvals/)
-- [ ] [Set auto-merge](https://docs.gitlab.com/ee/user/project/merge_requests/merge_when_pipeline_succeeds.html)
-
-## Test and Deploy
-
-Use the built-in continuous integration in GitLab.
-
-- [ ] [Get started with GitLab CI/CD](https://docs.gitlab.com/ee/ci/quick_start/index.html)
-- [ ] [Analyze your code for known vulnerabilities with Static Application Security Testing (SAST)](https://docs.gitlab.com/ee/user/application_security/sast/)
-- [ ] [Deploy to Kubernetes, Amazon EC2, or Amazon ECS using Auto Deploy](https://docs.gitlab.com/ee/topics/autodevops/requirements.html)
-- [ ] [Use pull-based deployments for improved Kubernetes management](https://docs.gitlab.com/ee/user/clusters/agent/)
-- [ ] [Set up protected environments](https://docs.gitlab.com/ee/ci/environments/protected_environments.html)
-
-***
-
-# Editing this README
-
-When you're ready to make this README your own, just edit this file and use the handy template below (or feel free to structure it however you want - this is just a starting point!). Thanks to [makeareadme.com](https://www.makeareadme.com/) for this template.
-
-## Suggestions for a good README
-
-Every project is different, so consider which of these sections apply to yours. The sections used in the template are suggestions for most open source projects. Also keep in mind that while a README can be too long and detailed, too long is better than too short. If you think your README is too long, consider utilizing another form of documentation rather than cutting out information.
-
-## Name
-Choose a self-explaining name for your project.
-
-## Description
-Let people know what your project can do specifically. Provide context and add a link to any reference visitors might be unfamiliar with. A list of Features or a Background subsection can also be added here. If there are alternatives to your project, this is a good place to list differentiating factors.
-
-## Badges
-On some READMEs, you may see small images that convey metadata, such as whether or not all the tests are passing for the project. You can use Shields to add some to your README. Many services also have instructions for adding a badge.
-
-## Visuals
-Depending on what you are making, it can be a good idea to include screenshots or even a video (you'll frequently see GIFs rather than actual videos). Tools like ttygif can help, but check out Asciinema for a more sophisticated method.
-
-## Installation
-Within a particular ecosystem, there may be a common way of installing things, such as using Yarn, NuGet, or Homebrew. However, consider the possibility that whoever is reading your README is a novice and would like more guidance. Listing specific steps helps remove ambiguity and gets people to using your project as quickly as possible. If it only runs in a specific context like a particular programming language version or operating system or has dependencies that have to be installed manually, also add a Requirements subsection.
-
-## Usage
-Use examples liberally, and show the expected output if you can. It's helpful to have inline the smallest example of usage that you can demonstrate, while providing links to more sophisticated examples if they are too long to reasonably include in the README.
-
-## Support
-Tell people where they can go to for help. It can be any combination of an issue tracker, a chat room, an email address, etc.
-
-## Roadmap
-If you have ideas for releases in the future, it is a good idea to list them in the README.
-
-## Contributing
-State if you are open to contributions and what your requirements are for accepting them.
-
-For people who want to make changes to your project, it's helpful to have some documentation on how to get started. Perhaps there is a script that they should run or some environment variables that they need to set. Make these steps explicit. These instructions could also be useful to your future self.
-
-You can also document commands to lint the code or run tests. These steps help to ensure high code quality and reduce the likelihood that the changes inadvertently break something. Having instructions for running tests is especially helpful if it requires external setup, such as starting a Selenium server for testing in a browser.
-
-## Authors and acknowledgment
-Show your appreciation to those who have contributed to the project.
-
-## License
-For open source projects, say how it is licensed.
-
-## Project status
-If you have run out of energy or time for your project, put a note at the top of the README saying that development has slowed down or stopped completely. Someone may choose to fork your project or volunteer to step in as a maintainer or owner, allowing your project to keep going. You can also make an explicit request for maintainers.
+Ce projet a été réalisé dans le cadre de la SAE S1.05-06.
diff --git a/conditions.html b/conditions.html
new file mode 100644
index 0000000000000000000000000000000000000000..7f8c05f6f9b756da6d098d10dc1713fa60db89b1
--- /dev/null
+++ b/conditions.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <title>Conditions d'utilisaton</title>
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/conditions.css">
+ <link rel="stylesheet" href="css/common.css">
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+ <div class="main container">
+ <h1>Règlement et consignes d'utilisation</h1>
+ <ol>
+ <li>
+ <h4>Covoiturage</h4>
+
+ <ul>
+ <li>Frais kilométrique divisé à parts égales, les personnes à qui le véhicule n'appartient pas doivent <br> payer 10% en plus pour les frais d'entretien</li>
+ <li>Tout comportement irrespectueux mènera à un bannissement de notre service</li>
+
+ </ul>
+ </li>
+ <br>
+ <li>
+ <h4>Location</h4>
+ <ul>
+ <li>Lorsque vous effectuez une location, vous <strong>NE POUVEZ PAS</strong> prêter le véhicule.</li>
+ <li>Les véhicules sont donnés avec le plein, ils doivent donc être rendus avec le plein.</li>
+ <li>Les véhicules ne peuvent pas circuler en dehors du Nord, sauf si vous avez l'accord de l'entreprise (réunion, séminaire, ...)</li>
+ </ul>
+ </li>
+ </ol>
+ </div>
+</body>
+</html>
\ No newline at end of file
diff --git a/contact.html b/contact.html
new file mode 100644
index 0000000000000000000000000000000000000000..18f5709440754f6007458e06e3dd2202b0faf587
--- /dev/null
+++ b/contact.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="UTF-8" >
+ <title>Contact</title>
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" >
+ <link rel="stylesheet" href="./css/contact.css" >
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/common.css">
+ </head>
+
+ <body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main">
+ <form action="reusite.html" >
+ <fieldset class="info container">
+ <legend>Informations sur vous</legend>
+ <label>Genre:</label>
+ <input type="radio" name="genre" id="femme" required>
+ <label for="femme">Femme</label>
+ <input type="radio" name="genre" id="homme" required>
+ <label for="homme">Homme</label>
+ <input type="radio" name="genre" id="autre" required>
+ <label for="autre">Autre</label>
+
+ <br ><br >
+
+ <label for="nom">Nom :</label>
+ <input type="text" name="nom" id="nom" placeholder="Votre nom" required>
+ <br ><br >
+
+ <label for="prenom">Prénom :</label>
+ <input type="text" name="prenom" id="prenom" placeholder="Votre prénom" required>
+ <br ><br >
+
+ <label for="courriel">Courriel : </label>
+ <input type="email" name="courriel" id="courriel" placeholder="Votre adresse Mail" required>
+ </fieldset>
+
+ <fieldset class="demande container">
+ <legend>Votre demande</legend>
+ <label for="objet">Objet du message :</label>
+ <select id="objet" name="objet" required>
+ <option value="0" disabled selected hidden>- Séléctionner -</option>
+ <option value="sugg">Suggestions</option>
+ <option value="recl">Reclamations</option>
+ <option value="insc">Insciption</option>
+ <option value="prob">Problèmes techniques</option>
+ </select>
+ <br ><br >
+
+ <label for="description">Message :</label> <br >
+ <textarea rows="10" cols="50" name="description" id="description" placeholder="Detaillez votre problème" required></textarea>
+ <br ><br >
+
+ <label for="document">Document:</label>
+ <input type="file" id="document" name="document" >
+ <br ><br >
+
+ <input type="reset" >
+ <input type="submit" name="Envoyer" id="soumission" value="Envoyer" >
+ </fieldset>
+ </form>
+ </div class="main">
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+ </body>
+</html>
diff --git a/css/boook.css b/css/boook.css
new file mode 100644
index 0000000000000000000000000000000000000000..f6ffc7017109fe5310b71de5396d9281ef81771f
--- /dev/null
+++ b/css/boook.css
@@ -0,0 +1,696 @@
+
+
+
+
+
+
+
+
+ul {
+margin: 0;
+padding: 0;
+list-style: none;
+}
+
+a {
+color: #2c3e50;
+text-decoration: none;
+}
+
+.btn {
+display: inline-block;
+text-transform: uppercase;
+border: 2px solid #2c3e50;
+margin-top: 25px;
+font-size: 0.7em;
+font-weight: 700;
+padding: 0.1em 0.4em;
+text-align: center;
+-webkit-transition: color 0.3s, border-color 0.3s;
+-moz-transition: color 0.3s, border-color 0.3s;
+transition: color 0.3s, border-color 0.3s;
+}
+
+.btn:hover {
+border-color: #16a085;
+color: #16a085;
+}
+
+/* basic grid, only for this demo */
+
+.align {
+clear: both;
+margin: 90px auto 20px;
+width: 100%;
+max-width: 1170px;
+text-align: center;
+}
+
+.align > li {
+width: 500px;
+min-height: 300px;
+display: inline-block;
+margin: 30px 20px 30px 30px;
+padding: 0 0 0 60px;
+vertical-align: top;
+}
+
+/* ///////////////////////////////////////////////////
+
+HARDCOVER
+Table of Contents
+
+1. container
+2. background & color
+3. opening cover, back cover and pages
+4. position, transform y transition
+5. events
+6. Bonus
+- Cover design
+- Ribbon
+- Figcaption
+7. mini-reset
+
+/////////////////////////////////////////////////////*/
+
+/*
+1. container
+*/
+
+.book {
+position: relative;
+width: 160px;
+height: 220px;
+-webkit-perspective: 1000px;
+-moz-perspective: 1000px;
+perspective: 1000px;
+-webkit-transform-style: preserve-3d;
+-moz-transform-style: preserve-3d;
+transform-style: preserve-3d;
+font-family: 'Lato', 'Arial', sans-serif;
+font-weight: 400;
+line-height: 1.2;
+}
+
+/*
+2. background & color
+*/
+
+/* HARDCOVER FRONT */
+.hardcover_front li:first-child {
+background-color: #eee;
+-webkit-backface-visibility: hidden;
+-moz-backface-visibility: hidden;
+backface-visibility: hidden;
+}
+
+/* reverse */
+.hardcover_front li:last-child {
+background: #fffbec;
+}
+
+/* HARDCOVER BACK */
+.hardcover_back li:first-child {
+background: #fffbec;
+}
+
+/* reverse */
+.hardcover_back li:last-child {
+background: #fffbec;
+}
+
+.book_spine li:first-child {
+background: #eee;
+}
+.book_spine li:last-child {
+background: #333;
+}
+
+/* thickness of cover */
+
+.hardcover_front li:first-child:after,
+.hardcover_front li:first-child:before,
+.hardcover_front li:last-child:after,
+.hardcover_front li:last-child:before,
+.hardcover_back li:first-child:after,
+.hardcover_back li:first-child:before,
+.hardcover_back li:last-child:after,
+.hardcover_back li:last-child:before,
+.book_spine li:first-child:after,
+.book_spine li:first-child:before,
+.book_spine li:last-child:after,
+.book_spine li:last-child:before {
+background: #999;
+}
+
+/* page */
+
+.page > li {
+background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
+border-radius: 0px 5px 5px 0px;
+}
+
+/*
+3. opening cover, back cover and pages
+*/
+
+.hardcover_front {
+-webkit-transform: rotateY(-34deg) translateZ(8px);
+-moz-transform: rotateY(-34deg) translateZ(8px);
+transform: rotateY(-34deg) translateZ(8px);
+z-index: 100;
+}
+
+.hardcover_back {
+-webkit-transform: rotateY(-15deg) translateZ(-8px);
+-moz-transform: rotateY(-15deg) translateZ(-8px);
+transform: rotateY(-15deg) translateZ(-8px);
+}
+
+.page li:nth-child(1) {
+-webkit-transform: rotateY(-28deg);
+-moz-transform: rotateY(-28deg);
+transform: rotateY(-28deg);
+}
+
+.page li:nth-child(2) {
+-webkit-transform: rotateY(-30deg);
+-moz-transform: rotateY(-30deg);
+transform: rotateY(-30deg);
+}
+
+.page li:nth-child(3) {
+-webkit-transform: rotateY(-32deg);
+-moz-transform: rotateY(-32deg);
+transform: rotateY(-32deg);
+}
+
+.page li:nth-child(4) {
+-webkit-transform: rotateY(-34deg);
+-moz-transform: rotateY(-34deg);
+transform: rotateY(-34deg);
+}
+
+.page li:nth-child(5) {
+-webkit-transform: rotateY(-36deg);
+-moz-transform: rotateY(-36deg);
+transform: rotateY(-36deg);
+}
+
+/*
+4. position, transform & transition
+*/
+
+.hardcover_front,
+.hardcover_back,
+.book_spine,
+.hardcover_front li,
+.hardcover_back li,
+.book_spine li {
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+-webkit-transform-style: preserve-3d;
+-moz-transform-style: preserve-3d;
+transform-style: preserve-3d;
+}
+
+.hardcover_front,
+.hardcover_back {
+-webkit-transform-origin: 0% 100%;
+-moz-transform-origin: 0% 100%;
+transform-origin: 0% 100%;
+}
+
+.hardcover_front {
+-webkit-transition: all 0.8s ease, z-index 0.6s;
+-moz-transition: all 0.8s ease, z-index 0.6s;
+transition: all 0.8s ease, z-index 0.6s;
+}
+
+/* HARDCOVER front */
+.hardcover_front li:first-child {
+cursor: default;
+-webkit-user-select: none;
+-moz-user-select: none;
+user-select: none;
+-webkit-transform: translateZ(2px);
+-moz-transform: translateZ(2px);
+transform: translateZ(2px);
+}
+
+.hardcover_front li:last-child {
+-webkit-transform: rotateY(180deg) translateZ(2px);
+-moz-transform: rotateY(180deg) translateZ(2px);
+transform: rotateY(180deg) translateZ(2px);
+}
+
+/* HARDCOVER back */
+.hardcover_back li:first-child {
+-webkit-transform: translateZ(2px);
+-moz-transform: translateZ(2px);
+transform: translateZ(2px);
+}
+
+.hardcover_back li:last-child {
+-webkit-transform: translateZ(-2px);
+-moz-transform: translateZ(-2px);
+transform: translateZ(-2px);
+}
+
+/* thickness of cover */
+.hardcover_front li:first-child:after,
+.hardcover_front li:first-child:before,
+.hardcover_front li:last-child:after,
+.hardcover_front li:last-child:before,
+.hardcover_back li:first-child:after,
+.hardcover_back li:first-child:before,
+.hardcover_back li:last-child:after,
+.hardcover_back li:last-child:before,
+.book_spine li:first-child:after,
+.book_spine li:first-child:before,
+.book_spine li:last-child:after,
+.book_spine li:last-child:before {
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* HARDCOVER front */
+.hardcover_front li:first-child:after,
+.hardcover_front li:first-child:before {
+width: 4px;
+height: 100%;
+}
+
+.hardcover_front li:first-child:after {
+-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+}
+
+.hardcover_front li:first-child:before {
+-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+transform: rotateY(90deg) translateZ(158px) translateX(2px);
+}
+
+.hardcover_front li:last-child:after,
+.hardcover_front li:last-child:before {
+width: 4px;
+height: 160px;
+}
+
+.hardcover_front li:last-child:after {
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
+}
+.hardcover_front li:last-child:before {
+box-shadow: 0px 0px 30px 5px #333;
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
+}
+
+/* thickness of cover */
+
+.hardcover_back li:first-child:after,
+.hardcover_back li:first-child:before {
+width: 4px;
+height: 100%;
+}
+
+.hardcover_back li:first-child:after {
+-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+}
+.hardcover_back li:first-child:before {
+-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+transform: rotateY(90deg) translateZ(158px) translateX(2px);
+}
+
+.hardcover_back li:last-child:after,
+.hardcover_back li:last-child:before {
+width: 4px;
+height: 160px;
+}
+
+.hardcover_back li:last-child:after {
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
+}
+
+.hardcover_back li:last-child:before {
+box-shadow: 10px -1px 80px 20px #666;
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
+}
+
+/* BOOK SPINE */
+.book_spine {
+-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
+-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
+transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
+width: 16px;
+z-index: 0;
+}
+
+.book_spine li:first-child {
+-webkit-transform: translateZ(2px);
+-moz-transform: translateZ(2px);
+transform: translateZ(2px);
+}
+
+.book_spine li:last-child {
+-webkit-transform: translateZ(-2px);
+-moz-transform: translateZ(-2px);
+transform: translateZ(-2px);
+}
+
+/* thickness of book spine */
+.book_spine li:first-child:after,
+.book_spine li:first-child:before {
+width: 4px;
+height: 100%;
+}
+
+.book_spine li:first-child:after {
+-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+}
+
+.book_spine li:first-child:before {
+-webkit-transform: rotateY(-90deg) translateZ(-12px);
+-moz-transform: rotateY(-90deg) translateZ(-12px);
+transform: rotateY(-90deg) translateZ(-12px);
+}
+
+.book_spine li:last-child:after,
+.book_spine li:last-child:before {
+width: 4px;
+height: 16px;
+}
+
+.book_spine li:last-child:after {
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
+}
+
+.book_spine li:last-child:before {
+box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
+}
+
+.page,
+.page > li {
+position: absolute;
+top: 0;
+left: 0;
+-webkit-transform-style: preserve-3d;
+-moz-transform-style: preserve-3d;
+transform-style: preserve-3d;
+}
+
+.page {
+width: 100%;
+height: 98%;
+top: 1%;
+left: 3%;
+z-index: 10;
+}
+
+.page > li {
+width: 100%;
+height: 100%;
+-webkit-transform-origin: left center;
+-moz-transform-origin: left center;
+transform-origin: left center;
+-webkit-transition-property: transform;
+-moz-transition-property: transform;
+transition-property: transform;
+-webkit-transition-timing-function: ease;
+-moz-transition-timing-function: ease;
+transition-timing-function: ease;
+}
+
+.page > li:nth-child(1) {
+-webkit-transition-duration: 0.6s;
+-moz-transition-duration: 0.6s;
+transition-duration: 0.6s;
+}
+
+.page > li:nth-child(2) {
+-webkit-transition-duration: 0.6s;
+-moz-transition-duration: 0.6s;
+transition-duration: 0.6s;
+}
+
+.page > li:nth-child(3) {
+-webkit-transition-duration: 0.4s;
+-moz-transition-duration: 0.4s;
+transition-duration: 0.4s;
+}
+
+.page > li:nth-child(4) {
+-webkit-transition-duration: 0.5s;
+-moz-transition-duration: 0.5s;
+transition-duration: 0.5s;
+}
+
+.page > li:nth-child(5) {
+-webkit-transition-duration: 0.6s;
+-moz-transition-duration: 0.6s;
+transition-duration: 0.6s;
+}
+
+/*
+5. events
+*/
+
+.book:hover > .hardcover_front {
+-webkit-transform: rotateY(-145deg) translateZ(0);
+-moz-transform: rotateY(-145deg) translateZ(0);
+transform: rotateY(-145deg) translateZ(0);
+z-index: 0;
+}
+
+.book:hover > .page li:nth-child(1) {
+-webkit-transform: rotateY(-30deg);
+-moz-transform: rotateY(-30deg);
+transform: rotateY(-30deg);
+-webkit-transition-duration: 1.5s;
+-moz-transition-duration: 1.5s;
+transition-duration: 1.5s;
+}
+
+.book:hover > .page li:nth-child(2) {
+-webkit-transform: rotateY(-35deg);
+-moz-transform: rotateY(-35deg);
+transform: rotateY(-35deg);
+-webkit-transition-duration: 1.8s;
+-moz-transition-duration: 1.8s;
+transition-duration: 1.8s;
+}
+
+.book:hover > .page li:nth-child(3) {
+-webkit-transform: rotateY(-118deg);
+-moz-transform: rotateY(-118deg);
+transform: rotateY(-118deg);
+-webkit-transition-duration: 1.6s;
+-moz-transition-duration: 1.6s;
+transition-duration: 1.6s;
+}
+
+.book:hover > .page li:nth-child(4) {
+-webkit-transform: rotateY(-130deg);
+-moz-transform: rotateY(-130deg);
+transform: rotateY(-130deg);
+-webkit-transition-duration: 1.4s;
+-moz-transition-duration: 1.4s;
+transition-duration: 1.4s;
+}
+
+.book:hover > .page li:nth-child(5) {
+-webkit-transform: rotateY(-140deg);
+-moz-transform: rotateY(-140deg);
+transform: rotateY(-140deg);
+-webkit-transition-duration: 1.2s;
+-moz-transition-duration: 1.2s;
+transition-duration: 1.2s;
+}
+
+/*
+6. Bonus
+*/
+
+/* cover CSS */
+
+.coverDesign {
+position: absolute;
+top: 0;
+left: 0;
+bottom: 0;
+right: 0;
+overflow: hidden;
+-webkit-backface-visibility: hidden;
+-moz-backface-visibility: hidden;
+backface-visibility: hidden;
+}
+
+.coverDesign::after {
+background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
+background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
+background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
+position: absolute;
+top: 0;
+left: 0;
+bottom: 0;
+right: 0;
+}
+
+.coverDesign h1 {
+color: #fff;
+font-size: 2.2em;
+letter-spacing: 0.05em;
+text-align: center;
+margin: 20% 0 0 0;
+text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
+}
+
+.coverDesign p {
+color: #f8f8f8;
+font-size: 1em;
+text-align: center;
+text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
+}
+
+.yellow {
+background-color: #f1c40f;
+background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+}
+
+.blue {
+background-color: #3498db;
+background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
+background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
+background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
+}
+
+.grey {
+background-color: #f8e9d1;
+background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
+background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
+background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
+}
+
+/* Basic ribbon */
+
+.ribbon {
+background: #c0392b;
+color: #fff;
+display: block;
+font-size: 0.7em;
+position: absolute;
+top: 11px;
+right: 1px;
+width: 40px;
+height: 20px;
+line-height: 20px;
+letter-spacing: 0.15em;
+text-align: center;
+-webkit-transform: rotateZ(45deg) translateZ(1px);
+-moz-transform: rotateZ(45deg) translateZ(1px);
+transform: rotateZ(45deg) translateZ(1px);
+-webkit-backface-visibility: hidden;
+-moz-backface-visibility: hidden;
+backface-visibility: hidden;
+z-index: 10;
+}
+
+.ribbon::before,
+.ribbon::after{
+position: absolute;
+top: -20px;
+width: 0;
+height: 0;
+border-bottom: 20px solid #c0392b;
+border-top: 20px solid transparent;
+}
+
+.ribbon::before{
+left: -20px;
+border-left: 20px solid transparent;
+}
+
+.ribbon::after{
+right: -20px;
+border-right: 20px solid transparent;
+}
+
+/* figcaption */
+
+figcaption {
+padding-left: 40px;
+text-align: left;
+position: absolute;
+top: 0%;
+left: 160px;
+width: 310px;
+}
+
+figcaption h1 {
+margin: 0;
+}
+
+figcaption span {
+color: #16a085;
+padding: 0.6em 0 1em 0;
+display: block;
+}
+
+figcaption p {
+color: #63707d;
+line-height: 1.3;
+}
+
+/* Media Queries */
+@media screen and (max-width: 37.8125em) {
+.align > li {
+width: 100%;
+min-height: 440px;
+height: auto;
+padding: 0;
+margin: 0 0 30px 0;
+}
+
+.book {
+margin: 0 auto;
+}
+
+figcaption {
+text-align: center;
+width: 320px;
+top: 250px;
+padding-left: 0;
+left: -80px;
+font-size: 90%;
+}
+}
+
diff --git a/css/common.css b/css/common.css
new file mode 100644
index 0000000000000000000000000000000000000000..ceede05632070f2db0f22d0c6b5396e3c97fbaab
--- /dev/null
+++ b/css/common.css
@@ -0,0 +1,15 @@
+body{
+ background-image: url("../img/nature.png");
+ background-attachment: fixed;
+ background-size: cover;
+}
+
+.main {
+ margin-bottom: 3%;
+}
+.container {
+ background: rgba(255, 255, 255, 0.5);
+ border: 2px solid lightskyblue;
+ border-radius: 20px;
+ backdrop-filter: blur(7px);
+}
\ No newline at end of file
diff --git a/css/conditions.css b/css/conditions.css
new file mode 100644
index 0000000000000000000000000000000000000000..6dca57ce557da9ef9ea6eeb52541c3b2d217fa2f
--- /dev/null
+++ b/css/conditions.css
@@ -0,0 +1,22 @@
+body {
+ padding: 15%;
+ background-color: #EBEBF0;
+}
+
+.main {
+ display: flex;
+ justify-content: center;
+ padding: 10px;
+ text-align: left;
+}
+
+h1 {
+ display: flex;
+ justify-content: center;
+ font-size: 20px;
+}
+
+
+ol > li > ul {
+ list-style-type: upper-roman;
+}
diff --git a/css/contact.css b/css/contact.css
new file mode 100644
index 0000000000000000000000000000000000000000..45bfc9caef41e3132e74ed50dd04768cb7704d2c
--- /dev/null
+++ b/css/contact.css
@@ -0,0 +1,59 @@
+body {
+ background-color: #EBEBF0;
+ display: grid;
+ place-items: center;
+}
+form {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+}
+fieldset {
+ border: 1px solid lightskyblue;
+ background-color: #F0F0F5;
+ min-width: 100%;
+ width: 50%;
+ padding-top: 15px;
+ padding-bottom: 15px;
+ margin-bottom: 30px;
+}
+textarea {
+ max-width: 100%;
+}
+input[type="submit"]{
+ background-color: #216CE7;
+ border: 1px solid #216CE7;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+
+}
+input[type="reset"]{
+ background-color: red;
+ border: 1px solid red;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+ margin-right: 50%;
+
+}
+input[type="submit"]:hover{
+ background-color: white;
+ color: #216CE7;
+ transition: .2s;
+}
+input[type="reset"]:hover{
+ background-color: white;
+ color: red;
+ transition: .2s;
+}
+
\ No newline at end of file
diff --git a/css/echec.css b/css/echec.css
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..211970517248d6634905477be17effaa2edc8424
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,89 @@
+
+.main {
+ display: flex;
+ justify-content: center;
+ width: 70%;
+ margin-left: 12%;
+ padding: 3%;
+}
+form{
+ background-color: #F0F0F5;
+ width: 95%;
+ margin: 0 auto;
+ padding: 20px;
+ border : solid lightskyblue 1px ;
+}
+input[type="radio"] {
+ width: auto;
+ margin-right: 10px;
+}
+
+input[type="submit"] {
+ background-color: #216CE7;
+ border: none;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+ width: 100%;
+}
+input[type="submit"]:hover{
+ background-color: #3b7de7;
+}
+.bold {
+ font-weight: bold;font-size: large;
+}
+
+.presentation {
+ display: flex;
+ justify-content: center;
+ font-size: 23px;
+}
+
+h2.presentation {
+ padding-bottom: 30px;
+ font-size: 40px;
+}
+
+p.presentation {
+ padding-bottom: 50px;
+ text-align: center;
+ line-height: 200%;
+}
+
+h2 {
+ text-align: center;
+ padding-top: 40px;
+ font-size: 30px;
+}
+
+
+
+table {
+ width: 100%;
+ margin: 0 auto;
+ text-align: center;
+ border-style: solid;
+ border-radius: 50px;
+ border-color: lightskyblue;
+ padding: 10px;
+}
+
+table th {
+ font-size: 30px;
+}
+
+footer {
+ font-weight: bold;
+}
+table:first-of-type th, table:first-of-type td {
+ margin: 0;
+ border-right: 2px solid skyblue;
+}
+table:first-of-type th:last-child, table:first-of-type td:last-child {
+ margin: 0;
+ border: none;
+}
\ No newline at end of file
diff --git a/css/location.css b/css/location.css
new file mode 100644
index 0000000000000000000000000000000000000000..9e474855597bc5315906fb1fe14683b2b2859097
--- /dev/null
+++ b/css/location.css
@@ -0,0 +1,316 @@
+
+form{
+ display: grid;
+ grid-template-columns: 15% 1fr 15%;
+ grid-template-rows: auto repeat(5, 1fr);
+ grid-column-gap: 30px;
+ grid-row-gap: 30px;
+ grid-template-areas:". caracteristique ."
+ ". proposition ."
+ ". proposition ."
+ ". proposition ."
+ ". proposition .";
+}
+
+.proposition {
+ grid-area: proposition;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.proposition div.container {
+ margin-top: 1vh;
+}
+
+.filter_item {
+ padding: 10px;
+ text-align: center;
+ align-items: center;
+ justify-content: space-between;
+}
+.caracteristique_container {
+ display: grid;
+ grid-template-columns: repeat(5, 19%);
+ grid-template-rows: 1fr;
+ grid-column-gap: 1%;
+ grid-row-gap: 0px;
+ grid-area: caracteristique;
+}
+/* .distance_container{
+ padding: 10px;
+ text-align: center;
+ align-items: center;
+ justify-content: space-between;
+} */
+.permit_container{
+ padding-left: 40px;
+ padding-right: 40px;
+ display: flex;
+}
+.date_container{
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+.heure_container{
+ padding: 20px;
+ display: flex;
+ flex-direction: column;
+}
+.depart_container{
+ display: flex;
+ flex-direction: column;
+ padding: 20px;
+ display: flex;
+}
+
+
+
+.selection_container_check_container {
+ display: flex;
+ flex-direction: row;
+}
+.trotinette_container{
+ display: none;
+ grid-template-columns: repeat(3, 28%);
+ grid-template-rows: auto;
+ grid-column-gap: 5%;
+ border : solid lightskyblue 1px;
+ grid-area: trotinette;
+ align-items: center;
+ justify-content: space-between;
+ padding: 30px;
+ backdrop-filter: blur(7px);
+ background: rgba(255, 255, 255, 0.5);
+}
+.voiture_elec_container{
+ display: none;
+ grid-template-columns: repeat(3, 28%);
+ grid-template-rows: auto;
+ grid-column-gap: 5%;
+ border : solid lightskyblue 1px;
+ grid-area: voiture_elec;
+ align-items: center;
+ justify-content: space-between;
+ padding: 30px;
+ backdrop-filter: blur(7px);
+ background: rgba(255, 255, 255, 0.5);
+}
+.voiture_hydro_container{
+ display: none;
+ grid-template-columns: repeat(3, 28%);
+ grid-template-rows: auto;
+ grid-column-gap: 5%;
+ border : solid lightskyblue 1px;
+ grid-area: voiture_hydro;
+ align-items: center;
+ justify-content: space-between;
+ padding: 30px;
+ backdrop-filter: blur(7px);
+ background: rgba(255, 255, 255, 0.5);
+}
+.velo_container{
+ display: none;
+ grid-template-columns: repeat(3, 28%);
+ grid-template-rows: auto;
+ grid-column-gap: 5%;
+ border : solid lightskyblue 1px;
+ grid-area: velo;
+ align-items: center;
+ justify-content: space-between;
+ padding: 30px;
+ backdrop-filter: blur(7px);
+ background: rgba(255, 255, 255, 0.5);
+}
+
+.covoit_container {
+ display: none;
+ grid-template-columns: repeat(3, 28%);
+ grid-template-rows: auto;
+ grid-column-gap: 5%;
+ border : solid lightskyblue 1px;
+ grid-area: velo;
+ align-items: center;
+ justify-content: space-between;
+ padding: 30px;
+ backdrop-filter: blur(7px);
+ background: rgba(255, 255, 255, 0.5);
+}
+.item_img {
+ width: 10%;
+ height: 10%;
+ object-fit: cover;
+}
+datalist {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ writing-mode: vertical-lr;
+ width: 200px;
+ padding-left: 12px;
+ font-size: 10px;
+}
+option {
+ padding: 0;
+}
+
+input[type="range"] {
+ width: 200px;
+ margin: 0;
+}
+
+.item_container img{
+ width: 35%;
+ height: 35%;
+ border-radius: 20px;
+}
+.item_container{
+ text-align: center;
+ align-items: center;
+ justify-content: space-between;
+ display: flex;
+ flex-direction: row;
+ height: 20vh;
+}
+input[type="submit"]{
+ position: fixed;
+ left: 7%;
+ background-color: #216CE7;
+ border: 1px solid #216CE7;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+
+}
+input[type="submit"]:hover{
+ background-color: white;
+ color: #216CE7;
+ transition: .2s;
+}
+input{
+ cursor: pointer;
+}
+
+.container {
+ border-radius: 5px;
+ border-width: 2px;
+ background-color: rgba(226, 226, 226, 0.315);
+}
+
+#velo:checked ~ .velo_container,
+#trot:checked ~ .trotinette_container,
+#voit-elec:checked ~ .voiture_elec_container,
+#voit-hydro:checked ~ .voiture_hydro_container {
+ display: none;
+}
+
+footer {
+ bottom: 0px;
+}
+
+.item_container label {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+}
+
+.item_container label {
+ transition: .1s;
+}
+.item_container label:hover {
+ background-color: rgba(226, 226, 226, 0.315);
+ transition: .2s;
+}
+
+input[name="choice"]:focus ~ label {
+ border: 5px solid skyblue;
+ border-radius: 3%;
+ background-color: rgba(226, 226, 226, 0.5);
+ transition: .1s;
+
+}
+input[name="choice"] {
+ height: 0px;
+ position: absolute;
+ top: -1500px;
+
+}
+
+#velo:checked ~ .velo_container, #voiture_elec:checked ~ .voiture_elec_container, #voiture_hydro:checked ~ .voiture_hydro_container, #trotinette:checked ~ .trotinette_container, #covoit:checked ~ .covoit_container {
+ display: grid;
+}
+
+#trotinette {
+ position: fixed;
+ top: 38.5vh;
+ left: 10vh;
+}
+
+#label_trot {
+ position: fixed;
+ top: 38vh;
+ left: 13vh;
+}
+
+#voiture_elec {
+ position: fixed;
+ top: 41.5vh;
+ left: 10vh;
+}
+
+#label_voit_elec {
+ position: fixed;
+ top: 41vh;
+ left: 13vh;
+}
+
+#voiture_hydro {
+ position: fixed;
+ top: 44.5vh;
+ left: 10vh;
+}
+
+#label_voit_hyd {
+ position: fixed;
+ top: 44vh;
+ left: 13vh;
+}
+
+#velo {
+ position: fixed;
+ top: 47.5vh;
+ left: 10vh;
+}
+
+#label_velo {
+ position: fixed;
+ top: 47vh;
+ left: 13vh;
+}
+#covoit {
+ position: fixed;
+ top: 50.5vh;
+ left: 10vh;
+}
+
+#label_covoit {
+ position: fixed;
+ top: 50vh;
+ left: 13vh;
+}
+
+#container_selection {
+ position: fixed;
+ top: 35vh;
+ left: 9vh;
+ height: 17vh;
+ width: 10vw;
+
+}
\ No newline at end of file
diff --git a/css/login.css b/css/login.css
new file mode 100644
index 0000000000000000000000000000000000000000..6e5d6d9aede0b67728c472f4801fecb06221734c
--- /dev/null
+++ b/css/login.css
@@ -0,0 +1,71 @@
+*{
+ box-sizing: border-box;
+}
+body{
+ display: grid;
+ place-items: center;
+ margin: 0;
+ padding: 0 24px;
+}
+
+
+.main{
+ position: absolute;
+ width: 50%;
+ padding: 70px 30px 44px;
+ border-radius: 24px;
+ backdrop-filter: blur(7px);
+ background: rgba(255, 255, 255, 0.5);
+ text-align: center;
+ top: 55px;
+}
+.main>h2{
+ margin:0 0 12px;
+ font-size: 36px;
+ font-weight: 600;
+}
+.main>h3{
+ margin:0 0 30px;
+ font-size: 16px;
+ font-weight: 500;
+ color: rgba(0,0,0,0.38);
+}
+.login{
+ width: 100%;
+ margin: 0;
+ display: grid;
+ gap: 16px;
+}
+.login>input{
+ width: 100%;
+ height: 56px;
+ padding: 0 16px;
+ border-radius: 8px;
+ border: 1px solid lightskyblue;
+}
+input[type="submit"]{
+ background-color: #216CE7;
+ border: 1px solid #216CE7;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+
+}
+input[type="submit"]:hover{
+ background-color: white;
+ color: #216CE7;
+ transition: .2s;
+}
+
+footer {
+ position: absolute;
+ bottom: 0px;
+}
+
+a > p {
+ margin-top: 15px;
+}
diff --git a/css/menue.css b/css/menue.css
new file mode 100644
index 0000000000000000000000000000000000000000..657138475cff2882eed3dc1c582a2dabceb231ac
--- /dev/null
+++ b/css/menue.css
@@ -0,0 +1,79 @@
+*{
+ margin-top: 0px;
+ padding-top: 0px;
+ font-family: Trebuchet MS, sans-serif;
+}
+.logo {
+ width: 60%;
+ height: 60%;
+ float: left;
+}
+.login_icon{
+ width: 10%;
+ height: 20%;
+ float: right;
+ margin-right: 50px;
+}
+nav {
+ background-color: rgba(226, 226, 226, 0.315);
+}
+nav>ul{
+ position:absolute;
+ top:0px;
+ left:0px;
+ right: 0px;
+ height: 10%;
+ background-color: white;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: solid black;
+ display: flex;
+ list-style-type: none;
+ text-decoration: none;
+}
+nav>ul>li{
+ text-align: center;
+ text-decoration: none;
+ width: 33%;
+}
+nav>ul>li>a{
+ text-decoration: none;
+ color: black;
+ border: none;
+ padding: 15px 32px;
+}
+.menue_item:hover {
+ background-color: white;
+ color: #216CE7;
+ transition: .2s;
+}
+
+.menue_item {
+ background-color: #216CE7;
+ color: white;
+ border: 1px solid #216CE7;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+ transition: .2s;
+}
+.main{
+ position: relative;
+ display: block;
+ margin-top: 10%;
+}
+
+footer {
+ margin-bottom: 10px;
+ display: flex;
+ justify-content: center;
+ padding: 20px;
+ font-size: 20px;
+}
+
+input:hover{
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/css/proposer.css b/css/proposer.css
new file mode 100644
index 0000000000000000000000000000000000000000..43887934d4c746374a4ca1324d280c518cbd1302
--- /dev/null
+++ b/css/proposer.css
@@ -0,0 +1,54 @@
+*{
+ box-sizing: border-box;
+}
+body{
+ display: grid;
+ place-items: center;
+ margin: 0;
+ padding: 0 24px;
+}
+html,body{
+ height: 100%;
+
+}
+a, button{
+ cursor: pointer;
+}
+.main{
+ width: 50%;
+ padding: 70px 30px 44px;
+ border-radius: 24px;
+ text-align: center;
+}
+form{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+.container_input{
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding-top: 10px;
+ margin-bottom: 20px;
+ padding-bottom: 10px;
+}
+
+input[type="submit"]{
+ background-color: #216CE7;
+ border: 1px solid #216CE7;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+}
+input[type="submit"]:hover{
+ background-color: white;
+ color: #216CE7;
+ transition: .2s;
+ cursor: pointer;
+}
diff --git a/css/questionnaire.css b/css/questionnaire.css
new file mode 100644
index 0000000000000000000000000000000000000000..f86b12a62a17e6bae3ddf43277a15c18a4229ce2
--- /dev/null
+++ b/css/questionnaire.css
@@ -0,0 +1,35 @@
+form{
+ background-color: #F0F0F5;
+ width: 95%;
+ margin: 0 auto;
+ padding: 20px;
+ margin-top: 8%;
+ border : solid lightskyblue 1px ;
+}
+input[type="radio"] {
+ width: auto;
+ margin-right: 10px;
+}
+
+input[type="submit"] {
+ background-color: #216CE7;
+ border: none;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+ width: 100%;
+}
+input[type="submit"]:hover{
+ background-color: #3b7de7;
+}
+body{
+ background-color: #EBEBF0;
+}
+
+.bold {
+ font-weight: bold;
+}
\ No newline at end of file
diff --git a/css/reservation.css b/css/reservation.css
new file mode 100644
index 0000000000000000000000000000000000000000..45dc60215c4b7a3325dc16367ce8027586e13eb1
--- /dev/null
+++ b/css/reservation.css
@@ -0,0 +1,65 @@
+
+.main {
+ text-align: center;
+}
+
+.reservation_container {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ margin: 10px;
+ padding: 10px;
+ align-items: center;
+}
+
+.vehicule_img {
+ height: 10vh;
+ border-radius: 10px;
+}
+
+.annulation_btn:hover {
+ background-color: crimson;
+ color: #216CE7;
+ transition: .2s;
+}
+
+.annulation_btn {
+ background-color: #216CE7;
+ color: white;
+ border: 1px solid #216CE7;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ font-size: 16px;
+ border-radius: 10px;
+ transition: .2s;
+ float: right;
+ margin: 15px;
+}
+.annulation {
+ height: 0;
+ float: right;
+ position: absolute;
+ top: -1500px;
+}
+
+.poubelle {
+ height: 25px;
+}
+
+#anulation1:checked + * + .reservation_container, #anulation1:checked + label {
+ display: none;
+}
+
+#anulation2:checked + * + .reservation_container, #anulation2:checked + label {
+ display: none;
+}
+
+#anulation3:checked + * + .reservation_container, #anulation3:checked + label {
+ display: none;
+}
+
+#anulation4:checked + * + .reservation_container, #anulation4:checked + label {
+ display: none;
+}
+
diff --git a/css/resultat.css b/css/resultat.css
new file mode 100644
index 0000000000000000000000000000000000000000..255558aa344a2c06a9bafd7ff4bbd223fe42d1df
--- /dev/null
+++ b/css/resultat.css
@@ -0,0 +1,19 @@
+body{
+ background-color: #EBEBF0;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+.main{
+ text-align: center;
+ align-items: center;
+ display: flex;
+ flex-direction: column;
+ width: 90%;
+}
+.question{
+ margin-bottom: 50px;
+ border: solid lightsteelblue;
+ background-color: #F0F0F5;;
+}
\ No newline at end of file
diff --git a/css/reusite.css b/css/reusite.css
new file mode 100644
index 0000000000000000000000000000000000000000..b506814192fe8e65d00e09cebd22cc6429f64dec
--- /dev/null
+++ b/css/reusite.css
@@ -0,0 +1,6 @@
+.main{
+ text-align: center;
+}
+body{
+ background-color: #EBEBF0;
+}
\ No newline at end of file
diff --git a/css/signin.css b/css/signin.css
new file mode 100644
index 0000000000000000000000000000000000000000..f8336262f0942283765c0b6422f942fd82d913f9
--- /dev/null
+++ b/css/signin.css
@@ -0,0 +1,67 @@
+*{
+ box-sizing: border-box;
+}
+body{
+ display: grid;
+ place-items: center;
+ margin: 0;
+ padding: 0 24px;
+}
+html,body{
+ height: 100%;
+ background-color: #EBEBF0;
+
+}
+.main{
+ width: 50%;
+ padding: 70px 30px 44px;
+ border-radius: 24px;
+ background-color: #F0F0F5;
+ margin-bottom: 30px;
+ text-align: center;
+}
+.main>h2{
+ margin:0 0 12px;
+ font-size: 36px;
+ font-weight: 600;
+}
+.main>h3{
+ margin:0 0 30px;
+ font-size: 16px;
+ font-weight: 500;
+ color: rgba(0,0,0,0.38);
+}
+.login{
+ width: 100%;
+ margin: 0;
+ display: grid;
+ gap: 16px;
+}
+.login>input{
+ width: 100%;
+ height: 56px;
+ padding: 0 16px;
+ border-radius: 8px;
+ border: 1px solid lightskyblue;
+}
+input[type="submit"]{
+ background-color: #216CE7;
+ border: 1px solid #216CE7;
+ color: white;
+ padding: 15px 32px;
+ text-align: center;
+ text-decoration: none;
+ display: inline-block;
+ font-size: 16px;
+ border-radius: 10px;
+
+}
+input[type="submit"]:hover{
+ background-color: white;
+ color: #216CE7;
+ transition: .2s;
+}
+
+a > p {
+ margin-top: 15px;
+}
diff --git a/css/text.css b/css/text.css
new file mode 100644
index 0000000000000000000000000000000000000000..f6ffc7017109fe5310b71de5396d9281ef81771f
--- /dev/null
+++ b/css/text.css
@@ -0,0 +1,696 @@
+
+
+
+
+
+
+
+
+ul {
+margin: 0;
+padding: 0;
+list-style: none;
+}
+
+a {
+color: #2c3e50;
+text-decoration: none;
+}
+
+.btn {
+display: inline-block;
+text-transform: uppercase;
+border: 2px solid #2c3e50;
+margin-top: 25px;
+font-size: 0.7em;
+font-weight: 700;
+padding: 0.1em 0.4em;
+text-align: center;
+-webkit-transition: color 0.3s, border-color 0.3s;
+-moz-transition: color 0.3s, border-color 0.3s;
+transition: color 0.3s, border-color 0.3s;
+}
+
+.btn:hover {
+border-color: #16a085;
+color: #16a085;
+}
+
+/* basic grid, only for this demo */
+
+.align {
+clear: both;
+margin: 90px auto 20px;
+width: 100%;
+max-width: 1170px;
+text-align: center;
+}
+
+.align > li {
+width: 500px;
+min-height: 300px;
+display: inline-block;
+margin: 30px 20px 30px 30px;
+padding: 0 0 0 60px;
+vertical-align: top;
+}
+
+/* ///////////////////////////////////////////////////
+
+HARDCOVER
+Table of Contents
+
+1. container
+2. background & color
+3. opening cover, back cover and pages
+4. position, transform y transition
+5. events
+6. Bonus
+- Cover design
+- Ribbon
+- Figcaption
+7. mini-reset
+
+/////////////////////////////////////////////////////*/
+
+/*
+1. container
+*/
+
+.book {
+position: relative;
+width: 160px;
+height: 220px;
+-webkit-perspective: 1000px;
+-moz-perspective: 1000px;
+perspective: 1000px;
+-webkit-transform-style: preserve-3d;
+-moz-transform-style: preserve-3d;
+transform-style: preserve-3d;
+font-family: 'Lato', 'Arial', sans-serif;
+font-weight: 400;
+line-height: 1.2;
+}
+
+/*
+2. background & color
+*/
+
+/* HARDCOVER FRONT */
+.hardcover_front li:first-child {
+background-color: #eee;
+-webkit-backface-visibility: hidden;
+-moz-backface-visibility: hidden;
+backface-visibility: hidden;
+}
+
+/* reverse */
+.hardcover_front li:last-child {
+background: #fffbec;
+}
+
+/* HARDCOVER BACK */
+.hardcover_back li:first-child {
+background: #fffbec;
+}
+
+/* reverse */
+.hardcover_back li:last-child {
+background: #fffbec;
+}
+
+.book_spine li:first-child {
+background: #eee;
+}
+.book_spine li:last-child {
+background: #333;
+}
+
+/* thickness of cover */
+
+.hardcover_front li:first-child:after,
+.hardcover_front li:first-child:before,
+.hardcover_front li:last-child:after,
+.hardcover_front li:last-child:before,
+.hardcover_back li:first-child:after,
+.hardcover_back li:first-child:before,
+.hardcover_back li:last-child:after,
+.hardcover_back li:last-child:before,
+.book_spine li:first-child:after,
+.book_spine li:first-child:before,
+.book_spine li:last-child:after,
+.book_spine li:last-child:before {
+background: #999;
+}
+
+/* page */
+
+.page > li {
+background: -webkit-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+background: -moz-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+background: -ms-linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+background: linear-gradient(left, #e1ddd8 0%, #fffbf6 100%);
+box-shadow: inset 0px -1px 2px rgba(50, 50, 50, 0.1), inset -1px 0px 1px rgba(150, 150, 150, 0.2);
+border-radius: 0px 5px 5px 0px;
+}
+
+/*
+3. opening cover, back cover and pages
+*/
+
+.hardcover_front {
+-webkit-transform: rotateY(-34deg) translateZ(8px);
+-moz-transform: rotateY(-34deg) translateZ(8px);
+transform: rotateY(-34deg) translateZ(8px);
+z-index: 100;
+}
+
+.hardcover_back {
+-webkit-transform: rotateY(-15deg) translateZ(-8px);
+-moz-transform: rotateY(-15deg) translateZ(-8px);
+transform: rotateY(-15deg) translateZ(-8px);
+}
+
+.page li:nth-child(1) {
+-webkit-transform: rotateY(-28deg);
+-moz-transform: rotateY(-28deg);
+transform: rotateY(-28deg);
+}
+
+.page li:nth-child(2) {
+-webkit-transform: rotateY(-30deg);
+-moz-transform: rotateY(-30deg);
+transform: rotateY(-30deg);
+}
+
+.page li:nth-child(3) {
+-webkit-transform: rotateY(-32deg);
+-moz-transform: rotateY(-32deg);
+transform: rotateY(-32deg);
+}
+
+.page li:nth-child(4) {
+-webkit-transform: rotateY(-34deg);
+-moz-transform: rotateY(-34deg);
+transform: rotateY(-34deg);
+}
+
+.page li:nth-child(5) {
+-webkit-transform: rotateY(-36deg);
+-moz-transform: rotateY(-36deg);
+transform: rotateY(-36deg);
+}
+
+/*
+4. position, transform & transition
+*/
+
+.hardcover_front,
+.hardcover_back,
+.book_spine,
+.hardcover_front li,
+.hardcover_back li,
+.book_spine li {
+position: absolute;
+top: 0;
+left: 0;
+width: 100%;
+height: 100%;
+-webkit-transform-style: preserve-3d;
+-moz-transform-style: preserve-3d;
+transform-style: preserve-3d;
+}
+
+.hardcover_front,
+.hardcover_back {
+-webkit-transform-origin: 0% 100%;
+-moz-transform-origin: 0% 100%;
+transform-origin: 0% 100%;
+}
+
+.hardcover_front {
+-webkit-transition: all 0.8s ease, z-index 0.6s;
+-moz-transition: all 0.8s ease, z-index 0.6s;
+transition: all 0.8s ease, z-index 0.6s;
+}
+
+/* HARDCOVER front */
+.hardcover_front li:first-child {
+cursor: default;
+-webkit-user-select: none;
+-moz-user-select: none;
+user-select: none;
+-webkit-transform: translateZ(2px);
+-moz-transform: translateZ(2px);
+transform: translateZ(2px);
+}
+
+.hardcover_front li:last-child {
+-webkit-transform: rotateY(180deg) translateZ(2px);
+-moz-transform: rotateY(180deg) translateZ(2px);
+transform: rotateY(180deg) translateZ(2px);
+}
+
+/* HARDCOVER back */
+.hardcover_back li:first-child {
+-webkit-transform: translateZ(2px);
+-moz-transform: translateZ(2px);
+transform: translateZ(2px);
+}
+
+.hardcover_back li:last-child {
+-webkit-transform: translateZ(-2px);
+-moz-transform: translateZ(-2px);
+transform: translateZ(-2px);
+}
+
+/* thickness of cover */
+.hardcover_front li:first-child:after,
+.hardcover_front li:first-child:before,
+.hardcover_front li:last-child:after,
+.hardcover_front li:last-child:before,
+.hardcover_back li:first-child:after,
+.hardcover_back li:first-child:before,
+.hardcover_back li:last-child:after,
+.hardcover_back li:last-child:before,
+.book_spine li:first-child:after,
+.book_spine li:first-child:before,
+.book_spine li:last-child:after,
+.book_spine li:last-child:before {
+position: absolute;
+top: 0;
+left: 0;
+}
+
+/* HARDCOVER front */
+.hardcover_front li:first-child:after,
+.hardcover_front li:first-child:before {
+width: 4px;
+height: 100%;
+}
+
+.hardcover_front li:first-child:after {
+-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+}
+
+.hardcover_front li:first-child:before {
+-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+transform: rotateY(90deg) translateZ(158px) translateX(2px);
+}
+
+.hardcover_front li:last-child:after,
+.hardcover_front li:last-child:before {
+width: 4px;
+height: 160px;
+}
+
+.hardcover_front li:last-child:after {
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(-2px) translateY(-78px);
+}
+.hardcover_front li:last-child:before {
+box-shadow: 0px 0px 30px 5px #333;
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(-2px) translateY(-78px);
+}
+
+/* thickness of cover */
+
+.hardcover_back li:first-child:after,
+.hardcover_back li:first-child:before {
+width: 4px;
+height: 100%;
+}
+
+.hardcover_back li:first-child:after {
+-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+}
+.hardcover_back li:first-child:before {
+-webkit-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(158px) translateX(2px);
+transform: rotateY(90deg) translateZ(158px) translateX(2px);
+}
+
+.hardcover_back li:last-child:after,
+.hardcover_back li:last-child:before {
+width: 4px;
+height: 160px;
+}
+
+.hardcover_back li:last-child:after {
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(80px) translateX(2px) translateY(-78px);
+}
+
+.hardcover_back li:last-child:before {
+box-shadow: 10px -1px 80px 20px #666;
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(-140px) translateX(2px) translateY(-78px);
+}
+
+/* BOOK SPINE */
+.book_spine {
+-webkit-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
+-moz-transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
+transform: rotateY(60deg) translateX(-5px) translateZ(-12px);
+width: 16px;
+z-index: 0;
+}
+
+.book_spine li:first-child {
+-webkit-transform: translateZ(2px);
+-moz-transform: translateZ(2px);
+transform: translateZ(2px);
+}
+
+.book_spine li:last-child {
+-webkit-transform: translateZ(-2px);
+-moz-transform: translateZ(-2px);
+transform: translateZ(-2px);
+}
+
+/* thickness of book spine */
+.book_spine li:first-child:after,
+.book_spine li:first-child:before {
+width: 4px;
+height: 100%;
+}
+
+.book_spine li:first-child:after {
+-webkit-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+-moz-transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+transform: rotateY(90deg) translateZ(-2px) translateX(2px);
+}
+
+.book_spine li:first-child:before {
+-webkit-transform: rotateY(-90deg) translateZ(-12px);
+-moz-transform: rotateY(-90deg) translateZ(-12px);
+transform: rotateY(-90deg) translateZ(-12px);
+}
+
+.book_spine li:last-child:after,
+.book_spine li:last-child:before {
+width: 4px;
+height: 16px;
+}
+
+.book_spine li:last-child:after {
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(8px) translateX(2px) translateY(-6px);
+}
+
+.book_spine li:last-child:before {
+box-shadow: 5px -1px 100px 40px rgba(0, 0, 0, 0.2);
+-webkit-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
+-moz-transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
+transform: rotateX(90deg) rotateZ(90deg) translateZ(-210px) translateX(2px) translateY(-6px);
+}
+
+.page,
+.page > li {
+position: absolute;
+top: 0;
+left: 0;
+-webkit-transform-style: preserve-3d;
+-moz-transform-style: preserve-3d;
+transform-style: preserve-3d;
+}
+
+.page {
+width: 100%;
+height: 98%;
+top: 1%;
+left: 3%;
+z-index: 10;
+}
+
+.page > li {
+width: 100%;
+height: 100%;
+-webkit-transform-origin: left center;
+-moz-transform-origin: left center;
+transform-origin: left center;
+-webkit-transition-property: transform;
+-moz-transition-property: transform;
+transition-property: transform;
+-webkit-transition-timing-function: ease;
+-moz-transition-timing-function: ease;
+transition-timing-function: ease;
+}
+
+.page > li:nth-child(1) {
+-webkit-transition-duration: 0.6s;
+-moz-transition-duration: 0.6s;
+transition-duration: 0.6s;
+}
+
+.page > li:nth-child(2) {
+-webkit-transition-duration: 0.6s;
+-moz-transition-duration: 0.6s;
+transition-duration: 0.6s;
+}
+
+.page > li:nth-child(3) {
+-webkit-transition-duration: 0.4s;
+-moz-transition-duration: 0.4s;
+transition-duration: 0.4s;
+}
+
+.page > li:nth-child(4) {
+-webkit-transition-duration: 0.5s;
+-moz-transition-duration: 0.5s;
+transition-duration: 0.5s;
+}
+
+.page > li:nth-child(5) {
+-webkit-transition-duration: 0.6s;
+-moz-transition-duration: 0.6s;
+transition-duration: 0.6s;
+}
+
+/*
+5. events
+*/
+
+.book:hover > .hardcover_front {
+-webkit-transform: rotateY(-145deg) translateZ(0);
+-moz-transform: rotateY(-145deg) translateZ(0);
+transform: rotateY(-145deg) translateZ(0);
+z-index: 0;
+}
+
+.book:hover > .page li:nth-child(1) {
+-webkit-transform: rotateY(-30deg);
+-moz-transform: rotateY(-30deg);
+transform: rotateY(-30deg);
+-webkit-transition-duration: 1.5s;
+-moz-transition-duration: 1.5s;
+transition-duration: 1.5s;
+}
+
+.book:hover > .page li:nth-child(2) {
+-webkit-transform: rotateY(-35deg);
+-moz-transform: rotateY(-35deg);
+transform: rotateY(-35deg);
+-webkit-transition-duration: 1.8s;
+-moz-transition-duration: 1.8s;
+transition-duration: 1.8s;
+}
+
+.book:hover > .page li:nth-child(3) {
+-webkit-transform: rotateY(-118deg);
+-moz-transform: rotateY(-118deg);
+transform: rotateY(-118deg);
+-webkit-transition-duration: 1.6s;
+-moz-transition-duration: 1.6s;
+transition-duration: 1.6s;
+}
+
+.book:hover > .page li:nth-child(4) {
+-webkit-transform: rotateY(-130deg);
+-moz-transform: rotateY(-130deg);
+transform: rotateY(-130deg);
+-webkit-transition-duration: 1.4s;
+-moz-transition-duration: 1.4s;
+transition-duration: 1.4s;
+}
+
+.book:hover > .page li:nth-child(5) {
+-webkit-transform: rotateY(-140deg);
+-moz-transform: rotateY(-140deg);
+transform: rotateY(-140deg);
+-webkit-transition-duration: 1.2s;
+-moz-transition-duration: 1.2s;
+transition-duration: 1.2s;
+}
+
+/*
+6. Bonus
+*/
+
+/* cover CSS */
+
+.coverDesign {
+position: absolute;
+top: 0;
+left: 0;
+bottom: 0;
+right: 0;
+overflow: hidden;
+-webkit-backface-visibility: hidden;
+-moz-backface-visibility: hidden;
+backface-visibility: hidden;
+}
+
+.coverDesign::after {
+background-image: -webkit-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
+background-image: -moz-linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
+background-image: linear-gradient( -135deg, rgba(255, 255, 255, 0.45) 0%, transparent 100%);
+position: absolute;
+top: 0;
+left: 0;
+bottom: 0;
+right: 0;
+}
+
+.coverDesign h1 {
+color: #fff;
+font-size: 2.2em;
+letter-spacing: 0.05em;
+text-align: center;
+margin: 20% 0 0 0;
+text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
+}
+
+.coverDesign p {
+color: #f8f8f8;
+font-size: 1em;
+text-align: center;
+text-shadow: -1px -1px 0 rgba(0,0,0,0.1);
+}
+
+.yellow {
+background-color: #f1c40f;
+background-image: -webkit-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+background-image: -moz-linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+background-image: linear-gradient(top, #f1c40f 58%, #e7ba07 0%);
+}
+
+.blue {
+background-color: #3498db;
+background-image: -webkit-linear-gradient(top, #3498db 58%, #2a90d4 0%);
+background-image: -moz-linear-gradient(top, #3498db 58%, #2a90d4 0%);
+background-image: linear-gradient(top, #3498db 58%, #2a90d4 0%);
+}
+
+.grey {
+background-color: #f8e9d1;
+background-image: -webkit-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
+background-image: -moz-linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
+background-image: linear-gradient(top, #f8e9d1 58%, #e7d5b7 0%);
+}
+
+/* Basic ribbon */
+
+.ribbon {
+background: #c0392b;
+color: #fff;
+display: block;
+font-size: 0.7em;
+position: absolute;
+top: 11px;
+right: 1px;
+width: 40px;
+height: 20px;
+line-height: 20px;
+letter-spacing: 0.15em;
+text-align: center;
+-webkit-transform: rotateZ(45deg) translateZ(1px);
+-moz-transform: rotateZ(45deg) translateZ(1px);
+transform: rotateZ(45deg) translateZ(1px);
+-webkit-backface-visibility: hidden;
+-moz-backface-visibility: hidden;
+backface-visibility: hidden;
+z-index: 10;
+}
+
+.ribbon::before,
+.ribbon::after{
+position: absolute;
+top: -20px;
+width: 0;
+height: 0;
+border-bottom: 20px solid #c0392b;
+border-top: 20px solid transparent;
+}
+
+.ribbon::before{
+left: -20px;
+border-left: 20px solid transparent;
+}
+
+.ribbon::after{
+right: -20px;
+border-right: 20px solid transparent;
+}
+
+/* figcaption */
+
+figcaption {
+padding-left: 40px;
+text-align: left;
+position: absolute;
+top: 0%;
+left: 160px;
+width: 310px;
+}
+
+figcaption h1 {
+margin: 0;
+}
+
+figcaption span {
+color: #16a085;
+padding: 0.6em 0 1em 0;
+display: block;
+}
+
+figcaption p {
+color: #63707d;
+line-height: 1.3;
+}
+
+/* Media Queries */
+@media screen and (max-width: 37.8125em) {
+.align > li {
+width: 100%;
+min-height: 440px;
+height: auto;
+padding: 0;
+margin: 0 0 30px 0;
+}
+
+.book {
+margin: 0 auto;
+}
+
+figcaption {
+text-align: center;
+width: 320px;
+top: 250px;
+padding-left: 0;
+left: -80px;
+font-size: 90%;
+}
+}
+
diff --git a/echec.html b/echec.html
new file mode 100644
index 0000000000000000000000000000000000000000..a10a007bd3c2f866d0f568009443d1b8bf51053f
--- /dev/null
+++ b/echec.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <title>Echec</title>
+ <link rel="stylesheet" href="css/location.css">
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/common.css">
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main">
+
+ <div class="text_container">
+ <h2>Votre demande a échoué</h2>
+ <p>Réessayez plus tard</p>
+ </div>
+
+ </div>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/img/Air-Liquide-logo.png b/img/Air-Liquide-logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..effc888c32af300a47c5a70aff08e8a3cb8cbbb1
Binary files /dev/null and b/img/Air-Liquide-logo.png differ
diff --git a/img/account.png b/img/account.png
new file mode 100644
index 0000000000000000000000000000000000000000..b6ee8f84ae17bfd3b5d70e71bade757c66c5b171
Binary files /dev/null and b/img/account.png differ
diff --git a/img/car-png.png b/img/car-png.png
new file mode 100644
index 0000000000000000000000000000000000000000..c7105d7a2f1b0f9dce4aa73822c3d2eb5436066c
Binary files /dev/null and b/img/car-png.png differ
diff --git a/img/covoiturage1.jpg b/img/covoiturage1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..88633fac97d6d6ac7aefeb51ab3eef5bf2d643ad
Binary files /dev/null and b/img/covoiturage1.jpg differ
diff --git a/img/covoiturage2.jpg b/img/covoiturage2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..e3ca34f71d6df91f13eae1995d347b3fd0680aef
Binary files /dev/null and b/img/covoiturage2.jpg differ
diff --git a/img/covoiturage3.jpeg b/img/covoiturage3.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..104ce1635c89c06870504e2e95f793d478cb7968
Binary files /dev/null and b/img/covoiturage3.jpeg differ
diff --git a/img/logo.png b/img/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..74cf8657f923884aae495cbbf70af1c77c6a95c8
Binary files /dev/null and b/img/logo.png differ
diff --git a/img/nature.png b/img/nature.png
new file mode 100644
index 0000000000000000000000000000000000000000..c9541880383b742bab18898619b587b2180052e3
Binary files /dev/null and b/img/nature.png differ
diff --git a/img/poubelle.svg b/img/poubelle.svg
new file mode 100644
index 0000000000000000000000000000000000000000..3b0e6194f0fd093db882ec28acc349dc3d92270e
--- /dev/null
+++ b/img/poubelle.svg
@@ -0,0 +1,27 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="892.000000pt" height="1280.000000pt" viewBox="0 0 892.000000 1280.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.15, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1280.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M3387 12292 l-507 -507 508 -508 507 -507 508 508 507 507 -508 508
+-507 507 -508 -508z"/>
+<path d="M4282 9913 l-501 -508 503 -502 c277 -277 508 -503 512 -503 5 0 236
+227 514 505 l505 505 -505 505 c-278 278 -510 505 -516 505 -5 0 -236 -228
+-512 -507z"/>
+<path d="M6869 5232 l-756 -3947 -1666 -3 -1667 -2 -5 22 c-3 13 -57 298 -120
+633 -146 780 -1182 6302 -1281 6826 -40 218 -74 399 -74 403 0 3 -293 6 -650
+6 l-650 0 5 -22 c2 -13 27 -144 54 -293 125 -677 399 -2159 461 -2495 27 -146
+81 -436 119 -645 167 -906 295 -1599 341 -1845 27 -146 81 -436 119 -645 39
+-209 115 -623 170 -920 146 -792 377 -2041 403 -2183 l22 -122 2751 0 2751 0
+97 517 c105 560 336 1789 747 3978 468 2490 576 3068 725 3860 80 429 149 790
+152 803 l5 22 -648 0 -649 0 -756 -3948z"/>
+<path d="M3687 7543 c-4 -3 -7 -318 -7 -700 l0 -693 700 0 700 0 -2 698 -3
+697 -691 3 c-380 1 -694 -1 -697 -5z"/>
+</g>
+</svg>
diff --git a/img/question0.jpeg b/img/question0.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..e4ec00383abaf6b6edf4d99813ee5f19cc403b62
Binary files /dev/null and b/img/question0.jpeg differ
diff --git a/img/question1.jpeg b/img/question1.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..a5069f8f44108df5ae56bc76ea1638354ba8c06c
Binary files /dev/null and b/img/question1.jpeg differ
diff --git a/img/question2.jpeg b/img/question2.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..f69cad1eb2a8ee8d1ffa83b6edf50abd80e7926e
Binary files /dev/null and b/img/question2.jpeg differ
diff --git a/img/question3.jpeg b/img/question3.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..470560de58c437adc1331d6803fbbe151fd97464
Binary files /dev/null and b/img/question3.jpeg differ
diff --git a/img/question4.jpeg b/img/question4.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..544aae464742fc740ce78cb456818148b38ad2c5
Binary files /dev/null and b/img/question4.jpeg differ
diff --git a/img/question5.jpeg b/img/question5.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..47995703096c0fcdf7c6441a6f96fc85212918dd
Binary files /dev/null and b/img/question5.jpeg differ
diff --git a/img/question6.jpeg b/img/question6.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..b17d961eb3467874ec027d1c8cbd8a222792fd9b
Binary files /dev/null and b/img/question6.jpeg differ
diff --git a/img/question7.jpeg b/img/question7.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..746d38f0343d7039eb6f73d5c4f114d00d5eb106
Binary files /dev/null and b/img/question7.jpeg differ
diff --git a/img/question8.jpeg b/img/question8.jpeg
new file mode 100644
index 0000000000000000000000000000000000000000..8466e7643200266e38d7db7e735d2858e26dea3d
Binary files /dev/null and b/img/question8.jpeg differ
diff --git a/img/trot1-min.jpg b/img/trot1-min.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..263681f11a836ab49ce307c268dde4f7760b33ba
Binary files /dev/null and b/img/trot1-min.jpg differ
diff --git a/img/trot2-min.jpg b/img/trot2-min.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..a058afbff9c307e698bc00a2500f3126a836239d
Binary files /dev/null and b/img/trot2-min.jpg differ
diff --git a/img/trot3-min.jpg b/img/trot3-min.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5fcaf7f5868da9df41955ddbb30f60439c32c236
Binary files /dev/null and b/img/trot3-min.jpg differ
diff --git a/img/velo1.jpg b/img/velo1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..ff3b9172d7f1849162135304819a28c2051ed60c
Binary files /dev/null and b/img/velo1.jpg differ
diff --git a/img/velo2.jpg b/img/velo2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..00180d7a4e5c54a13546f613a516835e1fa6155a
Binary files /dev/null and b/img/velo2.jpg differ
diff --git a/img/velo3.jpg b/img/velo3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..b031da2f964a0e4973586246ef178a01d738b657
Binary files /dev/null and b/img/velo3.jpg differ
diff --git a/img/voit1-min.jpg b/img/voit1-min.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..5a6b0d8ea1ee3b64cc6c8e10941a9f01d7434530
Binary files /dev/null and b/img/voit1-min.jpg differ
diff --git a/img/voit2-min.jpg b/img/voit2-min.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..f4dc0c3fbbe56a9173b76ba7038ce029c86d80f2
Binary files /dev/null and b/img/voit2-min.jpg differ
diff --git a/img/voit3-min.jpg b/img/voit3-min.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..980563d2c692588868afc60e2110ed7f23144f36
Binary files /dev/null and b/img/voit3-min.jpg differ
diff --git a/img/voithyd1.jpg b/img/voithyd1.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c1a7550598d7ba6c18714205f893dde95babb285
Binary files /dev/null and b/img/voithyd1.jpg differ
diff --git a/img/voithyd2.jpg b/img/voithyd2.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..0e6fd754e8d60263404edf4edbaa81e39a1586e7
Binary files /dev/null and b/img/voithyd2.jpg differ
diff --git a/img/voithyd3.jpg b/img/voithyd3.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..60af9f62256cb2fad193d980745cf89f62da2a2f
Binary files /dev/null and b/img/voithyd3.jpg differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000000000000000000000000000000000000..0ac3bfa40e8544cf111de806dcbd6a0864b67aa5
--- /dev/null
+++ b/index.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>AirLiquide</title>
+ <link rel="stylesheet" href="css/index.css">
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/common.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+</head>
+
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main container">
+ <p class="presentation"><b>Découvrez la Mobilité Durable avec Air Liquide! <br>
+
+ Contribuez à un avenir plus propre en optant pour nos solutions de location de véhicules innovantes. Chez Air Liquide, nous mettons à la disposition de nos employés une flotte de véhicules modernes, performants, et respectueux de l'environnement, tels que des véhicules électriques et hybrides. </b>
+ </p>
+
+ <table>
+ <tr>
+ <th>
+ <strong>🌿 Objectif Zéro Émission</strong>
+ </th>
+ <th>
+ <strong>🚗 Solutions Mobiles Sur-Mesure</strong>
+ </th>
+ <th>
+ <strong>🤝 Covoiturage Facilité</strong>
+ </th>
+ </tr>
+ <tr>
+ <td rowspan="2">
+ <p>Faites partie de la solution en réduisant votre empreinte carbone. Nos véhicules électriques et hybrides contribuent activement à la lutte contre les émissions de CO2 et de particules fines.</p>
+ </td>
+ <td rowspan="2">
+ <p>Nous comprenons que chaque trajet est unique. Profitez de tarifs préférentiels, de services personnalisés et d'une flotte de véhicules récents adaptés à vos besoins, alliant praticité et performances.</p>
+ </td>
+ <td rowspan="2">
+ <p> Encouragez le partage de trajets en toute simplicité grâce à nos solutions de covoiturage dédiées. Ensemble, réduisons l'impact environnemental tout en favorisant la convivialité entre collègues.</p>
+ </td>
+ </tr>
+ </table>
+ <!-- <p class="presentation">
+
+ 🌿 Objectif Zéro Émission : Faites partie de la solution en réduisant votre empreinte carbone. Nos véhicules électriques et hybrides contribuent activement à la lutte contre les émissions de CO2 et de particules fines. <br>
+
+ 🚗 Solutions Mobiles Sur-Mesure : Nous comprenons que chaque trajet est unique. Profitez de tarifs préférentiels, de services personnalisés et d'une flotte de véhicules récents adaptés à vos besoins, alliant praticité et performances. <br>
+
+ 🤝 Covoiturage Facilité : Encouragez le partage de trajets en toute simplicité grâce à nos solutions de covoiturage dédiées. Ensemble, réduisons l'impact environnemental tout en favorisant la convivialité entre collègues. <br>
+
+ Rejoignez-nous pour une mobilité responsable et bénéficiez d'avantages exclusifs dès aujourd'hui. Ensemble, faisons avancer le changement vers un monde plus durable!
+ </p> -->
+
+ <h2>Carte de visite des personnes responsables de la mise en place du service</h2>
+ <table>
+ <tr>
+ <th>Nom</th>
+ <th>Prénom</th>
+ <th>Poste</th>
+ <th>Mail</th>
+ </tr>
+ <tr>
+ <td>Dehaine</td>
+ <td>Alexandre</td>
+ <td>Responsable de communication</td>
+ <td>alexandre.dehaine.etu@univ-lille.fr</td>
+ </tr>
+ <tr>
+ <td>Fryson</td>
+ <td>Adrien</td>
+ <td>Responsable du service</td>
+ <td>adrien.fryson.etu@univ-lille.fr</td>
+ </tr>
+ <tr>
+ <td>Roget</td>
+ <td>Benjamin</td>
+ <td>Responsable technique</td>
+ <td>benjamin.roget.etu@univ-lille.fr</td>
+ </tr>
+ </table>
+ </div>
+ <footer ><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
\ No newline at end of file
diff --git a/location.html b/location.html
new file mode 100644
index 0000000000000000000000000000000000000000..66f94e07269014e2bb416b8dee6eb885f15fc3e8
--- /dev/null
+++ b/location.html
@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Location</title>
+ <link rel="stylesheet" href="css/location.css">
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <link rel="stylesheet" href="css/common.css">
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <select name="test" id="test">
+ <option value="velo">velo</option>
+ </select>
+
+ <div class="main">
+ <form action="reusite.html">
+
+ <div class="caracteristique_container">
+ <div class="distance_container container filter_item">
+ <label for="distance">Distance à parcourir</label><br>
+ <input type="range" name="distance" id="distance" min="0" max="100" step="33" list="values">
+ <datalist id="values">
+ <option value="0" label="-5km"></option>
+ <option value="33" label="<10km"></option>
+ <option value="66" label="<15km"></option>
+ <option value="100" label="+15km"></option>
+ </datalist>
+ </div>
+
+ <div class="permit_container container filter_item">
+
+ <label for="permit">Avez-vous le permis ?</label>
+ <input type="checkbox" name="permit" id="permit">
+
+ </div>
+
+ <div class="date_container container filter_item">
+ <label for="date">A quelle date ?</label>
+ <input type="date" name="date" id="date">
+ </div>
+
+ <div class="heure_container container filter_item">
+ <label for="calendar">Quelle heure :</label>
+ <input type="time" name="heure" id="heure">
+ </div>
+
+ <div class="depart_container container filter_item">
+ <label for="depart">Quelle ville ?</label>
+ <input type="text" name="depart" id="depart" placeholder="Lille" required>
+ </div>
+
+
+
+
+
+ </div>
+
+ <div class="proposition">
+
+ <div id="container_selection" class="container"></div>
+ <input type="checkbox" name="trotinette" id="trotinette" checked>
+ <label for="trotinette" id="label_trot">Trotinette</label>
+ <input type="checkbox" name="voiture_elec" id="voiture_elec" checked>
+ <label for="voiture_elec" id="label_voit_elec">Voiture électrique</label>
+ <input type="checkbox" name="voiture_hydro" id="voiture_hydro" checked>
+ <label for="voiture_hydro" id="label_voit_hyd">Voiture hydrogène</label>
+ <input type="checkbox" name="velo" id="velo" checked>
+ <label for="velo" id="label_velo">Vélo</label>
+ <input type="checkbox" name="covoit" id="covoit" checked>
+ <label for="covoit" id="label_covoit">Covoiturage</label>
+
+
+
+
+
+ <div class="trotinette_container container">
+ <div class="item_container">
+ <input type="radio" name="choice" value="1" id="c1" required>
+ <label for="c1">
+ <img src="img/trot1-min.jpg" alt="Trot1" class="item_img">
+ <div class="desc">
+ <p>SpeedTrott</p>
+ <p>5€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="2" id="c2">
+ <label for="c2">
+ <img src="img/trot2-min.jpg" alt="Trot2" class="item_img">
+ <div class="desc">
+ <p>Etwow</p>
+ <p>6€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="3" id="c3">
+ <label for="c3">
+ <img src="img/trot3-min.jpg" alt="Trot3" class="item_img">
+ <div class="desc">
+ <p>Dualtron</p>
+ <p>2€/j</p>
+ </div>
+ </label>
+ </div>
+ </div>
+
+ <div class="voiture_elec_container container">
+ <div class="item_container">
+ <input type="radio" name="choice" value="4" id="c4">
+ <label for="c4">
+ <img src="img/voit1-min.jpg" alt="voit1" class="item_img">
+ <div class="desc">
+ <p>Volvo Xc90</p>
+ <p>80€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="5" id="c5">
+ <label for="c5">
+ <img src="img/voit2-min.jpg" alt="voit2" class="item_img">
+ <div class="desc">
+ <p>Smart EQ</p>
+ <p>50€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="6" id="c6">
+ <label for="c6">
+ <img src="img/voit3-min.jpg" alt="voit3" class="item_img">
+ <div class="desc">
+ <p>Tesla Model 3</p>
+ <p>70€/j</p>
+ </div>
+ </label>
+ </div>
+ </div>
+
+ <div class="voiture_hydro_container container">
+ <div class="item_container">
+ <input type="radio" name="choice" value="7" id="c7">
+ <label for="c7">
+ <img src="img/voithyd1.jpg" alt="voithyd1" class="item_img">
+ <div class="desc">
+ <p>Tesla Cybertruck</p>
+ <p>120€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="8" id="c8">
+ <label for="c8">
+ <img src="img/voithyd2.jpg" alt="voithyd2" class="item_img">
+ <div class="desc">
+ <p>Hydrocar</p>
+ <p>45€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="9" id="c9">
+ <label for="c9">
+ <img src="img/voithyd3.jpg" alt="voithyd4" class="item_img">
+ <div class="desc">
+ <p>Alpine a110 Hydrogène</p>
+ <p>90€/j</p>
+ </div>
+ </label>
+ </div>
+ </div>
+
+ <div class="velo_container container">
+ <div class="item_container">
+ <input type="radio" name="choice" value="10" id="c10">
+ <label for="c10">
+ <img src="img/velo1.jpg" alt="velo1" class="item_img">
+ <div class="desc">
+ <p>Aerion</p>
+ <p>5€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container" >
+ <input type="radio" name="choice" value="11" id="c11">
+ <label for="c11">
+ <img src="img/velo2.jpg" alt="velo2" class="item_img">
+ <div class="desc">
+ <p>Cyclone</p>
+ <p>6€/j</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="12" id="c12">
+ <label for="c12">
+ <img src="img/velo3.jpg" alt="velo3" class="item_img">
+ <div class="desc">
+ <p>Nova</p>
+ <p>8€/j</p>
+ </div>
+ </label>
+ </div>
+ </div>
+
+ <div class="covoit_container container">
+ <div class="item_container">
+ <input type="radio" name="choice" value="1" id="c13" required>
+ <label for="c13">
+ <img src="img/covoiturage2.jpg" alt="covoit1" class="item_img">
+ <div class="desc">
+ <p>7h</p>
+ <p>Lille-Paris : aller simple, 5€/pers</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="2" id="c14">
+ <label for="c14">
+ <img src="img/covoiturage1.jpg" alt="covoit2" class="item_img">
+ <div class="desc">
+ <p>19h30</p>
+ <p>Lille-Dunkerque : aller simple, 3€/pers</p>
+ </div>
+ </label>
+ </div>
+ <div class="item_container">
+ <input type="radio" name="choice" value="3" id="c3">
+ <label for="c3">
+ <img src="img/covoiturage3.jpeg" alt="covoit3" class="item_img">
+ <div class="desc">
+ <p>14h - 22h</p>
+ <p>Lille-Compiégne : aller-retour, 7€/pers</p>
+ </div>
+ </label>
+ </div>
+ </div>
+ </div>
+ <div class="submit_container">
+ <input type="submit" value="Louer !">
+ </div>
+ </form>
+ </div>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/login.html b/login.html
new file mode 100644
index 0000000000000000000000000000000000000000..78159878d8b680b6a6410bdc96b43e1099751243
--- /dev/null
+++ b/login.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Login</title>
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/login.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <link rel="stylesheet" href="css/common.css">
+
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main">
+ <h2>Connexion</h2>
+ <h3>Rentrez vos identifiants</h3>
+ <form class="login" action="index.html">
+ <input type="text" placeholder="Email" required>
+ <input type="password" name="password" id="password" placeholder="Mot de passe" required>
+ <input type="submit" value="Connexion">
+ </form>
+ <a href="questionnaire.html"><p>S'inscrire</p></a>
+ </div>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/proposer.html b/proposer.html
new file mode 100644
index 0000000000000000000000000000000000000000..c289509ec8430d3b60a7b99c8c67c646180c8802
--- /dev/null
+++ b/proposer.html
@@ -0,0 +1,75 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Proposer</title>
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/proposer.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <link rel="stylesheet" href="css/common.css">
+
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main container">
+
+ <form action="reusite.html">
+
+ <div class="prop_container">
+
+ <div class="calendar_container container_input container">
+ <label for="calendar">Quelle date</label>
+ <input type="date" name="calendar" id="calendar" required>
+ </div>
+
+ <div class="heure_container container_input container">
+ <label for="heure">Quelle heure</label>
+ <input type="time" name="heure" id="heure" required>
+ </div>
+
+ <div class="depart_container container_input container">
+ <label for="depart">Quelle ville</label>
+ <input type="text" name="depart" id="depart" required>
+ </div>
+
+ <div class="prix_container container_input container">
+ <label for="prix">Quel prix</label>
+ <input type="number" name="prix" id="prix" placeholder="Prix en € par jour" required>
+ </div>
+
+ <div class="type_container container_input container">
+ <label for="type_vehicule">Type de vehicule</label>
+ <select name="type_vehicule" id="type_vehicule" required>
+ <option value="0" disabled selected hidden>- Séléctionner -</option>
+ <option value="trotinette">Trotinette</option>
+ <option value="velo">Velo</option>
+ <option value="voitureelec">Voiture Electrique</option>
+ <option value="voiturehydro">Voiture Hydrogene</option>
+ </select>
+ </div>
+
+ <div class="img_container container_input container">
+ <label for="img_voiture">Une photo de votre vehicule</label>
+ <input type="file" name="img" id="img" required>
+ </div>
+
+
+ </div>
+
+ <input type="submit" value="Proposer">
+ </form>
+ </div>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/questionnaire.html b/questionnaire.html
new file mode 100644
index 0000000000000000000000000000000000000000..b5a4a46d9d4014f866f0acb954d2e4ac15cdcfbe
--- /dev/null
+++ b/questionnaire.html
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=*, initial-scale=1.0">
+ <title>Document</title>
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/questionnaire.css">
+ <link rel="stylesheet" href="css/common.css">
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+ <form action="signin.html" class="container" >
+ <label class="bold" for="question1">Quel est le principal moyen de transport que vous utilisez pour vous rendre au travail ?</label><br>
+ <div>
+ <input type="radio" id="option1" name="question1" value="Option 1" required>
+ <label for="option1">Voiture personnelle</label>
+ </div>
+ <input type="radio" id="option2" name="question1" value="Option 2" required>
+ <label for="option2">Transport en commun</label><br>
+ <input type="radio" id="option3" name="question1" value="Option 3" required>
+ <label for="option3">Vélo</label><br>
+ <input type="radio" id="option4" name="question1" value="Option 4" required>
+ <label for="option4">Marche à pied</label><br>
+ <br>
+ <label class="bold" for="question2">A quelle fréquence envisagez-vous de covoiturer pour vous rendre au travail ?</label><br>
+ <input type="radio" id="option1" name="question2" value="Option 1" required>
+ <label for="option1">Tous les jours</label><br>
+ <input type="radio" id="option2" name="question2" value="Option 2" required>
+ <label for="option2">Plusieurs fois par semaine</label><br>
+ <input type="radio" id="option3" name="question2" value="Option 3" required>
+ <label for="option3">Une fois par semaine</label><br>
+ <input type="radio" id="option4" name="question2" value="Option 4" required>
+ <label for="option4">Occasionnellement</label><br>
+ <input type="radio" id="option5" name="question2" value="Option 5" required>
+ <label for="option5">Pas intéressé</label><br>
+ <br>
+ <label class="bold" for="question3">Etes-vous prêtes à être conductrice ou uniquement passagère en covoiturage ?</label><br>
+ <input type="radio" id="option1" name="question3" value="Option 1" required>
+ <label for="option1">Conducteur</label><br>
+ <input type="radio" id="option2" name="question3" value="Option 2" required>
+ <label for="option2">Passager</label><br>
+ <input type="radio" id="option3" name="question3" value="Option 3" required>
+ <label for="option3">Les deux</label><br>
+ <br>
+ <label class="bold" for="question4">Quels sont vos horaires de travail typiques ?</label><br>
+ <input type="radio" id="option1" name="question4" value="Option 1" required>
+ <label for="option1">Horaire de jour (9h-17h)</label><br>
+ <input type="radio" id="option2" name="question4" value="Option 2" required>
+ <label for="option2">Horaires décalés (équipe de nuit)</label><br>
+ <input type="radio" id="option3" name="question4" value="Option 3" required>
+ <label for="option3">Horaires flexibles</label><br>
+ <br>
+ <label class="bold" for="question5">Quelle serait la distance maximale que vous seriez prête à parcourir avec un covoitureur ?</label><br>
+ <input type="radio" id="option1" name="question5" value="Option 1" required>
+ <label for="option1">Moins de 10km</label><br>
+ <input type="radio" id="option2" name="question5" value="Option 2" required>
+ <label for="option2">Entre 15 et 30km</label><br>
+ <input type="radio" id="option3" name="question5" value="Option 3" required>
+ <label for="option3">Entre 30 et 50km</label><br>
+ <input type="radio" id="option4" name="question5" value="Option 4">
+ <label for="option4">Plus de 50km</label><br>
+ <br>
+ <label class="bold" for="question6">Préférez-vous covoiturer avec des collègues spécifiques ou avec des personnes de l'entreprise que vous ne connaissez pas encore ?</label><br>
+ <input type="radio" id="option1" name="question6" value="Option 1" required>
+ <label for="option1">Collègue spécifiques</label><br>
+ <input type="radio" id="option2" name="question6" value="Option 2" required>
+ <label for="option2">Personnes de l'entreprise inconnues</label><br>
+ <input type="radio" id="option3" name="question6" value="Option 3" required>
+ <label for="option3">Indifférent</label><br>
+ <br>
+ <label class="bold" for="question7">Quels sont les principaux avantages que vous attendez du coivoiturage ? (selectionnez jusqu'à 3 réponses)</label><br>
+ <input type="radio" id="option1" name="question7" value="Option 1" required>
+ <label for="option1">Réduction des coûts</label><br>
+ <input type="radio" id="option2" name="question7" value="Option 2" required>
+ <label for="option2">Réduction de l'impact environnemental</label><br>
+ <input type="radio" id="option3" name="question7" value="Option 3" required>
+ <label for="option3">Etablir des liens sociaux avec les collègues</label><br>
+ <input type="radio" id="option4" name="question7" value="Option 4" required>
+ <label for="option4">Flexibilité dans les horaires</label><br>
+ <input type="radio" id="option5" name="question7" value="Option 5" required>
+ <label for="option5">Autres</label><br>
+ <br>
+ <label class="bold" for="question8">Aimeriez-vous avoir un système de réservation de covoiturage intégré à l'entreprise</label><br>
+ <input type="radio" id="option1" name="question8" value="Option 1" required>
+ <label for="option1">Oui</label><br>
+ <input type="radio" id="option2" name="question8" value="Option 2" required>
+ <label for="option2">Non</label><br>
+ <input type="radio" id="option3" name="question8" value="Option 3" required>
+ <label for="option3">Pas sûr</label><br>
+ <br>
+ <input type="submit" value="Envoyer">
+ </form>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/reservation.html b/reservation.html
new file mode 100644
index 0000000000000000000000000000000000000000..f5bb2d9e4ae7871c93aec3b0631dee1a43de0bcb
--- /dev/null
+++ b/reservation.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Réservation</title>
+ <link rel="stylesheet" href="css/reservation.css">
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <link rel="stylesheet" href="css/common.css">
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main container">
+
+ <h1>Liste de vos réservations</h1>
+
+ <input type="checkbox" name="test" id="anulation1" class="annulation">
+ <label for="anulation1"><a class="annulation_btn"><img class="poubelle" src="img/poubelle.svg" alt=""></a></label>
+ <div class="reservation_container container">
+ <img src="img/velo3.jpg" alt="velo3" class="vehicule_img">
+ <p>Nom du véhicule: <br><strong>Nova</strong></p>
+ <p>Type de véhicule: <br><strong>Vélo</strong></p>
+ <p>Tarif au jour: <br><strong>8€/jour</strong></p>
+ <p>Reservé(e) pour le <br> <strong>11/08/2024 à 8h00</strong></p>
+ </div>
+
+
+ <input type="checkbox" name="test" id="anulation2" class="annulation">
+ <label for="anulation2"><a class="annulation_btn"><img class="poubelle" src="img/poubelle.svg" alt=""></a></label>
+ <div class="reservation_container container">
+ <img src="img/voit1-min.jpg" alt="velo3" class="vehicule_img">
+ <p>Nom du véhicule: <br><strong>Volvo Xc90</strong></p>
+ <p>Type de véhicule: <br><strong>Voiture</strong></p>
+ <p>Tarif au jour: <br><strong>80€/jour</strong></p>
+ <p>Reservé(e) pour le <br> <strong>12/08/2024 à 8h00</strong></p>
+ </div>
+
+ <input type="checkbox" name="test" id="anulation3" class="annulation">
+ <label for="anulation3"><a class="annulation_btn"><img class="poubelle" src="img/poubelle.svg" alt=""></a></label>
+ <div class="reservation_container container">
+ <img src="img/voithyd3.jpg" alt="velo3" class="vehicule_img">
+ <p>Nom du véhicule: <br><strong>Alpine a110 Hydrogène</strong></p>
+ <p>Type de véhicule: <br><strong>Voiture Hydrogéne</strong></p>
+ <p>Tarif au jour: <br><strong>90€/jour</strong></p>
+ <p>Reservé(e) pour le <br> <strong>13/08/2024 à 8h00</strong></p>
+ </div>
+
+ <input type="checkbox" name="test" id="anulation4" class="annulation">
+ <label for="anulation4"><a class="annulation_btn"><img class="poubelle" src="img/poubelle.svg" alt=""></a></label>
+ <div class="reservation_container container">
+ <img src="img/trot1-min.jpg" alt="velo3" class="vehicule_img">
+ <p>Nom du véhicule: <br><strong>SpeedTrott</strong></p>
+ <p>Type de véhicule: <br><strong>Trotinette</strong></p>
+ <p>Tarif au jour: <br><strong>8€/jour</strong></p>
+ <p>Reservé(e) pour le <br> <strong>14/08/2024 à 8h00</strong></p>
+ </div>
+ </div>
+
+
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/resultat.html b/resultat.html
new file mode 100644
index 0000000000000000000000000000000000000000..2bcb52dbc62d01d896cc7dffa4a49abfe27e877f
--- /dev/null
+++ b/resultat.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="fr">
+ <head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Resultat</title>
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/resultat.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <link rel="stylesheet" href="css/common.css">
+ </head>
+ <body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+ <div class="main container">
+
+ <h1>Récapitulatif des résultat du questionnaire</h1>
+ <hr>
+ <div class="question">
+ <p>Question 1</p>
+ <img src="img/question0.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 2</p>
+ <img src="img/question1.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 3</p>
+ <img src="img/question2.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 4</p>
+ <img src="img/question3.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 5</p>
+ <img src="img/question4.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 6</p>
+ <img src="img/question5.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 7</p>
+ <img src="img/question6.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 8</p>
+ <img src="img/question7.jpeg" alt="">
+ </div>
+ <div class="question">
+ <p>Question 9</p>
+ <img src="img/question8.jpeg" alt="">
+ </div>
+ </div>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+ </body>
+</html>
\ No newline at end of file
diff --git a/reusite.html b/reusite.html
new file mode 100644
index 0000000000000000000000000000000000000000..204a07aafe5facb7446b75ee6fee4da58b82fa46
--- /dev/null
+++ b/reusite.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Validé</title>
+ <link rel="stylesheet" href="css/reusite.css">
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <link rel="stylesheet" href="css/common.css">
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main container">
+ <h2>Votre demande a bien été prise en compte</h2>
+ <p>Vous allez recevoir un mail de comfirmation dans les prochaines minutes.</p>
+ </div>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></small></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/signin.html b/signin.html
new file mode 100644
index 0000000000000000000000000000000000000000..f92b6120d5d2c98624c9c8ad5cd00fe47d52a9ae
--- /dev/null
+++ b/signin.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Inscription</title>
+ <link rel="stylesheet" href="css/menue.css">
+ <link rel="stylesheet" href="css/signin.css">
+ <link rel="icon" type="images/x-icon" href="./img/logo.png" />
+ <link rel="stylesheet" href="css/common.css">
+
+</head>
+<body>
+ <nav>
+ <ul>
+ <li><a href="https://www.airliquide.com/fr"><img src="img/Air-Liquide-logo.png" alt="logo" class="logo"></a></li>
+ <li><a href="index.html" class="menue_item">Accueil</a></li>
+ <li><a href="location.html" class="menue_item" >Location</a></li>
+ <li><a href="proposer.html" class="menue_item" >Proposer</a></li>
+ <li><a href="reservation.html" class="menue_item" >Mes Réservations</a></li>
+ <li><a href="login.html"><img src="img/account.png" alt="Account" class="login_icon"></a></li>
+ </ul>
+ </nav>
+
+ <div class="main container">
+ <h2>Inscription</h2>
+ <h3>Rentrez vos identifiants</h3>
+ <form class="login" action="index.html">
+ <input type="mail" placeholder="example@example.com" required>
+ <input type="password" name="password" id="password" placeholder="Mot de passe" required>
+ <input type="text" placeholder="ville" required>
+ <input type="number" placeholder="code postal" required>
+ <input type="submit" value="inscription" required>
+ </form>
+ <a href="login.html"><p>Se connecter</p></a>
+ </div>
+ <footer class="container"><small>Veillez à respecter les <a href="conditions.html">conditions d'utilisation</a> du site avant de louer votre véhicule, contactez nous <a href="contact.html">ici</a></footer>
+</body>
+</html>
\ No newline at end of file
diff --git a/test.html b/test.html
new file mode 100644
index 0000000000000000000000000000000000000000..a58c55db30bf67d2dd3c59e2b158c84edfa9a2d8
--- /dev/null
+++ b/test.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <title>Document</title>
+ <link rel="stylesheet" href="css/text.css">
+</head>
+<body>
+
+
+<div class="component">
+ <ul class="align">
+ <li>
+ <figure class='book'>
+
+ <!-- Front -->
+
+ <ul class='hardcover_front'>
+ <li>
+ <div class="coverDesign blue">
+ <h1>Zéro Émission</h1>
+ <p>Objectif</p>
+ </div>
+ </li>
+ <li></li>
+ </ul>
+
+ <!-- Pages -->
+
+ <ul class='page'>
+ <li></li>
+ <li>
+ <a class="btn" href="#">Faites partie de la solution en réduisant votre empreinte carbone. Nos véhicules électriques et hybrides contribuent activement à la lutte contre les émissions de CO2 et de particules fines.</a>
+ </li>
+ <li></li>
+ <li></li>
+ <li></li>
+ </ul>
+
+ <!-- Back -->
+
+ <ul class='hardcover_back'>
+ <li></li>
+ <li></li>
+ </ul>
+ <ul class='book_spine'>
+ <li></li>
+ <li></li>
+ </ul>
+ </figure>
+
+ </li>
+ </ul>
+ </div>
+
+ <figure class='book'>
+
+ <!-- Front -->
+
+ <ul class='hardcover_front'>
+ <li>
+ <div class="coverDesign blue">
+ <h1>Zéro Émission</h1>
+ <p>Objectif</p>
+ </div>
+ </li>
+ <li></li>
+ </ul>
+
+ <!-- Pages -->
+
+ <ul class='page'>
+ <li></li>
+ <li>
+ <a class="btn" href="#">Faites partie de la solution en réduisant votre empreinte carbone. Nos véhicules électriques et hybrides contribuent activement à la lutte contre les émissions de CO2 et de particules fines.</a>
+ </li>
+ <li></li>
+ <li></li>
+ <li></li>
+ </ul>
+
+ <!-- Back -->
+
+ <ul class='hardcover_back'>
+ <li></li>
+ <li></li>
+ </ul>
+ <ul class='book_spine'>
+ <li></li>
+ <li></li>
+ </ul>
+ </figure>
+
+
+
+
+</body>
+</html>
\ No newline at end of file