Profile page with b4

<!DOCTYPE html>
<html>
<head>
	<title>Profile Page with Bootstrap4 | par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="Profile Page with Bootstrap4">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<link href="style.css" rel="stylesheet">
</head>
<body>
<header></header>
<div class="main-panel">
	<div class="container">
		<div class="row">
			<div class="col-md-4 grid-margin stretch-card">
				<div class="card">
					<div class="profile-card">
						<div class="profile-header">
							<div class="cover-image">
								<img src="../../assets/imgs/forcode/bkpage3.jpg" class="img img-fluid">
							</div>
							<div class="user-image">
								<img src="../../assets/imgs/forcode/Said-Mezgani-dev.png" class="img ">
							</div>
						</div>
						<div class="profile-content">
							<div class="profile-name">Mezgani said</div>
							<div class="profile-designation">Webdeveloper</div>
							<p class="profile-description">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor.</p>
							<ul class="profile-info-list">
								<a href="" class="profile-info-list-item"><i class="fa fa-tags"></i>Menu</a>
								<a href="" class="profile-info-list-item"><i class="fa fa-tags"></i>Menu</a>
								<a href="" class="profile-info-list-item"><i class="fa fa-tags"></i>Menu</a>
								<a href="" class="profile-info-list-item"><i class="fa fa-tags"></i>Menu</a>

							</ul>
						</div>
					</div>
				</div>
			</div>
			<div class="col-md-8 grid-margin stretch-card">
				<div class="card">
					<div class="card-body">
						<p class="card-title font-weight-bold">About</p>
						<hr>
						<p class="card-description">User Information</p>
						<ul class="about">
							<li class="about-items"><i class="fa fa-user icon-sm "></i><span class="about-item-name">Name:</span><span class="about-item-detail">Mezgani</span><a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-user icon-sm "></i><span class="about-item-name">username:</span><span class="about-item-detail">Said</span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-lock icon-sm "></i><span class="about-item-name">Password:</span><span class="about-item-detail">**********</span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-user icon-sm "></i><span class="about-item-name">Bio:</span><span class="about-item-detail">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto totam, nemo quidem delectus dolores vero porro inventore perferendis minus perspiciatis.</span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-cogs icon-sm "></i><span class="about-item-name">Badges:</span><span class="about-item-detail">
							<button type="button" class="btn btn-success btn-rounded btn-icon">
								<i class="fa fa-star text-white"></i>
							</button>  
								<button type="button" class="btn btn-info btn-rounded btn-icon">
								<i class="fa fa-check text-white"></i>
							</button>
							<button type="button" class="btn btn-danger btn-rounded btn-icon">
								<i class="fa fa-check text-white"></i>
							</button>
							</span> <a href="" class="about-item-edit">View</a></li>
						</ul>
						<p class="card-description">Contact Information</p>
						<ul class="about">
							<li class="about-items"><i class="fa fa-phone icon-sm "></i><span class="about-item-name">Phone:</span><span class="about-item-detail">+9779861106179</span><a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-map-marker icon-sm "></i><span class="about-item-name">Address:</span><span class="about-item-detail">254 Av nour, N 543 CYM, Rabat, Maroc</span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-envelope icon-sm "></i><span class="about-item-name">Email:</span><span class="about-item-detail"><a href="">said.mezgani@gmail.com</a></span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-globe icon-sm "></i><span class="about-item-name">Site:</span><span class="about-item-detail"><a href="https://www.mezganisaid.com/">https://www.mezganisaid.com/</a></span> <a href="" class="about-item-edit">Edit</a></li>
						</ul>
						<p class="card-description">Basic Information</p>
						<ul class="about">
							<li class="about-items"><i class="fa fa-cake icon-sm "></i><span class="about-item-name">Birthday:</span><span class="about-item-detail">Aug 3 , 1998</span><a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-account icon-sm "></i><span class="about-item-name">Gender:</span><span class="about-item-detail">Male</span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-clipboard-account icon-sm "></i><span class="about-item-name">Profession:</span><span class="about-item-detail">Developer</span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-water icon-sm "></i><span class="about-item-name">Blood Group:</span><span class="about-item-detail">AB+</span> <a href="" class="about-item-edit">Edit</a></li>
							<li class="about-items"><i class="fa fa-human-male-female icon-sm "></i><span class="about-item-name">Relationship Status:</span><span class="about-item-detail">Single</span> <a href="" class="about-item-edit">Edit</a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<footer></footer>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>                       
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> 
</body>
</html>
body{
    background-color: #f3f3f3;
   
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #000;

}
p {
    font-size: 0.875rem;
    margin-bottom: .5rem;
    line-height: 1.3rem;
}


