"layout"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/JackEdwardLyons/pen/oLyzOq?depth=everything&order=popularity&page=81&q=develop&show_forks=false" /> <style class="cp-pen-styles">html { font-family: sans-serif; } /* * Remove default margin. */ body,p { margin: 0; } /* * New HTML5 elements 'may' require explicit display stating */ article,aside,details,figcaption,figure,footer,header,hgroup,nav,section,summary { display: block; } /* * Remove the gray background color from active links in IE 10. */ a { background-color: transparent; } /* * Improve readability when focused and also mouse hovered in all browsers. */ a:active,a:hover,a:visited,a:link { color: #fff; text-decoration: none; outline: 0; } body { background: #fff; color: #fff; } .container { margin: 0 auto; text-align: center; max-width: 1400px; } /* * WRAPPER SECTION PROGRESS BAR */ header { color: #666; margin: 20px 0 5px 5px; } header h1 { font-size: 30px; } .section-1,.section-2,.section-3,.section-4 { background-color: #5fb82c; border: 3px solid #fff; border-radius: 10px; box-shadow: 0 -1px 20px 4px rgba(141,141,141,0.4); display: inline-block; height: 100%; margin: 2px; padding: 10px; width: 20%; } .section-1:hover, .section-2:hover, .section-3:hover, .section-4:hover { cursor: pointer; background-color: #228B22; -webkit-transition: .3s ease; transition: .3s ease; } /* * WRAPPER FOR ALL CIRCLE ELEMENTS */ .cogWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 50px; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-wrap: inherit; flex-wrap: inherit; position: relative; } h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; } .text { margin: 5px; } .text h3 { font-size: 1em; font-weight: 700; } img { border: 0; } /* * PIE STYLES --> Be careful when editing these elements. */ .text p { margin-bottom: 5px; } ul { margin: 0; padding: 0; } .section-result img { padding: 5px; } .pie { border: 3px solid #fff; border-radius: 50%; box-shadow: 0 -1px 20px 4px rgba(141,141,141,0.4); font: 14px Arial,sans-serif; margin: 15px auto; list-style: none; overflow: hidden; padding: 0; position: relative; height: 400px; width: 400px; } /* PIE COLORS & COG IMG POSITION */ .pie.orange { background: #ffa626; margin: 46.5px; } .pie.orange .slice:hover { background: #e67300; } .pie.purple { background: #9238c4; margin: 46.5px; } .pie.purple .slice:hover { background: #832cb3; } .pie.blue { background: #3FB0CE; margin: 46.5px; } .pie.blue .slice:hover { background: #289EB9; } .slice { border: 1px solid #fff; overflow: hidden; position: absolute; top: 0; right: 0; height: 50%; width: 50%; -webkit-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transition: background-color .3s ease; transition: background-color .3s ease; } .slice:hover { cursor: pointer; } .slice-contents { position: absolute; top: 10%; left: -100%; width: 200%; height: 200%; border-radius: 50%; text-align: center; -webkit-transition: background-color .5s; transition: background-color .5s; } /* ORANGE CIRCLE STYLES * Please note: the segment numbers are not the same as the section numbers on display * Use inspect element to double check which section you are on & would like to edit. */ .orange-wrapper { margin-top: 2.5%; position: relative; left: -18px; } /* Background image */ #orangeCog { height: 510px; width: 510px; position: absolute; right: -8px; top: -7px; } .orange .segment-1 { -webkit-transform: rotate(360deg) skewY(-45deg); transform: rotate(360deg) skewY(-45deg); } .orange .segment-1 .slice-contents { text-align: left; -webkit-transform: rotate(45deg); transform: rotate(45deg); left: -54%; top: 26%; width: 110px; } .orange .segment-1 .text { -webkit-transform: rotate(-45deg) skewY(45deg); transform: rotate(-45deg) skewY(45deg); } .orange .segment-2 { -webkit-transform: rotate(90deg) skewY(-45deg); transform: rotate(90deg) skewY(-45deg); } .orange .segment-2 .slice-contents { text-align: right; -webkit-transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); left: -60%; top: -38%; width: 100px; } .orange .segment-2 .text { -webkit-transform: rotate(-135deg); transform: rotate(-135deg); } .orange .segment-3 { -webkit-transform: rotate(135deg) skewY(-45deg); transform: rotate(135deg) skewY(-45deg); } .orange .segment-3 .slice-contents { text-align: left; -webkit-transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); left: -63%; top: -45%; width: 100px; } .orange .segment-3 .text { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .orange .segment-4 { -webkit-transform: rotate(180deg) skewY(-45deg); transform: rotate(180deg) skewY(-45deg); } .orange .segment-4 .slice-contents { text-align: right; -webkit-transform: skewY(45deg) rotate(90deg); transform: skewY(45deg) rotate(90deg); left: -75%; top: -112%; width: 100px; } .orange .segment-4 .text { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .orange .segment-5 { -webkit-transform: rotate(225deg) skewY(-45deg); transform: rotate(225deg) skewY(-45deg); } .orange .segment-5 .slice-contents { text-align: left; -webkit-transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); left: -70%; top: -30%; width: 120px; } .orange .segment-5 .text { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .orange .segment-6 { -webkit-transform: rotate(270deg) skewY(-45deg); transform: rotate(270deg) skewY(-45deg); } .orange .segment-6 .slice-contents { text-align: left; -webkit-transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); left: -59%; top: -35%; width: 100px; } .orange .segment-6 .text { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .orange .segment-7 { -webkit-transform: rotate(315deg) skewY(-45deg); transform: rotate(315deg) skewY(-45deg); } .orange .segment-7 .slice-contents { text-align: right; -webkit-transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); left: -65%; top: -49%; width: 100px; } .orange .segment-7 .text { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .orange .segment-8 { -webkit-transform: rotate(-315deg) skewY(-45deg); transform: rotate(-315deg) skewY(-45deg); } .orange .segment-8 .slice-contents { text-align: right; -webkit-transform: skewY(45deg) rotate(45deg); transform: skewY(45deg) rotate(45deg); left: -60%; top: -35%; width: 100px; } .orange .segment-8 .text { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .blue-wrapper { margin: 20px auto; -webkit-transfor: rotate(-50deg); -webkit-transform: rotate(-50deg); transform: rotate(-50deg); position: relative; left: -2%; top: 60px; } /* Background image */ #blueCog { height: 510px; width: 510px; position: absolute; right: -8px; top: -7px; -webkit-transfor: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg); } /* segment 7 */ .blue .segment-1 { -webkit-transform: rotate(325deg) skewY(-35deg); transform: rotate(325deg) skewY(-35deg); } .blue .segment-1 .slice-contents { text-align: left; left: -71%; top: -126%; width: 110px; -webkit-transform: skewY(35deg) rotate(120deg); transform: skewY(35deg) rotate(120deg); } .blue .segment-1 .text { -webkit-transform: rotate(-35deg); transform: rotate(-35deg); } .blue .segment-2 { -webkit-transform: rotate(80deg) skewY(-35deg); transform: rotate(80deg) skewY(-35deg); } .blue .segment-2 .slice-contents { text-align: right; left: -69%; top: -86%; width: 100px; -webkit-transform: skewY(35deg) rotate(90deg); transform: skewY(35deg) rotate(90deg); } .blue .segment-2 .text { -webkit-transform: rotate(-120deg); transform: rotate(-120deg); } .blue .segment-3 { -webkit-transform: rotate(135deg) skewY(-40deg); transform: rotate(135deg) skewY(-40deg); } .blue .segment-3 .slice-contents { text-align: right; left: -70%; top: -96%; width: 100px; -webkit-transform: skewY(40deg) rotate(90deg); transform: skewY(40deg) rotate(90deg); } .blue .segment-3 .text { -webkit-transform: rotate(185deg); transform: rotate(185deg); } .blue .segment-4 { -webkit-transform: rotate(185deg) skewY(-45deg); transform: rotate(185deg) skewY(-45deg); } .blue .segment-4 .slice-contents { text-align: left; left: -52%; top: -152%; width: 100px; -webkit-transform: skewY(46deg) rotate(136deg); transform: skewY(46deg) rotate(136deg); } .blue .segment-4 .text { -webkit-transform: rotate(88deg); transform: rotate(88deg); } .blue .segment-5 { -webkit-transform: rotate(230deg) skewY(-40deg); transform: rotate(230deg) skewY(-40deg); } .blue .segment-5 .slice-contents { text-align: right; left: -71%; top: -99%; width: 100px; -webkit-transform: skewY(40deg) rotate(90deg); transform: skewY(40deg) rotate(90deg); } .blue .segment-5 .text { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .blue .segment-6 { -webkit-transform: rotate(280deg) skewY(-45deg); transform: rotate(280deg) skewY(-45deg) } .blue .segment-6 .slice-contents { text-align: left; left: -90%; top: -110%; width: 100px; -webkit-transform: skewY(45deg) rotate(85deg); transform: skewY(45deg) rotate(85deg); } .blue .segment-6 .text { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .blue .segment-7 { -webkit-transform: rotate(15deg) skewY(-30deg); transform: rotate(20deg) skewY(-30deg); } .blue .segment-7 .slice-contents { text-align: center; left: -40%; top: -133%; width: 100px; -webkit-transform: skewY(30deg) rotate(140deg); transform: skewY(30deg) rotate(140deg); } .blue .segment-7 .text { -webkit-transform: rotate(-110deg); transform: rotate(-110deg); } /* PURPLE CIRCLE STYLES * Please note: the segment numbers are not the same as the section numbers on display * Use inspect element to double check which section you are on & would like to edit. */ .purple-wrapper { top: 34px; left: -52px; position: relative; } /* Background image */ #purpleCog { height: 510px; width: 510px; position: absolute; right: -8px; top: -7px; } .purple .segment-1 { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .purple .segment-1 .slice-contents { text-align: left; -webkit-transform: rotate(30deg); transform: rotate(30deg); left: -33%; top: 25%; width: 110px; } .purple .segment-1 .text { -webkit-transform: rotate(-30deg); transform: rotate(-30deg); } .purple .segment-2 { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .purple .segment-2 .slice-contents { text-align: left; -webkit-transform: rotate(30deg); transform: rotate(30deg); left: -36%; top: 35%; width: 110px; } .purple .segment-2 .text { -webkit-transform: rotate(-120deg); transform: rotate(-120deg); } .purple .segment-3 { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .purple .segment-3 .slice-contents { text-align: right; -webkit-transform: rotate(30deg); transform: rotate(30deg); top: 45%; left: -33%; width: 100px; } .purple .segment-3 .text { -webkit-transform: rotate(150deg); transform: rotate(150deg); } .purple .segment-4 { -webkit-transform: rotate(270deg); transform: rotate(270deg); } .purple .segment-4 .slice-contents { text-align: right; -webkit-transform: rotate(30deg); transform: rotate(30deg); left: -19%; top: 38%; width: 100px; } .purple .segment-4 .text { -webkit-transform: rotate(60deg); transform: rotate(60deg); } /* * Pass, fail & enable, disable content */ .content-disabled { pointer-events: none; opacity: .4; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); } .placeholder-image { height: 25px; width: 25px; } .tick { height: 25px; width: 25px; margin-top: -2px; } /* * Assessment loading Animation * .loading-assessments { margin: 100px auto; width: 80px; height: 80px; position: relative; } .loading-assessments img { position: absolute; left: -50px; top: -40px; } */ .loading-assessments { margin: 10px auto; width: 80px; height: 80px; right: 150px; top: 100px; position: relative; z-index: 100; } .loading-assessments .loader { height: 100%; position: relative; margin: auto; width: 400px; } .loading-assessments .loader_cogs { z-index: -2; width: 100px; height: 100px; top: -120px !important; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .loading-assessments .loader_cogs__top { position: relative; width: 100px; height: 100px; -webkit-transform-origin: 50px 50px; transform-origin: 50px 50px; -webkit-animation: rotate 5s infinite linear; animation: rotate 5s infinite linear; } .loading-assessments .loader_cogs__top div:nth-of-type(1) { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .loading-assessments .loader_cogs__top div:nth-of-type(2) { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .loading-assessments .loader_cogs__top div:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .loading-assessments .loader_cogs__top div.top_part { width: 100px; border-radius: 10px; position: absolute; height: 100px; background: #3FB0CE; } .loading-assessments .loader_cogs__top div.top_hole { width: 50px; height: 50px; border-radius: 100%; background: white; position: absolute; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .loading-assessments .loader_cogs__left { position: relative; width: 80px; -webkit-transform: rotate(16deg); transform: rotate(16deg); top: 28px; -webkit-transform-origin: 40px 40px; transform-origin: 40px 40px; -webkit-animation: rotate_left 5s .1s infinite reverse linear; animation: rotate_left 5s .1s infinite reverse linear; left: -24px; height: 80px; } .loading-assessments .loader_cogs__left div:nth-of-type(1) { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .loading-assessments .loader_cogs__left div:nth-of-type(2) { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .loading-assessments .loader_cogs__left div:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .loading-assessments .loader_cogs__left div.left_part { width: 80px; border-radius: 6px; position: absolute; height: 80px; background: #ffa626; } .loading-assessments .loader_cogs__left div.left_hole { width: 40px; height: 40px; border-radius: 100%; background: white; position: absolute; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } .loading-assessments .loader_cogs__bottom { position: relative; width: 60px; top: -65px; -webkit-transform-origin: 30px 30px; transform-origin: 30px 30px; -webkit-animation: rotate_left 5.2s .4s infinite linear; animation: rotate_left 5.2s .4s infinite linear; -webkit-transform: rotate(4deg); transform: rotate(4deg); left: 79px; height: 60px; } .loading-assessments .loader_cogs__bottom div:nth-of-type(1) { -webkit-transform: rotate(30deg); transform: rotate(30deg); } .loading-assessments .loader_cogs__bottom div:nth-of-type(2) { -webkit-transform: rotate(60deg); transform: rotate(60deg); } .loading-assessments .loader_cogs__bottom div:nth-of-type(3) { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .loading-assessments .loader_cogs__bottom div.bottom_part { width: 60px; border-radius: 5px; position: absolute; height: 60px; background: #9238c4; } .loading-assessments .loader_cogs__bottom div.bottom_hole { width: 30px; height: 30px; border-radius: 100%; background: white; position: absolute; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; } /* Animations */ @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg); } to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate_left { from { -webkit-transform: rotate(16deg); transform: rotate(16deg); } to { -webkit-transform: rotate(376deg); transform: rotate(376deg); } } @keyframes rotate_left { from { -webkit-transform: rotate(16deg); transform: rotate(16deg); } to { -webkit-transform: rotate(376deg); transform: rotate(376deg); } } @-webkit-keyframes rotate_right { from { -webkit-transform: rotate(4deg); transform: rotate(4deg); } to { -webkit-transform: rotate(364deg); transform: rotate(364deg); } } @keyframes rotate_right { from { -webkit-transform: rotate(4deg); transform: rotate(4deg); } to { -webkit-transform: rotate(364deg); transform: rotate(364deg); } } /* MEDIA QUERIES * Feel free to play around with these if you want a better experience */ /* Tablets */ @media screen and (max-width: 1014px) { header { text-align: center; } .pie { font-size: 13px; height: 350px; width: 350px; } .cogWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; position: relative; } #orangeCog,#blueCog,#purpleCog { height: 455px; width: 455px; position: absolute; right: -4px; top: -4px; } .section-progress { border-radius: 5px; color: #fff; margin: 0 auto; text-align: left; width: 95%; } .section-inner-wrapper { margin-bottom: 50px; text-align: center; } .section-1, .section-2, .section-3, .section-4 { margin: 0 auto; width: 80%; } .orange-wrapper, .blue-wrapper, .purple-wrapper { margin-bottom: 5%; margin-top: 2.5%; margin-right: 2%; font-size: .9em; left: 0; top: 0; margin: 0 auto; } .tick { height: 20px; width: 20px; } .orange .segment-6 .slice-contents { left: -68%; } .orange .segment-8 .slice-contents { left: -60%; } .orange .segment-4 .slice-contents { top: -108%; } .orange .segment-3 .slice-contents { left: -65%; top: -48%; } .orange .segment-2 .slice-contents { left: -64%; top: -35%; } .blue .segment-4 .slice-contents { left: -58%; top: -153%; } .blue .segment-2 .slice-contents { left: -78%; top: -87%; } .blue .segment-3 .slice-contents { left: -72%; top: -94%; } .blue .segment-5 .slice-contents { left: -79%; } .blue .segment-7 .slice-contents { left: -44%; top: -132%; } .purple .segment-1 .slice-contents { left: -37%; top: 22%; } .purple .segment-2 .slice-contents { top: 33%; } .purple .segment-3 .slice-contents { top: 49%; left: -37%; } } /* Laptops */ @media screen and (min-width: 1015px) and (max-width: 1363px) { .cogWrapper { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: flex-start; -ms-flex-line-pack: center; align-content: center; position: relative; } .orange-wrapper, .blue-wrapper, .purple-wrapper { left: 2% } }</style></head><body> <body> <div class="container"> <header> <h1>Introduction to the module</h1> </header> <div class="section-progress"> <div id="cog0" class="section-inner-wrapper"> <div class="section-1" id="c0s1-text"><h3>Section 1</h3><p>Our aims and outcomes</p></div> <div class="section-2" id="c0s2-text"><h3>Section 2</h3><p>The Australian Medical Home</p></div> <div class="section-3" id="c0s3-text"><h3>Section 3</h3><p>Our three jobs</p></div> <div class="section-4" id="c0s4-text"><h3>Section 4</h3><p>The Person-Centred Health System</p></div> </div> </div> <!-- Assessment preloader --> <!-- <div class="loading-assessments"> <img src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/assets/loading-gears.gif" /> </div> --> <div class="loading-assessments"> <div class='loader'> <div class='loader_cogs'> <div class='loader_cogs__top'> <div class='top_part'></div> <div class='top_part'></div> <div class='top_part'></div> <div class='top_hole'></div> </div> <div class='loader_cogs__left'> <div class='left_part'></div> <div class='left_part'></div> <div class='left_part'></div> <div class='left_hole'></div> </div> <div class='loader_cogs__bottom'> <div class='bottom_part'></div> <div class='bottom_part'></div> <div class='bottom_part'></div> <div class='bottom_hole'><!-- lol --></div> </div> </div> </div> </div> <div class="cogWrapper content-disabled"> <!--PIE ORANGE --> <div class="orange-wrapper"> <img id="orangeCog" src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/images/bg_cog1.png"> <ul id="cog1" class='pie orange'> <a href="cluster1/section2/cluster1-section2-001.html"> <li class='slice segment-1'> <div class='slice-contents'> <div id="c1s2-text" class="text"> <h3>Section 2</h3> <p>A culture of <br> improvement</p> </div> </div> </li> </a> <a href="cluster1/section4/cluster1-section4-001.html"> <li class='slice segment-2'> <div class='slice-contents'> <div id="c1s4-text" class="text"> <h3>Section 4</h3> <p>Rules of <br> improvement</p> </div> </div> </li> </a> <a href="cluster1/section5/cluster1-section5-001.html"> <li class='slice segment-3'> <div class='slice-contents'> <div id="c1s5-text" class="text"> <h3>Section 5</h3> <p>Leading change</p> </div> </div> </li> </a> <a href="cluster1/section6/cluster1-section6-001.html"> <li class='slice segment-4'> <div class='slice-contents'> <div id="c1s6-text" class="text"> <h3>Section 6</h3> <p>An improvement map</p> </div> </div> </li> </a> <li class='slice segment-5'> <div class='slice-contents'> <div class="text"> <h3>Section 7</h3> <p>Safety (part 1)</p> <!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail --> </div> </div> </li> <li class='slice segment-6'> <div class='slice-contents'> <div class="text"> <h3>Section 8</h3> <p>Safety (part 2)</p> <!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail --> </div> </div> </li> <!-- Section 1 --> <a href="cluster1/section1/cluster1-section1-001.html"> <li class='slice segment-7'> <div class='slice-contents'> <div id="c1s1-text" class="text"> <h3>Section 1</h3> <p>Our aim</p> </div> </div> </li> </a> <a href="cluster1/section3/cluster1-section3-001.html"> <li class='slice segment-8'> <div class='slice-contents'> <div id="c1s3-text" class="text"> <h3>Section 3</h3> <p>Focus on quality</p> </div> </div> </li> </a> </ul> </div> <!--PIE BLUE --> <div class="blue-wrapper"> <img id="blueCog" src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/images/bg_cog2.png"> <ul id="cog2" class='pie blue'> <a href="cluster2/section7/cluster2-section7-001.html"> <li class='slice segment-1'> <div class='slice-contents'> <div id="c2s7-text" class="text"> <h3>Section 7</h3> <p>Polypharmacy case studies</p> <!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail <span class="section-result" id="blue-s1-result"><img id="tick" src="images/icon_tick.png"></span> --> </div> </div> </li> </a> <a href="cluster2/section2/cluster2-section2-001.html"> <li class='slice segment-2'> <div class='slice-contents'> <div id="c2s2-text" class="text"> <h3>Section 2</h3> <p>Develop systems for proactive CDM</p> <span class='placeholder-image'> </span> </div> </div> </li> </a> <a href="cluster2/section3/cluster2-section3-001.html"> <li class='slice segment-3'> <div class='slice-contents'> <div id="c2s3-text" class="text"> <h3>Section 3</h3> <p>Chronic condition <br> consultations</p> <span class='placeholder-image'> </span> </div> </div> </li> </a> <a href="cluster2/section4/cluster2-section4-001.html"> <li class='slice segment-4'> <div class='slice-contents'> <div id="c2s4-text" class="text"> <h3>Section 4</h3> <p>Patient self-management <br> & integrated care</p> </div> </div> </li> </a> <a href="cluster2/section5/cluster2-section5-001.html"> <li class='slice segment-5'> <div class='slice-contents'> <div id="c2s5-text" class="text"> <h3>Section 5</h3> <p>Multimorbidity (part 1)</p> </div> </div> </li> </a> <a href="cluster2/section6/cluster2-section6-001.html"> <li class='slice segment-6'> <div class='slice-contents'> <div id="c2s6-text" class="text"> <h3>Section 6</h3> <p>Multimorbidity (part 2)</p> </div> </div> </li> </a> <a href="cluster2/section1/cluster2-section1-001.html"> <li class='slice segment-7'> <div class='slice-contents'> <div id="c2s1-text" class="text"> <h3>Section 1</h3> <p>Improvement map and herd health</p> </div> </div> </li> </a> </ul> </div> <!--PIE PURPLE--> <div class="purple-wrapper"> <img id="purpleCog" src="http://learning.acrrm.org.au/courseware/acrrm/ehealth_enabled_mgmt_of_chronic_conditions/images/bg_cog3.png"> <ul id="cog3" class='pie purple'> <a href="cluster3/section2/cluster3-section2-001.html"> <li class='slice segment-1'> <div class='slice-contents'> <div id="c3s2-text" class="text"> <h3>Section 2</h3> <p>Engaging your team</p> </div> </div> </li> </a> <a href="cluster3/section3/cluster3-section3-001.html"> <li class='slice segment-2'> <div class='slice-contents'> <div id="c3s3-text" class="text"> <h3>Section 3</h3> <p>Measures of team <br> engagement</p> </div> </div> </li> </a> <a href="cluster3/section4/cluster3-section4-001.html"> <li class='slice segment-3'> <div class='slice-contents'> <div id="c3s4-text" class="text"> <h3>Section 4</h3> <p>The Real Work</p> </div> </div> </li> </a> <a href="cluster3/section1/cluster3-section1-001.html"> <li class='slice segment-4'> <div class='slice-contents'> <div id="c3s1-text" class="text"> <h3>Section 1</h3> <p>Kotter's change model</p> <!-- Add Pass or fail icon --> <!-- jQuery append span image on pass or fail --> </div> </div> </li> </a> </ul> </div> </div><!-- Cog Wrapper --> </div><!-- Container --> <div id="assessmentContainer"></div> <div id="testingContainer"></div> </body> <!-- <body> <div class="cogWrapper"> <div class="cogInside"> <div class="cog" id="cog1"> <div class="cogPadding"> <a href="#"><div class="smallCog">Topic 1 - How to create a new html page</div></a> <a href="#"><div class="smallCog">Topic 2 - How to insert CSS into your new html page</div></a> <a href="#"><div class="smallCog">Topic 3 - </div></a> <div class="smallCog" id="cogResult1">Assessment not attempted</div> </div> </div> </div> <div class="cogInside cogInsideMiddle"> <div class="cog" id="cog2"> <div class="cogPadding"> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <div class="smallCog" id="cogResult2">Assessment not attempted</div> </div> </div> </div> <div class="cogInside"> <div class="cog" id="cog3"> <div class="cogPadding"> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <a href="#"><div class="smallCog"> </div></a> <div class="smallCog" id="cogResult3">Assessment not attempted</div> </div> </div> </div> </div> <div id="assessmentContainer"></div> <div class="pollWrapper"> <div id="pollContainer"></div> </div> </body> --> </html> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script >setTimeout(function() { $(".cogWrapper").removeClass("content-disabled"); $(".loading-assessments").remove(); }, 1) $("head").append('<link href="../common_module_files/styles/ehealth_enabled_mgmt_of_chronic_conditions.css" rel="stylesheet" type="text/css" />'); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: