PROWAREtech
CSS: Responsive Avatar Cards
An interesting way to organize data in limited space; uses HTML and CSS only.
Create avatar cards that are useful for company employees, authors, forum posters or just about anybody. Note that the images used here are Base64 strings to make it easy to download and view this file (no need to keep track of image files).
This example uses a rainbow background.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Avatars</title>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-family: sans-serif;
background-color: white;
color: black;
}
header h1 {
font-size: 50px;
margin: 1%;
}
p {
margin: 1%;
}
div {
position: relative;
background-color: inherit;
}
.avatars {
background-color: black;
padding: 20px;
max-width: 970px; /* use this value for the max-width of mobile screen */
width: 100%;
margin: 0 auto;
overflow: hidden;
white-space: nowrap;
}
.avatars > a {
display: inline-block;
text-decoration: none;
width: 300px;
transition: 1s;
margin-left: -199px;
white-space: normal;
}
.avatars > a:first-of-type,
.avatars > a:hover + a {
margin-left: 0;
}
.card-avatar {
background-color: #444;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
padding: 5px;
border-radius: 9px;
}
.card-avatar h4,
.card-avatar p {
color: white;
margin: 0 10px;
}
.avatar {
height: 100px;
margin: 10px;
}
.avatar img { /* best to use images that are square */
width: 80px;
height: 80px;
border-radius: 50%;
transition: .5s;
}
.avatar div {
position: absolute;
}
.avatar .inner-round {
width: 90px;
height: 90px;
left: 5px;
top: 5px;
border-radius: 50%;
}
.avatar .outer-round {
width: 100px;
height: 100px;
left: -10px;
top: -10px;
border-radius: 50%;
transition: .5s;
opacity: 0;
}
@supports (filter: grayscale(0)) { /* IE11 does not support grayscale */
.avatars > a img,
.avatars > a .outer-round {
filter: grayscale(100%);
}
.avatars > a .outer-round {
background-image: linear-gradient( /* rainbow background covered in another article */
to right,
#c8beff 0%,
#dea8f8 10%,
#a8deff 30%,
#bdfacd 42%,
#f3fabd 58%,
#fae3bd 70%,
#f8acab 95%,
#feaad4 100%
);
opacity: 1;
}
.avatars > a:hover img,
.avatars > a:hover .outer-round {
filter: grayscale(0);
opacity: 1;
}
}
@media (max-width: 970px) {
.avatars {
display: flex;
flex-direction: column;
}
.avatars > a {
width: 100%;
margin: 1% 0;
transition: none;
}
.avatars > a img,
.avatars > a .outer-round {
filter: grayscale(0);
}
.card-avatar .name {
margin: 0;
}
}
</style>
</head>
<body>
<header><h1>ACME, Inc.</h1></header>
<main>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit repellat nostrum facere sit animi fugiat. Corrupti harum praesentium obcaecati pariatur fugiat magnam. Mollitia numquam dolores ea placeat laborum, commodi dolorum voluptatum nesciunt ex, esse vel debitis totam enim necessitatibus? Ipsum odit, dolorum voluptatibus recusandae provident ipsam repellendus tenetur dolorem ut.</p>
<p>Possimus, laborum exercitationem perspiciatis facilis quibusdam sint provident doloremque error distinctio cupiditate animi velit quas voluptatum deleniti laboriosam. Id architecto non nam. Similique officia totam numquam iste enim, quibusdam vel illum consequatur molestias dolorum blanditiis dignissimos delectus. Modi ratione animi fugiat nostrum, esse ipsum! Quidem voluptatem beatae nulla consequatur incidunt.</p>
<p>Ea optio voluptatum consequuntur saepe nostrum illum odio odit voluptates non accusantium labore neque, dolorum assumenda qui, perspiciatis mollitia error in quia. Maiores consequuntur assumenda vitae est, voluptatum iste earum harum architecto animi consequatur consectetur ipsam mollitia aut quaerat cum quos, enim, error minima! Consequatur temporibus libero dolorem corporis omnis!</p>
<p>Iusto possimus nemo, adipisci atque a odio incidunt facilis totam aut doloremque ex autem velit quaerat labore? Dolore ea magnam sit ad fugit provident possimus, commodi neque officia dicta alias facilis repudiandae, dolores quae omnis! Non est porro, natus, molestiae hic dignissimos ex magni quibusdam unde quaerat laudantium fugiat nemo?</p>
<p>Id dolorum quidem ea nulla, numquam, velit quaerat facilis et, molestias ex modi natus! Ut molestias ad earum recusandae autem quo, perspiciatis aliquam, officiis porro possimus, ducimus harum. Pariatur molestias voluptatibus quasi nemo, iste eveniet unde autem laboriosam tenetur mollitia incidunt repellendus hic delectus? Architecto dolorem ipsum autem quia nemo.</p>
<div class="avatars">
<a href="#"><div class="card-avatar">
<div class="avatar">
<div class="outer-round"><div class="inner-round"></div></div>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMAEAMCAwYAAAJsAAADHgAABbz/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoXHh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoaJjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAFAAUAMBIgACEQEDEQH/xACoAAEAAwEBAQEAAAAAAAAAAAAAAwQFAgEGBwEAAwEBAQAAAAAAAAAAAAAAAAMEBQIGEAACAgEFAQEBAAAAAAAAAAACAwEEABAgERIFExQVEQACAQMCBAQEBAcAAAAAAAABAhEAIQMxEiBBUWEQcSIEgTJCE5GxUnKh0eGSIzMUEgACAQMCBAQHAAAAAAAAAAABAhEAIRIQMUFRIgNhcZET8IHR4TJSM//aAAwDAQACEQMRAAAA/QACGLLiZpqPmezVmw9PQXZFqwCDI3MDIosuGI9sYm9uTBrJAOKNjNn7s90e4u71zGvWcWxTwAcY25nyMpe15vM2S6+fpeljCxYBl/LeVoduWWOVVfu/83d7j+zc9aGL/9oACAECAAEFAMuXhrT/AGi7U7w2dfXUR5CWyfkKNY6NtJUf70RaTbS49L1eXJkOJ89Epr6MdJTGC/5zn//aAAgBAwABBQDFqk4/PhrkNaxRGcxw+YmdBWRR8y6EBDGij6nPONnk9KlVQhMRzaUmQz//2gAIAQEAAQUA1ZZSsWehXDB9GsUrspZG30DauuAR3EAGCACj5DBUImKmy4HeqM86tnhSw6L2HESKeSCDjnvJE4iEdrIiVp+VWl6EB+fy4CalmIfQ23nGlFe41YOsMY2vYcDLVqwYUGMbW2MWDQelabIsAc+6cWK3OiIiNvo1lSpJ1WCTKyh8qEtVt9b2FeeFr0r1yUxGcRGKe9DPL90nM2XhszZjE88Y2J4pVGMmJiYz/9oACAECAgY/AKClSzMJHL4mv5DHzvv9KIClSgGXK+vZwUs3WIUSeFe2EbP9Yv6V3g6lGyWx3sNVXuHEkSDFvX5UXjo9vD3fGZiIpl7RLYiS0QNSqBc7QTy4iajFyeUX9KCtuxzPhPDUwekWtouTAKSF6jbT/9oACAEDAgY/AKJmIret9WkwLVMiOdLFxGpIE1HGZxqTqCZjQ8ItqjdPcdoYtvHlU05YANupH5ffT//aAAgBAQEGPwDxdncAY43xcrOkgXp1U73WNqj6ieSnTz6UgBMtO61kgEneeWhpCrj/ACTsBsTGtje3F9zE5Qqy7iI+UnadZ60GYy8klupN5PxpQqgBZ29p1ioZQQDu+PWt6Eo0liy63EG/LXlWMsSSw3XJPzHdz8+HMvMo0ecWoN1v4uRrtMfhSJ+lQv4DhIOkXpFRWdgqyFBMW59K2sCrjVWBB/jWzGjZGFyF5efIVsyo2Mtpu5ibwRINuJgRIINutK99ioHcqCzEkSTCySaGRrMjKUP7jBHxFLkW7MWZv3TH5WovmxnG23f9toLK4uB6SRM9DxF8fzEqoJuBuMTUADKkmAfQynmNIj4UuTIsY1BACy20nmfysKfJhA2MACHBG4j6uotbSgzn7YUgqmO5ZpsCW79qVsh3GWAbqASBwnG43Iwgg1kx452gKTJJuR37RUMwU9zFf7E/uFYVO3IheSNR6VagAIA0HFk9yz/bKJ6yflYLyb+lBsWwg9In+dS7IvnFf9WNtzMSsCwQA6R1NieLYoGT3LCVxzYD9TdqjPmJQ3OMelO3pFEkVYVuw5Gxlh9Ji47aGl9t7sAZGsmUCAx6MOR4Xy+49TZGJGT6WE22npGlE9aPgGGqmkzZVKYUKs5NmIBk7RUi4Oh8P//Z" />
</div>
<div class="name">
<h4>Employee</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
</div>
</div></a>
<a href="#"><div class="card-avatar">
<div class="avatar">
<div class="outer-round"><div class="inner-round"></div></div>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMAEAMCAwYAAAKZAAADeQAACDj/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoXHh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoaJjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAFAAUAMBIgACEQEDEQH/xACvAAACAwEBAQAAAAAAAAAAAAAABQIDBAYBBwEAAgMBAQAAAAAAAAAAAAAAAwQAAgUBBhAAAwEAAgIDAQEBAAAAAAAAAgMEAQAFEBEgEhQTITQRAAIBAgQEAwYFAwUAAAAAAAECAxESACExBEFRIhNhMkIQIHGBoYKRUmJyFLHRBbLC0jNDEgACAgECBQIFBQAAAAAAAAABAgARITESEFFhkQNxIkGBobET0TJCUjP/2gAMAwEAAhEDEQAAAPoAEmaWDPnl1VQ9SK7OftfE7AeEKmqhe9NhX5xywjUet8Cu3HGhU131K0r5MtcpnXhNM/clG8qzxrmMjcBsYsZle87W7V5R6pTpzTT07Nu2sAPCAx8kVs8uI1OSSBmH7vinF1+jKL9NX//aAAgBAgABBQDj+wxLy7Jn90ditzeVk0UkRsIoKREVVSkoiIL1tNKS+jCvnwE2Kd4YGGDuu0eCGmaeuSveEWDjbnuZ/er0FprPN98//9oACAEDAAEFAOAn7Dic+hJ0R4vB0szBzGhu6QMwszNVo4Rf7mKPdJZD4zfWi73zd9YTi3xn+8BI5zOv3jptDef/2gAIAQEAAQUA8V3JkyeqekOwrYTIqPxM+XZ79rznSwlKBQmAmOxz7zrUrV2Xl/Y1k8VnrPgtrZaZrJ6g8dmv+NXHvBAKk7KjXFTGf5e3YnKQwusmM28azFLFjLD473rbrmSM7X/g7KqmSO2X9V/m6TIiazFjnqlauxuSNbG2Zr50c655DZ57YKWG4mlxOnOaqaAV+5HF0KYSoq6G/C6MqxrjCehdcrRtuSqbrclFfxs7EZyJdhEQvLfrZoR3WqonpRUvz2NRzTpSKh7HsNmDWUlz6e+SN/LUL8/RJQFU/P/aAAgBAgIGPwCHxsm5QBkHOYPIt/jGNnMdesHjVHG68mvgL4M3iNMudLwNZuYl2bvN5THIZPaL5tlfDPuGedRWddjEWV1qEeNqqy6/2X1ieQi1Rwe03B9/JV/d2gUgoxJpHGu3N8GQ2Awo1rG/FlAl7WNsW6VAv4yGJ0XFfeK53M60cnF/TgWJoKLPym3wbkUaVr6tP9VHUJ+sC+b3o2d4FbfXpLE//9oACAEDAgY/AJYOZR15yyRwAbQzGBKuFbhANie4ekK8xKqusvUcxwB5Qbtb+ku4RoDwqAMNxY13n8R8zKxf34f/2gAIAQEBBj8A9id66shooRS5yFSaLU0Axft5FkA1tNaHkRqPng7LbNY9KzyjWNToq/rbhyGfLC7eVidrIaROxJ7Tn0MWztY+Unjly9/bL+SKVvxaNf74EjLSQaSKSjj70o2CqVzJZiSWZmOpYnMnBRwGRhRlOYIx1Bn/AHSO3+pjikS2KIGLgE0JZ1tqPtPuSwbdI4xC1jSSVZjVQ9Qi25dXFsGaaRppiLbjQALrRVWgHutuFj70boqOqmjrYWNVBybzaVGC8D3AZMNGU8mU0IPx9sW6HlmpBKP1ZtE39V+fh7O5JlGPO/BRzPhgTLZt4yOlJQXc8mKqy2/CpxbvVFr0WB4gWDv+SnmDHgPri5YoonI8jyEsD9qFcNHMDDLGC0qP6FHqLDptPA4P+QkBQutkKaN263XP4twB0HiT7HlYEqgLEAVNAK5Djhd5MQQRXbxg1WNW41GRYjU/IeONqjCsTTR9w18aqKcatTG2RNrLuBuJREzRCoiB9b+GJSPOtrR017gYWU+6mJNxtds28mSlsCG0tUgHPPQZ42RICtY7zRt1AqpQhXtIraxy4e5/JgoIJHUSwcmkYLfHyzPUvHXXW8gnQBRqScgBho5UKqw1DVBHAq68QRgJLENzTISoyox/ejUFfgfkMV3gWLbR9fZVi1SuYaRhTy6gD64ST/Hyr/ILqEjWQsslWFwdQTlbUk0yxKu8YNuZ84pQKKUX/wAlBrS01Pjr8PbtxHC0sKFpJLLa3gWoKMy5Zk/EDCI0MkLlqxNIosLL12m1m1AOOwkNgdHkQF7quttRlkK3Vwg3UEndoL2jAda8aWGv0xn3F+MUg/2YZoIZZWBtYpC+utCzKo488RNLH/HhidZOogyMUNwACVC+JrplT3YwshiaJ7wwAb0shFD4NiI7dZt1uIavO1QxWF1ZaAVVc2A6VFcsF45kZVFzEMMgeJ5YkMco7lhKFOvXJTkGGZ0rrh4tuXuVqyiUMJLm4sHAOY04e92IV726IqI60VAfVI3pH1PDEkv8t0mmWyRkC20FbbFYNbbcaGteeNldtYSux0UN/wBnTZ01UBaeahrmB8cbxI44YI96SWWhLR1RYyemisSBXhnzxNPMizFbYZYoxayLHc0bJcxuuD1IJry5YEsDh0OVRwI1BBzBHI+5WKnekYRxV0ubifACpwQCWZjc7tmzsdWY88WwrfMzBanyRlgWBf5KaLjr3MzVzPWVH4JbjNnJ59x/+WEmuaxyI5rmZha3Sp6ifKx/CuDNsSe+uTsAezJb6JG0J5EZj6YSdAQHGanVSMmU+IOXs//Z" />
</div>
<div class="name">
<h4>Author</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, cum?</p>
</div>
</div></a>
<a href="#"><div class="card-avatar">
<div class="avatar">
<div class="outer-round"><div class="inner-round"></div></div>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMAEAMCAwYAAAJ5AAADUAAAB3r/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoXHh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoaJjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAFAAUAMBIgACEQEDEQH/xACyAAACAwEBAQAAAAAAAAAAAAAABQMEBgIBBwEAAgMBAQAAAAAAAAAAAAAAAAMCBAUBBhAAAgICAgIDAQAAAAAAAAAAAgMBBAAFEBEgIRITFBURAAIBAwICBwUHAgcAAAAAAAECAxESBAAhMRMgQVFhcYEiEJEyQiOxwVJygqIFoWKS0kNjg7MUEgACAQIEBAQHAAAAAAAAAAABAhEAEhAhMQNBceEiUWGBE5GxwTJSIxT/2gAMAwEAAhEDEQAAAPoHPVAKsMFrLdYYKK0JaQjk164AAraLVdq+nHk73Z1zdWO0TrfrdgNiV7AGcYIr2K9vQqx2YzPMloX8ZAWlgAZ+DR5DMda9h87OeKB22LkC6gACLOt/K8kHOhX1mrtZm5mw0hSu3F//2gAIAQIAAQUAy1tQUVfbwZ8WJKEqUxxjqbUmgTFfAEmjaffP41GtMOLlbt/U4kCkuLdcnLlFkRoOlqs//9oACAEDAAEFAMBMlBV/XA9dkUDEvDo5iS4mCYAK9sCB5UXrDKIjgDgS+0e3R0Wf/9oACAEBAAEFAMIoGG7W1aZ/UQIK31EgU5Tg8dyaw10w+1bEAAZ95MMoNS5b1eG3EXkA/AOJiJjT2RQzw2cSL8GLFhp67ZrGjTnYLsaxCHqYDlc3K0Wq030gOl9UNcWwKovZCq03ZVabaqYRW8PxuG1XRYrZZ2tgpG6KwvBfvBp9ku6jw3osm3aOewAFhwL/AMGw8HIS8CW1JfZbHPus5Ys20qoaYDV4PemumQTeg7Da0zs6HVJxN21ewmyrw2JQb41mtdk6WvlercJVwyaihYdUtL2KpPP/2gAIAQICBj8Aoptr7jDVp7etBd1Al2VynIc8dwp9wRoqxBcxz6mgpCqNb5kUq7hDFRbK8QOeLhpt3BrrAJy+HGh/NtncJzuZSFj1iv3Wh/BcdvcZrlLRadAQuXyrrVwI7dcQqN7bK4cNE6UTbt7hH4sVn0I+tGVsZHKsPPD/2gAIAQMCBj8AqSYFdpnyxE+NSdKkTRIynPERwruMVKzGJEYQeOOYnKuI50M5BE4f/9oACAEBAQY/ANFmNANyTrk/xkDlAqySZJsH02utMSSMtS1u11BTffRfGzpXyEJD40sfM9S8UcQx1Q94NPHStNzMdmAJWSNxaewtbbtoSQuskZ4OpDA+Y6UrSmkF0YnP+0XUSftrrIbIR4secRvHCDQFQLLZraG7atlab9egiKEQcFUUA8hrfX/rwx1/XgHwyr/m7D92kmiN0cgDKe49GDDkF0El8sydTrEAAp7rnU+WlSpa0AVY1Jp2nr9pB4HT/wAfNVSXZ8avwspFzKD2g1NOzo4s3ykvAf8AlFy/uQDz9jQYiqWSnNlkrYldwKLuzU3p7zq5JYsgjjGUMVfyve9PMaM+S0kcdzKMVGsZShtPNZPVdUcAaeOlnwpmebDImfCeQyXLRh85Z1NCbd6HSSxmqSKGU9zCo6EkBNpcel/wsPUrfpYA6hOR9KSVzEy9Syr8Sk9QqNj4aZRTnCWbm/nLsRX9JHlpD/JLGmXVr1hJKUr6aXb8NZqxQSTK03pZAoS5URH9TsvzKQdT50uFyMzJQIsynmcywbByvw2jc7cBqKBTcIkVAe20W16MJyX5+NOZklMh9QliDwsGPzXrQjr20GhnIlAtLsLhIg+DmL1so2uBB0YJMlVI+NMWNjL4Frns+3SxwYstqiirREH7nroCq4wSrIg+oWJUp6zQAbMdh79cu3lZGPRJoa1t22IPWppsejGoSNlKAwpMKxl7vqmmwL2kU7q6jxIDy1K3SMm1qD0hUpwuO3cNBI1CoOAHD2w59DyaGLJt42P8LU67Wp0THPGskZ4o4DD3HXIhKpIImgiJ+ENjyOh2/KwOqNCr/wByPT+jgfbrbGPnIn3V00pSKMLwudnJPUAFVdz46gyM8tJNRJDCRbHG9LqWDiVP4iei887iOKMFndtgANZLRMVAyGeGW0gqxVWrRqbG47dY1bmxMlP9aMF4m76ipXwbW0ysexfU3uG+seTJx5VgjV5MdAtXeRQPUycQAGqOvSzQMHjbgw7jQjxBFD0cXHYiws0zg8CIqWj/ABsp8tVMCJJ1tH9Nj31jtOvpzTx+ErN/2XalyceQ5CcxhHFJaGaNDZVXVV9RKki7bw46XLw2KZMLUjJHqWUnl2OpofmoRoYOMsQfl/WxXYg82EKpdGAPpkQhgSu/jXSxTq2NKxoqyUtY9iOtVPhWvd7P/9k=" />
</div>
<div class="name">
<h4>Salesperson</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div></a>
<a href="#"><div class="card-avatar">
<div class="avatar">
<div class="outer-round"><div class="inner-round"></div></div>
<img src="data:image/jpeg;base64,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" />
</div>
<div class="name">
<h4>Employee</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
</div>
</div></a>
<a href="#"><div class="card-avatar">
<div class="avatar">
<div class="outer-round"><div class="inner-round"></div></div>
<img src="data:image/jpeg;base64,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" />
</div>
<div class="name">
<h4>Employee</h4>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing.</p>
</div>
</div></a>
<a href="#"><div class="card-avatar">
<div class="avatar">
<div class="outer-round"><div class="inner-round"></div></div>
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAgAAZABkAAD/7AARRHVja3kAAQAEAAAAHgAA/+4AIUFkb2JlAGTAAAAAAQMAEAMCAwYAAAJgAAADdAAABcX/2wCEABALCwsMCxAMDBAXDw0PFxsUEBAUGx8XFxcXFx8eFxoaGhoXHh4jJSclIx4vLzMzLy9AQEBAQEBAQEBAQEBAQEABEQ8PERMRFRISFRQRFBEUGhQWFhQaJhoaHBoaJjAjHh4eHiMwKy4nJycuKzU1MDA1NUBAP0BAQEBAQEBAQEBAQP/CABEIAFAAUAMBIgACEQEDEQH/xAClAAABBQEBAAAAAAAAAAAAAAAFAAEDBAYCBwEAAwEBAAAAAAAAAAAAAAAAAQIDAAQQAAICAgEEAwADAQAAAAAAAAECAwQABREQIRIGMRMUIDIkFREAAgAFAgIIBAMJAAAAAAAAAQIAETESAyEEQSIQIFFhcYEyE5GhQgWxYhTBUoKy4iNTcyQSAAIDAAICAwAAAAAAAAAAAAABEBEhQVEgMDGxAv/aAAwDAQACEQMRAAAAN9plD13zQa2w+zqEbQKzlJSxylLjOhhZQEcl1Su7LWDH67JPPQvz1XkuKSPYLS0dmHWMoaKEUA0ddRZGa61uQ7FZTAEJ1+ch00GIIV5vDNUZ9rp78vKjh2tZG52lAfR8oGGIXkKy9eWS1AH/2gAIAQIAAQUAwsBnmMDA9ZPkDI/7Zxnn3B7hu4+MdPE9uEUE9JAeFTkBQBn/2gAIAQMAAQUAxUJwRMcdCvWH+vOTd16LGMK8qU5DABsjk8gBkshXrF3LScYzFun/2gAIAQEAAQUAPznGWrlamlj2xVkT2vtU21O5h+F+QM4wc5dtLUgu0NlYevp7DFNFIzWvX5Y00l6awAvBHQ4X/Ruk4wKM8RkoGbMGjt+Qyqehym7PtoiMUA4csPwN0S81cf5QAD5YX4FGM/plo2nk1SXfrvwX5ZqRsk7uN5rsY8YiTz+aTgxnII0ErxwLkY7GOGUmpEiQVka+KD+JoTYIxxLVR8vV54MuWraT/g2Ts0kmurx3JpIqVGaRfrXPrXrYgWeFSyTftsQFpHYSScZWT6638OeMvCaZxvbUK1ptjtpKmlSLNT7BWubDp9i5Z2NKqI/Y/wDobbafkeStoKsqpFHEvtHsP1CKR4H1nvMMuQ2IZ4//2gAIAQICBj8ANjPRZZYovhxsp9cFtVP/2gAIAQMCBj8AMPg3z0rplC/NjS1JxTej37FXOS1Td9cFJ2a4/9oACAEBAQY/AOkPuHCA0HE+Ag/p8FyCjOZT+EG/bacbW1+BEWY2tyfuNofLrHKRc55caCrOaCDuNwrPkPZ9PcojnRh3RRpVBIj3MJmw1lxjJtdy082KhNSP2y6tra49qsgPztqT0U6f1OLQTDy8fUIDChEx59TcW09xp/w8sVEVivRku+jQTjD/AK1/l6ZnQCsb8oTLJJkYcVcltIQKWx3NKd7G0TqeaGTM8rKHUz+MOy52RUUsFViCxXgB2xzvlBlO3IQdJ8dBC4cSlsmRVFohFBmFUCYpoJdE4KsPGHWXpVVHgIvYDTjDEyUnhHt5lBnqs4NqhYyZ9ORVRpioM4Fi2qdQPGKRSKReqyWcg3jGMFCcBA55FtT2hYyNgyOqZPUpxsRM9kWZQ78wkxDhh3i6dIWdWHh5wjleTJzF/wAv4zinUbE2l1D2HgYOF/Vqsu8RYMLlZ6FTBy5AQx0AY0ixfUanujEg+lFHy6s4yZcXJuMbtNT2z1EWZsRVlqYA2+MnGG5nosh30i/cN7j1tX0+fbG5+3XC7E3/ADsKZFUcwHep+XTWLtznTEOFx18hWNvsNmCuBmLZMrep1RS0gOAJhsu2zIdwptzY7hzS76XLC591bmu5lVdU/qgJjUKooBoIf7dsm/unlz5V+ntRe/thc2Nij4zcrioI4iAn3HF7R/zY+ZfNajyhcuF1yY21V1MwY//Z" />
</div>
<div class="name">
<h4>Chief Financial Officer</h4>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis, cum?</p>
</div>
</div></a>
<a href="#"><div class="card-avatar">
<div class="avatar">
<div class="outer-round"><div class="inner-round"></div></div>
<img src="data:image/jpeg;base64,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" />
</div>
<div class="name">
<h4>Chief Executive Officer</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>
</div></a>
</div>
</main>
</body>
</html>Coding Video
Comment
