Skip to content

Instantly share code, notes, and snippets.

@ryaninvents

ryaninvents/index.html

Forked from anonymous/index.html
Last active April 21, 2016 14:57
Show Gist options
  • Save ryaninvents/8aa5772cab77ecd5c3a80f473cab1624 to your computer and use it in GitHub Desktop.
Save ryaninvents/8aa5772cab77ecd5c3a80f473cab1624 to your computer and use it in GitHub Desktop.
Download ZIP
Smead Viewables tabs
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<title>JS Bin</title>
<style id="jsbin-css">
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700);
@page {
size: letter portrait;
margin: 0.5in;
}
@font-face {
font-family: Entypo;
src: url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.eot), url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.svg), url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.ttf), url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff);
}
body {
font-family: "Fira Sans";
line-height: 0;
width: 8.5in;
}
.en {
font-family: Entypo;
}
.label {
width: 3.75in;
height: 1.425in;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
line-height: 1.6;
}
.label:nth-child(odd) {
margin-right: 0.85in;
}
@media screen {
.label {
border: 1px dotted #dcdcdc;
border-radius: 0.0625in;
}
}
.label .inner-label {
display: inline;
padding-left: 0.3em;
}
.label .inner-title {
display: inline;
font-size: 1.5em;
line-height: 1;
font-weight: bold;
}
.label .back {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25in;
transform: translate(50%, 50%) rotate(180deg) translate(50%, 50%);
}
.label .top {
position: absolute;
top: 0.25in;
left: 0;
right: 0;
}
.label .top .fa-fw {
width: 1.68em;
}
.label .front {
position: absolute;
top: 0.5in;
left: 0;
right: 0;
bottom: 0;
padding-top: 0.2em;
}
.label .front .inner-label {
display: block;
margin-left: 2.6em;
line-height: 1.2;
}
</style>
</head>
<body>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-bank"></i>
<div class="inner-label">Banking</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-bank"></i>
<div class="inner-label">Banking</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-bank"></i>
<div class="inner-title">Banking</div>
<div class="inner-label">Checking, savings</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-car"></i>
<div class="inner-label">Car</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-car"></i>
<div class="inner-label">Car</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-car"></i>
<div class="inner-title">Car</div>
<div class="inner-label">Financing, maintenance</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-credit-card"></i>
<div class="inner-label">Credit cards</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-credit-card"></i>
<div class="inner-label">Credit cards</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-credit-card"></i>
<div class="inner-title">Credit cards</div>
<div class="inner-label">Statements, correspondance</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-suitcase"></i>
<div class="inner-label">Employment</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-suitcase"></i>
<div class="inner-label">Employment</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-suitcase"></i>
<div class="inner-title">Employment</div>
<div class="inner-label">Work contracts, benefits</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-home"></i>
<div class="inner-label">Home</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-home"></i>
<div class="inner-label">Home</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-home"></i>
<div class="inner-title">Home</div>
<div class="inner-label">Rental, mortgage, contractor correspondance</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-life-ring"></i>
<div class="inner-label">Insurance</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-life-ring"></i>
<div class="inner-label">Insurance</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-life-ring"></i>
<div class="inner-title">Insurance</div>
<div class="inner-label">Car insurance, health insurance, etc.</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-gavel"></i>
<div class="inner-label">Legal documents</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-gavel"></i>
<div class="inner-label">Legal documents</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-gavel"></i>
<div class="inner-title">Legal documents</div>
<div class="inner-label">Certificates, licenses, contracts</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-user-md"></i>
<div class="inner-label">Medical</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-user-md"></i>
<div class="inner-label">Medical</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-user-md"></i>
<div class="inner-title">Medical</div>
<div class="inner-label">Health, vision, dental</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-star"></i>
<div class="inner-label">Pets</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-star"></i>
<div class="inner-label">Pets</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-star"></i>
<div class="inner-title">Pets</div>
<div class="inner-label">Health, grooming, boarding</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-line-chart"></i>
<div class="inner-label">Retirement</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-line-chart"></i>
<div class="inner-label">Retirement</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-line-chart"></i>
<div class="inner-title">Retirement</div>
<div class="inner-label">401(k), investments, planning</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-file-text-o"></i>
<div class="inner-label">Taxes</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-file-text-o"></i>
<div class="inner-label">Taxes</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-file-text-o"></i>
<div class="inner-title">Taxes</div>
<div class="inner-label">Past and upcoming tax years</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-plug"></i>
<div class="inner-label">Utilities</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-plug"></i>
<div class="inner-label">Utilities</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-plug"></i>
<div class="inner-title">Utilities</div>
<div class="inner-label">Electricity, internet, heating</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-book"></i>
<div class="inner-label">Warranties/manuals</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-book"></i>
<div class="inner-label">Warranties/manuals</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-book"></i>
<div class="inner-title">Warranties/manuals</div>
<div class="inner-label">Furniture, electronics, valuables</div>
</div>
</div>
<div class="label">
<div class="back"><i class="fa fa-fw fa-lg fa-heart"></i>
<div class="inner-label">Wedding</div>
</div>
<div class="top"><i class="fa fa-fw fa-lg fa-heart"></i>
<div class="inner-label">Wedding</div>
</div>
<div class="front"><i class="fa fa-fw fa-2x fa-heart"></i>
<div class="inner-title">Wedding</div>
<div class="inner-label">Church, reception, rings</div>
</div>
</div>
<script id="jsbin-source-html" type="text/html">doctype html
html
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width')
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css")
title JS Bin
body
.label
.back
i.fa.fa-fw.fa-lg.fa-bank
.inner-label Banking
.top
i.fa.fa-fw.fa-lg.fa-bank
.inner-label Banking
.front
i.fa.fa-fw.fa-2x.fa-bank
.inner-title Banking
.inner-label Checking, savings
.label
.back
i.fa.fa-fw.fa-lg.fa-car
.inner-label Car
.top
i.fa.fa-fw.fa-lg.fa-car
.inner-label Car
.front
i.fa.fa-fw.fa-2x.fa-car
.inner-title Car
.inner-label Financing, maintenance
.label
.back
i.fa.fa-fw.fa-lg.fa-credit-card
.inner-label Credit cards
.top
i.fa.fa-fw.fa-lg.fa-credit-card
.inner-label Credit cards
.front
i.fa.fa-fw.fa-2x.fa-credit-card
.inner-title Credit cards
.inner-label Statements, correspondance
.label
.back
i.fa.fa-fw.fa-lg.fa-suitcase
.inner-label Employment
.top
i.fa.fa-fw.fa-lg.fa-suitcase
.inner-label Employment
.front
i.fa.fa-fw.fa-2x.fa-suitcase
.inner-title Employment
.inner-label Work contracts, benefits
.label
.back
i.fa.fa-fw.fa-lg.fa-home
.inner-label Home
.top
i.fa.fa-fw.fa-lg.fa-home
.inner-label Home
.front
i.fa.fa-fw.fa-2x.fa-home
.inner-title Home
.inner-label Rental, mortgage, contractor correspondance
.label
.back
i.fa.fa-fw.fa-lg.fa-life-ring
.inner-label Insurance
.top
i.fa.fa-fw.fa-lg.fa-life-ring
.inner-label Insurance
.front
i.fa.fa-fw.fa-2x.fa-life-ring
.inner-title Insurance
.inner-label Car insurance, health insurance, etc.
.label
.back
i.fa.fa-fw.fa-lg.fa-gavel
.inner-label Legal documents
.top
i.fa.fa-fw.fa-lg.fa-gavel
.inner-label Legal documents
.front
i.fa.fa-fw.fa-2x.fa-gavel
.inner-title Legal documents
.inner-label Certificates, licenses, contracts
.label
.back
i.fa.fa-fw.fa-lg.fa-user-md
.inner-label Medical
.top
i.fa.fa-fw.fa-lg.fa-user-md
.inner-label Medical
.front
i.fa.fa-fw.fa-2x.fa-user-md
.inner-title Medical
.inner-label Health, vision, dental
.label
.back
i.fa.fa-fw.fa-lg.fa-star
.inner-label Pets
.top
i.fa.fa-fw.fa-lg.fa-star
.inner-label Pets
.front
i.fa.fa-fw.fa-2x.fa-star
.inner-title Pets
.inner-label Health, grooming, boarding
.label
.back
i.fa.fa-fw.fa-lg.fa-line-chart
.inner-label Retirement
.top
i.fa.fa-fw.fa-lg.fa-line-chart
.inner-label Retirement
.front
i.fa.fa-fw.fa-2x.fa-line-chart
.inner-title Retirement
.inner-label 401(k), investments, planning
.label
.back
i.fa.fa-fw.fa-lg.fa-file-text-o
.inner-label Taxes
.top
i.fa.fa-fw.fa-lg.fa-file-text-o
.inner-label Taxes
.front
i.fa.fa-fw.fa-2x.fa-file-text-o
.inner-title Taxes
.inner-label Past and upcoming tax years
.label
.back
i.fa.fa-fw.fa-lg.fa-plug
.inner-label Utilities
.top
i.fa.fa-fw.fa-lg.fa-plug
.inner-label Utilities
.front
i.fa.fa-fw.fa-2x.fa-plug
.inner-title Utilities
.inner-label Electricity, internet, heating
.label
.back
i.fa.fa-fw.fa-lg.fa-book
.inner-label Warranties/manuals
.top
i.fa.fa-fw.fa-lg.fa-book
.inner-label Warranties/manuals
.front
i.fa.fa-fw.fa-2x.fa-book
.inner-title Warranties/manuals
.inner-label Furniture, electronics, valuables
.label
.back
i.fa.fa-fw.fa-lg.fa-heart
.inner-label Wedding
.top
i.fa.fa-fw.fa-lg.fa-heart
.inner-label Wedding
.front
i.fa.fa-fw.fa-2x.fa-heart
.inner-title Wedding
.inner-label Church, reception, rings</script>
<script id="jsbin-source-css" type="text/css">@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700);
@page {
size: letter portrait;
margin: 0.5in;
}
@font-face {
font-family: Entypo;
src: url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.eot),
url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.svg),
url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.ttf),
url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff);
}
body {
font-family: "Fira Sans";
line-height: 0;
width: 8.5in;
}
.en {
font-family: Entypo;
}
.label {
width: 3.75in;
height: 1.425in;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
line-height: 1.6;
&:nth-child(odd) {
margin-right: 0.85in;
}
@media screen {
border: 1px dotted #dcdcdc;
border-radius: 0.0625in;
}
.inner-label {
display: inline;
padding-left: 0.3em;
}
.inner-title {
display: inline;
font-size: 1.5em;
line-height: 1;
font-weight: bold;
}
.back {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25in;
transform: translate(50%, 50%) rotate(180deg) translate(50%, 50%);
@media screen {
//color: white;
//background-color: firebrick;
}
}
.top {
position: absolute;
top: 0.25in;
left: 0;
right: 0;
.fa-fw {
width: 1.68em;
}
}
.front {
position: absolute;
top: 0.5in;
left: 0;
right: 0;
bottom: 0;
padding-top: 0.2em;
@media screen {
//color: white;
//background-color: steelblue;
}
.inner-label {
display: block;
margin-left: 2.6em;
line-height: 1.2;
}
}
}
</script>
</body>
</html>
Raw
index.jade
doctype html
html
head
meta(charset='utf-8')
meta(name='viewport', content='width=device-width')
link(rel="stylesheet", href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css")
title JS Bin
body
.label
.back
i.fa.fa-fw.fa-lg.fa-bank
.inner-label Banking
.top
i.fa.fa-fw.fa-lg.fa-bank
.inner-label Banking
.front
i.fa.fa-fw.fa-2x.fa-bank
.inner-title Banking
.inner-label Checking, savings
.label
.back
i.fa.fa-fw.fa-lg.fa-car
.inner-label Car
.top
i.fa.fa-fw.fa-lg.fa-car
.inner-label Car
.front
i.fa.fa-fw.fa-2x.fa-car
.inner-title Car
.inner-label Financing, maintenance
.label
.back
i.fa.fa-fw.fa-lg.fa-credit-card
.inner-label Credit cards
.top
i.fa.fa-fw.fa-lg.fa-credit-card
.inner-label Credit cards
.front
i.fa.fa-fw.fa-2x.fa-credit-card
.inner-title Credit cards
.inner-label Statements, correspondance
.label
.back
i.fa.fa-fw.fa-lg.fa-suitcase
.inner-label Employment
.top
i.fa.fa-fw.fa-lg.fa-suitcase
.inner-label Employment
.front
i.fa.fa-fw.fa-2x.fa-suitcase
.inner-title Employment
.inner-label Work contracts, benefits
.label
.back
i.fa.fa-fw.fa-lg.fa-home
.inner-label Home
.top
i.fa.fa-fw.fa-lg.fa-home
.inner-label Home
.front
i.fa.fa-fw.fa-2x.fa-home
.inner-title Home
.inner-label Rental, mortgage, contractor correspondance
.label
.back
i.fa.fa-fw.fa-lg.fa-life-ring
.inner-label Insurance
.top
i.fa.fa-fw.fa-lg.fa-life-ring
.inner-label Insurance
.front
i.fa.fa-fw.fa-2x.fa-life-ring
.inner-title Insurance
.inner-label Car insurance, health insurance, etc.
.label
.back
i.fa.fa-fw.fa-lg.fa-gavel
.inner-label Legal documents
.top
i.fa.fa-fw.fa-lg.fa-gavel
.inner-label Legal documents
.front
i.fa.fa-fw.fa-2x.fa-gavel
.inner-title Legal documents
.inner-label Certificates, licenses, contracts
.label
.back
i.fa.fa-fw.fa-lg.fa-user-md
.inner-label Medical
.top
i.fa.fa-fw.fa-lg.fa-user-md
.inner-label Medical
.front
i.fa.fa-fw.fa-2x.fa-user-md
.inner-title Medical
.inner-label Health, vision, dental
.label
.back
i.fa.fa-fw.fa-lg.fa-star
.inner-label Pets
.top
i.fa.fa-fw.fa-lg.fa-star
.inner-label Pets
.front
i.fa.fa-fw.fa-2x.fa-star
.inner-title Pets
.inner-label Health, grooming, boarding
.label
.back
i.fa.fa-fw.fa-lg.fa-line-chart
.inner-label Retirement
.top
i.fa.fa-fw.fa-lg.fa-line-chart
.inner-label Retirement
.front
i.fa.fa-fw.fa-2x.fa-line-chart
.inner-title Retirement
.inner-label 401(k), investments, planning
.label
.back
i.fa.fa-fw.fa-lg.fa-file-text-o
.inner-label Taxes
.top
i.fa.fa-fw.fa-lg.fa-file-text-o
.inner-label Taxes
.front
i.fa.fa-fw.fa-2x.fa-file-text-o
.inner-title Taxes
.inner-label Past and upcoming tax years
.label
.back
i.fa.fa-fw.fa-lg.fa-plug
.inner-label Utilities
.top
i.fa.fa-fw.fa-lg.fa-plug
.inner-label Utilities
.front
i.fa.fa-fw.fa-2x.fa-plug
.inner-title Utilities
.inner-label Electricity, internet, heating
.label
.back
i.fa.fa-fw.fa-lg.fa-book
.inner-label Warranties/manuals
.top
i.fa.fa-fw.fa-lg.fa-book
.inner-label Warranties/manuals
.front
i.fa.fa-fw.fa-2x.fa-book
.inner-title Warranties/manuals
.inner-label Furniture, electronics, valuables
.label
.back
i.fa.fa-fw.fa-lg.fa-heart
.inner-label Wedding
.top
i.fa.fa-fw.fa-lg.fa-heart
.inner-label Wedding
.front
i.fa.fa-fw.fa-2x.fa-heart
.inner-title Wedding
.inner-label Church, reception, rings</script>
Raw
jsbin.wotomu.css
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700);
@page {
size: letter portrait;
margin: 0.5in;
}
@font-face {
font-family: Entypo;
src: url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.eot), url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.svg), url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.ttf), url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff);
}
body {
font-family: "Fira Sans";
line-height: 0;
width: 8.5in;
}
.en {
font-family: Entypo;
}
.label {
width: 3.75in;
height: 1.425in;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
line-height: 1.6;
}
.label:nth-child(odd) {
margin-right: 0.85in;
}
@media screen {
.label {
border: 1px dotted #dcdcdc;
border-radius: 0.0625in;
}
}
.label .inner-label {
display: inline;
padding-left: 0.3em;
}
.label .inner-title {
display: inline;
font-size: 1.5em;
line-height: 1;
font-weight: bold;
}
.label .back {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25in;
transform: translate(50%, 50%) rotate(180deg) translate(50%, 50%);
}
.label .top {
position: absolute;
top: 0.25in;
left: 0;
right: 0;
}
.label .top .fa-fw {
width: 1.68em;
}
.label .front {
position: absolute;
top: 0.5in;
left: 0;
right: 0;
bottom: 0;
padding-top: 0.2em;
}
.label .front .inner-label {
display: block;
margin-left: 2.6em;
line-height: 1.2;
}
Raw
style.less
@import url(https://fonts.googleapis.com/css?family=Fira+Sans:400,500,700);
@page {
size: letter portrait;
margin: 0.5in;
}
@font-face {
font-family: Entypo;
src: url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.eot),
url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.svg),
url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.ttf),
url(https://cdnjs.cloudflare.com/ajax/libs/entypo/2.0/entypo.woff);
}
body {
font-family: "Fira Sans";
line-height: 0;
width: 8.5in;
}
.en {
font-family: Entypo;
}
.label {
width: 3.75in;
height: 1.425in;
margin: 0;
padding: 0;
display: inline-block;
position: relative;
overflow: hidden;
line-height: 1.6;
&:nth-child(odd) {
margin-right: 0.85in;
}
@media screen {
border: 1px dotted #dcdcdc;
border-radius: 0.0625in;
}
.inner-label {
display: inline;
padding-left: 0.3em;
}
.inner-title {
display: inline;
font-size: 1.5em;
line-height: 1;
font-weight: bold;
}
.back {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0.25in;
transform: translate(50%, 50%) rotate(180deg) translate(50%, 50%);
@media screen {
//color: white;
//background-color: firebrick;
}
}
.top {
position: absolute;
top: 0.25in;
left: 0;
right: 0;
.fa-fw {
width: 1.68em;
}
}
.front {
position: absolute;
top: 0.5in;
left: 0;
right: 0;
bottom: 0;
padding-top: 0.2em;
@media screen {
//color: white;
//background-color: steelblue;
}
.inner-label {
display: block;
margin-left: 2.6em;
line-height: 1.2;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment