morshedx · December 21, 2014 16:17
diff --git a/Color Switcher b/Color Switcher
 <!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8">
 		<title>Style Switcher</title>
 		<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 		<style type="text/css">
 			.clear:before,
 			.clear:after {
 				content: " ";
 				display: table;
 			}
 			 
 			.clear:after {
 			   clear: both;
 			}
 			 
 			.clear {
 			   *zoom: 1;
 			}

 			.button {
 			  background-color: #000;
 			  display: inline-block;
 			  height: 35px;
 			  margin-bottom: 10px;
 			  text-indent: -9999em;
 			  width: 35px;
 			}

 			.button.red{
 			  background-color: red;
 			}

 			.button.green{
 			  background-color: green;
 			}

 			.button.blue{
 			  background-color: blue;
 			}

 			.button.orange{
 			  background-color: orange;
 			}

 			#styleSwitcher {
 			  background: none repeat scroll 0 0 #999;
 			  left: -148px;
 			  padding: 20px;
 			  position: relative;
 			  width: 100px;
 			  transition: all 0.5s ease 0s;
 			  cursor: pointer;
 			}

 			#styleSwitcher #cog {
 			  background-color: #999;
 			  color: #000;
 			  padding: 8px 12px;
 			  position: absolute;
 			  right: -51px;
 			  top: -16px;
 			  
 			}

 			#styleSwitcher.left0 {
 				left: -8px;
 			  transition: all 0.5s ease 0s;
 			}

 			#styleSwitcher ul {
 			  list-style: outside none none;
 			  margin: 0;
 			  padding: 0;
 			  width: 100px;
 			}

 			#styleSwitcher ul li {
 			  float: left;
 			  margin-right: 15px;
 			}
 		</style>
 	</head>
 	
 	<body>
 		
 		<div id="styleSwitcher" class="clear">
 			<ul>
 				<li><a class="button red" href="javascript:;">red</a></li>
 				<li><a class="button green" href="javascript:;">green</a></li>
 				<li><a class="button blue" href="javascript:;">blue</a></li>
 				<li><a class="button orange" href="javascript:;">orange</a></li>
 			</ul>
 			<p id="cog"><i class="fa fa-cog fa-2x fa-spin"></i></p>
 		</div>
 	
 		<section id="praimary">
 			<h1>Lorem ipsum dolor sit amet</h1>
 			<h2>libero turpis non cras ligula,</h2>
 			<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien quam in eu vel nulla.</p>
 			<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien quam in eu vel nulla.</p>
 		</section>
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
 		<script type="text/javascript">
 			$(function(){
 				$("#cog").click(function(){
 					$("#styleSwitcher").toggleClass("left0")
 				});
 				$(".button.red").click(function(){
 					$("#praimary h1, #praimary h2, #praimary p").css("color","red")
 				});
 				$(".button.green").click(function(){
 					$("#praimary h1, #praimary h2, #praimary p").css("color","green")
 				});
 				$(".button.blue").click(function(){
 					$("#praimary h1, #praimary h2, #praimary p").css("color","blue")
 				});
 				$(".button.orange").click(function(){
 					$("#praimary h1, #praimary h2, #praimary p").css("color","orange")
 				});
 			});
 		</script>
 	</body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Style Switcher</title>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
	<style type="text/css">
	.clear:before,
	.clear:after {
	content: " ";
	display: table;
	}

	.clear:after {
	clear: both;
	}

	.clear {
	*zoom: 1;
	}

	.button {
	background-color: #000;
	display: inline-block;
	height: 35px;
	margin-bottom: 10px;
	text-indent: -9999em;
	width: 35px;
	}

	.button.red{
	background-color: red;
	}

	.button.green{
	background-color: green;
	}

	.button.blue{
	background-color: blue;
	}

	.button.orange{
	background-color: orange;
	}

	#styleSwitcher {
	background: none repeat scroll 0 0 #999;
	left: -148px;
	padding: 20px;
	position: relative;
	width: 100px;
	transition: all 0.5s ease 0s;
	cursor: pointer;
	}

	#styleSwitcher #cog {
	background-color: #999;
	color: #000;
	padding: 8px 12px;
	position: absolute;
	right: -51px;
	top: -16px;

	}

	#styleSwitcher.left0 {
	left: -8px;
	transition: all 0.5s ease 0s;
	}

	#styleSwitcher ul {
	list-style: outside none none;
	margin: 0;
	padding: 0;
	width: 100px;
	}

	#styleSwitcher ul li {
	float: left;
	margin-right: 15px;
	}
	</style>
	</head>

	<body>

	<div id="styleSwitcher" class="clear">
	<ul>
	<li><a class="button red" href="javascript:;">red</a></li>
	<li><a class="button green" href="javascript:;">green</a></li>
	<li><a class="button blue" href="javascript:;">blue</a></li>
	<li><a class="button orange" href="javascript:;">orange</a></li>
	</ul>
	<p id="cog"><i class="fa fa-cog fa-2x fa-spin"></i></p>
	</div>

	<section id="praimary">
	<h1>Lorem ipsum dolor sit amet</h1>
	<h2>libero turpis non cras ligula,</h2>
	<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien quam in eu vel nulla.</p>
	<p>Lorem ipsum dolor sit amet, libero turpis non cras ligula, id commodo, aenean est in volutpat amet sodales, porttitor bibendum facilisi suspendisse, aliquam ipsum ante morbi sed ipsum mollis. Sollicitudin viverra, vel varius eget sit mollis. Commodo enim aliquam suspendisse tortor cum diam, commodo facilisis, rutrum et duis nisl porttitor, vel eleifend odio ultricies ut, orci in adipiscing felis velit nibh. Consectetuer porttitor feugiat vestibulum sit feugiat, voluptates dui eros libero. Etiam vestibulum at lectus. Donec vivamus. Vel donec et scelerisque vestibulum. Condimentum aliquam, mollit magna velit nec, tempor cursus vitae sit aliquet neque purus. Ultrices lacus proin conubia dictum tempus, tempor pede vitae faucibus, sem auctor, molestie diam dictum aliquam. Dolor leo, ridiculus est ut cubilia nec, fermentum arcu praesent, pede etiam. Tempor vestibulum turpis id ligula mi mattis. Eget arcu vitae mauris amet odio. Diam nibh diam, quam elit, libero nostra ut. Pellentesque vehicula. Eget sed, dapibus magna nulla nonummy commodo accumsan morbi, praesent volutpat vel id maecenas, morbi habitant sem in adipiscing mi erat, malesuada pretium tortor rutrum eu eros vel. Donec molestie, faucibus a amet commodo scelerisque libero massa. Sapien quam in eu vel nulla.</p>
	</section>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
	<script type="text/javascript">
	$(function(){
	$("#cog").click(function(){
	$("#styleSwitcher").toggleClass("left0")
	});
	$(".button.red").click(function(){
	$("#praimary h1, #praimary h2, #praimary p").css("color","red")
	});
	$(".button.green").click(function(){
	$("#praimary h1, #praimary h2, #praimary p").css("color","green")
	});
	$(".button.blue").click(function(){
	$("#praimary h1, #praimary h2, #praimary p").css("color","blue")
	});
	$(".button.orange").click(function(){
	$("#praimary h1, #praimary h2, #praimary p").css("color","orange")
	});
	});
	</script>
	</body>
	</html>