An avatar is a representation of who we are or our fictional character. When designing websites, you may need images of people. It might be for a section for the staff or some other area of the website.
Ex:- Social Media Websites, Coding Platforms, Online Gaming sites, Mail Composing sites etc.
<!-- Normal Tablet Avatar-->
<div class="ava" >
<span class="text" > AR </span>
</div >
<!-- Busy Tablet Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle busy" ></i >
<span class="text" >AR</span >
</div >
<!-- Offline Tablet Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle offline" ></i >
<span class="text" >AR</span >
</div>
<!-- Online Tablet Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle online" ></i
>
<span class="text" >AR</span >
</div >
</div >
<!-- Normal Round Avatar-->
<div class="ava" >
<span class="text round" > AR </span>
</div >
<!-- Busy Round Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle busy" ></i >
<span class="text round" >AR</span >
</div >
<!-- Offline Round Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle offline" ></i >
<span class="text round" >AR</span >
</div>
<!-- Online Round Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle online" ></i
>
<span class="text round" >AR</span >
</div >
</div >
<!-- Normal Image Avatar-->
<div class="ava" >
<img src="Images/avatar-1.jpg" alt="avatar-1.jpg" class="img-ava">
</div >
<!-- Busy Image Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle busy" ></i >
<img src="Images/avatar-1.jpg" alt="avatar-2.jpg" class="img-ava">
</div >
<!-- Offline Image Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle offline" ></i >
<img src="Images/avatar-3.jpg" alt="avatar-3.jpg" class="img-ava">
</div>
<!-- Online Image Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle online" ></i
>
<img src="Images/avatar-4.jpg" alt="avatar-4.jpg" class="img-ava">
</div >
</div >
<!-- Normal Border Avatar-->
<div class="ava" >
<img src="Images/avatar-1.jpg" alt="avatar-1.jpg" class="img-ava border">
</div >
<!-- Busy Image Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle busy" ></i >
<img src="Images/avatar-1.jpg" alt="avatar-2.jpg" class="img-ava border">
</div >
<!-- Offline Image Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle offline" ></i >
<img src="Images/avatar-3.jpg" alt="avatar-3.jpg" class="img-ava border">
</div>
<!-- Online Image Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle online" ></i
>
<img src="Images/avatar-4.jpg" alt="avatar-4.jpg" class="img-ava border">
</div >
</div >
<!-- Normal Hover Avatar-->
<div class="ava" >
<img src="Images/avatar-1.jpg" alt="avatar-1.jpg" class="img-ava hover-border">
</div >
<!-- Busy Hover Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle busy" ></i >
<img src="Images/avatar-1.jpg" alt="avatar-2.jpg" class="img-ava hover-border">
</div >
<!-- Offline Hover Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle offline" ></i >
<img src="Images/avatar-3.jpg" alt="avatar-3.jpg" class="img-ava hover-border">
</div>
<!-- Online Hover Avatar-->
<div class="ava" >
<i class="fa fa-solid fa-circle online" ></i
>
<img src="Images/avatar-4.jpg" alt="avatar-4.jpg" class="img-ava hover-border">
</div >
</div >