<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0
}
body {
background-color: #000
}
.card {
width: 350px;
background-color: #efefef;
border: none;
cursor: pointer;
transition: all 0.5s
}
.image img {
transition: all 0.5s
}
.card:hover .image img {
transform: scale(1.5)
}
.btn {
height: 140px;
width: 140px;
border-radius: 50%
}
.name {
font-size: 22px;
font-weight: bold
}
.idd {
font-size: 14px;
font-weight: 600
}
.idd1 {
font-size: 12px
}
.number {
font-size: 22px;
font-weight: bold
}
.follow {
font-size: 12px;
font-weight: 500;
color: #444444
}
.btn1 {
height: 40px;
width: 150px;
border: none;
background-color: #000;
color: #aeaeae;
font-size: 15px
}
.text span {
font-size: 13px;
color: #545454;
font-weight: 500
}
.icons i {
font-size: 19px
}
hr .new1 {
border: 1px solid
}
.join {
font-size: 14px;
color: #a0a0a0;
font-weight: bold
}
.date {
background-color: #ccc
}
</style>
</head>
<body>
<div class="container mt-4 mb-4 p-3 d-flex justify-content-center">
<div class="card p-4">
<div class=" image d-flex flex-column justify-content-center align-items-center"> <button
class="btn btn-secondary"> <img src="http://cdn.onlinewebfonts.com/svg/img_542942.png" height="100"
width="100" /></button>
<div class=" d-flex mt-2"> <button class="btn1 btn-dark">Edit Profile</button> </div>
<section class="content">
<div class="container-fluid">
<div class="row">
<div class="col-2"></div>
<div class="col-8">
<!-- /.card-header -->
<div class="card" style="background-color: rgb(250, 250, 250);">
<div class="card-header">
<div class="row">
<div class="col-sm-6">
<div class="row">
<div class="col-sm-2"><i class="nav-icon fas fa-user-tie"
style="width:50px; font-size:36px ; margin-right: 5px;margin-left: 15px;">
</i></div>
<div class="col-sm-10">
<h4>Details Commercial</h4>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="row">
<div class="col-sm-10"></div>
<div class="col-sm-2">
<a href="showCommercial.html"> <i class="fas fa-window-close"
style="font-size:24px; color: #000203;margin-left: 20px;"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-header -->
<!-- form start -->
<form id=" formDetailCommercial" onsubmit="return false">
<div class="card-body">
<div class="card" style=" border:2px rgb(70, 70, 70);">
<div class="row">
<div class="col-sm-6">
<div style="margin-left: 10px; margin-top: 5px;">
<div>
<label class="labelColor">
CIN
</label>
</div>
<div class="row">
<div class="iconColor"> <i class="fas fa-address-card"
style="margin-right: 5px; margin-left: 10px ;"></i>
</div>
<div>
<p id="labelCin" class="paragraph"></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div>
<div style=" margin-top: 5px;">
<label class="labelColor" class="paragraph">
Nom&Prenom
</label>
</div>
<div class="row">
<div class="iconColor"> <i class="fas fa-user-alt"
style="margin-right: 5px; margin-left: 10px ;"></i>
</div>
<div>
<p id="labelNomPrenom" class="paragraph"></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div style="margin-left: 10px;">
<div>
<label class="labelColor">
Departement
</label>
</div>
<div class="row">
<div class="iconColor"> <i class="fas fa-building"
style="margin-right: 5px; margin-left: 10px ;"></i>
</div>
<div>
<p id="labeldepartement" class="paragraph"></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div>
<label class="labelColor">
Zone
</label>
</div>
<div class="row">
<div class="iconColor"> <i class="fas fa-map-marker-alt"
style="margin-right: 5px; margin-left: 10px ;"></i>
</div>
<div>
<p id="labelzone" class="paragraph"></p>
</div>
</div>
</div>
<div class="col-sm-6">
<!-- select -->
<div style="margin-left: 10px;">
<label class="labelColor">Fonction</label>
<p id="labelfonction" class="paragraph"> </p>
</div>
</div>
<div class="col-sm-6">
<div>
<label class="labelColor">Statue</label>
<p id="labelstatue" class="paragraph"></p>
</div>
</div>
</div>
</div>
<div class="card" style=" border:2px rgb(187, 173, 173);">
<div class="row" style="margin-top: 8px; margin-bottom: 5px;">
<div class="col-sm-6">
<div style="margin-left: 10px;">
<div>
<label class="labelColor">Email</label>
</div>
<div class="row">
<div class="iconColor">
<i class="fas fa-envelope"
style="margin-right: 5px; margin-left: 10px ;"></i>
</div>
<div>
<p id="labelEmail" class="paragraph"></p>
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<label class="labelColor">NumTelephone</label>
<div class="row">
<div class="iconColor">
<i class="fas fa fa-mobile"
style="margin-right: 5px; margin-left: 10px ;"></i>
</div>
<div>
<p id="labelNumTelephone" class="paragraph"></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
</form>
</div>
<!-- /.card-body -->
<!-- /.card -->
</div>
</div>
<!-- /.row -->
</div><!-- /.container-fluid -->
</section>
</div>
</div>
</div>
</body>
</html>