Horje
How to Create Avatar Images using HTML and CSS ?

This article will show you how to create an Avatar Image with the help of HTML and CSS. An Avatar is a visual representation of a user, often used in user profiles or comment sections on websites.

Here, we have created a GFG logo avatar image. This avatar has 100px width and height, and border-radius to 50%.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
  
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }
  
        .avatar-container {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            overflow: hidden;
        }
  
        .avatar img {
            width: 100%;
            height: 100%;
        }
    </style>
    <title>
        Create Avatar Images 
        using HTML and CSS
    </title>
</head>
  
<body>
    <div class="avatar-container">
        <div class="avatar">
            <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" 
                alt="GFG Logo">
        </div>
    </div>
</body>
  
</html>

Output:

avatar


 


Reffered: https://www.geeksforgeeks.org

Geeks Premier League

Related
Create a Coupon using HTML and CSS Create a Coupon using HTML and CSS
KBC Game in C++ KBC Game in C++
How To Remove Comments In Google Docs How To Remove Comments In Google Docs
How to Create Survey in Google Forms (8 Easy Steps) How to Create Survey in Google Forms (8 Easy Steps)
How To Remove Table Lines In Google Docs How To Remove Table Lines In Google Docs

Type:
 Geek
Category:
 Coding
Sub Category:
 Tutorial
Uploaded by:
 Admin
Views:
 12



 

Horje