profil design alpha

src/app/components/profil/profil.component.html

@@ -6,49 +6,84 @@
 <div> Email: {{ (user | async)?.email }} </div>
 <div> Statut: {{ (user | async)?.displayName }} </div>
 
-<div *ngIf="(user | async)?.displayName === 'Parrain'" class="alert alert-danger">
-
-  <div>
-    <p>Salut {{localUser.firstname}} {{localUser.familyname}} {{localUser.uid}} </p>
-    <ul>
-      <li>status : {{localUser.status}}</li>
-      <li>email : {{localUser.email}}</li>
-      <li>emailVerified : {{localUser.emailVerified}}</li>
-      <li>password : {{localUser.password}}</li>
-      <li>familyname : {{localUser.familyname}}</li>
-      <li>firstname : {{localUser.firstname}}</li>
-      <li>sex : {{localUser.sex}}</li>
-      <li>birthday : {{localUser.birthday}}</li>
-      <li>telephone : {{localUser.telephone}}</li>
-      <li>idCard : {{localUser.idCard}}</li>
-      <li>secretCode : {{localUser.secretCode}}</li>
-    </ul>
-  </div>
 
-  <div *ngFor="let user of opCommData | async">
-    User is {{user.firstname}}
-  </div>
-  <button (click)="goToCarte()">Cartes</button>
-</div>
-<div *ngIf="(user | async)?.displayName === 'Commercant'" class="alert alert-danger">
-
-  <div>
-    <p>Salut {{localUser.commercialName}} {{localUser.uid}} </p>
-    <ul>
-      <li>raisonSociale : {{localUser.raisonSociale}}</li>
-      <li>siret : {{localUser.siret}}</li>
-      <li>email : {{localUser.email}}</li>
-      <li>emailVerified : {{localUser.emailVerified}}</li>
-      <li>password : {{localUser.password}}</li>
-      <li>dateInscription : {{localUser.dateInscription}}</li>
-      <li>status : {{localUser.status}}</li>
-    </ul>
-  </div>
+<!--Grid row-->
+
+
+  <!--Grid column-->
+  <div class="col-md-12" style="padding-right: 1%; padding-left: 1%;">
+
+    <!--Card-->
+    <div class="card testimonial-card">
+
+      <!--Bacground color-->
+      <div class="card-up aqua-gradient">
+      </div>
+
+      <!--Avatar-->
+      <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.jpg" class="rounded-circle img-responsive">
+      </div>
+
+      <div class="card-body">
+        <!--Name-->
+        <h4 class="card-title"><p>Salut {{localUser.firstname}} {{localUser.familyname}} {{localUser.uid}} </p></h4>
+        <hr>
+        <div *ngIf="(user | async)?.displayName === 'Parrain'" >
+
+          <div>
+            <ul>
+              <p class="text-left "><label class="text-uppercase">status </label>: {{localUser.status}}</p>
+              <p class="text-left"><label class="text-uppercase">email </label>: {{localUser.email}}</p>
+              <p class="text-left"><label class="text-uppercase">emailVerified </label>: {{localUser.emailVerified}}</p>
+              <p class="text-left"><label class="text-uppercase">password </label> : {{localUser.password}}</p>
+              <p class="text-left"><label class="text-uppercase">familyname </label>: {{localUser.familyname}}</p>
+              <p class="text-left"><label class="text-uppercase">firstname : </label> {{localUser.firstname}}</p>
+              <p class="text-left"><label class="text-uppercase">sex </label> : {{localUser.sex}}</p>
+              <p class="text-left"><label class="text-uppercase">birthday </label> : {{localUser.birthday}}</p>
+              <p class="text-left"><label class="text-uppercase"> telephone :</label> {{localUser.telephone}}</p>
+              <p class="text-left"><label class="text-uppercase"> idCard </label>: {{localUser.idCard}}</p>
+              <p class="text-left"><label class="text-uppercase">secretCode </label> : {{localUser.secretCode}}</p>
+            </ul>
+          </div>
+
+          <div *ngFor="let user of opCommData | async">
+            User is {{user.firstname}}
+          </div>
+          <button (click)="goToCarte()">Cartes</button>
+        </div>
+        <div *ngIf="(user | async)?.displayName === 'Commercant'" class="alert alert-danger">
+
+          <div>
+            <h4 class="card-title"><p>Salut {{localUser.commercialName}} {{localUser.uid}} </p></h4>
+            <ul>
+              <li class="text-left"><label class="text-uppercase"> raisonSociale</label> : {{localUser.raisonSociale}}</li>
+              <li class="text-left"><label class="text-uppercase"> siret </label>: {{localUser.siret}}</li>
+              <li class="text-left"><label class="text-uppercase">email </label> : {{localUser.email}}</li>
+              <li class="text-left"><label class="text-uppercase"> emailVerified </label> : {{localUser.emailVerified}}</li>
+              <li class="text-left"><label class="text-uppercase"> password </label> : {{localUser.password}}</li>
+              <li class="text-left"><label class="text-uppercase">dateInscription </label>: {{localUser.dateInscription}}</li>
+              <li class="text-left"><label class="text-uppercase">status </label>: {{localUser.status}}</li>
+            </ul>
+          </div>
+
+          <div *ngFor="let user of profileData | async">
+            User is {{user.commercialName}}
+          </div>
+          <button (click)="goToOpCom()">Opération Commerciales</button>
+        </div>
+        <button (click)="logout()">Logout</button>
+
+
+        <!--Quotation-->
+        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
+      </div>
+
+    </div>
+    <!--/.Card-->
 
-  <div *ngFor="let user of profileData | async">
-    User is {{user.commercialName}}
   </div>
-  <button (click)="goToOpCom()">Opération Commerciales</button>
-</div>
-<button (click)="logout()">Logout</button>
+  <!--Grid column-->
+
+
+<!--Grid row-->