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

                                    
Timeline style03

Timeline style03

SwiperJS style01

SwiperJS style01

Input range slider HTML style05

Input range slider HTML style05

Input range slider HTML style02

Input range slider HTML style02

Image hover 06

Image hover 06

Google Style Login

Google Style Login

Form login et créer un compte style01

Form login et créer un compte style01

Footer Responsive avec Bootstrap4

Footer Responsive avec Bootstrap4

Bootstrap4 datepicker

Bootstrap4 datepicker

Bootstrap modal avec un formulaire newsletter

Bootstrap modal avec un formulaire newsletter

Asidebar Bootstrap4 style01

Asidebar Bootstrap4 style01

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

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