Bootstrap Snippet TEST: Initials like Google avatar using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
    <div class="row">
        <h2>Avatar like Google</h2>
        <hr>
        <div class="gavatar">RM</div>
    Ref: <a href="http://codepen.io/betdream/pen/vhygz">http://codepen.io/betdream/pen/vhygz</a>
    
    <hr>
    
abc
                <table>
                  <tr>
                    <td><div id="Red" class="swatch swatch-clickable" style="background-color:#d11600" title="red">1</div></td>
                    <td><div id="Orange" class="swatch swatch-clickable" style="background-color:#f96302">2</div></td>
                    <td><div id="Banana" class="swatch swatch-clickable" style="background-color:#ffed38">3</div></td>
                    <td><div id="Lemon" class="swatch swatch-clickable" style="background-color:#e5e111">4</div></td>
                    <td><div id="Lime" class="swatch swatch-clickable" style="background-color:#cee007"></div></td>
                    <td><div id="Evergreen" class="swatch swatch-clickable" style="background-color:#339e35"></div></td>
                  </tr><tr>
                    <td><div id="Lunar Blue" class="swatch swatch-clickable" style="background-color:#60afdd"></div></td>
                    <td><div id="Grape" class="swatch swatch-clickable" style="background-color:#9b4f96"></div></td>
                    <td><div id="Hot Pink" class="swatch swatch-clickable" style="background-color:#fc0093"></div></td>
                    <td><div id="Sagebrush" class="swatch swatch-clickable" style="background-color:#c6c699"></div></td>
                    <td><div id="Tan" class="swatch swatch-clickable" style="background-color:tan"></div></td>
                    <td><div id="White" class="swatch swatch-clickable" style="background-color:grey"></div></td>
                  </tr>
                </table>
   <br><br><br><br>
    
                    <table>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* START for gravatar like gogle*/
.gavatar{
color: rgb(255, 255, 255); background-color: #c6c699;
display: inline-block; font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
font-size: 36px; border-radius: 80px; width: 80px; height: 80px; line-height: 80px; margin: 15px; text-align: center;
}    
.swatch {
  width:50px;
  height:50px;
  border-radius:25px;
  border: 4px solid #fff;
}
/* END for gravatar like gogle*/
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST: Initials like Google avatar"
Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Initials like Google avatar" Bootstrap 3.3.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Initials like Google avatar"
Bootstrap 3.3.0 Snippet by mrmccormack