Skip to content

Instantly share code, notes, and snippets.

@baldwicc

baldwicc/index.html

Created June 4, 2018 02:39
Show Gist options
  • Save baldwicc/5ed47347ae58975c72dc44407054ab5f to your computer and use it in GitHub Desktop.
Save baldwicc/5ed47347ae58975c72dc44407054ab5f to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/zohokuv
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<style id="jsbin-css">
.group {
position: relative;
border: 1px solid orange;
}
.group::after {
content: "group";
background-color: orange;
position: absolute;
color: #ddd;
top: 0;
right: 0;
}
.group.year { border: 1px solid blue; }
.group.year::after { content: "year"; background-color: blue; }
.group.semester { border: 1px solid green; }
.group.semester::after { content: "semester"; background-color: green; }
.group.bsa-creative { border-color: #7a0e76; }
.group.bsa-creative::after { content: "bsa-ci"; background-color: #7a0e76; }
.group.bsa-law { border-color: #4f0b23;}
.group.bsa-law::after { content: "bsa-law"; background-color: #4f0b23; }
.item {
margin: 28px 0;
position: relative;
border: 1px solid #eee;
}
.item::after {
position: absolute;
color: #ddd;
top: 0;
right: 0;
}
.item.core-unit { border-color: red; }
.item.core-unit::after { content: "core"; background-color: red; }
.item.major-unit { border-color: #4a7221; }
.item.major-unit::after { content: "major"; background-color: #4a7221; }
.item.elective-unit { border-color: #216b72; }
.item.elective-unit::after { content: "elective"; background-color: #216b72; }
.item.minor-unit { border-color: #672216; }
.item.minor-unit::after { content: "minor"; background-color: #672216; }
.item.internship { border-color: #666c7a; }
.item.internship::after { content: "internship"; background-color: #666c7a; }
.item.relationship { border-color: #937793; }
.item.relationship::after { content: "relationship"; background-color: #937793; }
</style>
</head>
<body>
<div class="container-fluid">
<h2>Business <small>bachelor</small></h2>
<div id="progression-1" class="row">
<dl class="group year col">
<dt>Year 1</dt>
<dd class="row">
<dl class="group semester col-md">
<dt>Semester 1</dt>
<dd class="item core-unit" data-quantity="4">4 core units</dd>
</dl>
<dl class="group semester col-md">
<dt>Semester 2</dt>
<dd class="item core-unit" data-quantity="1">1 core unit</dd>
<dd class="item relationship">and</dd>
<dd class="item major-unit" data-quantity="2">2 major units</dd>
<dd class="item relationship">and</dd>
<dd>
<dl class="group">
<dd class="item core-unit" data-quantity="1">1 core unit</dd>
<dd class="item relationship">or</dd>
<dd class="item elective-unit" data-quantity="1">1 elective unit</dd>
</dl>
</dd>
</dd>
</dl>
<dl class="group year col-lg-4">
<dt>Year 2</dt>
<dd class="row">
<dl class="group semester col-md">
<dt>Semester 1</dt>
<dd class="item major-unit" data-quantity="2">2 major units</dd>
<dd class="item relationship">and</dd>
<dd>
<dl class="group">
<dd class="item core-unit" data-quantity="2">2 core units</dd>
<dd class="item relationship">or</dd>
<dd class="item elective-unit" data-quantity="2">2 elective units</dd>
</dl>
</dd>
</dl>
<dl class="group semester col-md">
<dt>Semester 2</dt>
<dd class="item major-unit" data-quantity="1">1 major unit</dd>
<dd class="item relationship">and</dd>
<dd>
<dl class="group">
<dd class="item core-unit" data-quantity="3">3 core units</dd>
<dd class="item relationship">or</dd>
<dd class="item elective-unit" data-quantity="3">3 elective units</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
<dl class="group year col-lg-4">
<dt>Year 3</dt>
<dd class="row">
<dl class="group semester col-md">
<dt>Semester 1</dt>
<dd class="item major-unit" data-quantity="2">2 major units</dd>
<dd class="item relationship">and</dd>
<dd>
<dl class="group">
<dd class="item core-unit" data-quantity="2">2 core units</dd>
<dd class="item relationship">or</dd>
<dd class="item elective-unit" data-quantity="2">2 elective units</dd>
</dl>
</dd>
</dl>
<dl class="group semester col-md">
<dt>Semester 2</dt>
<dd class="item core-unit" data-quantity="1">1 core unit</dd>
<dd class="item relationship">and</dd>
<dd class="item major-unit" data-quantity="1">1 major unit</dd>
<dd class="item relationship">and</dd>
<dd>
<dl class="group">
<dd class="item core-unit" data-quantity="2">2 core units</dd>
<dd class="item relationship">or</dd>
<dd class="item elective-unit" data-quantity="2">2 elective units</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</div>
</div>
<div class="container-fluid">
<h2>Business <small>CPIE scholarship</small></h2>
<div id="progression-2" class="row">
<dl class="group year col">
<dt>Year 1</dt>
<dd class="row">
<dl class="group semester col">
<dt>Semester 1</dt>
<dd class="item core-unit" data-quantity="5">5 core units</dd>
</dl>
<dl class="group semester col">
<dt>Semester 2</dt>
<dd class="item core-unit" data-quantity="2">2 core units</dd>
<dd class="item core-unit" data-quantity="3">3 core units</dd>
</dl>
</dd>
</dl>
<dl class="group year col-lg-4">
<dt>Year 2</dt>
<dd class="row">
<dl class="group semester col">
<dt>Semester 1</dt>
<dd class="item internship" data-quantity="3">Full-time internship</dd>
<dd class="item major-unit" data-quantity="1">1 major unit</dd>
<dd class="item elective-unit" data-quantity="1">1 complementary study unit</dd>
</dl>
<dl class="group semester col">
<dt>Semester 2</dt>
<dd class="item major-unit" data-quantity="2">2 major units</dd>
<dd class="item elective-unit" data-quantity="3">3 complementary study units</dd>
</dl>
</dd>
</dl>
<dl class="group year col-lg-4">
<dt>Year 3</dt>
<dd class="row">
<dl class="group semester col">
<dt>Semester 1</dt>
<dd class="item internship" data-quantity="3">Full-time internship</dd>
<dd class="item major-unit" data-quantity="1">1 major unit</dd>
<dd class="item elective-unit" data-quantity="1">1 complementary study unit</dd>
</dl>
<dl class="group semester col">
<dt>Semester 2</dt>
<dd class="item core-unit" data-quantity="1">1 core unit</dd>
<dd class="item major-unit" data-quantity="1">1 major unit</dd>
<dd class="item elective-unit" data-quantity="3">3 complementary study units</dd>
</dl>
</dd>
</dl>
</div>
</div>
<div class="container-fluid">
<h2>BCI/Laws (Honours) <small>double degree</small></h2>
<div id="progression-3" class="row">
<dl class="group bsa-creative col">
<dd class="item core-unit" data-quantity="6">
<strong>Creative industries core units</strong>
<br />
(6 units)
</dd>
</dl>
<dl class="group bsa-creative col">
<dd class="item major-unit" data-quantity="8">
<strong>Creative industries major</strong>
<br />
(8 units)
</dd>
</dl>
<dl class="group bsa-creative col">
<dd class="item elective-unit" data-quantity="2">
<strong>Creative industries electives</strong>
<br />
(2 units)
</dd>
</dl>
<dl class="group bsa-law col">
<dd class="item core-unit" data-quantity="19">
<strong>Law core units</strong>
<br />
(19 units)
</dd>
</dl>
<dl class="group bsa-law col">
<dd>
<dl class="group">
<dd class="item elective-unit" data-quantity="8">
<strong>Law elective units</strong>
<br />
(8 units)
</dd>
<dd class="item relationship">or</dd>
<dd>
<dl class="group">
<dd class="item elective-unit" data-quantity="4">
<strong>Law elective units</strong>
<br />
(4 units)
</dd>
<dd class="item minor-unit" data-quantity="4">
<strong>General electives or univesrity-wide minor units</strong>
<br />
(4 units)
</dd>
</dl>
</dd>
</dl>
</dd>
</dl>
</div>
</div>
<script id="jsbin-javascript">
$('[data-quantity]').each(function(i, elem){
var $elem = $(elem);
var quantity = $elem.data('quantity');
$elem.height((56 * quantity) + 'px');
})
</script>
<script id="jsbin-source-css" type="text/css">.group {
position: relative;
border: 1px solid orange;
}
.group::after {
content: "group";
background-color: orange;
position: absolute;
color: #ddd;
top: 0;
right: 0;
}
.group.year { border: 1px solid blue; }
.group.year::after { content: "year"; background-color: blue; }
.group.semester { border: 1px solid green; }
.group.semester::after { content: "semester"; background-color: green; }
.group.bsa-creative { border-color: #7a0e76; }
.group.bsa-creative::after { content: "bsa-ci"; background-color: #7a0e76; }
.group.bsa-law { border-color: #4f0b23;}
.group.bsa-law::after { content: "bsa-law"; background-color: #4f0b23; }
.item {
margin: 28px 0;
position: relative;
border: 1px solid #eee;
}
.item::after {
position: absolute;
color: #ddd;
top: 0;
right: 0;
}
.item.core-unit { border-color: red; }
.item.core-unit::after { content: "core"; background-color: red; }
.item.major-unit { border-color: #4a7221; }
.item.major-unit::after { content: "major"; background-color: #4a7221; }
.item.elective-unit { border-color: #216b72; }
.item.elective-unit::after { content: "elective"; background-color: #216b72; }
.item.minor-unit { border-color: #672216; }
.item.minor-unit::after { content: "minor"; background-color: #672216; }
.item.internship { border-color: #666c7a; }
.item.internship::after { content: "internship"; background-color: #666c7a; }
.item.relationship { border-color: #937793; }
.item.relationship::after { content: "relationship"; background-color: #937793; }</script>
<script id="jsbin-source-javascript" type="text/javascript">
$('[data-quantity]').each(function(i, elem){
var $elem = $(elem);
var quantity = $elem.data('quantity');
$elem.height((56 * quantity) + 'px');
})</script></body>
</html>
Raw
jsbin.zohokuv.css
.group {
position: relative;
border: 1px solid orange;
}
.group::after {
content: "group";
background-color: orange;
position: absolute;
color: #ddd;
top: 0;
right: 0;
}
.group.year { border: 1px solid blue; }
.group.year::after { content: "year"; background-color: blue; }
.group.semester { border: 1px solid green; }
.group.semester::after { content: "semester"; background-color: green; }
.group.bsa-creative { border-color: #7a0e76; }
.group.bsa-creative::after { content: "bsa-ci"; background-color: #7a0e76; }
.group.bsa-law { border-color: #4f0b23;}
.group.bsa-law::after { content: "bsa-law"; background-color: #4f0b23; }
.item {
margin: 28px 0;
position: relative;
border: 1px solid #eee;
}
.item::after {
position: absolute;
color: #ddd;
top: 0;
right: 0;
}
.item.core-unit { border-color: red; }
.item.core-unit::after { content: "core"; background-color: red; }
.item.major-unit { border-color: #4a7221; }
.item.major-unit::after { content: "major"; background-color: #4a7221; }
.item.elective-unit { border-color: #216b72; }
.item.elective-unit::after { content: "elective"; background-color: #216b72; }
.item.minor-unit { border-color: #672216; }
.item.minor-unit::after { content: "minor"; background-color: #672216; }
.item.internship { border-color: #666c7a; }
.item.internship::after { content: "internship"; background-color: #666c7a; }
.item.relationship { border-color: #937793; }
.item.relationship::after { content: "relationship"; background-color: #937793; }
Raw
jsbin.zohokuv.js
$('[data-quantity]').each(function(i, elem){
var $elem = $(elem);
var quantity = $elem.data('quantity');
$elem.height((56 * quantity) + 'px');
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment