contact page start
This commit is contained in:
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user