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

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

@ -8,7 +8,13 @@
width: 100%; width: 100%;
max-width: 330px; max-width: 330px;
padding: 15px; 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 { .form-signup .checkbox {
@ -20,7 +26,37 @@
} }
.form-signup input[type="email"] { .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-right-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
} }
@ -30,3 +66,10 @@
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
} }
.btn-outline-success {
margin-top: 10px;
background-color: #ffff;
color: #ef5da8 !important;
border-color: #ef5da8 !important;
}