From a1fb0f399d83c965e233e67730ba0d01f52947ff Mon Sep 17 00:00:00 2001
From: Matias Mennecart <matias.mennecart.etu@univ-lille.fr>
Date: Sat, 23 Dec 2023 15:29:55 +0100
Subject: [PATCH] Harmonisation des pages et headrers
---
contact.html | 18 ++++----
css/contact.css | 56 +++++++++++++++++++++---
css/index.css | 1 +
css/login.css | 94 ++++++++++++++++++++++++++++++++++-------
css/reserver.css | 9 ++++
forms/login-result.html | 22 +++++++---
index.html | 2 +-
login.html | 12 +++++-
8 files changed, 173 insertions(+), 41 deletions(-)
diff --git a/contact.html b/contact.html
index 015eca5..3b4512f 100644
--- a/contact.html
+++ b/contact.html
@@ -9,16 +9,16 @@
<body>
<header>
- <nav>
- <div class="boxNav">
- <!--<div><li><a href= "index.html">Acceuil</a></li></div>
- <div><li><a href= "conducteur.html">Conducteur</a></li></div>
- <div><li><a href= "passager.html">Passager</a></li></div> -->
- <div><a href="reserver.html">PASSAGER</a></div>
- <div><a href= "conducteur.html">Conducteur</a></div>
- <div><a href= "reserver.html">Reserver</a></div>
+ <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="reserver.html">PASSAGER</a>
+ <a href="conducteur.html">CONDUCTEUR</a>
+ <a href="login.html" class="login-button">LOGIN</a>
</div>
- </nav>
+ </nav>
+ </div>
<div class="back"></div>
<div class="textHeader">
<div class="test">
diff --git a/css/contact.css b/css/contact.css
index 18f9367..d00ebd3 100644
--- a/css/contact.css
+++ b/css/contact.css
@@ -7,13 +7,6 @@ html {
font-family: "Inter";
}
-nav {
- position: sticky;
- top: 0px;
- background-color: white;
- padding: 10px;
-}
-
h1{
font-size: 50px;
margin-top: 0;
@@ -47,6 +40,55 @@ a{
font-size: 20px;
}
+header>div.nav-bar{
+ position: relative;
+ z-index: 1;
+ 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: 35%;
+ width: 40%;
+}
+nav>div>a{
+ text-decoration: none;
+ color: #231543;
+ font-size: 30px;
+ font-style: normal;
+
+}
+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;
+}
+
+
+
header{
font-weight: bold;
diff --git a/css/index.css b/css/index.css
index e774e80..a15ec9b 100644
--- a/css/index.css
+++ b/css/index.css
@@ -210,6 +210,7 @@ nav>div>a.login-button {
#p1{
font: 400 24px "g";
+ font-family: "Inter";
color: #3f2875;
}
diff --git a/css/login.css b/css/login.css
index 4d0c24e..360b956 100644
--- a/css/login.css
+++ b/css/login.css
@@ -10,16 +10,47 @@
src: url('../fonts/Inter/static/Inter-Regular.ttf');
}
- header {
- display: flex;
- justify-content: center;
+h1{
+ font-size: 50px;
+ margin-top: 0;
+}
+
+h2{
+ margin: 0;
+}
+
+html {
+ background-color: #231543;
+ font-family: "Inter";
+}
+
+body{
+ background-color: #ECEDFEFF;
}
main {
+ position: relative;
+ z-index: 1;
display: flex;
justify-content: center;
margin-bottom: 7%;
+ background-color: #ECEDFEFF;
}
-header>div{
+div.connection-success {
+ background-color: #B0F2B6;
+ font-family: "Inter";
+ color: black;
+ margin-bottom: 5%;
+ padding: 1%;
+}
+div.connection-success>a {
+ text-decoration: underline;
+ background-color: #B0F2B6;
+ color: black;
+}
+
+header>div.nav-bar{
+ position: relative;
+ z-index: 1;
background-color: white;
width: 100%;
height: 5%;
@@ -28,7 +59,6 @@ header>div{
margin: 0;
padding: 0;
}
-
nav>a{
text-decoration: none;
color: #231543;
@@ -36,13 +66,14 @@ nav>a{
nav>div {
display: inline-flex;
justify-content: space-around;
- margin-left: 40%;
- width: 35%;
+ margin-left: 35%;
+ width: 40%;
}
nav>div>a{
text-decoration: none;
color: #231543;
font-size: 30px;
+ font-style: normal;
}
nav>a.img {
@@ -53,18 +84,51 @@ nav>a>img {
width: 10%;
margin-left: 8%;
}
-div.connection-success {
- background-color: #B0F2B6;
- font-family: "Inter";
- color: black;
+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;
}
-div.connection-success>a {
- text-decoration: underline;
- background-color: #B0F2B6;
- color: black;
+
+.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;
+ background-color: #231543;
+}
+
+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>div {
diff --git a/css/reserver.css b/css/reserver.css
index cc1d7e4..42533cf 100644
--- a/css/reserver.css
+++ b/css/reserver.css
@@ -10,6 +10,15 @@
src: url('../fonts/Inter/static/Inter-Regular.ttf');
}
+h1{
+ font-size: 50px;
+ margin-top: 0;
+}
+
+h2{
+ margin: 0;
+}
+
html {
background-color: #231543;
font-family: "Inter";
diff --git a/forms/login-result.html b/forms/login-result.html
index 6af7669..046811c 100644
--- a/forms/login-result.html
+++ b/forms/login-result.html
@@ -16,8 +16,16 @@
<div>
<a href="../reserver.html">PASSAGER</a>
<a href="../conducteur.html">CONDUCTEUR</a>
- <a href="../login.html" class="login-button">LOGIN</a>
</div>
+ </nav>
+ </div>
+ <div class="back"></div>
+ <div class="textHeader">
+ <div class="test">
+ <h1>Connection</h1>
+ <h2>Connectez-vous pour pouvoir acceder aux reservations et ajouts de trajets</h2>
+ </div>
+
</div>
</header>
@@ -29,19 +37,19 @@
Vous pouvez desormais <a href="../reserver.html">aller réserver un trajet</a> OU <a href="../conducteur.html">proposer un trajet</a>
</div>
- <div class="title">
- <h1>Connectez-vous</h1>
- </div>
<div class="panel">
- <form action="../forms/login-result.html" method="post">
+ <div class="title">
+ <h1>Connectez-vous</h1>
+ </div>
+ <form action="./forms/login-result.html" method="post">
<div>
<label for="mail">Identifiant :</label>
<input type="email" id="mail"/>
- <label for="mail">Mot de passe :</label>
+ <label for="paswd">Mot de passe :</label>
<input type="password" id="psswd">
<p class="NB">*Vous devez utiliser les identifiants informatique que vous utilisé sur les ordinateurs de l’entreprise</p>
</div>
- <div>
+ <div class="button">
<button class="connect-button" type="submit">Connection</button>
</div>
diff --git a/index.html b/index.html
index e773a2d..37dc8b2 100644
--- a/index.html
+++ b/index.html
@@ -52,7 +52,7 @@
Ce nouveau services vise les employés de Klaxit,<br> afin qu'ils puissent ce rendre à leurs bureaux <br>sans avoir à prendre chacun leurs voitures.<br></p>
</div>
<div class="button">
- <a href="login.html" class="login-button">Réserver</a>
+ <a href="reserver.html" class="login-button">Réserver</a>
</div>
</div>
diff --git a/login.html b/login.html
index 12cc876..454a9a0 100644
--- a/login.html
+++ b/login.html
@@ -14,11 +14,19 @@
<nav>
<a class="img" href="index.html"><img src="./css/images/logoKlaxit_BBCD_Color.webp" alt="Logo Klaxit"></a>
<div>
+ <a href="reserver.html">PASSAGER</a>
<a href="conducteur.html">CONDUCTEUR</a>
- <a href="reserver.html">RESERVER</a>
- </div>
+ </div>
</nav>
</div>
+ <div class="back"></div>
+ <div class="textHeader">
+ <div class="test">
+ <h1>Connection</h1>
+ <h2>Connectez-vous pour pouvoir acceder aux reservations et ajouts de trajets</h2>
+ </div>
+
+ </div>
</header>
<main>
--
GitLab