Created
September 18, 2019 20:01
-
-
Save jarrettgreen/a121ca323252b9420d1c84f68a78c281 to your computer and use it in GitHub Desktop.
JS Bin // source https://jsbin.com/xiroto
This file contains 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> | |
| <script src="https://kit.fontawesome.com/43d4b7622d.js"></script> | |
| <link rel="stylesheet" href="https://kit-pro.fontawesome.com/releases/latest/css/pro.min.css" media="all"> | |
| <style id="jsbin-css"> | |
| @import "https://use.typekit.net/dhh4vdw.css"; | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| div#hyperion-switcher { | |
| height: 50px; | |
| width: 100% | |
| position: absolute; | |
| top: 0px; | |
| color: #FFF; | |
| font-size: 12px; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 300; | |
| letter-spacing: .035em; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| div#hyperion-switcher.in-classic { | |
| background: #00C252; | |
| } | |
| div#hyperion-switcher.in-hyperion { | |
| background: #2b2f37; | |
| } | |
| div#hyperion-switcher a, | |
| div#hyperion-switcher a:active, | |
| div#hyperion-switcher a:visited { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| div#hyperion-switcher a:hover, | |
| div#hyperion-switcher a:active:hover, | |
| div#hyperion-switcher a:visited:hover { | |
| text-decoration: underline; | |
| } | |
| div#hyperion-switcher #switcher { | |
| height: 100%; | |
| min-width: 377px; | |
| font-family: "Proxima-Soft", sans-serif; | |
| font-weight: 200; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| div#hyperion-switcher #switcher span.app-name { | |
| font-weight: 600; | |
| } | |
| div#hyperion-switcher #switcher i { | |
| margin-right: 5px; | |
| margin-top: 2px; | |
| } | |
| div#hyperion-switcher #switcher small { | |
| margin-top: 1px; | |
| margin-left: 6px; | |
| } | |
| div#hyperion-switcher #switcher.green-blob-bg { | |
| background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%27377px%27%20height%3D%27303px%27%20viewBox%3D%270%200%20377%20303%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%20%20%20%20%3Cg%20id%3D%27App-Switcher%27%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%27App-Switcher---Classic%27%20transform%3D%27translate%28-620.000000%2C%20-209.000000%29%27%20fill%3D%27%2300AB48%27%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%27M923.943%2C258.332546%20C962.010729%2C289.825079%20999.559824%2C337.996222%20996.862928%2C388.135649%20C994.269758%2C438.171482%20951.535361%2C490.175599%20901.538015%2C506.232646%20C851.541707%2C522.289694%20794.284523%2C502.399674%20739.62051%2C476.294022%20C684.956496%2C450.291964%20632.989378%2C418.074274%20622.201793%2C375.290011%20C611.414208%2C332.505748%20641.806155%2C279.051318%20679.770157%2C247.558785%20C717.630432%2C216.169846%20763.062762%2C206.742805%20805.072109%2C209.436246%20C847.185182%2C212.129686%20885.771545%2C226.943608%20923.943%2C258.332546%27%20id%3D%27Fill-1%27%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat; | |
| background-position: center; | |
| } | |
| div#hyperion-switcher #switcher.grey-blob-bg { | |
| background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22377px%22%20height%3D%22309px%22%20viewBox%3D%220%200%20377%20309%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cg%20id%3D%22App-Switcher%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22App-Switcher---Hyperion%22%20transform%3D%22translate%28-726.000000%2C%20-257.000000%29%22%20fill%3D%22%234E4F50%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-10%22%20transform%3D%22translate%280.000000%2C%20-1.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1102.86293%2C440.68289%20C1100.26976%2C491.709531%201057.53536%2C544.743432%201007.53802%2C561.118441%20C957.541707%2C577.493451%20900.284523%2C557.209568%20845.62051%2C530.586973%20C790.956496%2C504.070022%20738.989378%2C471.214359%20728.201793%2C427.582882%20C717.414208%2C383.951406%20747.806155%2C329.438472%20785.770157%2C297.322325%20C823.630432%2C265.311824%20869.062762%2C255.698108%20911.072109%2C258.444884%20C953.185182%2C261.19166%20991.771545%2C276.298926%201029.943%2C308.309428%20C1068.01073%2C340.425575%201105.55982%2C389.550603%201102.86293%2C440.68289%20Z%22%20id%3D%22Fill-1%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; | |
| background-position: center; | |
| } | |
| div#hyperion-switcher #current-location { | |
| width: 210px; | |
| margin-left: 20px; | |
| font-weight: 300; | |
| } | |
| div#hyperion-switcher #current-location span.app-name { | |
| font-weight: 600; | |
| } | |
| div#hyperion-switcher #whats-this, | |
| div#hyperion-switcher #leave-feedback { | |
| width: 210px; | |
| text-align: right; | |
| margin-right: 25px; | |
| font-weight: 400; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id='hyperion-switcher' class="in-classic"> | |
| <div id="current-location"> | |
| You're in <span class='app-name'>Comp Classic</span> | |
| </div> | |
| <div id="switcher" class="green-blob-bg"> | |
| <a href="#"> | |
| <i class="far fa-rocket"></i> | |
| Launch <span class='app-name'>Comp Hyperion Beta</span> | |
| </a> | |
| <small>New!</small> | |
| </div> | |
| <div id="whats-this"><a href='#'>What's this?</a></div> | |
| </div> | |
| <div id='hyperion-switcher' class="in-hyperion"> | |
| <div id="current-location"> | |
| Welcome to <span class='app-name'>Comp Hyperion Beta!</span> | |
| </div> | |
| <div id="switcher" class="grey-blob-bg"> | |
| <a href='#'> | |
| <i class="fas fa-undo-alt"></i> | |
| Go Back to <span class='app-name'>Comp Classic</span> | |
| </a> | |
| </div> | |
| <div id="leave-feedback"><a href='#'>Leave feedback</a></div> | |
| </div> | |
| <script id="jsbin-source-css" type="text/css">@import "https://use.typekit.net/dhh4vdw.css"; | |
| body{ | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| div#hyperion-switcher{ | |
| height: 50px; | |
| width: 100% | |
| position: absolute; | |
| top: 0px; | |
| color: #FFF; | |
| font-size: 12px; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 300; | |
| letter-spacing: .035em; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| &.in-classic { | |
| background: #00C252; | |
| } | |
| &.in-hyperion { | |
| background: #2b2f37; | |
| } | |
| a, a:active, a:visited { | |
| color: #fff; | |
| text-decoration: none; | |
| &:hover{ | |
| text-decoration: underline; | |
| } | |
| } | |
| #switcher{ | |
| height: 100%; | |
| min-width: 377px; | |
| font-family: "Proxima-Soft", sans-serif; | |
| font-weight: 200; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| span.app-name { | |
| font-weight: 600; | |
| } | |
| i { | |
| margin-right: 5px; | |
| margin-top: 2px; | |
| } | |
| small { | |
| margin-top:1px; | |
| margin-left: 6px; | |
| } | |
| &.green-blob-bg{ | |
| background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%27377px%27%20height%3D%27303px%27%20viewBox%3D%270%200%20377%20303%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%20%20%20%20%3Cg%20id%3D%27App-Switcher%27%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%27App-Switcher---Classic%27%20transform%3D%27translate%28-620.000000%2C%20-209.000000%29%27%20fill%3D%27%2300AB48%27%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%27M923.943%2C258.332546%20C962.010729%2C289.825079%20999.559824%2C337.996222%20996.862928%2C388.135649%20C994.269758%2C438.171482%20951.535361%2C490.175599%20901.538015%2C506.232646%20C851.541707%2C522.289694%20794.284523%2C502.399674%20739.62051%2C476.294022%20C684.956496%2C450.291964%20632.989378%2C418.074274%20622.201793%2C375.290011%20C611.414208%2C332.505748%20641.806155%2C279.051318%20679.770157%2C247.558785%20C717.630432%2C216.169846%20763.062762%2C206.742805%20805.072109%2C209.436246%20C847.185182%2C212.129686%20885.771545%2C226.943608%20923.943%2C258.332546%27%20id%3D%27Fill-1%27%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat; | |
| background-position: center; | |
| } | |
| &.grey-blob-bg{ | |
| background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22377px%22%20height%3D%22309px%22%20viewBox%3D%220%200%20377%20309%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cg%20id%3D%22App-Switcher%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22App-Switcher---Hyperion%22%20transform%3D%22translate%28-726.000000%2C%20-257.000000%29%22%20fill%3D%22%234E4F50%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-10%22%20transform%3D%22translate%280.000000%2C%20-1.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1102.86293%2C440.68289%20C1100.26976%2C491.709531%201057.53536%2C544.743432%201007.53802%2C561.118441%20C957.541707%2C577.493451%20900.284523%2C557.209568%20845.62051%2C530.586973%20C790.956496%2C504.070022%20738.989378%2C471.214359%20728.201793%2C427.582882%20C717.414208%2C383.951406%20747.806155%2C329.438472%20785.770157%2C297.322325%20C823.630432%2C265.311824%20869.062762%2C255.698108%20911.072109%2C258.444884%20C953.185182%2C261.19166%20991.771545%2C276.298926%201029.943%2C308.309428%20C1068.01073%2C340.425575%201105.55982%2C389.550603%201102.86293%2C440.68289%20Z%22%20id%3D%22Fill-1%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; | |
| background-position: center; | |
| } | |
| } | |
| #current-location{ | |
| width: 210px; | |
| margin-left: 20px; | |
| font-weight: 300; | |
| span.app-name { | |
| font-weight: 600; | |
| } | |
| } | |
| #whats-this, #leave-feedback { | |
| width: 210px; | |
| text-align: right; | |
| margin-right: 25px; | |
| font-weight:400; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
| @import "https://use.typekit.net/dhh4vdw.css"; | |
| body { | |
| margin: 0px; | |
| padding: 0px; | |
| } | |
| div#hyperion-switcher { | |
| height: 50px; | |
| width: 100% | |
| position: absolute; | |
| top: 0px; | |
| color: #FFF; | |
| font-size: 12px; | |
| font-family: 'Open Sans', sans-serif; | |
| font-weight: 300; | |
| letter-spacing: .035em; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| div#hyperion-switcher.in-classic { | |
| background: #00C252; | |
| } | |
| div#hyperion-switcher.in-hyperion { | |
| background: #2b2f37; | |
| } | |
| div#hyperion-switcher a, | |
| div#hyperion-switcher a:active, | |
| div#hyperion-switcher a:visited { | |
| color: #fff; | |
| text-decoration: none; | |
| } | |
| div#hyperion-switcher a:hover, | |
| div#hyperion-switcher a:active:hover, | |
| div#hyperion-switcher a:visited:hover { | |
| text-decoration: underline; | |
| } | |
| div#hyperion-switcher #switcher { | |
| height: 100%; | |
| min-width: 377px; | |
| font-family: "Proxima-Soft", sans-serif; | |
| font-weight: 200; | |
| font-size: 16px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| div#hyperion-switcher #switcher span.app-name { | |
| font-weight: 600; | |
| } | |
| div#hyperion-switcher #switcher i { | |
| margin-right: 5px; | |
| margin-top: 2px; | |
| } | |
| div#hyperion-switcher #switcher small { | |
| margin-top: 1px; | |
| margin-left: 6px; | |
| } | |
| div#hyperion-switcher #switcher.green-blob-bg { | |
| background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%27377px%27%20height%3D%27303px%27%20viewBox%3D%270%200%20377%20303%27%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%27%3E%20%20%20%20%3Cg%20id%3D%27App-Switcher%27%20stroke%3D%27none%27%20stroke-width%3D%271%27%20fill%3D%27none%27%20fill-rule%3D%27evenodd%27%3E%20%20%20%20%20%20%20%20%3Cg%20id%3D%27App-Switcher---Classic%27%20transform%3D%27translate%28-620.000000%2C%20-209.000000%29%27%20fill%3D%27%2300AB48%27%3E%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%27M923.943%2C258.332546%20C962.010729%2C289.825079%20999.559824%2C337.996222%20996.862928%2C388.135649%20C994.269758%2C438.171482%20951.535361%2C490.175599%20901.538015%2C506.232646%20C851.541707%2C522.289694%20794.284523%2C502.399674%20739.62051%2C476.294022%20C684.956496%2C450.291964%20632.989378%2C418.074274%20622.201793%2C375.290011%20C611.414208%2C332.505748%20641.806155%2C279.051318%20679.770157%2C247.558785%20C717.630432%2C216.169846%20763.062762%2C206.742805%20805.072109%2C209.436246%20C847.185182%2C212.129686%20885.771545%2C226.943608%20923.943%2C258.332546%27%20id%3D%27Fill-1%27%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E") no-repeat; | |
| background-position: center; | |
| } | |
| div#hyperion-switcher #switcher.grey-blob-bg { | |
| background: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%22377px%22%20height%3D%22309px%22%20viewBox%3D%220%200%20377%20309%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cg%20id%3D%22App-Switcher%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22App-Switcher---Hyperion%22%20transform%3D%22translate%28-726.000000%2C%20-257.000000%29%22%20fill%3D%22%234E4F50%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group-10%22%20transform%3D%22translate%280.000000%2C%20-1.000000%29%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M1102.86293%2C440.68289%20C1100.26976%2C491.709531%201057.53536%2C544.743432%201007.53802%2C561.118441%20C957.541707%2C577.493451%20900.284523%2C557.209568%20845.62051%2C530.586973%20C790.956496%2C504.070022%20738.989378%2C471.214359%20728.201793%2C427.582882%20C717.414208%2C383.951406%20747.806155%2C329.438472%20785.770157%2C297.322325%20C823.630432%2C265.311824%20869.062762%2C255.698108%20911.072109%2C258.444884%20C953.185182%2C261.19166%20991.771545%2C276.298926%201029.943%2C308.309428%20C1068.01073%2C340.425575%201105.55982%2C389.550603%201102.86293%2C440.68289%20Z%22%20id%3D%22Fill-1%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E") no-repeat; | |
| background-position: center; | |
| } | |
| div#hyperion-switcher #current-location { | |
| width: 210px; | |
| margin-left: 20px; | |
| font-weight: 300; | |
| } | |
| div#hyperion-switcher #current-location span.app-name { | |
| font-weight: 600; | |
| } | |
| div#hyperion-switcher #whats-this, | |
| div#hyperion-switcher #leave-feedback { | |
| width: 210px; | |
| text-align: right; | |
| margin-right: 25px; | |
| font-weight: 400; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment