Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <body>
	<div id="earth">
		<div id="circle-container">
			<!-- UK -->
			<div class="circle" id="fb-uk" title="">
			</div>
			<!-- USA -->
			<div class="circle" id="fb-usa" title="">
			</div>
			<!-- Canada -->
			<div class="circle" id="fb-can" title="">
			</div>
			<!-- China -->
			<div class="circle" id="fb-chin" title="">
			</div>
			<!-- India -->
			<div class="circle" id="fb-ind" title="">
			</div>
			<!-- France -->
			<div class="circle" id="fb-fr" title="">
			</div>
			<!-- Italy -->
			<div class="circle" id="fb-it" title="">
			</div>
			<!-- Brazil -->
			<div class="circle" id="fb-bra" title="">
			</div>
			<!-- Indonesia -->
			<div class="circle" id="fb-indo" title="">
			</div>
			<!-- Germany -->
			<div class="circle" id="fb-ger" title="">
			</div>
			<!-- South Africa -->
			<div class="circle" id="fb-safr" title="">
			</div>
			<!-- Turkey -->
			<div class="circle" id="fb-tur" title="">
			</div>
			<!-- Australia -->
			<div class="circle" id="fb-aus" title="">
			</div>
			<!-- Mexico -->
			<div class="circle" id="fb-mex" title="">
			</div>
			<!-- Japan -->
			<div class="circle" id="fb-jap" title="">
			</div>
			<!-- Egypt -->
			<div class="circle" id="fb-egy" title="">
			</div>
			<!-- Russia -->
			<div class="circle" id="fb-rus" title="">
			</div>
			<!-- Argentina -->
			<div class="circle" id="fb-arg" title="">
			</div>
			<!-- Phillipines -->
			<div class="circle" id="fb-phil" title="">
			</div>
			<!-- Malaysia -->
			<div class="circle" id="fb-mal" title="">
			</div>
			<!-- Thailand -->
			<div class="circle" id="fb-thai" title="">
			</div>
			<!-- S Korea -->
			<div class="circle" id="fb-skor" title="">
			</div>
			<!-- Taiwan -->
			<div class="circle" id="fb-tai" title="">
			</div>
			<!-- Columbia -->
			<div class="circle" id="fb-col" title="">
			</div>
			<!-- Peru -->
			<div class="circle" id="fb-peru" title="">
			</div>
			<!-- Venezuela -->
			<div class="circle" id="fb-ven" title="">
			</div>
			<!-- Equaduor -->
			<div class="circle" id="fb-equ" title="">
			</div>
			<!-- Chile -->
			<div class="circle" id="fb-chil" title="">
			</div>
			<!-- Nigeria -->
			<div class="circle" id="fb-nig" title="">
			</div>
			<!-- Morocco -->
			<div class="circle" id="fb-mor" title="">
			</div>
			<!-- Spain -->
			<div class="circle" id="fb-spa" title="">
			</div>
			<!-- Poland -->
			<div class="circle" id="fb-pol" title="">
			</div>
			<!-- Norway -->
			<div class="circle" id="fb-nor" title="">
			</div>
		</div> <!-- circle container -->
	</div> <!-- earth -->
	
	<div class="stars">
		<div class="star one"></div>
		<div class="star two"></div>
		<div class="star three"></div>
		<div class="star four"></div>
		<div class="star five"></div>
		<div class="star six"></div>
	</div>

	<header>
		<h1>The Social Media Invasion</h1>
		<p>
			Select a year to watch Facebook and Twitter take over the world.
		</p>
	</header>
	
	<ul id="menu">
		<li>
			<a class="button" href="#" id="fb-2009">2009 Facebook</a>
			<span></span>
			<a class="button" href="#" id="fb-2014">2014 Facebook</a>
		</li>	
		<li>
			<a class="button" href="#" id="tw-2009">2009 Twitter</a>
			<span></span> 
			<a class="button" href="#" id="tw-2014">2014 Twitter</a>
		</li>	
	</ul>

	<div class="clear"></div>
	<p>
		Hover over a circle for an exact number.
	</p>

	<div id="scale">
		<div id="scaleCircle"></div>
		<p>
			= 50 million users
		</p>
	</div>

	<p id="bonus">
		<strong>Bonus:</strong> Hover over a UFO to learn more!
	</p>
	<div id="starbackdrop"></div>
