| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta charset="UTF-8">
|
| 5 | <title>Demo: Avatar</title>
|
| 6 |
|
| 7 | <link rel="stylesheet" href="../build/marble.css">
|
| 8 | <link rel="stylesheet" href="../build/fonts/galano/galano.css">
|
| 9 | <link rel="stylesheet" href="../build/fonts/icon-12/icon-12.css">
|
| 10 | <link rel="stylesheet" href="../build/fonts/icon-16/icon-16.css">
|
| 11 |
|
| 12 | <style type="text/css">
|
| 13 |
|
| 14 | body {
|
| 15 | padding: 50px 0;
|
| 16 | }
|
| 17 |
|
| 18 | </style>
|
| 19 |
|
| 20 | <style>
|
| 21 | .avatar-initials,
|
| 22 | .avatar-number,
|
| 23 | .avatar-icon,
|
| 24 | .avatar-icon-16,
|
| 25 | .avatar-icon-12,
|
| 26 | .avatar-container {
|
| 27 | display: inline-block;
|
| 28 | vertical-align: middle;
|
| 29 | }
|
| 30 | </style>
|
| 31 | </head>
|
| 32 | <body>
|
| 33 | <div class="container-hybrid">
|
| 34 | <h1>Avatar Icon Fonts</h1>
|
| 35 | <a class="avatar-icon-16 avatar-large" href="#" style="background: #9552ef;">
|
| 36 | <span class="icon-16-heart" style="color: white;"></span>
|
| 37 | </a>
|
| 38 |
|
| 39 | <a class="avatar-icon-12 avatar-large" href="#" style="background: #647efb;">
|
| 40 | <span class="icon-12-link" style="color: white;"></span>
|
| 41 | </a>
|
| 42 |
|
| 43 | <a class="avatar-icon-16 avatar-medium" href="#" style="background: #c25daa;">
|
| 44 | <span class="icon-16-bell" style="color: white;"></span>
|
| 45 | </a>
|
| 46 |
|
| 47 | <a class="avatar-icon-12 avatar-medium" href="#" style="background: #ff7175">
|
| 48 | <span class="icon-12-star" style="color: white;"></span>
|
| 49 | </a>
|
| 50 |
|
| 51 | <h1>Avatar Icon SVG</h1>
|
| 52 | <a class="avatar-icon avatar-xlarge" href="#" style="background: #647efb;">
|
| 53 | <img src="back.svg" alt="Back Icon">
|
| 54 | </a>
|
| 55 |
|
| 56 | <a class="avatar-icon avatar-large" href="#" style="background: #647efb;">
|
| 57 | <img src="back.svg" alt="Back Icon">
|
| 58 | </a>
|
| 59 |
|
| 60 | <a class="avatar-icon avatar-medium" href="#" style="background: #647efb;">
|
| 61 | <img src="back.svg" alt="Back Icon">
|
| 62 | </a>
|
| 63 |
|
| 64 | <a class="avatar-icon avatar-small" href="#" style="background: #647efb;">
|
| 65 | <img src="back.svg" alt="Back Icon">
|
| 66 | </a>
|
| 67 |
|
| 68 | <a class="avatar-icon avatar-xsmall" href="#" style="background: #647efb;">
|
| 69 | <img src="back.svg" alt="Back Icon">
|
| 70 | </a>
|
| 71 |
|
| 72 | <h1>Avatar Initials</h1>
|
| 73 |
|
| 74 | <a class="avatar-initials avatar-xlarge" href="#">a</a>
|
| 75 |
|
| 76 | <a class="avatar-initials avatar-large" href="#">b</a>
|
| 77 |
|
| 78 | <a class="avatar-initials avatar-medium" href="#">c</a>
|
| 79 |
|
| 80 | <a class="avatar-initials avatar-small" href="#">d</a>
|
| 81 |
|
| 82 | <a class="avatar-initials avatar-xsmall" href="#">e</a>
|
| 83 |
|
| 84 | <h1>Avatar Number</h1>
|
| 85 |
|
| 86 | <a class="avatar-number avatar-xlarge" href="#">+1</a>
|
| 87 |
|
| 88 | <a class="avatar-number avatar-large" href="#">+1</a>
|
| 89 |
|
| 90 | <a class="avatar-number avatar-medium" href="#">+1</a>
|
| 91 |
|
| 92 | <a class="avatar-number avatar-small" href="#">+1</a>
|
| 93 |
|
| 94 | <a class="avatar-number avatar-xsmall" href="#">+1</a>
|
| 95 |
|
| 96 | <h1>Avatar Photo</h1>
|
| 97 |
|
| 98 | <a class="avatar-photo avatar-xlarge" href="#">
|
| 99 | <img src="http://www.gravatar.com/avatar/42327de520e674a6d1686845b30778d0?d=blank&s=100" alt="Chloe Hart">
|
| 100 | </a>
|
| 101 |
|
| 102 | <a class="avatar-photo avatar-large" href="#">
|
| 103 | <img src="http://www.gravatar.com/avatar/42327de520e674a6d1686845b30778d0?d=blank&s=100" alt="Chloe Hart">
|
| 104 | </a>
|
| 105 |
|
| 106 | <a class="avatar-photo avatar-medium" href="#">
|
| 107 | <img src="http://www.gravatar.com/avatar/42327de520e674a6d1686845b30778d0?d=blank&s=100" alt="Bobbie Flores">
|
| 108 | </a>
|
| 109 |
|
| 110 | <a class="avatar-photo avatar-small" href="#">
|
| 111 | <img src="http://www.gravatar.com/avatar/42327de520e674a6d1686845b30778d0?d=blank&s=100" alt="Maureen Cruz">
|
| 112 | </a>
|
| 113 |
|
| 114 | <a class="avatar-photo avatar-xsmall" href="#">
|
| 115 | <img src="http://www.gravatar.com/avatar/42327de520e674a6d1686845b30778d0?d=blank&s=100" alt="Maureen Cruz">
|
| 116 | </a>
|
| 117 |
|
| 118 | <h1>Avatar Photo + Initials</h1>
|
| 119 |
|
| 120 | <a class="avatar-container avatar-medium" href="#">
|
| 121 | <span class="avatar-photo avatar-medium">
|
| 122 | <img src="http://www.gravatar.com/avatar/42327de520e674a6d1686845b30778d0?d=blank&s=100" alt="Eduardo Lundgren">
|
| 123 | </span>
|
| 124 | <span class="avatar-initials avatar-medium">
|
| 125 | E
|
| 126 | </span>
|
| 127 | </a>
|
| 128 |
|
| 129 | <a class="avatar-container avatar-medium" href="#">
|
| 130 | <span class="avatar-photo avatar-medium">
|
| 131 | <img src="http://www.gravatar.com/avatar/0?d=blank&s=100" alt="Eduardo Lundgren">
|
| 132 | </span>
|
| 133 | <span class="avatar-initials avatar-medium">
|
| 134 | E
|
| 135 | </span>
|
| 136 | </a>
|
| 137 |
|
| 138 | <h1>Avatar Squared</h1>
|
| 139 |
|
| 140 | <a class="avatar-photo avatar-medium avatar-squared" href="#">
|
| 141 | <img src="http://www.gravatar.com/avatar/42327de520e674a6d1686845b30778d0?d=blank&s=100" alt="Chloe Hart">
|
| 142 | </a>
|
| 143 |
|
| 144 | <a class="avatar-icon avatar-medium avatar-squared avatar-white avatar-we" href="#">
|
| 145 | <span class="icon-16-arrow-up-rod"></span>
|
| 146 | </a>
|
| 147 |
|
| 148 | <a class="avatar-initials avatar-medium avatar-squared avatar-white avatar-we" href="#">We</a>
|
| 149 | <a class="avatar-initials avatar-medium avatar-squared avatar-success avatar-we" href="#">We</a>
|
| 150 | <a class="avatar-initials avatar-medium avatar-squared avatar-primary avatar-we" href="#">We</a>
|
| 151 | <a class="avatar-initials avatar-medium avatar-squared avatar-danger avatar-we" href="#">We</a>
|
| 152 |
|
| 153 | <h1>Avatar Colors</h1>
|
| 154 |
|
| 155 | <a class="avatar-initials avatar-medium avatar-success avatar-we" href="#">We</a>
|
| 156 | <a class="avatar-initials avatar-medium avatar-primary avatar-we" href="#">We</a>
|
| 157 | <a class="avatar-initials avatar-medium avatar-danger avatar-we" href="#">We</a>
|
| 158 | <a class="avatar-initials avatar-medium avatar-white avatar-we" href="#">We</a>
|
| 159 | </div>
|
| 160 | </body>
|
| 161 | </html>
|