CINXE.COM
my.jcu.edu.au
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>my.jcu.edu.au</title> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"/> <script> function zoomIn(panel) { document.getElementById(panel).getElementsByClassName('inner')[0].style.transform = 'scale(1.05)'; } function zoomOut(panel) { document.getElementById(panel).getElementsByClassName('inner')[0].style.transform = 'scale(1.0)'; } </script> <style> * { transform-style: preserve-3d; } html { width: 100%; height: 100%; font-size: 16px; /* sets base for all em measurements */ font-family: 'Roboto', sans-serif; color: white; } body { display: -ms-grid; display: grid; width: 100%; height: 100%; margin: 0; padding: 0; background-color: black; z-index: 0; } header { border-bottom: 2px solid black; -ms-grid-row: 1; grid-row: 1; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3; color: white; padding-left: 1em; text-align: left; background-color: #333399; } img.logo { width: 9em; height: 5em; object-fit: scale-down; } .half { overflow: hidden; z-index: 1; } .half a { z-index: 1002; -ms-grid-row: 1; -ms-grid-row-span: 5; grid-row: 1/6; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3; } a, a:visited { text-decoration: none; color: white } #app { display: -ms-grid; display: grid; /* -ms-grid-rows moved from here to orientation specific configs below */ grid-template-rows: 15% minmax(min-content, max-content) auto minmax(min-content, max-content) auto; } #app .inner { background-image: url('left.jpg'); } #mail { display: -ms-grid; display: grid; overflow: hidden; /* -ms-grid-rows moved from here to orientation specific configs below */ grid-template-rows: 15% minmax(min-content, max-content) auto minmax(min-content, max-content) auto; } #mail .inner { background-image: url('right.jpg'); } #store-badges { margin-top: 1em; margin-left: 1em; -ms-grid-column: 1; grid-column: 1; -ms-grid-row: 4; grid-row: 4; display: -ms-grid; display: grid; -ms-grid-rows: 100%; grid-template-rows: 100%; -ms-grid-columns: calc(50% - 0.5em) 1em calc(50% - 0.5em); grid-template-columns: calc(50% - 0.5em) 1em calc(50% - 0.5em); max-width: 25em; z-index: 1003; } /* START IE HACKS =========================== */ #store-badges > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } #store-badges > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } #store-badges > *:nth-child(3) { -ms-grid-row: 1; -ms-grid-column: 3; } /* END IE HACKS =========================== */ #store-badges a img { width: 100%; height: auto; z-index: 1002; } #google { -ms-grid-column: 1; grid-column: 1; } #apple { -ms-grid-column: 3; grid-column: 3; } .banner { background-color: rgba(0, 0, 0, 0.65); padding: 1em; -ms-grid-row: 2; grid-row: 2; -ms-grid-column: 1; grid-column: 1; z-index: 1001; } /*Background image*/ .inner { z-index: 2; -ms-grid-row: 1; -ms-grid-row-span: 5; grid-row: 1/6; -ms-grid-column: 1; -ms-grid-column-span: 2; grid-column: 1/3; background-size: cover; background-position: center; transition-duration: 0.2s; } h2 { margin: 0; padding: 0; font-size: 2.5em; font-weight: 500; } /* Landscape */ @media only screen and (orientation: landscape) { body { -ms-grid-columns: 50% 50%; grid-template-columns: 50% 50%; -ms-grid-rows: 5.5em calc(100% - 5.5em); grid-template-rows: 5.5em auto; } /* START IE HACKS =========================== */ body > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } body > *:nth-child(2) { -ms-grid-row: 1; -ms-grid-column: 2; } body > *:nth-child(3) { -ms-grid-row: 2; -ms-grid-column: 1; } body > *:nth-child(4) { -ms-grid-row: 2; -ms-grid-column: 2; } /* END IE HACKS =========================== */ #app { -ms-grid-rows: 15% 25% 20% 20% 20%; /* Moved to here from #app outside of orientation specific config */ -ms-grid-row: 2; grid-row: 2; -ms-grid-column: 1; grid-column: 1; border-right: 2px solid black; -ms-grid-columns: 100%; /* Not the same, IE doesn't handle 90% auto? */ grid-template-columns: 90% auto; } #mail { -ms-grid-rows: 15% 25% 20% 20% 20%; /* Moved to here from #app outside of orientation specific config */ -ms-grid-row: 2; grid-row: 2; -ms-grid-column: 2; grid-column: 2; -ms-grid-columns: 100%; /* Not the same, IE doesn't handle 90% auto? */ grid-template-columns: 90% auto; } } /* Portrait */ @media only screen and (orientation: portrait) { body { min-height: 20em; min-width: 8em; -ms-grid-rows: 5.5em calc(50% - 2.75em) calc(50% - 2.75em); grid-template-rows: 5.5em calc(50% - 2.75em) calc(50% - 2.75em); -ms-grid-columns: 100%; grid-template-columns: 100%; } /* START IE HACKS =========================== */ body > *:nth-child(1) { -ms-grid-row: 1; -ms-grid-column: 1; } body > *:nth-child(2) { -ms-grid-row: 2; -ms-grid-column: 1; } body > *:nth-child(3) { -ms-grid-row: 3; -ms-grid-column: 1; } /* END IE HACKS =========================== */ header { -ms-grid-column: 1; grid-column: 1; text-align: center; } #store-badges { margin-right: 1em; } #app { -ms-grid-rows: 15% 35% 15% 20% 15%; /* Moved to here from #app outside of orientation specific config */ -ms-grid-row: 2; grid-row: 2; -ms-grid-column: 1; grid-column: 1; border-bottom: 2px solid black; -ms-grid-columns: 100%; grid-template-columns: 100%; } #mail { -ms-grid-rows: 15% 35% 15% 20% 15%; /* Moved to here from #app outside of orientation specific config */ -ms-grid-row: 3; grid-row: 3; -ms-grid-column: 1; grid-column: 1; -ms-grid-columns: 100%; grid-template-columns: 100%; } } </style> </head> <body> <header> <a href="https://www.jcu.edu.au/"><img class="logo" alt="James Cook University" src="jcu-logo.svg"/></a> </header> <div class="half" id="app"> <div class="inner"></div> <div class="banner"> <a title="JCU Student app" href="https://get.jcu.app/"> <h2>Student app</h2> <p>Access the student app online, or download it for your mobile device below.</p> </a> </div> <div id="store-badges"> <a id="google" href="https://play.google.com/store/apps/details?id=au.edu.jcu.studentapp.android&hl=en&pcampaignid=MKT-Other-global-all-co-prtnr-py-PartBadge-Mar2515-1"><img alt="Get it on Google Play" src="google-play-badge.svg"/></a> <a id="apple" href="https://itunes.apple.com/au/app/jcu-app/id1385986151?mt=8"><img alt="Get it from the App Store" src="appstore-badge.svg"/></a> </div> <a onmouseenter="zoomIn('app');" onmouseleave="zoomOut('app');" onfocus="zoomIn('app');" onblur="zoomOut('app');" href="https://get.jcu.app/"> </a> </div> <div class="half" id="mail"> <div class="inner"></div> <div class="banner"> <a title="JCU Student mail" href="https://outlook.office365.com/owa/my.jcu.edu.au"> <h2>Student mail</h2> <p>Access your student email, calendar and more.</p> </a> </div> <a onmouseenter="zoomIn('mail');" onmouseleave="zoomOut('mail');" onfocus="zoomIn('mail');" onblur="zoomOut('mail');" href="https://outlook.office365.com/owa/my.jcu.edu.au"> </a> </div> </body> </html>