<div class="mc-field-group input-group"><strong>What Kind Of Shoes Are You Interested In?</strong><br>
	
	<ul>
		
		<li><input id="selectAll" type="checkbox"><label for='selectAll'>Select All</label></li>
		<li><input id="mce-group[19]-19-0" type="checkbox" name="group[19][8]" value="8" /><label for="mce-group[19]-19-0">Women's</label></li>
		<li><input id="mce-group[19]-19-1" type="checkbox" name="group[19][16]" value="16" /><label for="mce-group[19]-19-1">Men's</label></li>
		<li><input id="mce-group[19]-19-2" type="checkbox" name="group[19][32]" value="32" /><label for="mce-group[19]-19-2">Kid's</label></li>
		<li><input id="mce-group[19]-19-3" type="checkbox" name="group[19][64]" value="64" /><label for="mce-group[19]-19-3">Athletic</label></li>
		<li><input id="mce-group[19]-19-4" type="checkbox" name="group[19][128]" value="128" /><label for="mce-group[19]-19-4">Outdoor</label></li>
		<li><input id="mce-group[19]-19-5" type="checkbox" name="group[19][256]" value="256" /><label for="mce-group[19]-19-5">Dress Shoes</label></li>
		<li><input id="mce-group[19]-19-6" type="checkbox" name="group[19][512]" value="512" /><label for="mce-group[19]-19-6">Casual</label></li>
		<li><input id="mce-group[19]-19-7" type="checkbox" name="group[19][1024]" value="1024" /><label for="mce-group[19]-19-7">Flip Flops</label></li>
	</ul>
</div>

[[[https://codepen.io/jackharner/pen/drONOG.html]]]
html{  background: linear-gradient(-60deg, #da4453, #89216b); min-height: 100vh; /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */}
body {
	width: 70vw;
	margin: 5em auto;
	box-shadow: 0 3px 7px  transparentize(#000, 0.4);
	padding: 2em;
	background: #fff;
}

strong{
	
	font-size: 1.75em;
	text-align: center; 
	width: 100%;
	display: block;
}

ul{
	columns: 3;
	font-size: 1.5em;
	margin: 1em 0;
	padding: 0;
	li{
		list-style: none; margin: 0;
	}
}
$("#selectAll").click(function(){
		$("input[type=checkbox]").prop('checked', $(this).prop('checked'));
	
});


jackHarnerSig();


External CSS

  1. https://codepen.io/jackharner/pen/drONOG.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
  3. https://codepen.io/jackharner/pen/drONOG.js