</body>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Roboto:300,400,700);
@import url(https://fonts.googleapis.com/css?family=Lobster);

body {
	padding: 20px 75px;
	background-color: #14101b;
	background-image: url('http://arjanjassal.com/social-media-invasion/img/stars.png');
	font-family: 'Roboto', sans-serif;
	font-weight: 400;
	font-size: 14px;
	color: white;
	-webkit-font-smoothing: antialiased;
	-moz-font-smoothing: antialiased;
  height: 1200px;
}

#starbackdrop {
	z-index: -1000;
	position: absolute;
	width: 100%;
	height: 800px;
	top: 0;
	left: 0;
	background-image: url('http://arjan-jassal.com/project2/img/snow1.png');
	background-size: 20%;
	-webkit-animation: bgstars 30s linear infinite;
	-moz-animation: bgstars 30s linear infinite;
}

@-webkit-keyframes bgstars {
	from { -webkit-transform:scale(1); }
	to { -webkit-transform:scale(.7); }
}

@-moz-keyframes bgstars {
	from { -moz-transform:scale(1); }
	to { -moz-transform:scale(.7); }
}

a {
	color: white;
	text-decoration: none;
}

h1 {
	color: #0dc7ff;
	font-family: 'Lobster';
	font-size: 48px;
}

header {
	padding: 15px 0;
}

header p {
	margin-top: 16px;
}

#earth {
	z-index: 200;
	float: right;
	overflow: hidden;
	margin: 15px auto;
	width:550px;
	height:550px;
	position: relative;
	border-radius: 50%;
	background: url('http://arjanjassal.com/social-media-invasion/img/globe.svg') center repeat-x;
	background-position: center;
	box-shadow: inset -15px -14px 150px 20px rgba(0,0,0,.5), inset 100px 110px 101px 9px rgba(255,255,255,.1); 

	-webkit-animation: rotate 70s linear infinite;
	-moz-animation: rotate 70s linear infinite;
}

#earth:hover, #earth:hover .circle {
	-webkit-animation-play-state: paused;
	-moz-animation-play-state: paused;
}

@-webkit-keyframes rotate {
	from {background-position-x: -380px; }
	to {background-position-x: 900px; }
}
@-moz-keyframes rotate {
	from {background-position: -380px center; }
	to {background-position: 900px center; }
}

@-webkit-keyframes rotateCircle {
	from {left:-380px; }
	to {left:900px; }
}
@-moz-keyframes rotateCircle {
	from {left:-380px; }
	to {left:900px; }
}

.circle {
	position: absolute;
	border-radius: 50%;
	box-shadow: 0px 2px 1px rgba(0,0,0,.7);

	-webkit-animation: rotateCircle 70s linear infinite;
	-webkit-transition: all .4s ease-in-out;
	-moz-animation: rotateCircle 70s linear infinite;
	-moz-transition: all .4s ease-in-out;
}

.circle:hover {
	
}

.fbcircle {
	opacity: .85;
	padding: 2px;
	background: #3B5998;
}

.twcircle {
	opacity: .85;
	padding: 3px;
	background: #4099FF;
}

.circle:hover[title]:after { 
	content: attr(title); 
	position: absolute;
	top:0;
	right: 0;
	padding: 2px;
    white-space: nowrap;
    -webkit-transform:scale(1.3);
    -moz-transform:scale(1.3);
	background: tomato; 
}

.circle[title]:after {
	z-index: 1000;
}

ul#menu {
	float: left;
	margin:15px 0px 0 0px;
}

ul#menu li {
	position: relative;
	margin-bottom: 30px;
}

ul#menu li span {
	display: inline-block;
	width: 30px;
}

ul#menu li a.button {
	display: inline-block;
	text-align: center;
	width: 110px;
	color: #5d5d5d;
	background: white;
	border:0px solid white;
	border-radius: 10px 0px;
	padding: 10px 8px;

	-webkit-transition:all .3s linear;
	-moz-transition:all .3s linear;
}

.button-style {
	background:#0EDF61 !important;
	color:#fff !important;
}

#scale {
	float: left;
	margin:30px 0px 30px 0px;
	clear: left;
}

#scaleCircle {
	display: inline-block;
	float: left;
	padding: 25px;
	border-radius: 50%;
	background:white;
}

#scale p {
	line-height: 50px;
	margin-left: 9px;
	float: left;
}

#bonus {
	position: absolute;
	bottom: 15px;
	margin: 15px 0;
	font-size: 14px;
	padding: 6px;
	background:rgba(255,255,255,.15);
	border-radius: 4px;
	color:#fff;
}

.clear {clear: left;}

.stars { -webkit-transition: all .4s ease-in-out;}

.star {
	z-index: 100;
	position: absolute;
	border-radius:100%;
	box-shadow: inset 3px 3px 4px 3px rgba(255,255,255,.93);

	-webkit-transition: all .6s ease-in-out;
	-moz-transition: all .6s ease-in-out;
}

.star:nth-child(odd) {
	width: 200px;
	height: 200px;
	-webkit-transform:scale(.06);
	-moz-transform:scale(.06);
}

.star:nth-child(even) {
	width: 180px;
	height: 180px;
	-webkit-transform:scale(.08);
	-moz-transform:scale(.08);
}

.star:after {
	content: " ";
	display: block;
	margin: 115px 0 0 -100px;
	border-radius: 50%;
	box-shadow: 2px -4px 1px 2px white, inset -6px -12px 17px 4px rgba(0,0,0,.25);
	width: 400px;
	height:85px;
	background: #f9f9f9;
}

.star:nth-child(even):hover {
	z-index: 400;
	-webkit-animation-play-state:paused;
	-webkit-transform:scale(1);
	-webkit-transform:rotate(-10deg);

	-moz-animation-play-state:paused;
	-moz-transform:scale(1);
	-moz-transform:rotate(-10deg);
}

.star:nth-child(odd):hover {
	z-index: 400;
	-webkit-animation-play-state:paused;
	-webkit-transform:scale(1);
	-webkit-transform:rotate(10deg);

	-moz-animation-play-state:paused;
	-moz-transform:scale(1);
	-moz-transform:rotate(10deg);
}

.star.one {
	-webkit-animation: star1 30s linear infinite;
	-moz-animation: star1 20s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star1.svg');
}

.star.two {
	-webkit-animation: star2 28s linear infinite;
	-moz-animation: star2 28s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star2.svg');
}

.star.three {
	-webkit-animation: star3 32s linear infinite;
	-moz-animation: star3 22s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star3.svg');
}

.star.four {
	-webkit-animation: star4 30s linear infinite;
	-moz-animation: star4 30s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star4.svg');
}

.star.five {
	-webkit-animation: star5 30s linear infinite;
	-moz-animation: star5 30s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star5.svg');
}

.star.six {
	-webkit-animation: star6 52s linear infinite;
	-moz-animation: star6 52s linear infinite;
	background: rgba(255,255,255,.85) url('http://arjan-jassal.com/project2/img/star6.svg');
}

@-webkit-keyframes star1 {
	0%   {top:200px; left:300px;}
	20%   {top:210px; left:360px;}
	40%  {top:220px; left:420px;}
	60%  {top:210px; left:360px;}
	100%  {top:200px; left:300px;}
}

@-webkit-keyframes star2 {
	0%   {top:85px; left:400px;}
	20%   {top:88px; left:470px;}
	40%  {top:95px; left:570px;}
	60%  {top:86px; left:470px;}
	100%  {top:85px; left:400px;}
}

@-webkit-keyframes star3 {
	0%   {top:400px; left:180px;}
	20%   {top:380px; left:240px;}
	40%  {top:370px; left:330px;}
	60%  {top:380px; left:240px;}
	100%  {top:400px; left:180px;}
}

@-webkit-keyframes star4 {
	0%   {top:320px; left:0px;}
	20%   {top:300px; left:50px;}
	40%  {top:290px; left:200px;}
	60%  {top:295px; left:50px;}
	100%  {top:320px; left:0px;}
}

@-webkit-keyframes star5 {
	0%   {top:300px; left:1000px;}
	20%   {top:290px; left:1150px;}
	40%  {top:270px; left:1200px;}
	60%  {top:295px; left:1150px;}
	100%  {top:300px; left:1000px;}
}

@-webkit-keyframes star6 {
	0%   {top:490px; left:900px;}
	20%   {top:440px; left:1100px;}
	40%  {top:420px; left:800px;}
	50%  {top:420px; left:400px;}
	70%  {top:410px; left:800px;}
	100%  {top:490px; left:900px;}
}

@-webkit-keyframes star7 {
	0%   {top:30px; left:970px;}
	20%   {top:60px; left:1150px;}
	40%  {top:40px; left:1280px;}
	60%  {top:70px; left:1100px;}
	100%  {top:30px; left:970px;}
}

@-moz-keyframes star1 {
	0%   {top:200px; left:300px;}
	20%   {top:210px; left:360px;}
	40%  {top:220px; left:420px;}
	60%  {top:210px; left:360px;}
	100%  {top:200px; left:300px;}
}

@-moz-keyframes star2 {
	0%   {top:85px; left:400px;}
	20%   {top:88px; left:470px;}
	40%  {top:95px; left:570px;}
	60%  {top:86px; left:470px;}
	100%  {top:85px; left:400px;}
}

@-moz-keyframes star3 {
	0%   {top:400px; left:180px;}
	20%   {top:380px; left:240px;}
	40%  {top:370px; left:330px;}
	60%  {top:380px; left:240px;}
	100%  {top:400px; left:180px;}
}

@-moz-keyframes star4 {
	0%   {top:320px; left:0px;}
	20%   {top:300px; left:50px;}
	40%  {top:290px; left:200px;}
	60%  {top:295px; left:50px;}
	100%  {top:320px; left:0px;}
}

@-moz-keyframes star5 {
	0%   {top:300px; left:1000px;}
	20%   {top:290px; left:1150px;}
	40%  {top:270px; left:1200px;}
	60%  {top:295px; left:1150px;}
	100%  {top:300px; left:1000px;}
}

@-moz-keyframes star6 {
	0%   {top:490px; left:900px;}
	20%   {top:440px; left:1100px;}
	40%  {top:420px; left:700px;}
	50%  {top:420px; left:400px;}
	70%  {top:410px; left:700px;}
	100%  {top:490px; left:900px;}
}

@media (min-width: 1440px) {
	body {
		padding: 60px 60px;
	}
}
              
            
!

