form letter count added with some JavaScript, small corrections
This commit is contained in:
+10
@@ -0,0 +1,10 @@
|
||||
const zoneMessage = document.getElementById("contacter");
|
||||
const compteur = document.getElementById("restant");
|
||||
|
||||
const MAX = 500;
|
||||
|
||||
zoneMessage.addEventListener("input", function () {
|
||||
const dejaTape = zoneMessage.value.length;
|
||||
compteur.textContent = MAX - dejaTape;
|
||||
compteur.style.color = MAX - dejaTape < 50 ? "red" : "black";
|
||||
});
|
||||
+35
-25
@@ -5,9 +5,10 @@
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color:lightblue;
|
||||
background-color: lightblue;
|
||||
margin: 0;
|
||||
padding-bottom: 60px;
|
||||
}
|
||||
|
||||
#nav_barre {
|
||||
display: flex;
|
||||
@@ -19,10 +20,16 @@ body {
|
||||
}
|
||||
|
||||
.styled {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
line-height: normal;
|
||||
border: 0;
|
||||
height: 70px;
|
||||
width: 130px;
|
||||
line-height: 2.5;
|
||||
gap: 6px;
|
||||
line-height: normal;
|
||||
padding: 0 20px;
|
||||
box-shadow: 3px 5px 3px darkslategray;
|
||||
font-size: 1rem;
|
||||
@@ -45,7 +52,7 @@ body {
|
||||
|
||||
.styled:active {
|
||||
box-shadow:
|
||||
inset -2px -2px 3px rgb(255 255 255 / 0.6),
|
||||
inset -2px -2px 3px rgb(255 255 255 / 0.6),
|
||||
inset 2px 2px 3px rgb(0 0 0 / 0.6);
|
||||
}
|
||||
|
||||
@@ -61,18 +68,18 @@ body {
|
||||
.shadow {
|
||||
box-shadow: 0px 10px 5px gray;
|
||||
}
|
||||
h1{
|
||||
h1 {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.instyled{
|
||||
.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(255 255 255 / 0.6),
|
||||
inset 2px 2px 3px rgb(0 0 0 / 0.6);
|
||||
font-size: 1rem;
|
||||
text-align: center;
|
||||
@@ -85,54 +92,57 @@ h1{
|
||||
rgb(0 0 0 / 0.2),
|
||||
rgb(0 0 0 / 0.2) 30%,
|
||||
transparent
|
||||
);
|
||||
);
|
||||
}
|
||||
|
||||
.table{
|
||||
|
||||
.table {
|
||||
width: 700px;
|
||||
height: 300px;
|
||||
border-collapse: collapse;
|
||||
font-size: 35px;
|
||||
table-layout: auto;
|
||||
border: 5px solid darkblue;
|
||||
margin-left: 600px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: skyblue;
|
||||
box-shadow: 2px 5px 5px darkgray;
|
||||
}
|
||||
|
||||
thead{
|
||||
background-color:rgb(8, 105, 85);
|
||||
thead {
|
||||
background-color: rgb(8, 105, 85);
|
||||
color: lightblue;
|
||||
|
||||
}
|
||||
th,td{
|
||||
th,
|
||||
td {
|
||||
border: 2px solid dimgray;
|
||||
padding: 10px;
|
||||
|
||||
}
|
||||
#titre_tableau{
|
||||
#titre_tableau {
|
||||
font-size: 25px;
|
||||
color: seagreen;
|
||||
margin-left: 600px;
|
||||
padding-left: 200px;
|
||||
}
|
||||
|
||||
.form{
|
||||
.form {
|
||||
display: flex;
|
||||
width: 35%;
|
||||
height: 300px;
|
||||
width: 570px;
|
||||
height: 320px;
|
||||
border: 3px solid green;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
margin-left: 620px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-top: 100px;
|
||||
background-color: rgb(159, 199, 159);
|
||||
box-shadow: 2px 5px 3px;
|
||||
|
||||
}
|
||||
|
||||
textarea{
|
||||
resize:initial;
|
||||
textarea {
|
||||
resize: none;
|
||||
width: 527px;
|
||||
height:80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
+10
-6
@@ -12,11 +12,12 @@
|
||||
<h1>FleetZen</h1>
|
||||
<div id="buttons">
|
||||
<button class="instyled">contact</button>
|
||||
<a href="pages/services.html"><button class="styled">services</button></a>
|
||||
<a href="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>
|
||||
@@ -49,16 +50,19 @@
|
||||
</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>
|
||||
<input type="e_mail" name="email" id="email" placeholder="Ex. : stage2@echoes.solutions" size="50" maxlength="40">
|
||||
</p>
|
||||
<div>
|
||||
<label for="contacter">Des questions a nous poser?</label><br>
|
||||
<textarea name="contacter" id="contacter" rows="6" cols="40" maxlength="500"></textarea>
|
||||
<p class=small>Il vous reste <span id="restant">500</span> caractères.</p>
|
||||
</div>
|
||||
<p>
|
||||
<button>Envoyer</button>
|
||||
</p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
<script src="../contact.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user