full working example of your profile dashboard with:
-
index.html -
assets/css/style.css -
assets/image/logo.png(You will need to use your own image)
1. Folder Structure:
project-folder/ │ ├── index.html ├── assets/ │ ├── css/ │ │ └── style.css │ └── image/ │ └── logo.png
2. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Profile with dashboard</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://netdna.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
<link href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<div class="content">
<div class="container">
<!-- Profile Header -->
<div class="row">
<div class="col-sm-12">
<div class="profile-user-box card-box bg-custom">
<div class="row">
<div class="col-sm-6">
<span class="float-left mr-3">
<img src="assets/image/logo.png" alt="Profile" class="thumb-lg rounded-circle">
</span>
<div class="media-body text-white">
<h4 class="mt-1 mb-1 font-18">Soeng Souy</h4>
<p class="font-13 text-light">Web Design</p>
<p class="text-light mb-0">Combodia, Phnom Penh</p>
</div>
</div>
<div class="col-sm-6 text-right">
<button class="btn btn-light"><i class="fas fa-user-cog mr-1"></i> Edit Profile</button>
</div>
</div>
</div>
</div>
</div>
<!-- Info Section -->
<div class="row">
<div class="col-xl-4">
<div class="card-box">
<h4 class="header-title">Personal Information</h4>
<p class="text-muted">Hye, I’m Soeng Souy... [Your description here]</p>
<hr>
<p><strong>Full Name:</strong> Soeng Souy</p>
<p><strong>Mobile:</strong> (+885) 966686372</p>
<p><strong>Email:</strong> soengsouy@gmail.com</p>
<p><strong>Location:</strong> KH</p>
<p><strong>Languages:</strong> English, German, Spanish, French</p>
<ul class="social-links list-inline mt-3">
<li class="list-inline-item"><a href="#"><i class="fab fa-facebook"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a href="#"><i class="fab fa-skype"></i></a></li>
</ul>
</div>
<!-- Messages -->
<div class="card-box ribbon-box">
<div class="ribbon ribbon-primary">Messages</div>
<div class="inbox-widget mt-3">
<!-- Repeated Message -->
<a href="#">
<div class="inbox-item">
<div class="inbox-item-img"><img src="assets/image/logo.png" class="rounded-circle" alt=""></div>
<p class="inbox-item-author">Go log</p>
<p class="inbox-item-text">I've finished it!</p>
<p class="inbox-item-date">
<button class="btn btn-sm btn-success">Reply</button>
</p>
</div>
</a>
<!-- Add more messages as needed -->
</div>
</div>
</div>
<!-- Stats and Experience -->
<div class="col-xl-8">
<div class="row">
<div class="col-sm-4">
<div class="card-box tilebox-one">
<i class="fas fa-layer-group float-right text-muted"></i>
<h6>Orders</h6>
<h2>1,587</h2>
<span class="badge badge-success">+11%</span>
</div>
</div>
<div class="col-sm-4">
<div class="card-box tilebox-one">
<i class="fab fa-paypal float-right text-muted"></i>
<h6>Revenue</h6>
<h2>$46,782</h2>
<span class="badge badge-danger">-29%</span>
</div>
</div>
<div class="col-sm-4">
<div class="card-box tilebox-one">
<i class="fas fa-rocket float-right text-muted"></i>
<h6>Product Sold</h6>
<h2>1,890</h2>
<span class="badge badge-primary">+89%</span>
</div>
</div>
</div>
<!-- Experience -->
<div class="card-box">
<h4 class="header-title">Experience</h4>
<div>
<h5 class="text-custom">Lead Designer / Developer</h5>
<p class="mb-1">soengsouy.com</p>
<p><b>2010–2015</b></p>
<p>Lorem Ipsum is simply dummy text...</p>
<hr>
<h5 class="text-custom">Senior Graphic Designer</h5>
<p class="mb-1">soengsouy.com</p>
<p><b>2007–2009</b></p>
<p>Lorem Ipsum is simply dummy text...</p>
</div>
</div>
<!-- Projects -->
<div class="card-box">
<h4 class="header-title">My Projects</h4>
<div class="table-responsive">
<table class="table table-hover mb-0">
<thead>
<tr>
<th>#</th>
<th>Project Name</th>
<th>Start Date</th>
<th>Due Date</th>
<th>Status</th>
<th>Assign</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Kh Admin</td>
<td>01/01/2015</td>
<td>07/05/2015</td>
<td><span class="badge badge-info">Work in Progress</span></td>
<td>Coderthemes</td>
</tr>
<tr>
<td>2</td>
<td>Kh Admin Frontend</td>
<td>01/01/2015</td>
<td>07/05/2015</td>
<td><span class="badge badge-success">Pending</span></td>
<td>Coderthemes</td>
</tr>
<!-- More rows -->
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- JS Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
3. assets/css/style.css
body {
background-color: #f4f6f9;
font-family: 'Segoe UI', sans-serif;
}
.card-box {
background: #fff;
padding: 20px;
margin-bottom: 20px;
border-radius: 8px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.05);
}
.bg-custom {
background-color: #4A90E2;
padding: 20px;
color: #fff;
border-radius: 8px;
}
.thumb-lg {
height: 75px;
width: 75px;
object-fit: cover;
}
.header-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 15px;
}
.tilebox-one {
padding: 15px;
border-radius: 8px;
border: 1px solid #e3e6ef;
}
.ribbon-box {
position: relative;
padding-top: 25px;
}
.ribbon {
position: absolute;
top: 0;
left: -5px;
background: #4A90E2;
color: white;
padding: 5px 10px;
font-size: 13px;
font-weight: bold;
border-radius: 0 0 5px 5px;
}
.inbox-widget a {
text-decoration: none;
}
.inbox-item {
display: flex;
align-items: center;
padding: 10px 0;
border-bottom: 1px solid #eee;
}
.inbox-item-img img {
width: 40px;
height: 40px;
margin-right: 15px;
}
.social-links i {
font-size: 18px;
color: #4A90E2;
transition: color 0.3s;
}
.social-links i:hover {
color: #2c3e50;
}
4. assets/image/logo.png
Place any image with the filename logo.png inside the assets/image/ directory. You can use any square image (preferably 75x75px or larger).
