contact page start

This commit is contained in:
2026-06-17 16:58:30 +02:00
parent c8f378970b
commit 593e363c52
2 changed files with 178 additions and 0 deletions
+117
View File
@@ -0,0 +1,117 @@
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
background-color:lightblue;
margin: 0;
padding-bottom: 60px;
#nav_barre {
display: flex;
width: 100%;
height: 100px;
background-color: steelblue;
padding-left: 10px;
padding-right: 10px;
}
.styled {
border: 0;
height: 70px;
width: 130px;
line-height: 2.5;
padding: 0 20px;
box-shadow: 3px 5px 3px darkslategray;
font-size: 1rem;
text-align: center;
color: white;
text-shadow: 1px 1px 1px slategray;
border-radius: 10px;
background-color: royalblue;
background-image: linear-gradient(
to top left,
rgb(0 0 0 / 0.2),
rgb(0 0 0 / 0.2) 30%,
transparent
);
}
.styled:hover {
background-color: midnightblue;
}
.styled:active {
box-shadow:
inset -2px -2px 3px rgb(255 255 255 / 0.6),
inset 2px 2px 3px rgb(0 0 0 / 0.6);
}
#buttons {
height: 100%;
width: 25%;
display: flex;
justify-content: space-around;
flex-direction: row-reverse;
margin-left: auto;
align-items: center;
}
.shadow {
box-shadow: 0px 10px 5px gray;
}
h1{
font-size: 40px;
}
.instyled{
border: 0;
height: 70px;
width: 130px;
line-height: 2.5;
padding: 0 20px;
box-shadow:
inset -2px -2px 3px rgb(255 255 255 / 0.6),
inset 2px 2px 3px rgb(0 0 0 / 0.6);
font-size: 1rem;
text-align: center;
color: lightgrey;
text-shadow: 1px 1px 1px darkslategrey;
border-radius: 10px;
background-color: darkblue;
background-image: linear-gradient(
to top left,
rgb(0 0 0 / 0.2),
rgb(0 0 0 / 0.2) 30%,
transparent
);
}
.table{
width: 700px;
height: 300px;
border-collapse: collapse;
font-size: 35px;
table-layout: auto;
border: 5px solid darkblue;
margin-left: 600px;
background-color: skyblue;
box-shadow: 2px 5px 5px darkgray;
}
thead{
background-color: lightgreen;
}
th,td{
border: 2px solid dimgray;
padding: 10px;
}
#titre_tableau{
font-size: 25px;
color: seagreen;
margin-left: 600px;
}
+61
View File
@@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="contact.css" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width", initial-scame="1"/>
<title>Contact-FleetZen</title>
<html lang="fr">
</head>
<body>
<div id="nav_barre" class="shadow">
<h1>FleetZen</h1>
<div id="buttons">
<button class="instyled">contact</button>
<a href="pages/services.html"><button class="styled">services</button></a>
<a href="../index.html"><button class="styled"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-corner-down-left-icon lucide-corner-down-left"><path d="M20 4v7a4 4 0 0 1-4 4H4"/><path d="m9 10-5 5 5 5"/></svg>retour</button></a>
</div>
</div>
<p id= titre_tableau>
<b>Les développeurs de ce site</b>
</p>
<table border=1 class="table">
<thead>
<tr>
<th>Nom</th>
<th>Job</th>
<th>Parties crées</th>
</tr>
</thead>
<tr>
<td>Mélissa</td>
<td>Stagiaire</td>
<td>Page contact</td>
</tr>
<tr>
<td>Guillaume</td>
<td>Stagiaire</td>
<td>Page services</td>
</tr>
</table>
<div>
<p>Nous contacter</p>
<form method="get" action="">
<p>
<label for="prenom">Votre prénom :</label>
<input type="text" name="prenom" id="prenom" placeholder="Ex. : Matthieu" size="30" maxlength="20">
</p>
<p>
<label for="e_mail">Votre e-mail:</label>
<input type="text" name="e-mail" id="e-mail" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
</p>
<p>
<label for="contacter">Des questions a nous poser?</label><br>
<textarea name="contacter" id="contacter"></textarea>
</p>
</form>
</div>
</body>