From 57d2c7018075bd886ef67745be2666dce4eb51c0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?LK=5FCl=C3=A9ment?= <c.desbuisson04@gmail.com>
Date: Sat, 23 Dec 2023 14:47:06 +0100
Subject: [PATCH] =?UTF-8?q?am=C3=A9lioration=20page=20r=C3=A9server=20et?=
=?UTF-8?q?=20r=C3=A9sult=20page=20connection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
css/reserver.css | 51 ++++++++++++++++++++++++++++++++++++++++++++++--
reserver.html | 18 ++++++++++++++---
2 files changed, 64 insertions(+), 5 deletions(-)
diff --git a/css/reserver.css b/css/reserver.css
index bcfb4e6..cc1d7e4 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 29c8118..d169e1a 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">
--
GitLab