Skip to content

Instantly share code, notes, and snippets.

View scoaband's full-sized avatar
💭
Project day with Python

Scoaband - JGB scoaband

💭
Project day with Python
View GitHub Profile
@scoaband
scoaband / index.
Created December 20, 2018 05:51
Pure CSS slider content
<div id="slider">
<ul>
<li>
<div class="slider-container">
<h4>Pure CSS slider Content</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
@scoaband
scoaband / index.html
Created December 20, 2018 05:53
Offcanvas sidebar menu with a twist
<div class="page">
<span class="menu_toggle">
<i class="menu_open fa fa-bars fa-lg"></i>
<i class="menu_close fa fa-times fa-lg"></i>
</span>
<ul class="menu_items">
<li><a href="#"><i class="icon fa fa-signal fa-2x"></i> Moar</a></li>
<li><a href="#"><i class="icon fa fa-coffee fa-2x"></i> Coffee</a></li>
<li><a href="#"><i class="icon fa fa-heart fa-2x"></i> Please</a></li>
</ul>
@scoaband
scoaband / index.html
Created December 20, 2018 05:55
Select
<nav role="select">
<ul>
<li><a href="#">Stream</a></li>
<li><a href="#">Lab</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
<select onchange="if (this.value) window.location.href = this.value;">
@scoaband
scoaband / index.html
Created December 20, 2018 06:05
Pure CSS Content Accordion
<div class="wrap">
<section class="question-section">
<h1>Pure CSS Content Accordion</h1>
<p>A pure CSS solution to a classically JS driven UI element.</p>
<div class="cat-1">
<input id="tab-1" type="radio" name="tabs" tabindex="1">
<label for="tab-1" >Technical</label><!-- end of tab label -->
<div class="question-wrap">
<div class="question">
@scoaband
scoaband / index.html
Created December 20, 2018 06:06
Multi Step Form with Progress Bar using jQuery and CSS3
<!-- multistep form -->
<form id="msform">
<!-- progressbar -->
<ul id="progressbar">
<li class="active">Account Setup</li>
<li>Social Profiles</li>
<li>Personal Details</li>
</ul>
<!-- fieldsets -->
<fieldset>
@scoaband
scoaband / index.html
Created December 20, 2018 06:19
Multi-Height Grid Layout
<!-- JJ -->
<div id="contentBoxApp" ng-app="contentBoxApp">
<div id="GridCtrl" ng-controller="GridCtrl">
<div class="toolbar">
<div class="container">
<div class="toolbar-section">
<span class="logo toolbar-item"><i class="fa fa-picture-o"></i>ContentGrid</span>
</div><!-- /.toolbar-section -->
<div class="toolbar-section">
<div class="toolbar-item form-field">
@scoaband
scoaband / index.html
Created December 20, 2018 06:32
Reveal child contents
<div id="reveal" class="wrapper">
<div class="content">REVEAL</div>
</div>
@scoaband
scoaband / content-accordion.markdown
Created December 20, 2018 06:33
CONTENT ACCORDION
@scoaband
scoaband / create-css-based-horizontal-accordion.markdown
Created December 20, 2018 06:36
Create CSS-Based Horizontal Accordion
@scoaband
scoaband / css3-accordion.markdown
Created December 20, 2018 06:37
CSS3 Accordion

CSS3 Accordion

This is a an accordion built with HTML, Sass & Compass. CSS3 is used for transition effects. Code was originally pulled from here

A Pen by Nick Dominguez on CodePen.

License.