Avatar

Developer
Simeon Simeonoff
Size
2,309 Kb
Views
36,432
  1. Avatar Previews
  2. Avatar HTML Codes
  3. Avatar CSS Codes

How do I make an avatar?

What is a avatar? How do you make a avatar? This script and codes were developed by Simeon Simeonoff on 17 September 2022, Saturday.

Avatar Previews
IQ Test

Avatar - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Avatar</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="cntr">	<div class="ig-avatar">	<img class="ig-avatar__img" src="http://zblogged.com/wp-content/uploads/2015/11/5.png" alt="avatar" />	<p class="ig-avatar__name">Michael Smith</p>	</div>	<div class="ig-avatar">	<img class="ig-avatar__img" src="http://zblogged.com/wp-content/uploads/2015/11/5.png" alt="avatar" />	<p class="ig-avatar__name">Michael Smith</p>	</div>
</div>
</body>
</html>

Avatar - Script Codes CSS Codes

html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: border-box;
}
body { font-size: 100%; font-size-adjust: 0.58; font-family: 'Titillium Web', sans-serif; -webkit-font-smoothing: antialiased;
}
.cntr { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%);
}
.ig-avatar { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10px 0;
}
.ig-avatar__img { width: 45px; height: 50px; -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.ig-avatar__name { color: #484848; margin-left: 1rem; font-size: 1rem;
}
Avatar - Script Codes
Avatar - Script Codes
Home Page Home
Developer Simeon Simeonoff
Username simeonoff
Uploaded September 17, 2022
Rating 3
Size 2,309 Kb
Views 36,432
Do you need developer help for Avatar?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Simeon Simeonoff (simeonoff) Script Codes
Name
Toggle Buttons
A Pen by Simeon Simeonoff
Material Radio Buttons
Flexbox SASS Grid
Material Switches
Flex Table
Notification Animation - Bounce Blur
Grid Layout
Material Checkboxes
Notification Animation
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!