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;
}

                                    
Vidéo background en html5 style01

Vidéo background en html5 style01

Timeline style04

Timeline style04

Table bootstrap with Datatable

Table bootstrap with Datatable

Pure CSS Percentage Circle

Pure CSS Percentage Circle

Profile page with b4

Profile page with b4

Pie Charts

Pie Charts

Page construction avec compte à rebours style01

Page construction avec compte à rebours style01

Image hover 07

Image hover 07

Form login with background image changed style01

Form login with background image changed style01

Dropdown right aligned B4

Dropdown right aligned B4

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS

Background div gradient

Background div gradient