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

                                    
Vers le haut

Vers le haut

Timeline style04

Timeline style04

Table responsive avec css native

Table responsive avec css native

Radio Input Image Checkbox 01

Radio Input Image Checkbox 01

Planète animée style01

Planète animée style01

Organization Chart

Organization Chart

Input range slider HTML style01

Input range slider HTML style01

Header with background animate 01

Header with background animate 01

Form login et créer un compte style01

Form login et créer un compte style01

Form login 02

Form login 02

Create icon animate with svg

Create icon animate with svg

Convertir une div en image

Convertir une div en image