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