<!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>
<!-- Include Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<!-- Include your custom CSS -->
<style>
/* Style for circular profile image */
.profile-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
}
/* Style for WhatsApp button */
.whatsapp-btn {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: green;
color: white;
text-align: center;
line-height: 40px;
font-size: 18px;
}
</style>
</head>
<body>
<div class="container mt-4">
<div class="row">
<div class="col-md-4 col-sm-12">
<!-- Circular profile image -->
<img src="profile.jpg" alt="Profile" class="profile-img">
</div>
<div class="col-md-6 col-sm-12">
<!-- User's name -->
<h2>User's Name</h2>
</div>
<div class="col-md-2 col-sm-12">
<!-- WhatsApp button (hidden in mobile view) -->
<a href="https://wa.me/1234567890" target="_blank" class="whatsapp-btn d-none d-md-inline">
<i class="fab fa-whatsapp"></i>
</a>
</div>
<div class="col-12 d-md-none">
<!-- WhatsApp button (visible in mobile view) -->
<a href="https://wa.me/1234567890" target="_blank" class="whatsapp-btn">
<i class="fab fa-whatsapp"></i>
</a>
</div>
<div class="col-md-2 d-none d-md-block">
<!-- List view icon, you can use an appropriate icon here -->
<a href="#" class="list-view-icon">
<i class="fas fa-list"></i>
</a>
</div>
</div>
</div>
<!-- Include Font Awesome for icons -->
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</body>
</html>
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me