Ajout des couleurs et un peu css

This commit is contained in:
AlineRinquin 2022-02-17 10:14:20 +01:00
parent 0244cb29ea
commit 49049bc255
8 changed files with 60 additions and 16 deletions

View file

@ -11,18 +11,32 @@
</button>
</div>
<div class="row align-items-center">
<div class="col-md-6 offset-md-3">
<p class="fiche-contact" >
{{ personne.couleur }}</p>
<p class="fiche-contact" >{{ personne.prenom }} {{ personne.nom }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
{{ personne.telephone }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
{{ personne.email }}</p>
<p class="fiche-contact" ><img style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
{{ personne.dateNaissance }}</p>
<p class="fiche-contact" >
{{ personne.adresse }}</p>
<div class="col-md-12">
<div class="row d-flex justify-content-center flex-row">
<div class= "couleur col-4" [style.background-color]="personne.couleur"></div>
<span class="fiche-contact col-7" >{{ personne.prenom }} {{ personne.nom }} </span>
</div>
<div class="row d-flex justify-content-center flex-row">
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/phone.png"/>
<span class="fiche-contact col-7" >{{ personne.telephone }}</span>
</div>
<div class="row d-flex justify-content-center flex-row">
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/logo-gmail.png"/>
<span class="fiche-contact col-7" >{{ personne.email }}</span>
</div>
<div class="row d-flex justify-content-center flex-row">
<img class= "col-4" style="max-height: 12% ; max-width: 12%" src="../../../assets/images/gateau.png"/>
<span class="fiche-contact col-7" >{{ personne.dateNaissance }}</span>
</div>
<div class="row d-flex justify-content-center flex-row">
<p class="fiche-contact col-7" >{{ personne.adresse }}</p>
</div>
</div>
</div>

View file

@ -7,6 +7,26 @@
margin: auto;
}
.couleur{
border: none;
margin-top: -15px;
border-radius: 80%;
width: 60px;
height: 60px;
flex-direction: row;
}
.info{
display:flex;
justify-content: center;
}
.fiche-contact{
display:flex;
justify-content: center;
flex-direction: row;
}
.container {
border: 1px solid 8c2e9b;
padding: 10px;