diff --git a/css/index.css b/css/index.css
new file mode 100644
index 0000000000000000000000000000000000000000..15469fa122d80fe99cbe4da913cb5b5ba35908f2
--- /dev/null
+++ b/css/index.css
@@ -0,0 +1,203 @@
+
+
+body {
+ margin: 0;
+}
+
+html {
+ background-color: #231543;
+ font-family: "Inter";
+}
+
+
+
+h1{
+ font-size: 50px;
+ margin-top: 0;
+}
+
+h2{
+ margin: 0;
+}
+
+.back {
+ z-index: -1;
+ background: url(https://d2pgkmld22m7v7.cloudfront.net/assets/images/header-default.png) top right no-repeat;
+ background-size:contain;
+ position: absolute;
+ height:70%;
+ width: 100%;
+ left: 0;
+ top: 0;
+
+}
+.boxNav{
+ display: flex;
+ justify-content: space-evenly;
+ padding: 7px;
+}
+
+a{
+ text-decoration: none;
+ font-weight: bold;
+ color: #3f2875;
+ font-size: 20px;
+
+}
+
+header{
+ font-weight: bold;
+ color: white;
+ height: fit-content;
+}
+
+.textHeader{
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 400px;
+ flex-direction: column;
+
+}
+header>div.nav-bar{
+ background-color: white;
+ width: 100%;
+ height: 5%;
+ font-family: 'Inter', sans-serif;
+ font-style: normal;
+ margin: 0;
+ padding: 0;
+}
+
+nav>a{
+ text-decoration: none;
+ color: #231543;
+}
+nav>div {
+ display: inline-flex;
+ justify-content: space-around;
+ margin-left: 40%;
+ width: 35%;
+}
+nav>div>a{
+ text-decoration: none;
+ color: #231543;
+ font-size: 30px;
+
+}
+nav>a.img {
+ color: white;
+ font-size: 80px;
+}
+nav>a>img {
+ width: 10%;
+ margin-left: 8%;
+}
+
+
+nav>div>a.login-button {
+ text-decoration: none;
+ text-shadow: none;
+ color: white;
+ background: linear-gradient(201.97deg, #9968F7 12.27%, #3936CC 83.53%);
+ width: 30%;
+ text-align: center;
+ border-radius: 40px;
+ font-style: oblique;
+}
+
+
+.test {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
+.corp{
+ padding-bottom: 220px;
+ background-color: #ECEDFEFF;
+}
+
+
+
+.Container{
+ margin: 25px;
+ width: auto;
+ display: flex;
+ justify-content: center;
+ height: fit-content;
+}
+
+
+
+
+
+
+div.connection-success {
+ background-color: #B0F2B6;
+ font-family: "Inter";
+ color: black;
+ text-align: center;
+
+}
+div.connection-success>a {
+ text-decoration: underline;
+ background-color: #B0F2B6;
+ color: black;
+}
+
+
+footer {
+ position: sticky;
+ bottom: 0px;
+}
+
+.connect-panel {
+ background-color: white;
+ border-radius: 45px;
+ box-shadow: 0px 100px 400px rgba(0,0,0,0.04), 0px 41.7776px 33.4221px rgba(0,0,0,0.0287542);
+ height : 400px;
+ margin-top: 5px;
+
+}
+
+
+div.button {
+ cursor: pointer;
+ width: 20%;
+ margin-left: 40%;
+ background: linear-gradient(201.97deg, #9968F7 12.27%, #3936CC 83.53%);
+ border-radius: 45px;
+ margin-top: 15px;
+ text-align: center;
+}
+
+div>button {
+ cursor: pointer;
+ display: contents;
+ font-size: 45px;
+ font-family: "Inter";
+ font-style: oblique;
+ width: 100%;
+ color: white;
+}
+
+.présentation{
+ height: 600px;
+ width: 550px;
+ margin-right: 2rem;
+ margin-left: 2rem;
+ overflow: hidden;
+ border-radius: 4rem;
+ color: #fff;
+ background-position: center;
+ margin-bottom: 4rem;
+ background: url(https://d2pgkmld22m7v7.cloudfront.net/assets/images/cards__color-1.png) center center no-repeat;
+ background-size: cover;
+ font-size: 25px;
+ margin-top: 10px;
+}
+
+.présentation>p{
+ text-align: center;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 4f5c5b1014b64180df4c6b6f3ce377ae52edd4c6..7da26c28e00a59827ba1ee75ffa8bd2c8171409f 100644
--- a/index.html
+++ b/index.html
@@ -2,47 +2,55 @@
<html>
<head>
<meta charset='utf-8'>
- <title>Klaxit</title>
- <link rel='stylesheet' href="./personnalisation.css">
+ <title>Acceuil</title>
+ <link rel='stylesheet' href="./css/index.css">
+ <link rel='stylesheet' href="./css/footer.css">
</head>
-<body>
+<body>
<header>
<div class="nav-bar">
<nav>
- <h1>Klaxit</h1>
+ <a class="img" href="index.html"><img src="./css/images/logoKlaxit_BBCD_Color.webp" alt="Logo Klaxit"></a>
+ <div>
+ <a href="index.html">ACCEUIL</a>
+ <a href="conducteur.html">CONDUCTEUR</a>
+ <a href="login.html" class="login-button">LOGIN</a>
+ </div>
</nav>
</div>
- </header>
+ <div class="back"></div>
+
+ <div class="textHeader">
+ <h1>Le moyen de transport pour nos employés !</h1>
+ <h2>Ce service est dédier au transport domicile-travail entre employés de chez Klaxit.</h2>
+ </div>
+
+ </header>
<main>
- <div class = "corps">
- <img src="./RectangleMixe.png" alt="Détail-site">
- <p>
- Le covoiturage dédié aux employés<br>
- Klaxit est la plateforme de covoiturage conçue spécifiquement<br> pour répondre aux besoins des entreprises et de leurs employés.<br>
- En proposant une solution de covoiturage dédiée,<br> Klaxit vise à faciliter les déplacements domicile-travail tout en favorisant la mobilité durable.<br>
- Ce nouveau services vise les employés de Klaxit,<br> afin qu'ils puissent ce rendre à leurs bureaux sans avoir à prendre chacun leurs voitures.<br>
- Prix réduit, et prime salariales !
- </p>
-
- <div class = "réserver">
- <h2> Réserver </h2>
+ <section class="corp">
+ <div class="Container">
+ <div class="corpContainer">
+ <div class="présentation">
+ <p>Klaxit est la plateforme de covoiturage conçue spécifiquement<br> pour répondre aux besoins des entreprises et de leurs employés.<br>
+ En proposant une solution de covoiturage dédiée,<br> Klaxit vise à faciliter les déplacements domicile-travail tout en favorisant la mobilité durable.<br>
+ Ce nouveau services vise les employés de Klaxit,<br> afin qu'ils puissent ce rendre à leurs bureaux sans avoir à prendre chacun leurs voitures.<br>
+ Prix réduit, et prime salariales !
+ </p>
+ </div>
+ </div>
</div>
-
- <div class ="conducteur">
- <p>Je souhaite être conducteur</p>
- </div>
-
- </div>
+ <div class="button">
+ <button class="confirm-button" type="submit">Réserver</button>
+ </div>
+ </section>
</main>
-
-
<footer>
<section class="links">
<div class="f-column">
- <a href="">Qui sommes nous ?</a> <br />
+ <a href="info.html">Qui sommes nous ?</a> <br />
<a href="https://www.klaxit.com/presse">Espace presse</a> <br />
<a href="contact.html">Nous contacter</a>
</div>
@@ -57,7 +65,6 @@
<a href="https://www.klaxit.com/mentions-legales">mentions légales</a>
</div>
</section>
- </footer>
</body>
-</html>
+</html>
\ No newline at end of file
diff --git a/info.html b/info.html
index 006e182f6c5f365301f8e73e743f41bdbd38a5d0..95c95236a679a17d088b830bf767e3a050d5d947 100644
--- a/info.html
+++ b/info.html
@@ -79,7 +79,7 @@
<footer>
<section class="links">
<div class="f-column">
- <a href="">Qui sommes nous ?</a> <br />
+ <a href="info.html">Qui sommes nous ?</a> <br />
<a href="https://www.klaxit.com/presse">Espace presse</a> <br />
<a href="contact.html">Nous contacter</a>
</div>