<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
margin: 0;
padding: 0;
}
.container {
max-width: 800px;
margin: 50px auto;
background: #fff;
border-radius: 8px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.card {
border: none;
border-radius: 0;
margin-bottom: 0;
}
.card-body {
padding: 0;
}
.card-img-top {
width: 100%;
height: 300px;
object-fit: cover;
}
.user-info {
padding: 20px;
}
.user-info .avatar {
width: 110px;
height: 110px;
border: 5px solid #fff;
border-radius: 50%;
overflow: hidden;
margin: 0 auto;
}
.user-info .avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-info .user-name {
text-align: center;
margin-top: 10px;
}
.user-info .user-role {
text-align: center;
color: #777;
}
.user-stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.user-stats .stat {
text-align: center;
}
.user-stats .stat h4 {
margin: 5px 0;
font-weight: bold;
}
.user-stats .stat p {
margin: 0;
font-size: 14px;
color: #777;
}
.social-links {
display: flex;
justify-content: center;
margin-top: 20px;
gap: 10px;
}
.social-links a {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: #007bff;
color: #fff;
font-size: 24px;
transition: background-color 0.3s ease;
}
.social-links a:hover {
background-color: #0056b3;
}
.user-tabs {
display: flex;
justify-content: end;
margin-top: 20px;
background-color: #17a2b8;
border-radius: 8px;
padding: 10px 0;
}
.user-tabs button {
flex: 1;
border: none;
background-color: transparent;
color: #fff;
font-size: 18px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.user-tabs button.active {
background-color: #138496;
}
.user-content {
padding: 20px;
}
.followers {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
.follower-card {
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.follower-card .card-body {
display: flex;
align-items: center;
padding: 10px 20px;
}
.follower-card .card-body img {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
}
.follower-card .card-body .follower-info {
flex: 1;
}
.follower-card .card-body .follower-info h5 {
margin: 0;
font-weight: bold;
}
.follower-card .card-body .follower-info span {
color: #777;
font-size: 14px;
display: flex;
align-items: center;
}
.follower-card .card-body .follow-btn {
min-width: 80px;
padding: 5px 10px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
font-size: 14px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.follower-card .card-body .follow-btn:hover {
background-color: #0056b3;
}
.search-form {
position: relative;
margin-bottom: 20px;
}
.search-form input {
width: calc(100% - 40px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
font-size: 14px;
}
.search-form button {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background-color: transparent;
border: none;
cursor: pointer;
}
.search-form button i {
font-size: 20px;
color: #777;
}
</style>
</head>
<body>
<div class="container">
<div class="card">
<img src="https://picsum.photos/id/1005/800/300" alt="Profile Cover" class="card-img-top">
<div class="card-body">
<div class="user-info">
<div class="avatar">
<img src="https://picsum.photos/id/1015/110/110" alt="User Avatar">
</div>
<div class="user-name">
<h5 class="fw-semibold mb-0">Mathew Anderson</h5>
</div>
<div class="user-role">
<p class="mb-0">Designer</p>
</div>
<div class="user-stats">
<div class="stat">
<h4 class="mb-0 fw-semibold">938</h4>
<p class="mb-0">Posts</p>
</div>
<div class="stat">
<h4 class="mb-0 fw-semibold">3,586</h4>
<p class="mb-0">Followers</p>
</div>
<div class="stat">
<h4 class="mb-0 fw-semibold">2,659</h4>
<p class="mb-0">Following</p>
</div>
</div>
<div class="social-links">
<a href="javascript:void(0)"><i class="fa fa-facebook"></i></a>
<a href="javascript:void(0)"><i class="fa fa-twitter"></i></a>
<a href="javascript:void(0)"><i class="fa fa-dribbble"></i></a>
<a href="javascript:void(0)"><i class="fa fa-youtube"></i></a>
</div>
</div>
<div class="user-tabs">
<button class="active">Profile</button>
<button>Followers</button>
<button>Friends</button>
<button>Gallery</button>
</div>
</div>
</div>
<div class="user-content">
<div class="tab-pane fade show active" id="pills-followers" role="tabpanel" aria-labelledby="pills-followers-tab" tabindex="0">
<div class="search-form">
<input type="text" class="form-control search-chat py-2 ps-5" id="text-srh" placeholder="Search Followers">
<button type="button"><i class="fa fa-search"></i></button>
</div>
<div class="followers">
<div class="col-md-6 col-xl-4">
<div class="follower-card">
<div class="card-body">
<img src="https://picsum.photos/id/1020/40/40" alt="Follower Avatar">
<div class="follower-info">
<h5 class="fw-semibold mb-0">Betty Adams</h5>
<span><i class="ti ti-map-pin text-dark fs-3 me-1"></i>Sint Maarten</span>
</div>
<button class="follow-btn">Follow</button>
</div>
</div>
</div>
<!-- Repeat this follower card structure for other followers -->
</div>
</div>
</div>
</div>
</body>
</html>