tanmaypatel · August 29, 2015 14:22
diff --git a/test.html b/test.html
 <!DOCTYPE HTML>
 <html>
  <head>
    <meta charset="UTF-8">
    <title>Affordable Healthcare</title>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,900,700,400italic,500' rel='stylesheet' type='text/css'>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <style>
 		
        html, body
        {
            padding: 0;
            margin: 0;
        }
        
        body 
        {
 			font-family: 'Roboto', sans-serif;
 			font-size: 14px;
 		}
 		
 		#mainContainer
        { 
            width: 100%; 
            text-align:center;
        }
 		
 		#divCircle 
        {
 			margin-left:auto; 
 			margin-right:auto; 
 			width: 500px;
 			height: 500px;	
 			position: relative;
            border: 5px solid #CCCCCC;
            border-radius: 50% 50%;
 		}
 		
 		#middleBubble {
 		  text-align:center;
 		  vertical-align:top;
 		  background: url(images/chain.jpg);
 		  background-repeat: no-repeat;
 		  background-size: cover;
 		  color: #252525; /*#6d6e71*/
 		  font-size: 1em;
 		  height:50%;		
 		  width: 50%;	
 		  margin: auto;
 		  position: absolute;
 		  text-align:center;
 		}
 		
 		#middleBubble b{
 			font-size: 1.2em;
 		}
 		
 		#middleBubble p{
 			margin: 2em;
 		}
        
        .charms
        {
            position: absolute;
            top: 50%;
            left: 50%;
            background: blue;
        }
        
        .charm__holder
        {
            position: absolute;
        }
        
        .charm__image
        {
            color: white;
            width: 50px;
            line-height: 50px;
            text-align: center;
 			height: 50px;
            background: red;
            font-size: 3em;
            display: inline-block;
            transform-origin: center center;
            transform: translateX(25px) rotate(-90deg);
            transition: transform .1s ease-in;
        }
        
        .charm__image:hover
        {
            transform: translateX(50px) rotate(-90deg) scale(2);
        }
        
 	</style>
    
    <script type="text/javascript">
 		$(document).ready(function(){
            /*
 			//Center the "info" bubble in the  "circle" div
 			var divTop = ($("#divCircle").height() - $("#middleBubble").height())/2;
 			var divLeft = ($("#divCircle").width() - $("#middleBubble").width())/2;
 			$("#middleBubble").css("top",divTop + "px");
 			$("#middleBubble").css("left",divLeft + "px");
            */
 			
 			//Arrange the icons in a circle centered in the div
            
            var $charmElements = $("#divCircle .charm__holder");
 			var numItems = $charmElements.length; //How many items are in the circle?
 			var rotateDegree = 360 / numItems; //calculate the amount of space to put between the items.
 			
            var braceletRadius = $('#divCircle').outerWidth() / 2;
            
 			//Now loop through the buttons and position them in a circle
 			$charmElements.each(function(index) 
            {
                var $this = $(this);
                
 				$(this).css("transform", 'translate(-' + ($this.outerWidth() / 2) + 'px, -' + ($this.outerHeight() / 2) + 'px) rotate(' + (rotateDegree * index) + 'deg) translate(' + braceletRadius + 'px, 0)');
 			});
 		});
 	</script>
  </head>
  <body>
    	<div id="divCircle">
        	<div id="middleBubble">&nbsp;</div>
            <div class="charms">
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">1</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">2</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">3</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">4</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">5</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">6</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">7</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">8</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">9</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">10</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">11</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">12</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">13</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">14</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">15</span></span>
                <span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">16</span></span>
            </div>
        </div>
  </body>  
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Affordable Healthcare</title>
	<link href='http://fonts.googleapis.com/css?family=Roboto:400,900,700,400italic,500' rel='stylesheet' type='text/css'>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<style>

	html, body
	{
	padding: 0;
	margin: 0;
	}

	body
	{
	font-family: 'Roboto', sans-serif;
	font-size: 14px;
	}

	#mainContainer
	{
	width: 100%;
	text-align:center;
	}

	#divCircle
	{
	margin-left:auto;
	margin-right:auto;
	width: 500px;
	height: 500px;
	position: relative;
	border: 5px solid #CCCCCC;
	border-radius: 50% 50%;
	}

	#middleBubble {
	text-align:center;
	vertical-align:top;
	background: url(images/chain.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	color: #252525; /#6d6e71/
	font-size: 1em;
	height:50%;
	width: 50%;
	margin: auto;
	position: absolute;
	text-align:center;
	}

	#middleBubble b{
	font-size: 1.2em;
	}

	#middleBubble p{
	margin: 2em;
	}

	.charms
	{
	position: absolute;
	top: 50%;
	left: 50%;
	background: blue;
	}

	.charm__holder
	{
	position: absolute;
	}

	.charm__image
	{
	color: white;
	width: 50px;
	line-height: 50px;
	text-align: center;
	height: 50px;
	background: red;
	font-size: 3em;
	display: inline-block;
	transform-origin: center center;
	transform: translateX(25px) rotate(-90deg);
	transition: transform .1s ease-in;
	}

	.charm__image:hover
	{
	transform: translateX(50px) rotate(-90deg) scale(2);
	}

	</style>

	<script type="text/javascript">
	$(document).ready(function(){
	/*
	//Center the "info" bubble in the "circle" div
	var divTop = ($("#divCircle").height() - $("#middleBubble").height())/2;
	var divLeft = ($("#divCircle").width() - $("#middleBubble").width())/2;
	$("#middleBubble").css("top",divTop + "px");
	$("#middleBubble").css("left",divLeft + "px");
	*/

	//Arrange the icons in a circle centered in the div

	var $charmElements = $("#divCircle .charm__holder");
	var numItems = $charmElements.length; //How many items are in the circle?
	var rotateDegree = 360 / numItems; //calculate the amount of space to put between the items.

	var braceletRadius = $('#divCircle').outerWidth() / 2;

	//Now loop through the buttons and position them in a circle
	$charmElements.each(function(index)
	{
	var $this = $(this);

	$(this).css("transform", 'translate(-' + ($this.outerWidth() / 2) + 'px, -' + ($this.outerHeight() / 2) + 'px) rotate(' + (rotateDegree * index) + 'deg) translate(' + braceletRadius + 'px, 0)');
	});
	});
	</script>
	</head>
	<body>
	<div id="divCircle">
	<div id="middleBubble"> </div>
	<div class="charms">
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">1</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">2</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">3</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">4</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">5</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">6</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">7</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">8</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">9</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">10</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">11</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">12</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">13</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">14</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/1.png" id="test1">15</span></span>
	<span class="charm__holder"><span class="charm__image" src="images/2.png" id="test2">16</span></span>
	</div>
	</div>
	</body>
	</html>