scoaband

<header class='header text-center'>
    <h2>Rating Widget</h2>
  <p>A simple star rating widget with <b>jQuery</b> and <b>FontAwesome</b> icons.</p>
</header>

<section class='rating-widget'>
  
  <!-- Rating Stars Box -->
  <div class='rating-stars text-center'>

scoaband

<div id="doughnutChart" class="chart"></div>

scoaband

Custom jQuery Slider 2

A great easy little script to create a great looking jQuery slider without the weight! Easy to modify and very easy to implement!

Happy Coding!

A Pen by Justin Batzel on CodePen.

License.

scoaband

formBuilder

Drag and drop form building with jQuery formBuiler.

A Pen by Kevin Chappell on CodePen.

License.

scoaband

3D particles to a 2D canvas

HTML5 Canvas - Projecting 3D particles to a 2D canvas. from rectangleworld.com

added JQuery slider to resize

A Pen by borian on CodePen.

License.

scoaband

<div class="alignment">
	<h1><i class="jQuery">jQuery</i> drawers</h1>
	<p><i class="jQuery">jQuery</i> reusable drawers, opens on click/tap!</p>
	<div class="drawer-btn-cont cf">
		<div class="login sidebar-btn grid-4 col">
			<a href="#" class="drawer-btn drawer-btn-ready">
				<i class="fa fa-user"></i>
			</a>
			<section class="login-drawer drawer">
				<h1 class="drawer-heading">

scoaband

.container
  .tab-group
    section#tab1(title="Long Tab Name")
      h3 Content 1
      p Aliquam eleifend magna mauris, id egestas eros dictum ac. Vivamus ac turpis at nisi mattis aliquam. In hac habitasse platea dictumst. 
    section#tab2(title="Another Tab")
      h3 Content 2
      p Donec congue ligula non risus dictum, eget vehicula diam mattis. Pellentesque at ante ipsum. Suspendisse rutrum elementum dolor, non congue risus sagittis id.
    section#tab3(title="Tab 3")
      h3 Content 3

scoaband

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css"/>
	<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div id="wrapper">
  		<section id="generic-tabs">
    			<h1 class="callout">Reponsive jQuery tabs</h1>
        <ul id="tabs">
            <li>
                <a title="Home" href="#first-tab"><i class="fa fa-home"></i> Home</a>	        
            </li>

scoaband

3D Cube for tabbed content

Fun way to display tabbed content with a 3d cube: Uses CSS perspective, transitions and radio checked. No javascript.

A Pen by Kara Olthof on CodePen.

License.

scoaband

<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
<div>Content</div>