The user profile page is the most direct way for people to know each other, and it is also a symbol of personality. Having an excellent and eye-catching user profile makes you stand out, especially if you want to expand your brand. This profile page is mostly made for user to check their Billing Addresses and previous purchases. page is made using html bootstrap and minor css. Profile page background is cream white it is slight clone to daraz(shopping website) user profile.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>Profile</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="style.css">
</head>
<body id="page-top" style="background-color: rgba(158,158,158,.2)">
<div id="wrapper">
<div class="row">
<div class="col-4">
<nav class="navbar align-items-start sidebar-light">
<div class="container d-flex flex-column ">
<span class="name" >Hello, Juman Maharjan</span>
<ul class="nav navbar-nav ">
<h6 class="text-primary">Manage My Accounts</h6>
<li class="nav-item" role="presentation"><a class="nav-item"><span>My Profile</span></a></li>
<li class="nav-item" role="presentation"><a class="nav-item"><span>Address Book</span></a></li>
<li class="nav-item" role="presentation"><a class="nav-item"><span>My Payment Option</span></a></li>
<li class="nav-item" role="presentation"><a class="nav-item"><span>Vouchers</span></a></li>
</ul>
</div>
</nav>
</div>
<div class="col-8">
<div class="container-fluid text-black">
<h5>Manage My Accounts</h5>
<div class="row">
<div class="col-md-4">
<div class="card">
<div class="card-body">
<span class="heading">Personal Profile</span>|<a href="#" class="link" >Edit</a><br>
<br>
<span class="details ">
Juman Mhrzn<br>
abc@gmail.com
</span>
<br>
<br>
<span class="subslink">
<a href="#">Subscribe to our Channel</a>
</span>
<br>
<br>
</div>
</div>
</div>
<div class="col-md-8">
<div class="card">
<div class="row">
<div class="col-sm-6">
<div class="card-body">
<span class="ship"> Defult shipping Address</span>|<a href="#" class="link" >Edit</a>
<h6 class="name">Juman Maharjan</h6>
<span class="address">
sunakothi<br>
Bagnamti-Lalitpur Outside Ring Road - Lalitpur-Suankothi Area<br>
(+977)988888888
</span>
</div>
</div>
<div class="col-sm-6 border-left">
<div class="card-body">
<span class="ship"> Defult Billing Address</span>|<a href="#" class="link" >Edit</a>
<h6 class="name">Juman Maharjan</h6>
<span class="address">
sunakothi<br>
Bagnamti-Lalitpur Outside Ring Road - Lalitpur-Suankothi Area<br>
(+977)988888888
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-4">
<div class="card">
<div class="card-body">
<div class="table-resposive table mt-2">
<h5>Recent Orders</h5>
<table class="table datatable my-0">
<thead>
<tr>
<th>Order#</th>
<th>Placed On</th>
<th>Items</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody class="text-black">
<tr>
<td>1548121912</td>
<td>11/20/2021</td>
<td><img src="assets/img/avatars/avatar1.jpeg" alt=""> </td>
<td>Rs.89</td>
<td><a href="#"> Manage</a> </td>
</tr>
<tr>
<td>1548121912</td>
<td>11/20/2021</td>
<td><img src="assets/img/avatars/avatar1.jpeg" alt=""> </td>
<td>Rs.89</td>
<td><a href="#"> Manage</a> </td>
</tr><tr>
<td>1548121912</td>
<td>11/20/2021</td>
<td><img src="assets/img/avatars/avatar1.jpeg" alt=""> </td>
<td>Rs.89</td>
<td><a href="#"> Manage</a> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
.heading,.ship{
font-size: 15px;
}
.details,.name,.address{
font-size: 13px;
}
.details{
margin-top: 8px;
}
.name{
font-weight: bold;
margin-top: 8px;
}
.link{
font-size: 12px;
}
.nav-item{
text-decoration: none;
color: black;
cursor: pointer;
}
The design also enables you to track your activities and movements in the different modes. Additionally, you can set goals for yourself and check recent routes.