<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> <tr> <td><div id="Red" class="swatch swatch-clickable" style="background-color:#d11600">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> </div> </div>

/* 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*/