JS

              
                $(document).ready(function() {
		// 2009 facebook
		$('#fb-2009').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#fb-2009').addClass('button-style');
    
			// reset circle
			$('#circle-container div').attr('class', 'circle fbcircle');
		
			// uk 
			$('#fb-uk').addClass('fb-uk-shrink');
			$('#fb-uk').prop('title', '20M');
			// usa 
			$('#fb-usa').addClass('fb-usa-shrink');
			$('#fb-usa').prop('title', '85M');
			// canada 
			$('#fb-can').addClass('fb-can-shrink');
			$('#fb-can').prop('title', '12M');
			// china 
			$('#fb-chin').addClass('fb-chin-shrink');
			// india 
			$('#fb-ind').addClass('fb-ind-shrink');
			$('#fb-ind').prop('title', '4M');
			// france 
			$('#fb-fr').addClass('fb-fr-shrink');
			$('#fb-fr').prop('title', '12M');
			// italy 
			$('#fb-it').addClass('fb-it-shrink');
			$('#fb-it').prop('title', '11M');
			// brazil 
			$('#fb-bra').addClass('fb-bra-shrink');
			$('#fb-bra').prop('title', '2M');
			// indonesia 
			$('#fb-indo').addClass('fb-indo-shrink');
			$('#fb-indo').prop('title', '9M');
			// germany 
			$('#fb-ger').addClass('fb-ger-shrink');
			$('#fb-ger').prop('title', '4M');
			// s africa 
			$('#fb-safr').addClass('fb-safr-shrink');
			$('#fb-safr').prop('title', '2M');
			// turkey 
			$('#fb-tur').addClass('fb-tur-shrink');
			$('#fb-tur').prop('title', '14M');
			// australia
			$('#fb-aus').addClass('fb-aus-shrink');
			$('#fb-aus').prop('title', '2M');
			// mexico
			$('#fb-mex').addClass('fb-mex-shrink');
			$('#fb-mex').prop('title', '5M');
			// japan
			$('#fb-jap').addClass('fb-jap-shrink');
			$('#fb-jap').prop('title', '4M');
			// egypt
			$('#fb-egy').addClass('fb-egy-shrink');
			$('#fb-egy').prop('title', '3M');
			// russia
			$('#fb-rus').addClass('fb-rus-shrink');
			$('#fb-rus').prop('title', '3M');
			// argentina
			$('#fb-arg').addClass('fb-arg-shrink');
			$('#fb-arg').prop('title', '3M');
			// phillipines
			$('#fb-phil').addClass('fb-phil-shrink');
			$('#fb-phil').prop('title', '7M');
			// malaysia
			$('#fb-mal').addClass('fb-mal-shrink');
			$('#fb-mal').prop('title', '2M');
			// thailand
			$('#fb-thai').addClass('fb-thai-shrink');
			$('#fb-thai').prop('title', '1M');
			// s korea
			$('#fb-skor').addClass('fb-skor-shrink');
			$('#fb-skor').prop('title', '2M');
			// taiwan
			$('#fb-tai').addClass('fb-tai-shrink');
			$('#fb-tai').prop('title', '2M');
			// columbia
			$('#fb-col').addClass('fb-col-shrink');
			$('#fb-col').prop('title', '3M');
			// peru
			$('#fb-peru').addClass('fb-peru-shrink');
			$('#fb-peru').prop('title', '2M');
			// venezuela
			$('#fb-ven').addClass('fb-ven-shrink');
			$('#fb-ven').prop('title', '0.7M');
			// equador
			$('#fb-equ').addClass('fb-equ-shrink');
			$('#fb-equ').prop('title', '0.6M');
			// chile
			$('#fb-chil').addClass('fb-chil-shrink');
			$('#fb-chil').prop('title', '0.9M');
			// nigeria
			$('#fb-nig').addClass('fb-nig-shrink');
			$('#fb-nig').prop('title', '0.4M');
			// morocco
			$('#fb-mor').addClass('fb-mor-shrink');
			$('#fb-mor').prop('title', '0.7M');
			// spain
			$('#fb-spa').addClass('fb-spa-shrink');
			$('#fb-spa').prop('title', '3M');
			// poland
			$('#fb-pol').addClass('fb-pol-shrink');
			$('#fb-pol').prop('title', '0.8M');
			// norway
			$('#fb-nor').addClass('fb-nor-shrink');
			$('#fb-nor').prop('title', '0.8M');
		});

		// 2014 facebook
		$('#fb-2014').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#fb-2014').addClass('button-style');

			// reset circle
			$('#circle-container div').attr('class', 'circle fbcircle');
		
			//uk
			$('#fb-uk').addClass('fb-uk-grow');
			$('#fb-uk').prop('title', '36M');
			// usa 
			$('#fb-usa').addClass('fb-usa-grow');
			$('#fb-usa').prop('title', '190M');
			// canada 
			$('#fb-can').addClass('fb-can-grow');
			$('#fb-can').prop('title', '19M');
			// china 
			$('#fb-chin').addClass('fb-chin-grow');
			$('#fb-chin').prop('title', '10M');
			// india 
			$('#fb-ind').addClass('fb-ind-grow');
			$('#fb-ind').prop('title', '130M');
			// france 
			$('#fb-fr').addClass('fb-fr-grow');
			$('#fb-fr').prop('title', '28M');
			// italy 
			$('#fb-it').addClass('fb-it-grow');
			$('#fb-it').prop('title', '26M');
			// brazil 
			$('#fb-bra').addClass('fb-bra-grow');
			$('#fb-bra').prop('title', '86M');
			// indonesia 
			$('#fb-indo').addClass('fb-indo-grow');
			$('#fb-indo').prop('title', '62M');
			// germany 
			$('#fb-ger').addClass('fb-ger-grow');
			$('#fb-ger').prop('title', '28M');
			// s africa 
			$('#fb-safr').addClass('fb-safr-grow');
			$('#fb-safr').prop('title', '28M');
			// turkey 
			$('#fb-tur').addClass('fb-tur-grow');
			$('#fb-tur').prop('title', '36M');
			// australia
			$('#fb-aus').addClass('fb-aus-grow');
			$('#fb-aus').prop('title', '13M');
			// mexico
			$('#fb-mex').addClass('fb-mex-grow');
			$('#fb-mex').prop('title', '50M');
			// japan
			$('#fb-jap').addClass('fb-jap-grow');
			$('#fb-jap').prop('title', '22M');
			// egypt
			$('#fb-egy').addClass('fb-egy-grow');
			$('#fb-egy').prop('title', '18M');
			// russia
			$('#fb-rus').addClass('fb-rus-grow');
			$('#fb-rus').prop('title', '14M');
			// argentina
			$('#fb-arg').addClass('fb-arg-grow');
			$('#fb-arg').prop('title', '18M');
			// phillipines
			$('#fb-phil').addClass('fb-phil-grow');
			$('#fb-phil').prop('title', '40M');
			// malaysia
			$('#fb-mal').addClass('fb-mal-grow');
			$('#fb-mal').prop('title', '17M');
			// thailand
			$('#fb-thai').addClass('fb-thai-grow');
			$('#fb-thai').prop('title', '22M');
			// s korea
			$('#fb-skor').addClass('fb-skor-grow');
			$('#fb-skor').prop('title', '16M');
			// taiwan
			$('#fb-tai').addClass('fb-tai-grow');
			$('#fb-tai').prop('title', '19M');
			// columbia
			$('#fb-col').addClass('fb-col-grow');
			$('#fb-col').prop('title', '27M');
			// peru
			$('#fb-peru').addClass('fb-peru-grow');
			$('#fb-peru').prop('title', '13M');
			// venezuela
			$('#fb-ven').addClass('fb-ven-grow');
			$('#fb-ven').prop('title', '13M');
			// equador
			$('#fb-equ').addClass('fb-equ-grow');
			$('#fb-equ').prop('title', '10M');
			// chile
			$('#fb-chil').addClass('fb-chil-grow');
			$('#fb-chil').prop('title', '15M');
			// nigeria
			$('#fb-nig').addClass('fb-nig-grow');
			$('#fb-nig').prop('title', '9M');
			// morocco
			$('#fb-mor').addClass('fb-mor-grow');
			$('#fb-mor').prop('title', '8M');
			// spain
			$('#fb-spa').addClass('fb-spa-grow');
			$('#fb-spa').prop('title', '20M');
			// poland
			$('#fb-pol').addClass('fb-pol-grow');
			$('#fb-pol').prop('title', '17M');
			// norway
			$('#fb-nor').addClass('fb-nor-grow');
			$('#fb-nor').prop('title', '14M');
		});

		// 2009 twitter
		$('#tw-2009').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#tw-2009').addClass('button-style');
     
			// reset circle
			$('#circle-container div').attr('class', 'circle twcircle');

			// uk
			$('#fb-uk').addClass('tw-uk-shrink');
			$('#fb-uk').prop('title', '0.9M');
			// usa 
			$('#fb-usa').addClass('tw-usa-shrink');
			$('#fb-usa').prop('title', '12M');
			// canada 
			$('#fb-can').addClass('tw-can-shrink');
			$('#fb-can').prop('title', '0.8M');
			// china 
			$('#fb-chin').addClass('tw-chin-shrink');
			// india 
			$('#fb-ind').addClass('tw-ind-shrink');
			$('#fb-ind').prop('title', '1.1M');
			// france 
			$('#fb-fr').addClass('tw-fr-shrink');
			$('#fb-ind').prop('title', '0.5M');
			// italy 
			$('#fb-it').addClass('tw-it-shrink');
			$('#fb-it').prop('title', '0.4M');
			// brazil 
			$('#fb-bra').addClass('tw-bra-shrink');
			$('#fb-bra').prop('title', '1M');
			// indonesia 
			$('#fb-indo').addClass('tw-indo-shrink');
			$('#fb-indo').prop('title', '0.8M');
			// germany 
			$('#fb-ger').addClass('tw-ger-shrink');
			$('#fb-ger').prop('title', '0.6M');
			// s africa 
			$('#fb-safr').addClass('tw-safr-shrink');
			$('#fb-safr').prop('title', '0.4M');
			// turkey
			$('#fb-tur').addClass('tw-tur-shrink');
			$('#fb-tur').prop('title', '0.8M');
			// australia
			$('#fb-aus').addClass('tw-aus-shrink');
			$('#fb-aus').prop('title', '0.3M');
			// mexico
			$('#fb-mex').addClass('tw-mex-shrink');
			$('#fb-mex').prop('title', '0.8M');
			// japan
			$('#fb-jap').addClass('tw-jap-shrink');
			$('#fb-jap').prop('title', '1.2M');
			// egypt
			$('#fb-egy').addClass('tw-egy-shrink');
			$('#fb-egy').prop('title', '0.2M');
			// russia
			$('#fb-rus').addClass('tw-rus-shrink');
			$('#fb-rus').prop('title', '0.3M');
			// argentina
			$('#fb-arg').addClass('tw-arg-shrink');
			$('#fb-arg').prop('title', '0.8M');
			// phillipines
			$('#fb-phil').addClass('tw-phil-shrink');
			$('#fb-phil').prop('title', '1M');
			// malaysia
			$('#fb-mal').addClass('tw-mal-shrink');
			$('#fb-mal').prop('title', '0.7M');
			// thailand
			$('#fb-thai').addClass('tw-thai-shrink');
			$('#fb-thai').prop('title', '0.9M');
			// s korea
			$('#fb-skor').addClass('tw-skor-shrink');
			$('#fb-skor').prop('title', '0.2M');
			// taiwan
			$('#fb-tai').addClass('tw-tai-shrink');
			$('#fb-tai').prop('title', '0.4M');
			// columbia
			$('#fb-col').addClass('tw-col-shrink');
			$('#fb-col').prop('title', '1.2M');
			// peru
			$('#fb-peru').addClass('tw-peru-shrink');
			$('#fb-peru').prop('title', '0.6M');
			// venezuela
			$('#fb-ven').addClass('tw-ven-shrink');
			$('#fb-ven').prop('title', '0.2M');
			// equador
			$('#fb-equ').addClass('tw-equ-shrink');
			$('#fb-equ').prop('title', '0.1M');
			// chile
			$('#fb-chil').addClass('tw-chil-shrink');
			$('#fb-chil').prop('title', '0.2M');
			// nigeria
			$('#fb-nig').addClass('tw-nig-shrink');
			$('#fb-nig').prop('title', '0.2M');
			// morocco
			$('#fb-mor').addClass('tw-mor-shrink');
			$('#fb-mor').prop('title', '0.3M');
			// spain
			$('#fb-spa').addClass('tw-spa-shrink');
			$('#fb-spa').prop('title', '0.7M');
			// poland
			$('#fb-pol').addClass('tw-pol-shrink');
			$('#fb-pol').prop('title', '0.4M');
			// norway
			$('#fb-nor').addClass('tw-nor-shrink');
			$('#fb-nor').prop('title', '0.2M');
		});

		// 2014 twitter
		$('#tw-2014').click(function(event) {
			$('ul#menu li a').attr('class', 'button');
			$('#tw-2014').addClass('button-style');
        
			// reset circle
			$('#circle-container div').attr('class', 'circle twcircle');

			// uk
			$('#fb-uk').addClass('tw-uk-grow');
			$('#fb-uk').prop('title', '15M');
			// usa 
			$('#fb-usa').addClass('tw-usa-grow');
			$('#fb-usa').prop('title', '34M');
			// canada 
			$('#fb-can').addClass('tw-can-grow');
			$('#fb-can').prop('title', '5M');
			// chin 
			$('#fb-chin').addClass('tw-chin-grow');
			// india
			$('#fb-ind').addClass('tw-ind-grow');
			$('#fb-ind').prop('title', '44M');
			// france
			$('#fb-fr').addClass('tw-fr-grow');
			$('#fb-fr').prop('title', '4M');
			// italy
			$('#fb-it').addClass('tw-it-grow');
			$('#fb-it').prop('title', '8M');
			// brazil
			$('#fb-bra').addClass('tw-bra-grow');
			$('#fb-bra').prop('title', '26M');
			// indonesia
			$('#fb-indo').addClass('tw-indo-grow');
			$('#fb-indo').prop('title', '35M');
			// germany
			$('#fb-ger').addClass('tw-ger-grow');
			$('#fb-ger').prop('title', '4M');
			// s africa 
			$('#fb-safr').addClass('tw-safr-grow');
			$('#fb-safr').prop('title', '12M');
			// turkey
			$('#fb-tur').addClass('tw-tur-grow');
			$('#fb-tur').prop('title', '30M');
			// australia
			$('#fb-aus').addClass('tw-aus-grow');
			$('#fb-aus').prop('title', '4M');
			// mexico
			$('#fb-mex').addClass('tw-mex-grow');
			$('#fb-mex').prop('title', '28M');
			// japan
			$('#fb-jap').addClass('tw-jap-grow');
			$('#fb-jap').prop('title', '8M');
			// egypt
			$('#fb-egy').addClass('tw-egy-grow');
			$('#fb-egy').prop('title', '10M');
			// russia
			$('#fb-rus').addClass('tw-rus-grow');
			$('#fb-rus').prop('title', '4M');
			// argentina
			$('#fb-arg').addClass('tw-arg-grow');
			$('#fb-arg').prop('title', '9M');
			// phillipines
			$('#fb-phil').addClass('tw-phil-grow');
			$('#fb-phil').prop('title', '12M');
			// malaysia
			$('#fb-mal').addClass('tw-mal-grow');
			$('#fb-mal').prop('title', '6M');
			// thailand
			$('#fb-thai').addClass('tw-thai-grow');
			$('#fb-thai').prop('title', '4M');
			// s korea
			$('#fb-skor').addClass('tw-skor-grow');
			$('#fb-skor').prop('title', '5M');
			// taiwan
			$('#fb-tai').addClass('tw-tai-grow');
			$('#fb-tai').prop('title', '3.4M');
			// columbia
			$('#fb-col').addClass('tw-col-grow');
			$('#fb-col').prop('title', '0.8M');
			// peru
			$('#fb-peru').addClass('tw-peru-grow');
			$('#fb-nor').prop('title', '2.5M');
			// venezuela
			$('#fb-ven').addClass('tw-ven-grow');
			$('#fb-nor').prop('title', '2.4M');
			// equador
			$('#fb-equ').addClass('tw-equ-grow');
			$('#fb-equ').prop('title', '0.8M');
			// chile
			$('#fb-chil').addClass('tw-chil-grow');
			$('#fb-chil').prop('title', '1.3M');
			// nigeria
			$('#fb-nig').addClass('tw-nig-grow');
			$('#fb-nig').prop('title', '0.9M');
			// morocco
			$('#fb-mor').addClass('tw-mor-grow');
			$('#fb-mor').prop('title', '1.1M');
			// spain
			$('#fb-spa').addClass('tw-spa-grow');
			$('#fb-spa').prop('title', '3.8M');
			// poland
			$('#fb-pol').addClass('tw-pol-grow');
			$('#fb-pol').prop('title', '2.4M');
			// norway
			$('#fb-nor').addClass('fb-nor-grow');
			$('#fb-nor').prop('title', '1.8M');
		});
	});
              
            
!
999px

Console