Created
June 4, 2018 02:22
-
-
Save baldwicc/3226e3c1e2bd81330f85adbaec997376 to your computer and use it in GitHub Desktop.
JS Bin // source http://jsbin.com/yahohun
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.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; } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$('[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