.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid #e7eaed;
    border-radius: 0;
}
.card .card-description {
    margin-bottom: .875rem;
    font-weight: 400;
    color: #76838f;
}






.profile-header {
	height: 150px;
	width: 100%;
	position: relative;
}

.cover-image {
	height: 150px;
	width: 100%;
	overflow: hidden;
}



.user-image {
	position: absolute;
	height: 80px;
	width: 80px;
	border-radius: 50%;
	bottom: -50%;
	left: 50%;
	/* top: 50%; */
	transform: translate(-50%, -50%);
	z-index: 5;
}

.user-image img {
	height: 80px;
	width: 80px;
	border-radius: 50%;
	top: -40px;
	border: 5px solid #777;
}

.profile-card .profile-content {
	padding: 50px 20px 30px 20px;
}



.profile-card .profile-name {
	font-size: 1.2rem;
	color: #3249b9;
	font-weight: 600;
	text-align: center;
}

.profile-card .profile-designation {
	font-size: 13px;
	color: #777;
	text-align: center;
}

.profile-card .profile-description {
	padding: 10px;
	font-size: 13px;
	color: #777;
	margin: 5px 0px;
	background-color: #F1F2F3;
	border-radius: 5px;
}

.profile-card ul.profile-info-list {
	padding: 0;
	margin: 10px 0;
	list-style: none;
	font-size: 1rem;
	font-weight: 500;
	color: #777;
}




.profile-card ul.profile-info-list a {
	text-decoration: none;
	color:inherit;
}



.profile-card a.profile-info-list-item {
	margin: 10px 0;
	padding:15px;
	background-color: #F1F2F3;
	display: block;
	 -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;

}

.profile-card a.profile-info-list-item:hover {
    background-color: #9E9E9E;
    color: white;
	 -webkit-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
	
}


.profile-card a.profile-info-list-item  i {
	padding: 10px;
	
}

ul.about {
    list-style: none;
    color: black;
	padding: 0;
}
li.about-items {
    margin: 10px;
    font-size: 0.9rem;
    /* font-family: sans-serif; */
    /* font-weight: 400; */
}



li.about-items i {
color:#607d8b;
}

span.about-item-name {
    width: 100px;
    display: inline-flex;
	    margin-left: 10px;
}


span.about-item-detail {
    display: inline-flex;
    width: calc(100% - 160px);
}
span.about-item-detail > button{
  margin-right: 10px;
}

.btn.btn-icon {
    width: 40px;
    height: 40px;
    padding: 0;
}
.btn.btn-rounded {
    border-radius: 50px;
}

a.about-item-edit {
    float: right;
}

                                    
Titre section avec une anmation style01

Titre section avec une anmation style01

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Loading style book loader

Loading style book loader

Image hover Flip Flap Style

Image hover Flip Flap Style

Image hover 04

Image hover 04

Form contact avec validation en css

Form contact avec validation en css

Form Création de compte

Form Création de compte

Checkbox et boutons radios personnalisés en CSS

Checkbox et boutons radios personnalisés en CSS

Calculatrice style01

Calculatrice style01

Arrows Defense Game

Arrows Defense Game

Ajouter une pagination1

Ajouter une pagination1

Add Remove dynamic rows with dynamic ID of input in HTML table

Add Remove dynamic rows with dynamic ID of input in HTML table