Passage en flex
This commit is contained in:
parent
53c49e129e
commit
d05403f641
10
index.php
10
index.php
|
@ -95,9 +95,17 @@
|
|||
echo "<input class=\"renseignements\" type=\"text\" id=\"prenom\" name=\"prenom\" required/>";
|
||||
echo "</div>";
|
||||
echo "<div class=\"formline\">";
|
||||
echo "<label class=\"labels\" for=\"adresse\">Adresse postale</label>";
|
||||
echo "<label class=\"labels\" for=\"adresse\">Adresse</label>";
|
||||
echo "<input class=\"renseignements\" type=\"text\" id=\"adresse\" name=\"adresse\" required/>";
|
||||
echo "</div>";
|
||||
echo "<div class=\"formline\">";
|
||||
echo "<label class=\"labels\" for=\"codepostal\">Code postal</label>";
|
||||
echo "<input class=\"renseignements\" type=\"number\" id=\"codepostal\" name=\"codepostal\" required/>";
|
||||
echo "</div>";
|
||||
echo "<div class=\"formline\">";
|
||||
echo "<label class=\"labels\" for=\"ville\">Ville</label>";
|
||||
echo "<input class=\"renseignements\" type=\"text\" id=\"ville\" name=\"ville\" required/>";
|
||||
echo "</div>";
|
||||
echo "<div class=\"formline\">";
|
||||
echo "<label class=\"labels\" for=\"mail\">Courriel<b>actuel</b></label>";
|
||||
echo "<input class=\"renseignements\" type=\"email\" id=\"mail\" name=\"mail\" required/>";
|
||||
|
|
42
styles.css
42
styles.css
|
@ -610,8 +610,24 @@ h1,h2,h3,h4,h5,h6 {
|
|||
|
||||
.formbox {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
align-content: flex-start;
|
||||
flex-direction: column;
|
||||
text-justify: none;
|
||||
}
|
||||
|
||||
.formline {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.labels {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
.renseignements, .mode, .captcha_inputs, .mode_radio {
|
||||
flex-basis: 50%;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.renseignements {
|
||||
|
@ -621,6 +637,14 @@ h1,h2,h3,h4,h5,h6 {
|
|||
color: black;
|
||||
}
|
||||
|
||||
.captcha_inputs {
|
||||
all: revert;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.renseignements:focus {
|
||||
border-bottom: 2px solid var(--a-lec_blue);
|
||||
border-radius: 3px;
|
||||
|
@ -634,6 +658,7 @@ h1,h2,h3,h4,h5,h6 {
|
|||
font-weight: bold;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.validation:focus {
|
||||
|
@ -644,13 +669,6 @@ h1,h2,h3,h4,h5,h6 {
|
|||
box-shadow: none;
|
||||
}
|
||||
|
||||
.inputs img {
|
||||
all: unset;
|
||||
margin-top: 20px;
|
||||
margin-left: 10px;
|
||||
width: 30vh;
|
||||
}
|
||||
|
||||
input[type=radio] {
|
||||
all: revert;
|
||||
}
|
||||
|
@ -675,12 +693,6 @@ input[type=checkbox] {
|
|||
.mode_radio span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
form {
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
Loading…
Reference in New Issue