chenouna/SITE_WEB
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

TRAVAUX SUR LA PAGE RESERVATION

Browse Source
This commit is contained in:
Khalid CHENOUNA
2024-01-17 22:14:52 +01:00
parent acfc5b0679
commit 11fb06308e
2 changed files with 218 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
reservation.css Normal file
View File

@@ -0,0 +1,136 @@
body {
font-family: 'Arial', sans-serif;
background-color: #ffffff;
color: #000;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
header {
position: fixed;
background-color: #000;
top: 0;
left: -50;
width: 100%;
padding: 20px 100px;
display: flex;
justify-content: space-between;
align-items: center;
z-index: 99;
}
.navigation a {
position: relative;
font-size: 1.1em;
color: #fff;
text-decoration: none;
font-weight: 500;
margin-left: 40px;
}
.navigation a::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 3px;
background: #fff;
border-radius: 5px;
transform-origin: right;
transform: scaleX(0);
transition: transform .5s;
}
.navigation a:hover::after {
transform-origin: left;
transform: scaleX(1);
}
.navigation .btnLogin-popup {
width: 130px;
height: 50px;
background: transparent;
border: 2px solid #fff;
outline: none;
border-radius: 6px;
cursor: pointer;
font-size: 1.1em;
color: #fff;
font-weight: 500;
margin-left: 40px;
transition: .5s;
}
.navigation .btnLogin-popup:hover {
background: #fff;
color: #162938;
}
h1, h2 {
color: #ffffff;
}
form {
width: 70%;
max-width: 600px;
}
div {
margin-bottom: 20px;
width: 100%;
}
label {
display: block;
margin-bottom: 5px;
color: #000;
}
select, input, textarea {
width: 100%;
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
}
button {
background-color: #000;
color: #fff;
padding: 10px 20px;
border: none;
cursor: pointer;
}
button:hover {
background-color: #333;
}
ul {
list-style: none;
padding: 0;
}
.date-container {
display: flex;
justify-content: space-between;
width: 50%; /* Ajuste selon tes besoins */
margin-top: 40px;
}
.date-container li {
width: 48%; /* Ajuste selon tes besoins */
}
.date-container label.date-label {
vertical-align: top;
}

82
reservation.html Normal file
View File

@@ -0,0 +1,82 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Réservation d'Équipements</title>
<link rel="stylesheet" href="reservation.css">
</head>
<body>
<header>
<h2 class="logo">Logo</h2>
<nav class="navigation">
<a href ="#">Accueil</a>
<a href ="#">Réservation</a>
<a href ="#">À propos</a>
<a href ="#">Contact</a>
<a href ="#">FAQ</a>
<button class ="btnLogin-popup">Connexion</button>
</nav>
</header>
<h1>Réservation d'Équipements</h1>
<div>
<label for="equipmentType">Type d'Équipement :</label>
<select id="equipmentType">
<option value="terrestre">Équipement Terrestre</option>
<option value="maritime">Équipement Maritime</option>
<option value="aerien">Équipement Aérien</option>
</select>
</div>
<div class="date-container">
<li>
<label class="date-label" for="startDate">Date de Début :</label>
<input type="date" id="startDate" required>
</li>
<li>
<label class="date-label" for="endDate">Date de Fin :</label>
<input type="date" id="endDate" required>
</li>
</div>
<div>
<h2>Équipements Disponibles :</h2>
<ul id="equipmentList"></ul>
</div>
<div>
<label for="fullName">Nom Complet :</label>
<input type="text" id="fullName" required>
</div>
<div>
<label for="phone">Numéro de Téléphone :</label>
<input type="tel" id="phone" required>
</div>
<div>
<label for="email">Adresse E-mail :</label>
<input type="email" id="email" required>
</div>
<div>
<h2>Récapitulatif de la Réservation :</h2>
<p id="reservationDetails"></p>
</div>
<div>
<button onclick="confirmReservation()">Confirmer la Réservation</button>
</div>
<script></script>
function confirmReservation() {
}
</script>
</body>
</html>