diff --git a/css/reserver.css b/css/reserver.css
index bcfb4e6e2d8a85eed24c5153e59f659df5b75caf..cc1d7e4a66acaca70f05a4288b7c84140ac435bd 100644
--- a/css/reserver.css
+++ b/css/reserver.css
@@ -10,12 +10,26 @@
src: url('../fonts/Inter/static/Inter-Regular.ttf');
}
+html {
+ background-color: #231543;
+ font-family: "Inter";
+}
+
+body{
+ background-color: #231543;
+}
+
main {
+ position: relative;
+ z-index: 1;
display: flex;
justify-content: center;
margin-bottom: 7%;
+ background-color: #ECEDFEFF;
}
-header>div{
+header>div.nav-bar{
+ position: relative;
+ z-index: 1;
background-color: white;
width: 100%;
height: 5%;
@@ -24,7 +38,6 @@ header>div{
margin: 0;
padding: 0;
}
-
nav>a{
text-decoration: none;
color: #231543;
@@ -61,6 +74,40 @@ nav>div>a.login-button {
font-style: oblique;
}
+.back {
+ z-index: 0;
+ background: url(https://d2pgkmld22m7v7.cloudfront.net/assets/images/header-default.png) top right no-repeat;
+ background-size:contain;
+ position: absolute;
+ height:60%;
+ width: 100%;
+ left: 0;
+ top: 0;
+}
+
+header{
+ font-weight: bold;
+ color: white;
+ height: fit-content;
+}
+
+.textHeader{
+ position: relative;
+ z-index: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ height: 400px;
+ flex-direction: column;
+
+}
+
+.test {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+}
+
main{
diff --git a/reserver.html b/reserver.html
index 29c811896964142f9fd976f3f3c230b84d84b2c9..d169e1a48d08f67fbe412d8ae0572f34b096df7b 100644
--- a/reserver.html
+++ b/reserver.html
@@ -9,18 +9,30 @@
</head>
<body>
- <header>
+ <header>
<div class="nav-bar">
<nav>
<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="reserver.html">PASSAGER</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">
+ <div class="test">
+ <h1>Réserver votre trajet avec</h1>
+ <h2>C'est gratuit est c'est un geste pour la planète.</h2>
+ <p>N'hésitez plus et réserver maintenant.</p>
+ </div>
+
+ </div>
+
+ </div>
+
+</header>
<main>
<div class="content">