Skip to content

Instantly share code, notes, and snippets.

@baldwicc

baldwicc/index.html

Created June 4, 2018 02:22
Show Gist options
  • Save baldwicc/3226e3c1e2bd81330f85adbaec997376 to your computer and use it in GitHub Desktop.
Save baldwicc/3226e3c1e2bd81330f85adbaec997376 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/yahohun
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.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-1" 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>Creative industries & Laws (Honours) <small>Double</small></h2>
<div id="progression-2" class="row">
<dl class="group unstructured col">
<dd class="row">
<dl class="group bsa-creative ">
<dt>Creative industries core units</dt>
<dd class="item core-unit" data-quantity="6">6 units</dd>
<dt>Creative industries major</dt>
<dd class="item major-unit" data-quantity="8">8 units</dd>
<dt>Creative industries electives</dt>
<dd class="item elective-unit" data-quantity="2">2 units</dd>
</dl>
<dl class="group bsa-law ">
<dt>Law core units</dt>
<dd class="item major-unit" data-quantity="19">19 units</dd>
<dd class="row">
<dl class="group bsa-law ">
<dt>Law elective units</dt>
<dd class="item elective-unit" data-quantity="8">8 units</dd>
</dl>
</dd>
<dd class="item relationship">or</dd>
<dd class="row">
<dl class="group bsa-law ">
<dt>Law elective units</dt>
<dd class="item elective-unit" data-quantity="4">4 units</dd>
<dt>General electives or university-wide minor</dt>
<dd class="item elective-unit" data-quantity="4">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.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.yahohun.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.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.yahohun.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