isa44.74
/
organizee-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

css signup

This commit is contained in:
Blandine Bajard 2022-01-23 12:00:11 +01:00
parent 7102d73f89
commit 79a6165196
2 changed files with 58 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/app/pages/page-signup/page-signup.component.html
View File

@ -1,12 +1,12 @@
<app-header></app-header>
<div class="signup-form text-center">
<h1>Inscrivez-vous !</h1>
<main class="form-signup">
<form (ngSubmit)="onSubmit()" [formGroup]="signupForm">
<h1>Inscrivez-vous !</h1>
<div class="form-floating">
<input type="color" class="form-control" id="floatingInputcouleur" placeholder="" name="couleur"
formControlName="couleurFc" >
<label for="floatingInputcouleur">Choisissez une couleur !</label>
formControlName="couleurFc">
</div>
<div class="form-floating">
<input
@ -25,7 +25,7 @@
!signupForm.controls['lastNameFc'].valid
}"
/>
<label for="floatingInputlastName">Nom</label>
<label for="floatingInputlastName">VOTRE NOM</label>
</div>
<div class="form-floating">
<input
@ -44,7 +44,7 @@
!signupForm.controls['firstNameFc'].valid
}"
/>
<label for="floatingInputfirstName">Prénom</label>
<label for="floatingInputfirstName">VOTRE PRENOM</label>
</div>
<div class="form-floating">
<input
@ -63,13 +63,13 @@
!signupForm.controls['dateNaissanceFc'].valid
}"
/>
<label for="floatingInputfirstName">Date de naissance</label>
<label for="floatingInputdateNaissance">VOTRE DATE DE NAISSANCE</label>
</div>
<div class="form-floating">
<input
type="email"
class="form-control"
id="floatingInput"
id="floatingInputemail"
placeholder=""
name="email"
formControlName="emailFc"
@ -82,7 +82,7 @@
!signupForm.controls['emailFc'].valid
}"
/>
<label for="floatingInput">Adresse email</label>
<label for="floatingInputemail">VOTRE EMAIL</label>
</div>
<div class="form-floating">
<input
@ -101,11 +101,11 @@
!signupForm.controls['passwordFc'].valid
}"
/>
<label for="floatingPassword">Mot de passe</label>
<label for="floatingPassword">MOT DE PASSE</label>
</div>
<div class="form-floating">
<input
type="passwordConfirm"
type="password"
class="form-control"
id="floatingpasswordConfirm"
placeholder=""
@ -120,15 +120,15 @@
!signupForm.controls['passwordConfirmFc'].valid
}"
/>
<label for="floatingPassword">Confirmer mot de passe</label>
<label for="floatingPasswordConfirm">CONFIRMEZ VOTRE MOT DE PASSE</label>
</div>
<button
class="w-100 btn btn-lg btn-success"
class="w-100 btn btn-lg btn-outline-success"
type="submit"
[disabled]="signupForm.invalid"
>
Je m'inscris !
CREER MON COMPTE
</button>
</form>
</main>

47
src/app/pages/page-signup/page-signup.component.scss
View File

@ -8,7 +8,13 @@
width: 100%;
max-width: 330px;
padding: 15px;
margin: auto;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
border: solid 1px;
border-radius: 10px;
background-color: #fcddec;
border-color: #ef5da8;
}
.form-signup .checkbox {
@ -20,7 +26,37 @@
}
.form-signup input[type="email"] {
margin-bottom: -1px;
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="color"] {
border: none;
margin-bottom: 10px;
margin-top: -70px;
margin-left: 100px;
border-radius: 50%;
width: 100px;
height: 100px;
}
.form-signup input[type="color"]::-webkit-color-swatch {
border: none;
margin-top: -15px;
border-radius: 80%;
width: 80px;
height: 80px;
}
.form-signup input[type="text"] {
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signup input[type="date"] {
margin-bottom: 10px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
@ -30,3 +66,10 @@
border-top-left-radius: 0;
border-top-right-radius: 0;
}
.btn-outline-success {
margin-top: 10px;
background-color: #ffff;
color: #ef5da8 !important;
border-color: #ef5da8 !important;
}