Avatar designing through HTML and CSS

Question

Aryan Kumar · Answer

Sure, here's an example of how to design an avatar using HTML and CSS:

HTML

<html>
<head>
<title>Avatar</title>
<style>
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ffffff;
}
.avatar img {
  width: 100%;
  height: 100%;
}
</style>
</head>
<body>
<div class="avatar">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a4/User_icon_2017.svg/1200px-User_icon_2017.svg.png" alt="Avatar">
</div>
</body>
</html>

The .avatar class is used to style the avatar element. The width and height properties set the width and height of the avatar element to 100px. The border-radius property sets the border radius of the avatar element to 50%, which will make it a circle. The background-color property sets the background color of the avatar element to white.

The .avatar img class is used to style the image element inside the avatar element. The width and height properties set the width and height of the image element to 100%, which will make it fill the entire avatar element.

You can use this code as a starting point to design your own avatars. You can change the background color, the image, and the border radius to create different looks. You can also use CSS to add additional styling, such as borders, shadows, and gradients.

forum

Avatar designing through HTML and CSS

Can you answer this question?

1 Answers