amélioration page réserver et résult page connection

57d2c701 · LK_Clément · 8f4507ba · 57d2c701 · 57d2c701
Commit 57d2c701 authored 1 year ago by LK_Clément
--- 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{

--- 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">