|
|
| (78 intermediate revisions by 4 users not shown) |
| Line 1: |
Line 1: |
| − | {{Team:Hawaii-Header}} | + | {{Hawaii/Navbar}} |
| − | | + | |
| − | <!-- HEADER -->
| + | |
| | | | |
| | <html> | | <html> |
| | + | <div id="container"> |
| | + | <div id="big-title"> |
| | + | <h1 id="big-title-main">TO THE CENTROMERE</h1> |
| | + | <h1 id="big-title-alt">TO THE CENTROMERE</h1> |
| | + | <h2 id="sub-title">WITH VIRUS-LIKE PARTICLES</h2> |
| | + | </div> |
| | | | |
| − | <!-- External scripts -->
| + | <div id="button-container"> |
| | + | <button id="b1"><a href="https://2018.igem.org/Team:Hawaii/Description">EXPLORE</a></button> |
| | + | </div> |
| | | | |
| − | <!-- Fonts Used On Page -->
| + | |
| − | <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
| + | </div> |
| − | <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
| + | |
| − | | + | |
| − | | + | |
| − | <!-- For mobile friendly version of website. -->
| + | |
| − | <head>
| + | |
| − | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0">
| + | |
| − | </head>
| + | |
| − | | + | |
| − | <!-- Functionallity and behaviour JS -->
| + | |
| − | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
| + | |
| − | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
| + | |
| − | | + | |
| − | <!-- Necessary for nav bar header-->
| + | |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
| + | |
| − | <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> -->
| + | |
| − | | + | |
| − | <!-- TypeKit Fonts (BW) -->
| + | |
| − | <script src="https://use.typekit.net/hii0ztv.js"></script>
| + | |
| − | <script>try{Typekit.load({ async: true });}catch(e){}</script>
| + | |
| − | | + | |
| − | <style type="text/css">
| + | |
| − | * {
| + | |
| − | margin:0;
| + | |
| − | padding:0;
| + | |
| − | text-decoration:none
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | background:#555;
| + | |
| − | }
| + | |
| − | | + | |
| − | header {
| + | |
| − | z-index: 9999;
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | background:#333;
| + | |
| − | }
| + | |
| − | | + | |
| − | .logo-header-custom {
| + | |
| − | position:relative;
| + | |
| − | z-index:123;
| + | |
| − | padding-left: 12px;
| + | |
| − | padding-right: 10px;
| + | |
| − | padding-top: 2px;
| + | |
| − | padding-bottom: 2px;
| + | |
| − | font:18px verdana;
| + | |
| − | color:#6DDB07;
| + | |
| − | float:left;
| + | |
| − | width:15%
| + | |
| − | }
| + | |
| − | | + | |
| − | .logo-header-custom a {
| + | |
| − | color:#6DDB07;
| + | |
| − | }
| + | |
| − | | + | |
| − | nav {
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | margin:0 auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu,#cssmenu ul,#cssmenu ul li,#cssmenu ul li a,#cssmenu #head-mobile {
| + | |
| − | border:0;
| + | |
| − | list-style:none;
| + | |
| − | margin-bottom: -1px;
| + | |
| − | display:block;
| + | |
| − | position:relative;
| + | |
| − | -webkit-box-sizing:border-box;
| + | |
| − | -moz-box-sizing:border-box;
| + | |
| − | box-sizing:border-box
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu:after,#cssmenu > ul:after {
| + | |
| − | content:".";
| + | |
| − | display:block;
| + | |
| − | clear:both;
| + | |
| − | visibility:hidden;
| + | |
| − | line-height:0;
| + | |
| − | height:0
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu #head-mobile {
| + | |
| − | display:none
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu {
| + | |
| − | font-family:"Objektiv-mk1";
| + | |
| − | background: #fff;
| + | |
| − | top: 16px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li {
| + | |
| − | float:right;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li > a {
| + | |
| − | padding:17px;
| + | |
| − | font-size:14px;
| + | |
| − | letter-spacing:1px;
| + | |
| − | text-decoration:none;
| + | |
| − | color:#333;
| + | |
| − | font-weight:300;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li:hover > a,#cssmenu ul li.active a {
| + | |
| − | color:#fff !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul li:hover {
| + | |
| − | color: white !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li:hover,#cssmenu ul li.active:hover,#cssmenu ul li.active,#cssmenu ul li.has-sub.active:hover {
| + | |
| − | background-color:#50A500!important;
| + | |
| − | -webkit-transition:background .3s ease;
| + | |
| − | -ms-transition:background .3s ease;
| + | |
| − | transition:background .3s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li.has-sub > a {
| + | |
| − | padding-right:30px
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li.has-sub > a:after {
| + | |
| − | position:absolute;
| + | |
| − | top:28px;
| + | |
| − | right:11px;
| + | |
| − | width:8px;
| + | |
| − | height:2px;
| + | |
| − | display:block;
| + | |
| − | background:#363636;
| + | |
| − | content:''
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li.has-sub > a:before {
| + | |
| − | position:absolute;
| + | |
| − | top:25px;
| + | |
| − | right:14px;
| + | |
| − | display:block;
| + | |
| − | width:2px;
| + | |
| − | height:8px;
| + | |
| − | background:#363636;
| + | |
| − | content:'';
| + | |
| − | -webkit-transition:all .25s ease;
| + | |
| − | -ms-transition:all .25s ease;
| + | |
| − | transition:all .25s ease
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li.has-sub:hover > a:before {
| + | |
| − | top:29px;
| + | |
| − | height:0
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul {
| + | |
| − | position:fixed;
| + | |
| − | left:-9999px;
| + | |
| − | top: 75px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li {
| + | |
| − | height:0;
| + | |
| − | line-height: 1;
| + | |
| − | -webkit-transition:all .25s ease;
| + | |
| − | -ms-transition:all .25s ease;
| + | |
| − | background: #fff;
| + | |
| − | transition: all .25s ease;
| + | |
| − | border-bottom: 1px solid #999;
| + | |
| − | border-left: 1px solid #999;
| + | |
| − | border-right: 1px solid #999;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li:hover {
| + | |
| − | background-color: #DCDCDC;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li.has-sub:hover {
| + | |
| − | background-color: #DCDCDC !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu li:hover > ul {
| + | |
| − | left:auto
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu li:hover > ul > li {
| + | |
| − | height:35px
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li a {
| + | |
| − | border-bottom:1px solid rgba(150,150,150,0.15);
| + | |
| − | padding:11px 15px;
| + | |
| − | width:200px;
| + | |
| − | font-size:11px;
| + | |
| − | text-decoration:none;
| + | |
| − | color:#333;
| + | |
| − | font-weight:300;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li:last-child > a,#cssmenu ul ul li.last-item > a {
| + | |
| − | border-bottom:0
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li:hover > a,#cssmenu ul ul li a:hover {
| + | |
| − | color:#fff
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li.has-sub > a:after {
| + | |
| − | position:absolute;
| + | |
| − | top:16px;
| + | |
| − | right:11px;
| + | |
| − | display:block;
| + | |
| − | width:8px;
| + | |
| − | height:2px;
| + | |
| − | background:#363636;
| + | |
| − | content:''
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li.has-sub > a:before {
| + | |
| − | position:absolute;
| + | |
| − | top:13px;
| + | |
| − | right:14px;
| + | |
| − | display:block;
| + | |
| − | width:2px;
| + | |
| − | height:8px;
| + | |
| − | background:#363636;
| + | |
| − | content:'';
| + | |
| − | -webkit-transition:all .25s ease;
| + | |
| − | -ms-transition:all .25s ease;
| + | |
| − | transition:all .25s ease
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul > li.has-sub:hover > a:before {
| + | |
| − | top:17px;
| + | |
| − | height:0
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li.has-sub:hover,#cssmenu ul li.has-sub ul li.has-sub ul li:hover {
| + | |
| − | background:#363636;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul ul li.active a {
| + | |
| − | border-left:1px solid #333
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active> a {
| + | |
| − | border-top:1px solid #333
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width: 1020px) {
| + | |
| − | | + | |
| − | /*#bodyContent h4 {
| + | |
| − | margin-bottom: 0px;
| + | |
| − | position: fixed;
| + | |
| − | top: 12px;
| + | |
| − | right: 5px;
| + | |
| − | font-size: 80%;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | #cssmenu ul ul li {
| + | |
| − | left: -28px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li a:hover {
| + | |
| − | color: white !important;
| + | |
| − | background-color: #1B4900 !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul ul li {
| + | |
| − | position: relative;
| + | |
| − | left: 171px !important;
| + | |
| − | top: 34px;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | #cssmenu ul ul ul a:before{
| + | |
| − | display: none;
| + | |
| − | position: absolute;
| + | |
| − | left: -9999px;
| + | |
| − | top: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul ul a:after {
| + | |
| − | display: block;
| + | |
| − | position: absolute;
| + | |
| − | left: -9999px;
| + | |
| − | top: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*h4 {
| + | |
| − | display: none;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | .tiny-little-menu-word-above-button {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (min-width: 200px) and (max-width:1020px){
| + | |
| − | | + | |
| − | .logo-header-custom2 {
| + | |
| − | display:none
| + | |
| − | }
| + | |
| − | | + | |
| − | header {
| + | |
| − | display: block;
| + | |
| − | z-index: 999999;
| + | |
| − | }
| + | |
| − |
| + | |
| − | nav {
| + | |
| − | width:100%;
| + | |
| − | z-index: 999999;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tiny-little-menu-word-above-button {
| + | |
| − | display: block;
| + | |
| − | font-family: 'objektiv-mk1';
| + | |
| − | font-size: 80%;
| + | |
| − | font-weight: 400;
| + | |
| − | margin-bottom: 0px;
| + | |
| − | position: fixed;
| + | |
| − | top: 21px;
| + | |
| − | right: 7px;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*h4 {
| + | |
| − | display: block;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | #cssmenu {
| + | |
| − | display: block;
| + | |
| − | width:100%;
| + | |
| − | z-index: 999999;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul {
| + | |
| − | z-index: 9999;
| + | |
| − | width:100%;
| + | |
| − | display:none;
| + | |
| − | margin-left: 0px;
| + | |
| − | margin-top: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul li {
| + | |
| − | width:100%;
| + | |
| − | border-top:1px solid #444;
| + | |
| − | border-bottom: 1px solid #444;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul li,#cssmenu ul li a {
| + | |
| − | line-height: 0.6;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul li:hover {
| + | |
| − | color: #fff !important;
| + | |
| − | background:#1B4900;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li,#cssmenu li:hover > ul > li {
| + | |
| − | height:auto
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul li a,#cssmenu ul ul li a {
| + | |
| − | width:100%;
| + | |
| − | border-bottom:0
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li {
| + | |
| − | float:none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li a {
| + | |
| − | padding-left:25px
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li {
| + | |
| − | background:#DCDCDC!important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu li a:hover {
| + | |
| − | color: #fff !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li:hover {
| + | |
| − | color: #fff !important;
| + | |
| − | background:#1B4900!important;
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul ul li a {
| + | |
| − | padding-left:50px
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li a {
| + | |
| − | color:#ddd;
| + | |
| − | background:none
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul li:hover > a,#cssmenu ul ul li.active > a {
| + | |
| − | color:#ddd
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul,#cssmenu ul ul ul {
| + | |
| − | position:initial;
| + | |
| − | left:0;
| + | |
| − | width:100%;
| + | |
| − | margin:0;
| + | |
| − | text-align:left
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li.has-sub > a:after,#cssmenu > ul > li.has-sub > a:before,#cssmenu ul ul > li.has-sub > a:after,#cssmenu ul ul > li.has-sub > a:before {
| + | |
| − | display:none
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu #head-mobile {
| + | |
| − | display:block;
| + | |
| − | padding:23px;
| + | |
| − | color:#ddd;
| + | |
| − | font-size:12px;
| + | |
| − | font-weight:700
| + | |
| − | }
| + | |
| − | | + | |
| − | .button-custom {
| + | |
| − | width:55px;
| + | |
| − | height:46px;
| + | |
| − | position:absolute;
| + | |
| − | right:0;
| + | |
| − | top:16px;
| + | |
| − | cursor:pointer;
| + | |
| − | z-index: 12399994;
| + | |
| − | }
| + | |
| − | | + | |
| − | .button-custom:after {
| + | |
| − | position:absolute;
| + | |
| − | top:22px;
| + | |
| − | right:20px;
| + | |
| − | display:block;
| + | |
| − | height:8px;
| + | |
| − | width:20px;
| + | |
| − | border-top:2px solid #363636;
| + | |
| − | border-bottom:2px solid #363636;
| + | |
| − | content:''
| + | |
| − | }
| + | |
| − | | + | |
| − | .button-custom:before {
| + | |
| − | -webkit-transition:all .3s ease;
| + | |
| − | -ms-transition:all .3s ease;
| + | |
| − | transition:all .3s ease;
| + | |
| − | position:absolute;
| + | |
| − | top:16px;
| + | |
| − | right:20px;
| + | |
| − | display:block;
| + | |
| − | height:2px;
| + | |
| − | width:20px;
| + | |
| − | background:#363636;
| + | |
| − | content:''
| + | |
| − | }
| + | |
| − | | + | |
| − | .button-custom.menu-opened:after {
| + | |
| − | -webkit-transition:all .3s ease;
| + | |
| − | -ms-transition:all .3s ease;
| + | |
| − | transition:all .3s ease;
| + | |
| − | top:23px;
| + | |
| − | border:0;height:2px;
| + | |
| − | width:19px;
| + | |
| − | background:#363636;
| + | |
| − | -webkit-transform:rotate(45deg);
| + | |
| − | -moz-transform:rotate(45deg);
| + | |
| − | -ms-transform:rotate(45deg);
| + | |
| − | -o-transform:rotate(45deg);
| + | |
| − | transform:rotate(45deg)
| + | |
| − | }
| + | |
| − | | + | |
| − | .button-custom.menu-opened:before {
| + | |
| − | top:23px;
| + | |
| − | background:#363636;
| + | |
| − | width:19px;
| + | |
| − | -webkit-transform:rotate(-45deg);
| + | |
| − | -moz-transform:rotate(-45deg);
| + | |
| − | -ms-transform:rotate(-45deg);
| + | |
| − | -o-transform:rotate(-45deg);
| + | |
| − | transform:rotate(-45deg)
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu .submenu-button-custom {
| + | |
| − | position:absolute;
| + | |
| − | z-index:99;
| + | |
| − | right:0;
| + | |
| − | top:0;
| + | |
| − | display:block;
| + | |
| − | border-left:1px solid #444;
| + | |
| − | height:42px;
| + | |
| − | width:46px;
| + | |
| − | cursor:pointer
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu .submenu-button-custom.submenu-opened {
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul .submenu-button-custom {
| + | |
| − | height:28px;
| + | |
| − | width:34px
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu .submenu-button-custom:after {
| + | |
| − | position:absolute;
| + | |
| − | top:22px;
| + | |
| − | right:19px;
| + | |
| − | width:8px;
| + | |
| − | height:2px;
| + | |
| − | display:block;
| + | |
| − | background:#363636;
| + | |
| − | content:''
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul .submenu-button-custom:after {
| + | |
| − | top:15px;
| + | |
| − | right:13px
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu .submenu-button-custom.submenu-opened:after {
| + | |
| − | background:#fff
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu .submenu-button-custom:before {
| + | |
| − | position:absolute;
| + | |
| − | top:19px;
| + | |
| − | right:22px;
| + | |
| − | display:block;
| + | |
| − | width:2px;
| + | |
| − | height:8px;
| + | |
| − | background:#363636;
| + | |
| − | content:''
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul .submenu-button-custom:before {
| + | |
| − | top:12px;
| + | |
| − | right:16px
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu .submenu-button-custom.submenu-opened:before {
| + | |
| − | display:none
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu ul ul ul li.active a {
| + | |
| − | border-left:none
| + | |
| − | }
| + | |
| − | | + | |
| − | #cssmenu > ul > li.has-sub > ul > li.active > a,#cssmenu > ul ul > li.has-sub > ul > li.active > a {
| + | |
| − | border-top:none
| + | |
| − | }
| + | |
| − | | + | |
| − | }
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <script type="text/javascript">
| + | |
| − | (function($) {
| + | |
| − | $.fn.menumaker = function(options) {
| + | |
| − | var cssmenu = $(this), settings = $.extend({
| + | |
| − | format: "dropdown",
| + | |
| − | sticky: false
| + | |
| − | }, options);
| + | |
| − | return this.each(function() {
| + | |
| − | $(this).find(".button-custom").on('click', function(){
| + | |
| − | $(this).toggleClass('menu-opened');
| + | |
| − | var mainmenu = $(this).next('ul');
| + | |
| − | if (mainmenu.hasClass('open')) {
| + | |
| − | mainmenu.slideToggle().removeClass('open');
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | mainmenu.slideToggle().addClass('open');
| + | |
| − | if (settings.format === "dropdown") {
| + | |
| − | mainmenu.find('ul').show();
| + | |
| − | }
| + | |
| − | }
| + | |
| − | });
| + | |
| − | cssmenu.find('li ul').parent().addClass('has-sub');
| + | |
| − | multiTg = function() {
| + | |
| − | cssmenu.find(".has-sub").prepend('<span class="submenu-button-custom"></span>');
| + | |
| − | cssmenu.find('.submenu-button-custom').on('click', function() {
| + | |
| − | $(this).toggleClass('submenu-opened');
| + | |
| − | if ($(this).siblings('ul').hasClass('open')) {
| + | |
| − | $(this).siblings('ul').removeClass('open').slideToggle();
| + | |
| − | }
| + | |
| − | else {
| + | |
| − | $(this).siblings('ul').addClass('open').slideToggle();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | };
| + | |
| − | if (settings.format === 'multitoggle') multiTg();
| + | |
| − | else cssmenu.addClass('dropdown');
| + | |
| − | if (settings.sticky === true) cssmenu.css('position', 'fixed');
| + | |
| − | resizeFix = function() {
| + | |
| − | var mediasize = 1020;
| + | |
| − | if ($( window ).width() > mediasize) {
| + | |
| − | cssmenu.find('ul').show();
| + | |
| − | }
| + | |
| − | // if ($(window).width() <= mediasize) {
| + | |
| − | // cssmenu.find('ul').hide().removeClass('open');
| + | |
| − | // }
| + | |
| − | };
| + | |
| − | resizeFix();
| + | |
| − | return $(window).on('resize', resizeFix);
| + | |
| − | });
| + | |
| − | };
| + | |
| − | })(jQuery);
| + | |
| − | | + | |
| − | (function($){
| + | |
| − | $(document).ready(function(){
| + | |
| − | $("#cssmenu").menumaker({
| + | |
| − | format: "multitoggle"
| + | |
| − | });
| + | |
| − | });
| + | |
| − | })(jQuery);
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | | + | |
| − | <header>
| + | |
| − | <nav id='cssmenu' style="position: fixed;">
| + | |
| − | <div class="logo-header-custom">
| + | |
| − | <a href="https://2018.igem.org/Team:Hawaii">
| + | |
| − | <img class="logo" src="https://static.igem.org/mediawiki/2018/f/f3/T--Hawaii--UHSeal.jpg" height="60" width="auto">
| + | |
| − | <!--<img class="logo" src="https://static.igem.org/mediawiki/2018/f/f3/T--Hawaii--UHSeal.jpg" height ="60" width="auto">-->
| + | |
| − | </a>
| + | |
| − | </div>
| + | |
| − | <div id="head-mobile"></div> | + | |
| − | <div class="button-custom">
| + | |
| − | <div class="tiny-little-menu-word-above-button">MENU</div>
| + | |
| − | </div>
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://igem.org/2018_Judging_Form?team=Hawaii">JUDGING</a></li>
| + | |
| − | <li><a href='https://2018.igem.org/Team:Hawaii/Notebook'>NOTEBOOK</a></li>
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Meet">MEETING MINUTES</a></li>
| + | |
| − | </ul>
| + | |
| − | <!-- <li><a href=''>FUTURE STUDIES</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="">IMPLEMENTATION</a></li>
| + | |
| − | <li><a href="">TARGET ORGANISM</a></li>
| + | |
| − | </ul>
| + | |
| − | </li> -->
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Human_Practices">HUMAN PRACTICES</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Human_Practices">INTRODUCTION</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Safety">SAFETY</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Design">DESIGN</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Public_Engagement">EDUCATION</a></li>
| + | |
| − | <li><a href="">COLLABORATIONS</a></li>
| + | |
| − | <li><a href="">BRONZE</a></li>
| + | |
| − | <li><a href="">SILVER</a></li>
| + | |
| − | <li><a href="">GOLD</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Description">PROJECT</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Description">THE PROJECT</a></li>
| + | |
| − | <li><a href="#">CENTROMERE-SPECIFIC RETROTRANSPOSONS</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="">GAG</a></li>
| + | |
| − | <li><a href="">PROTEASE</li>
| + | |
| − | <li><a href="">REVERSE TRANSCRIPTASE-RNASEH</li>
| + | |
| − | <li><a href="">INTEGRASE</li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Model">MODELING</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Results">RESULTS</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Part_Collection">PARTS</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/InterLab">INTERLAB STUDY</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Team">TEAM</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Team">MEET THE TEAM</a></li>
| + | |
| − | <li><a href="#">RESEARCH JOURNALS</a>
| + | |
| − | <ul>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Chan">CHAN JEONG</a></li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Emily">EMILY YANG</li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Fernanda">FERNANDA HENNIG</li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Gina">GINA WATANABE</li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/John">JOHN BANASIHAN</li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Jon">JON TELLO</li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Ryan">RYAN SHONTELL</li>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Shelby">SHELBY ROBERSON</li>
| + | |
| − | </ul>
| + | |
| − | <li><a href="https://2018.igem.org/Team:Hawaii/Attributions">ATTRIBUTIONS</a></li>
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | <li><a href='https://2018.igem.org/Team:Hawaii'>HOME</a></li>
| + | |
| − | </ul>
| + | |
| − | </nav>
| + | |
| − | </header>
| + | |
| − | <!-- END HEADER -->
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <!-- START STYLE -->
| + | |
| | | | |
| | <style> | | <style> |
| | | | |
| − | /* This styling below is for th3 Homepage */
| + | @keyframes fall { |
| − | | + | from { |
| − | | + | transform: rotate(0deg); |
| − | | + | transform-origin: 50% 40%; |
| − | html, body {
| + | } |
| − | max-width: 100%; | + | 40% { |
| − | overflow-x: hidden; | + | opacity: 1; |
| | + | } |
| | + | to { |
| | + | top: 700px; |
| | + | left: calc(50vw); |
| | + | opacity: 0; |
| | + | transform: rotate(360deg); |
| | + | transform-origin: 10% 10%; |
| | + | display: none; |
| | + | } |
| | } | | } |
| | | | |
| − | | + | #big-title { |
| − | | + | width: calc(100vw); |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| + | top: 250px; |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| + | text-align: center; |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| + | |
| − | /*styles consistent across pages below:*/
| + | |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| + | |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| + | |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| + | |
| − | | + | |
| − | | + | |
| − | /*.pageflow {
| + | |
| − | margin-right: 0px;
| + | |
| − | margin-left: 0px;
| + | |
| − | margin-top:30px;
| + | |
| − | background: honeydew;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | /*h1 {
| + | |
| − | font-family: 'objektiv-mk1'!important;
| + | |
| − | font-size: 300%;
| + | |
| − | font-weight: 300 !important;
| + | |
| − | width: 80%;
| + | |
| − | }
| + | |
| − | | + | |
| − | h2 {
| + | |
| − | font-family: 'objektiv-mk1' !important;
| + | |
| − | font-size: 200%;
| + | |
| − | font-weight: 300;
| + | |
| − | }
| + | |
| − | | + | |
| − | #page { | + | |
| − | background: honeydew;
| + | |
| − | }
| + | |
| − | | + | |
| − | .proj-button {
| + | |
| − | position: relative;
| + | |
| − | width: 10%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .proj-button-image {
| + | |
| − | opacity: 1;
| + | |
| − | display: inline-block;
| + | |
| − | width: 14%; | + | |
| − | height: auto; | + | |
| − | transition: .5s ease; | + | |
| − | backface-visibility: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | .proj-button-desc {
| + | |
| − | transition: .5s ease;
| + | |
| − | opacity: 0;
| + | |
| | position: absolute; | | position: absolute; |
| − | top: 100%; | + | font-size: 60px; |
| − | left: 50%; | + | font-family: 'Oswald', sans-serif; |
| − | background: transparent; | + | color: rgb(30,30,30); |
| − | transform: translate(-50%, -50%); | + | display: flex; |
| − | -ms-transform: translate(-50%, -50%) | + | flex-direction: column; |
| | + | justify-content: center; |
| | + | letter-spacing: 10px; |
| | + | z-index: 2; |
| | } | | } |
| − | | + | #sub-title { |
| − | .proj-button:hover .proj-button-image {
| + | font-family: 'Oswald', sans-serif; |
| − | opacity: 0.3; | + | margin: 0px; |
| | + | padding: 0px; |
| | + | font-size: 40px; |
| | } | | } |
| − | | + | #big-title-alt { |
| − | .proj-button:hover .proj-button-desc {
| + | display: none; |
| − | opacity: 0.6; | + | justify-content: center; |
| − | }
| + | |
| − | | + | |
| − | .overlap-button-text {
| + | |
| − | background-color: transparent;
| + | |
| − | color: black;
| + | |
| − | font-size: 20px;
| + | |
| − | font-family: "Objektiv-mk1" !important;
| + | |
| − | font-weight: 600 !important;
| + | |
| − | padding: 16px 32px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .pagagraph {
| + | |
| − | font-family: 'objektiv-mk1' !important;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | p {
| + | |
| − | font-family: 'objektiv-mk1' !important;
| + | |
| − | font-size: large !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | .firstword {
| + | |
| − | font-family: 'objektiv-mk1' !important;
| + | |
| − | font-size: 100px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .titleimg {
| + | |
| − | vertical-align: middle; | + | |
| | width: 100%; | | width: 100%; |
| | + | font-size: 60px; |
| | + | position: absolute; |
| | + | top: 100px; |
| | } | | } |
| − | | + | @media only screen and (max-width: 800px) { |
| − | .titlebox {
| + | #big-title-main { |
| − | margin-left: 200px !important;
| + | display: none; |
| − | }*/
| + | |
| − | | + | |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| + | |
| − | | + | |
| − | /*@media (min-width: 1144px) {
| + | |
| − | .container { | + | |
| − | width: 70% !important; | + | |
| | } | | } |
| − | .text-container { | + | #big-title-alt { |
| − | width: 60%; | + | display: flex; |
| − | padding-left: 15px;
| + | |
| − | padding-right: 15px;
| + | |
| | } | | } |
| − | .titlebox { | + | #sub-title { |
| − | width: 80%; | + | display: none; |
| | } | | } |
| − | figcaption { | + | } |
| − | font-size: 16px; | + | @media only screen and (max-width: 1200px) { |
| | + | #big-title { |
| | + | font-size: 50px; |
| | + | top: 200px; |
| | } | | } |
| − | }*/
| |
| − |
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − |
| |
| − | /*@media (max-width: 1144px) {
| |
| − |
| |
| − | .titlebox {
| |
| − | margin-left: auto !important;
| |
| − | }
| |
| − |
| |
| − | .text-container {
| |
| − | width: 80%;
| |
| − | padding-left: 15px;
| |
| − | padding-right: 15px;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | font-family: 'objektiv-mk1' !important;
| |
| − | margin-left: 20px !important;
| |
| − | margin-right: 20px !important;
| |
| − | font-size: medium !important;
| |
| − | }
| |
| − | }*/
| |
| − |
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − |
| |
| − | /*@media (max-width: 768px) {
| |
| − |
| |
| − | .overlap-button-text {
| |
| − | background-color: rgba(94, 94, 94, 0.5);
| |
| − | border-radius: 60px;
| |
| − | color: white;
| |
| − | }
| |
| − |
| |
| − | .proj-button-image {
| |
| − | opacity: 1;
| |
| − | display: inline-block;
| |
| − | width: 30%;
| |
| − | height: auto;
| |
| − | transition: .5s ease;
| |
| − | backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .proj-button-desc {
| |
| − | transition: .5s ease;
| |
| − | opacity: 1;
| |
| − | position: absolute;
| |
| − | top: 100%;
| |
| − | left: 50%;
| |
| − | transform: translate(-50%, -50%);
| |
| − | -ms-transform: translate(-50%, -50%)
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-family: 'objektiv-mk1';
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | font-family: 'objektiv-mk1';
| |
| − | font-size: 20px;
| |
| − | }
| |
| − |
| |
| − | .text-container {
| |
| − | width: 80%;
| |
| − | }*/
| |
| − |
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − |
| |
| − | /*@media (max-width: 576px) {
| |
| − | .proj-button-image {
| |
| − | opacity: 1;
| |
| − | display: inline-block;
| |
| − | width: 60%;
| |
| − | height: auto;
| |
| − | transition: .5s ease;
| |
| − | backface-visibility: hidden;
| |
| − | }
| |
| − |
| |
| − | .proj-button-desc {
| |
| − | transition: .5s ease;
| |
| − | opacity: 1;
| |
| − | position: absolute;
| |
| − | top: 100%;
| |
| − | left: 50%;
| |
| − | transform: translate(-50%, -50%);
| |
| − | -ms-transform: translate(-50%, -50%)
| |
| − | }
| |
| − |
| |
| − | .firstword {
| |
| − | font-family: 'objektiv-mk1' !important;
| |
| − | font-size: 70px;
| |
| − | }
| |
| − |
| |
| − | .titleimg {
| |
| − | vertical-align: middle;
| |
| − | width: 90%;
| |
| − | }
| |
| − |
| |
| − | .text-container {
| |
| − | width: 100%;
| |
| − | margin-left: -15px;
| |
| − | margin-right: -15px;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | font-family: 'objektiv-mk1' !important;
| |
| − | margin-left: 10px !important;
| |
| − | margin-right: 10px !important;
| |
| − | font-size: small !important;
| |
| − | }
| |
| − | }*/
| |
| − |
| |
| − |
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*styles consistent across pages above:*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − |
| |
| − |
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − |
| |
| − |
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*styles consistent across header, and meet the team below:*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − | /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
| |
| − |
| |
| − |
| |
| − |
| |
| − |
| |
| − | #globalWrapper {
| |
| − | padding:0;
| |
| − | /*margin-bottom: -40px;*/
| |
| | } | | } |
| − | | + | .c1 { |
| − | .pad-top { | + | width: 0; |
| − | padding-top: 60px
| + | height: 0; |
| | } | | } |
| − | .text-center { | + | .c2a { |
| − | text-align: center
| + | width: 0; |
| | + | height: 0; |
| | + | transform: rotate(360deg); |
| | } | | } |
| − | i.fa {
| + | .c2b { |
| − | padding: 5px
| + | width: 0; |
| | + | height: 0; |
| | + | transform: scaleY(-1); |
| | } | | } |
| − | section {
| + | .c3 { |
| − | padding-top: 50px;
| + | width: 0; |
| − | width: 100%
| + | height: 0; |
| | } | | } |
| − | | + | .c4a { |
| − | .hl_1 { | + | |
| − | color: green;
| + | |
| | } | | } |
| − | | + | .c4b { |
| − | .hl_2 { | + | width: 0; |
| − | color: red;
| + | height: 0; |
| | + | transform: scaleX(-1); |
| | } | | } |
| − | | + | .c4c { |
| − | .page{ | + | width: 0; |
| − | background: honeydew;
| + | height: 0; |
| | } | | } |
| − | | + | .extra { |
| − | /*p {
| + | width: 0; |
| − | margin: 0px !important;
| + | height: 0; |
| − | font-weight: 300 !important;
| + | |
| − | line-height: 30px;
| + | |
| − | font-size: 120%;
| + | |
| − | font-family: "Objektiv-mk1" !important;
| + | |
| − | }*/
| + | |
| − | .persondesc { | + | |
| − | font-weight: 300;
| + | |
| − | line-height: 30px;
| + | |
| − | font-size: 105%
| + | |
| | } | | } |
| − | .pad-row { | + | .vlp { |
| − | padding-top: 40px;
| + | height: 300px; |
| − | padding-bottom: 40px
| + | width: 240px; |
| | + | position: absolute; |
| | + | top: -50px; |
| | + | animation-name: fall; |
| | + | animation-duration: 6s; |
| | + | animation-iteration-count: 1; |
| | + | z-index: 1; |
| | } | | } |
| − | .pad-bottom {
| + | #button-container { |
| − | padding-bottom: 50px
| + | width: 100%; |
| | + | display: flex; |
| | + | justify-content: center; |
| | + | position: absolute; |
| | + | top: 600px; |
| | + | z-index: 100; |
| | } | | } |
| − | | + | #b1, #b1 a{ |
| − | .navbar {
| + | font-family: 'Oswald', sans-serif; |
| − | margin-top: 16px
| + | font-style: italic; |
| | + | letter-spacing: 3px; |
| | + | font-size: 30px; |
| | + | background-color: rgb(30,30,30); |
| | + | color: white; |
| | + | padding: 10px; |
| | + | text-align: center; |
| | + | border:none; |
| | } | | } |
| − | .navbar-inverse .navbar-nav>li>a {
| + | #b1:hover { |
| − | color: #FFF
| + | box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22); |
| | } | | } |
| − | .navbar-inverse .navbar-brand {
| + | #b1:focus { |
| − | color: #FFF
| + | outline:0; |
| | } | | } |
| − | | + | #b1 a:hover { |
| − | | + | text-decoration: none; |
| − | .nav li {
| + | |
| − | transition: visibility 1.26s linear 0s, background 0.9s linear 0.36s; | + | |
| | } | | } |
| − | | + | #spacer { |
| − | .nh {
| + | width: 100%; |
| − | background: #333;
| + | height: 700px; |
| − | transition: all .2s ease
| + | |
| | } | | } |
| | | | |
| − | .nav ul li { | + | </style> |
| − | text-align: center;
| + | <script> |
| − | list-style-type: none
| + | window.onload = function() { |
| − | }
| + | var loadAnim = true; |
| | + | var eCol = "rgb(40,40,40)"; |
| | + | var maxSize = 30; |
| | | | |
| − | .navsub, .nhs {
| + | function lowRand() { |
| − | color: white;
| + | return Math.floor(Math.random()*120); |
| − | background: #222;
| + | |
| − | left: 0;
| + | |
| − | text-align: center;
| + | |
| − | width: 100%;
| + | |
| − | position: fixed;
| + | |
| − | top: 68px;
| + | |
| − | }
| + | |
| − | .firstHeading {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | #content {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | border:none;
| + | |
| − | margin: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .navsub ul li, .nhs ul li {
| + | |
| − | padding-left: 20px;
| + | |
| − | padding-right: 20px;
| + | |
| − | line-height: 50px;
| + | |
| − | float: left;
| + | |
| − | list-style-image: none
| + | |
| − | }
| + | |
| − | .navsub ul li a, .nhs ul li a {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − | color: white;
| + | |
| − | text-decoration: none
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav > li > .navsub {
| + | |
| − | visibility: hidden; | + | |
| − | opacity:0;
| + | |
| − | transition: visibility 1.26s linear 0s, opacity 0.9s linear 0.36s, z-index 1.26s;
| + | |
| − | z-index:10;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nav > li:hover > .navsub, .nhs {
| + | |
| − | visibility:visible;
| + | |
| − | opacity:1;
| + | |
| − | transition:visibility 0s linear 0s,opacity 0s linear;
| + | |
| − | transition-delay:0s;
| + | |
| − | z-index: 100;
| + | |
| − | }
| + | |
| − | | + | |
| − | .nhs {
| + | |
| − | z-index:1
| + | |
| − | }
| + | |
| − | | + | |
| − | .nhs:hover {
| + | |
| − | z-index:100
| + | |
| − | }
| + | |
| − | | + | |
| − | .navbar {
| + | |
| − | -webkit-transition: background .8s ease-out, padding .8s ease-out;
| + | |
| − | -moz-transition: background .8s ease-out, padding .8s ease-out;
| + | |
| − | transition: background .8s ease-out, padding .8s ease-out
| + | |
| − | }
| + | |
| − | .navbar-pad-original {
| + | |
| − | padding: 0
| + | |
| − | }
| + | |
| − | | + | |
| − | small {
| + | |
| − | font-size: 15px;
| + | |
| − | padding-left: 10px
| + | |
| − | }
| + | |
| − | #footer-sec {
| + | |
| − | background-color: #000;
| + | |
| − | margin-left: -1px;
| + | |
| − | margin-bottom: -10px;
| + | |
| − | color: gray
| + | |
| − | }
| + | |
| − | #footer-sec h4 {
| + | |
| − | text-transform: uppercase;
| + | |
| − | color: #fff
| + | |
| − | }
| + | |
| − | section {
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | border: 0
| + | |
| − | }
| + | |
| − | .cam-container {
| + | |
| − | height: auto;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0px;
| + | |
| − | background-color: #fff;
| + | |
| − | font-size: 13.6px;
| + | |
| − | min-width: 300px;
| + | |
| − | -webkit-overflow-scrolling: touch;
| + | |
| − | }
| + | |
| − | | + | |
| − | #content {
| + | |
| − | padding:0;
| + | |
| − | /*margin-bottom: -50px;*/
| + | |
| − | }
| + | |
| − | | + | |
| − | /*@media only screen and (max-width: 1200px) {
| + | |
| − | .cam-container { | + | |
| − | background-color: #000
| + | |
| − | }
| + | |
| − | }*/
| + | |
| − | | + | |
| − | .cam-container section:first-of-type {
| + | |
| − | margin-top: 50px;
| + | |
| − | padding-top: 50px
| + | |
| − | }
| + | |
| − | | + | |
| − | .slide,
| + | |
| − | .slide-team,
| + | |
| − | .slide-bare {
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-position: center;
| + | |
| − | background-size: 100% auto;
| + | |
| − | color: white;
| + | |
| − | max-width: 1200px;
| + | |
| − | margin: 0px auto 0px auto;
| + | |
| − | padding: 20px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .ss {
| + | |
| − | padding: 20px 10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slide,
| + | |
| − | .slide-team {
| + | |
| − | min-height: 600px
| + | |
| − | }
| + | |
| − | .slide-team {
| + | |
| − | | + | |
| − | display: block
| + | |
| − | }
| + | |
| − | .team {
| + | |
| − | max-width: 1170px;
| + | |
| − | min-width: 300px;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .teamen {
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .face {
| + | |
| − | white-space: normal;
| + | |
| − | width: 220px;
| + | |
| − | height: 280px;
| + | |
| − | background-repeat: no-repeat;
| + | |
| − | background-position: center;
| + | |
| − | background-size: auto 100%;
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | margin-top: 12px;
| + | |
| − | margin-bottom: 12px;
| + | |
| − | }
| + | |
| − | .face .profile,
| + | |
| − | .face .blur {
| + | |
| − | width: 100%;
| + | |
| − | height: 100%;
| + | |
| − | position: absolute;
| + | |
| − | overflow: hidden;
| + | |
| − | top: 0;
| + | |
| − | left: 0
| + | |
| − | }
| + | |
| − | .face .profile {
| + | |
| − | opacity: 0;
| + | |
| − | padding: 0px;
| + | |
| − | color: #fff
| + | |
| − | }
| + | |
| − | .face .profile h3 {
| + | |
| − | text-align: center;
| + | |
| − | margin: 0px 0
| + | |
| − | }
| + | |
| − | .face .profile p {
| + | |
| − | line-height: normal
| + | |
| − | }
| + | |
| − | .face:hover .profile, .profilehovered {
| + | |
| − | opacity: 1;
| + | |
| − | background-color: rgba(0, 0, 0, 0.65);
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | .face:hover .blur, .facehovered {
| + | |
| − | background: inherit;
| + | |
| − | filter: blur(10px);
| + | |
| − | -webkit-filter: blur(10px)
| + | |
| − | }
| + | |
| − | | + | |
| − | .person-name {
| + | |
| − | font-family: 'Objektiv-mk1';
| + | |
| − | font-weight: 300;
| + | |
| − | opacity: 0;
| + | |
| − | position: absolute;
| + | |
| − | background-color: rgba(0, 0, 0, 0.65);
| + | |
| − | }
| + | |
| − | | + | |
| − | @media (max-width: 768px) {
| + | |
| − | .person-name {
| + | |
| − | opacity: 1;
| + | |
| − | position: absolute;
| + | |
| − | top: -42px;
| + | |
| − | width: inherit;
| + | |
| − | height: auto;
| + | |
| − | background-color: rgba(0, 0, 0, 0);
| + | |
| | } | | } |
| − | .face:hover .profile, .profilehovered { | + | function highRand() { |
| − | opacity: 0; | + | return Math.floor(Math.random() * 80) + 255; |
| − | background-color: rgba(0, 0, 0, 0.65); | + | } |
| − | cursor: pointer; | + | function wRand() { |
| | + | return Math.floor(Math.random() * 1200); |
| | + | } |
| | + | function vlpRand() { |
| | + | return Math.floor(Math.random()*maxSize) ; |
| | } | | } |
| | | | |
| − | @media (max-width: 420px) {
| + | function generateCol(r,g,b) { |
| − | .person-name {
| + | var c1, c2a, c2b, c3, c4a, c4b, c4c; |
| − | opacity: 1; | + | var arr = [c1, c2a, c2b, c3, c4a, c4b, c4c]; |
| − | position: absolute; | + | for (let i = 0; i < arr.length; i++) { |
| − | top: -42px; | + | r += (255-r)*0.25; |
| − | width: inherit;
| + | g += (255-g)*0.25; |
| − | height: auto;
| + | b += (255-b)*0.25; |
| − | background-color: rgba(0, 0, 0, 0);
| + | arr[i] = "rgb(" + Math.round(r) + "," + Math.round(g) + "," + Math.round(b) + ")"; |
| | + | // console.log(arr[i]); |
| | + | } |
| | + | return arr; |
| | } | | } |
| − | }
| + | generateCol(180,40,20); |
| | | | |
| − | }
| + | function createVLP() { |
| | + | var cont = document.createElement('div'); |
| | | | |
| − | .facen { | + | cont.classList.add('vlp'); |
| − | width: 250px;
| + | cont.style.left = wRand() + "px"; |
| − | height: 260px;
| + | |
| − | margin-top:20px;
| + | |
| − | }
| + | |
| | | | |
| − | .cam-container h1,
| + | var div1 = document.createElement('div'); |
| − | .cam-container h2,
| + | var c4c = document.createElement('div'); |
| − | .cam-container h3,
| + | var c4b = document.createElement('div'); |
| − | .cam-container h4,
| + | var c2b = document.createElement('div'); |
| − | .cam-container h5,
| + | var extra = document.createElement('div'); |
| − | .cam-container h6 {
| + | |
| − | padding: 0; | + | |
| − | border: 0;
| + | |
| − | margin-bottom: 0em !important;
| + | |
| − | padding-bottom: 0.6em;
| + | |
| − | }
| + | |
| − | .cam-container h1,
| + | |
| − | .cam-container h2 {
| + | |
| − | margin-top: 0.6em !important | + | |
| − | }
| + | |
| − | .cam-container h3,
| + | |
| − | .cam-container h4,
| + | |
| − | .cam-container h5,
| + | |
| − | .cam-container h6 {
| + | |
| − | margin-top: 0.3em !important
| + | |
| − | }
| + | |
| − | .cam-container a,
| + | |
| − | .nav a {
| + | |
| − | color: #fff
| + | |
| − | }
| + | |
| − | .cam-container a:link,
| + | |
| − | .nav a:link {
| + | |
| − | color: #fff
| + | |
| − | }
| + | |
| − | .cam-container a:visited,
| + | |
| − | .nav a:visited {
| + | |
| − | color: #fff
| + | |
| − | }
| + | |
| − | .cam-container a:hover {
| + | |
| − | color: #89aabe
| + | |
| − | }
| + | |
| − | .nav a:hover {
| + | |
| − | color: #fff
| + | |
| − | }
| + | |
| − | .cam-container a:active,
| + | |
| − | .nav a:active {
| + | |
| − | color: #fff
| + | |
| − | }
| + | |
| − | #bodyContent a[href^="https://"], .link-https {
| + | |
| − | background: none !important;
| + | |
| − | padding: 0 !important; | + | |
| − | }
| + | |
| − | section#footer-sec a,
| + | |
| − | a.blue {
| + | |
| − | color: #98aabe
| + | |
| − | }
| + | |
| − | section#footer-sec a:link,
| + | |
| − | a.blue:link {
| + | |
| − | color: #98aabe
| + | |
| − | }
| + | |
| − | section#footer-sec a:visited,
| + | |
| − | a.blue:visited {
| + | |
| − | color: #98aabe
| + | |
| − | }
| + | |
| − | section#footer-sec a:hover,
| + | |
| − | a.blue:hover {
| + | |
| − | color: #428bca
| + | |
| − | }
| + | |
| − | section#footer-sec a:active,
| + | |
| − | a.blue:active {
| + | |
| − | color: #98aabe
| + | |
| − | }
| + | |
| − | .gitgraph-tooltip {
| + | |
| − | position: absolute;
| + | |
| − | margin-top: -15px; | + | |
| − | margin-left: 25px;
| + | |
| − | padding: 10px;
| + | |
| − | border-radius: 5px;
| + | |
| − | background: #EEE;
| + | |
| − | color: #333;
| + | |
| − | text-align: center;
| + | |
| − | font-size: 14px;
| + | |
| − | line-height: 20px
| + | |
| − | }
| + | |
| − | .gitgraph-tooltip:after { | + | |
| − | position: absolute;
| + | |
| − | top: 10px; | + | |
| − | left: -18px;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | border-width: 10px;
| + | |
| − | border-style: solid;
| + | |
| − | border-color: transparent;
| + | |
| − | border-right-color: #EEE;
| + | |
| − | content: ""
| + | |
| − | }
| + | |
| − | .gitgraph-detail { | + | |
| − | position: absolute;
| + | |
| − | padding: 10px;
| + | |
| − | text-align: justify;
| + | |
| − | width: 800px;
| + | |
| − | display: none
| + | |
| − | }
| + | |
| | | | |
| − | #footer-sec {
| + | c4c.classList.add('c4c'); |
| − | padding-top: 30px;
| + | c4b.classList.add('c4b'); |
| − | }
| + | c2b.classList.add('c2b'); |
| | + | extra.classList.add('extra'); |
| | | | |
| − | ul {
| + | c4c.appendChild(c4b); |
| − | list-style: square url('data:image/gif;base64,R0lGODlhBQAKAIABAAAAAP///yH5BAEAAAEALAAAAAAFAAoAAAIIjI+ZwKwPUQEAOw==') | + | c4c.appendChild(c2b); |
| − | }
| + | c4c.appendChild(extra); |
| | + | div1.appendChild(c4c); |
| | | | |
| − | table.rl tr td:first-child {
| + | var div2 = document.createElement('div'); |
| − | padding-right: 0.5em; | + | var c4a = document.createElement('div'); |
| − | text-align: right | + | var c3 = document.createElement('div'); |
| − | }
| + | var c2a = document.createElement('div'); |
| | | | |
| | + | c4a.classList.add('c4a'); |
| | + | c3.classList.add('c3'); |
| | + | c2a.classList.add('c2a'); |
| | | | |
| − | /* The styling below was initially within styles tags on the UCSC-Header template */
| + | c4a.appendChild(c3); |
| − | #sideMenu, #top_title {display:none;}
| + | c4a.appendChild(c2a); |
| − | #content {}
| + | div2.appendChild(c4a); |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | |
| | | | |
| | + | var div3 = document.createElement('div'); |
| | + | var c1 = document.createElement('div'); |
| | | | |
| − | body,
| + | c1.classList.add('c1'); |
| − | html{
| + | |
| − | margin: 0;
| + | |
| − | padding:0;
| + | |
| − | font-family: 'Objektiv-mk1', sans-serif;
| + | |
| − | font-weight: 300;
| + | |
| | | | |
| − | overflow-x: hidden;
| + | div3.appendChild(c1); |
| − | position: relative;
| + | |
| − | }
| + | |
| − | nav li a {
| + | |
| − | display: block;
| + | |
| − | color: #1A680A !important; text-decoration: none;
| + | |
| − |
| + | |
| − | }
| + | |
| − | nav ul li:hover > ul {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
| + | |
| − | .firstHeading{
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| − | #top-section{
| + | |
| − | background:#48af5d; /* green */
| + | |
| − | margin-left:0 !important;
| + | |
| − | width:100%;
| + | |
| − | left:0;
| + | |
| − | }
| + | |
| − | .c-layout-go2top {
| + | |
| − | display: inline-block;
| + | |
| − | position: fixed;
| + | |
| − | bottom: 20px;
| + | |
| − | right: 10px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | .c-layout-go2top > i {
| + | |
| − | opacity: 0.5;
| + | |
| − | filter: alpha(opacity=50);
| + | |
| − | color: #89939e;
| + | |
| − | font-size: 38px;
| + | |
| − | font-weight: 300;
| + | |
| − | }
| + | |
| − | .c-layout-go2top:hover {
| + | |
| − | opacity: 0.8;
| + | |
| − | filter: alpha(opacity=80);
| + | |
| − | }
| + | |
| − | /* LOADING SCREEN */
| + | |
| − | .loading{
| + | |
| − | position:fixed;
| + | |
| − | width:100%;
| + | |
| − | height:100%;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | z-index:5;
| + | |
| − | background-color:#555;
| + | |
| − | color:#fff;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .loading p{
| + | |
| − | position: relative;
| + | |
| − | width:100%;
| + | |
| − | height:10%;
| + | |
| − | top:45%;
| + | |
| − | left:0;
| + | |
| − | }
| + | |
| − | /* MENU STYLING */
| + | |
| − | .menu{
| + | |
| − | position:fixed;
| + | |
| − | width:100%;
| + | |
| − | height:56px;
| + | |
| − | top:14px;
| + | |
| − | background-color: #47a3da; /* blue */
| + | |
| − | z-index:4;
| + | |
| − | border-collapse: collapse;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | .menu tr td{
| + | |
| − | text-align: center;
| + | |
| − | vertical-align: middle;
| + | |
| − | font-weight: 700;
| + | |
| − | font-size:16px;
| + | |
| − | color:#fff;
| + | |
| − | width:7%;
| + | |
| − | }
| + | |
| − | .menu tr td.menu-item:hover>a:{
| + | |
| − | background-color:#258ecd;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | .subselected{
| + | |
| − | background-color: #258ecd;
| + | |
| − | }
| + | |
| − | /* CONTAINERS STYLING */
| + | |
| − | .container{
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | top:50px;
| + | |
| − | }
| + | |
| − | .container .subcontainer{
| + | |
| − | position:absolute;
| + | |
| − | width:95%;
| + | |
| − | height:90%;
| + | |
| − | top:5%;
| + | |
| − | left:2.5%;
| + | |
| − | }
| + | |
| − | #top{
| + | |
| − | background-size: cover;
| + | |
| − |
| + | |
| − | }
| + | |
| − | /* TEAM MEMBERS CARDS STYLING */
| + | |
| − | .team-member-container{
| + | |
| − | position:relative;
| + | |
| − | width:14%;
| + | |
| − | margin-left:2.28%;
| + | |
| − | float:left;
| + | |
| − | }
| + | |
| − | .team-member-container:hover{
| + | |
| − | cursor:pointer;
| + | |
| − | }
| + | |
| − | .row2{
| + | |
| − | top:4%;
| + | |
| − | }
| + | |
| − | .team-member-container .team-member-photo{
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | height:85%;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .team-member-container .team-member-footer{
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | height:15%;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | border:none;
| + | |
| − | border-collapse: collapse;
| + | |
| − | background-color: #47a3da;
| + | |
| − | color:#fff;
| + | |
| − | text-align: center;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| | | | |
| | + | cont.appendChild(div1); |
| | + | cont.appendChild(div2); |
| | + | cont.appendChild(div3); |
| | | | |
| − | .center-block {
| + | var sides = [c1, c2a, c2b, c3, c4a, c4b, c4c]; |
| − | display: block;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | }
| + | |
| − | .navbar-fixed-top {
| + | |
| − | background: #fff;
| + | |
| − | filter: none !important;
| + | |
| − | box-shadow: 0 2px 15px rgba(0,0,0,0.25);
| + | |
| − | -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
| + | |
| − | -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
| + | |
| − | border-bottom: 1px solid rgba(0,0,0,0.2);
| + | |
| − | }
| + | |
| − | .dropdown-submenu {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | .dropdown-submenu>.dropdown-menu {
| + | |
| − | top: 0;
| + | |
| − | left: 100%;
| + | |
| − | margin-top: -6px;
| + | |
| − | margin-left: -1px;
| + | |
| − | -webkit-border-radius: 0 6px 6px 6px;
| + | |
| − | -moz-border-radius: 0 6px 6px;
| + | |
| − | border-radius: 0 6px 6px 6px;
| + | |
| − | }
| + | |
| − | .dropdown-submenu:hover>.dropdown-menu {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .dropdown-submenu>a::after {
| + | |
| − | display: block;
| + | |
| − | content: " ";
| + | |
| − | float: right;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | border-color: transparent;
| + | |
| − | border-style: solid;
| + | |
| − | border-width: 5px 0 5px 5px;
| + | |
| − | border-left-color: #ccc;
| + | |
| − | margin-top: 5px;
| + | |
| − | margin-right: -10px;
| + | |
| − | }
| + | |
| − | .dropdown-submenu:hover>a::after {
| + | |
| − | border-left-color: #fff;
| + | |
| − | }
| + | |
| − | .dropdown-submenu.pull-left {
| + | |
| − | float: none;
| + | |
| − | }
| + | |
| − | .dropdown-submenu.pull-left>.dropdown-menu {
| + | |
| − | left: -100%;
| + | |
| − | margin-left: 10px;
| + | |
| − | -webkit-border-radius: 6px 0 6px 6px;
| + | |
| − | -moz-border-radius: 6px 0 6px 6px;
| + | |
| − | border-radius: 6px 0 6px 6px;
| + | |
| − | }
| + | |
| − | .faceBot {
| + | |
| − | background: #202020;
| + | |
| − | }
| + | |
| | | | |
| − | body {
| + | function createSides(startSize, colorArr, elArr) { |
| − | font-family: 'Objektiv-mk1', sans-serif;
| + | var s2 = startSize - 5; |
| − | font-weight: 300 !important;
| + | var w = startSize * 2; |
| − | top: 60px !important;
| + | elArr[0].style.borderLeft = startSize + "px solid transparent"; |
| − | background: honeydew !important;
| + | elArr[0].style.borderRight = startSize + "px solid transparent"; |
| − | }
| + | elArr[0].style.borderTop = s2 + "px solid " + colorArr[0]; |
| − | ul.nav a{
| + | |
| − | color: gray;
| + | |
| − | background-color: transparent;
| + | |
| − | height: 100%;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | ul.nav a::hover{
| + | |
| − | color: gray
| + | |
| − | background-color: transparent;
| + | |
| − | height: 100%;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | h2 {
| + | |
| − | color:green;
| + | |
| − | font-family: 'Objektiv-mk1', sans-serif;
| + | |
| − | font-weight: 300;
| + | |
| − | }
| + | |
| − | h4 {
| + | |
| − | font-family: 'Objektiv-mk1', sans-serif;
| + | |
| − | font-weight: 300;
| + | |
| − | }
| + | |
| − | .menu-item{
| + | |
| − | height: 75px;
| + | |
| − | }
| + | |
| − | li.menu-item{
| + | |
| − | background: transparent !important;
| + | |
| − | padding-top: 18px;
| + | |
| − | }
| + | |
| − | .logo {
| + | |
| − | margin-top: 0px;
| + | |
| − | margin-left: 0px;
| + | |
| − | }
| + | |
| − | a:hover .green-effect{
| + | |
| − | display: inherit;
| + | |
| − | }
| + | |
| − | .invertir:hover {
| + | |
| − | -webkit-filter: invert(100%);
| + | |
| − | }
| + | |
| − | dropdown-toggle {
| + | |
| − | width: 10%;
| + | |
| − |
| + | |
| − | }
| + | |
| | | | |
| − | /* @media screen and (max-width:640px) {
| + | elArr[1].style.borderRight = startSize + "px solid " + colorArr[1]; |
| − | .leftSideBar, .rightSideBar {display:none}
| + | elArr[1].style.borderBottom = s2 + "px solid transparent"; |
| − | }
| + | |
| − | */
| + | |
| | | | |
| − | </style>
| + | elArr[2].style.borderRight = startSize + "px solid " + colorArr[2]; |
| | + | elArr[2].style.borderBottom = s2 + "px solid transparent"; |
| | | | |
| − | <!-- <script type="text/javascript">
| + | elArr[3].style.borderRight = startSize + "px solid transparent"; |
| − |
| + | elArr[3].style.borderBottom = s2 + "px solid " + colorArr[3]; |
| − | $('li.menu-item').on('click', function() {
| + | |
| − | $('ul.dropdown-menu').toggle();
| + | |
| − | });
| + | |
| − | </script> -->
| + | |
| | | | |
| − | <!-- END STYLE -->
| + | elArr[4].style.backgroundColor = colorArr[4]; |
| | + | elArr[4].style.width = w + "px"; |
| | + | elArr[4].style.height = s2 + "px"; |
| | | | |
| | + | elArr[5].style.borderRight = startSize + "px solid " + colorArr[5]; |
| | + | elArr[5].style.borderTop = s2 + "px solid transparent"; |
| | | | |
| | + | elArr[6].style.borderLeft = startSize + "px solid transparent"; |
| | + | elArr[6].style.borderBottom = s2 + "px solid " + colorArr[6]; |
| | | | |
| − | <!-- START TEMPLATE -->
| + | } |
| | + | createSides(vlpRand(), generateCol(255,highRand(),lowRand()), sides); |
| | + | if (document.getElementsByClassName('vlp').length > 15) { |
| | + | $('.vlp').first().remove(); |
| | + | } |
| | | | |
| − | <title>W3.CSS Template</title>
| + | document.body.appendChild(cont); |
| − | <meta charset="UTF-8">
| + | } |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| + | |
| − | <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
| + | |
| − | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
| + | |
| − | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
| + | |
| − | <style>
| + | |
| − | body, h1,h2,h3,h4,h5,h6 {font-family: "Montserrat", sans-serif} | + | |
| − | .w3-row-padding img {margin-bottom: 12px} | + | |
| − | /* Set the width of the sidebar to 120px */
| + | |
| − | .w3-sidebar {width: 120px;background: #222;}
| + | |
| − | /* Add a left margin to the "page content" that matches the width of the sidebar (120px) */
| + | |
| − | #main {margin-left: 120px}
| + | |
| − | /* Remove margins from "page content" on small screens */
| + | |
| − | @media only screen and (max-width: 600px) {#main {margin-left: 0}}
| + | |
| − | </style>
| + | |
| − | <body class="w3-black">
| + | |
| | | | |
| − | <!-- End Template -->
| + | setInterval(VLPtimer, 400); |
| | | | |
| − | <!-- Page Content --> | + | function VLPtimer() { |
| − | <div class="w3-padding-large" id="main">
| + | if (window.scrollY < 700) { |
| − | <!-- Header/Home -->
| + | var rand = Math.round(Math.random()*(600)); |
| − | <header class="w3-container w3-padding-32 w3-center w3-black" id="home">
| + | setTimeout(function(){ |
| − | <p>WERE NOT OLD, JUST</p>
| + | createVLP(); |
| − | <h1 class="w3-jumbo"><span class="w3-hide-small">RETRO</span> </h1> | + | }, rand); |
| − | <img src="https://static.igem.org/mediawiki/2018/thumb/4/4f/T--Hawaii--Retro.jpg/806px-T--Hawaii--Retro.jpg.png" width="826" height="923">
| + | } else { |
| − | </header> | + | window.clearTimeout(); |
| | + | } |
| | + | }; |
| | | | |
| − | <!-- About Section -->
| + | } |
| − | <div class="w3-content w3-justify w3-text-grey w3-padding-64" id="about">
| + | </script> |
| − | <h2 class="w3-text-light-grey">Hawaii 2018</h2>
| + | |
| − | <hr style="width:200px" class="w3-opacity">
| + | |
| − | <p>Greetings from the land of actively errupting volcanoes! We are currently working with a family of centromere-specific retrotransposons in Zea mays.
| + | |
| − | </p>
| + | |
| − | <h3 class="w3-padding-16 w3-text-light-grey">The Lab</h3>
| + | |
| − | <div class="w3-row w3-center w3-padding-16 w3-section w3-light-grey">
| + | |
| − | <div class="w3-quarter w3-section">
| + | |
| − | <span class="w3-xlarge">7</span><br>
| + | |
| − | Undergraduate Students
| + | |
| − | </div>
| + | |
| − | <div class="w3-quarter w3-section">
| + | |
| − | <span class="w3-xlarge">2</span><br>
| + | |
| − | Graduate Students
| + | |
| − | </div>
| + | |
| − | <div class="w3-quarter w3-section">
| + | |
| − | <span class="w3-xlarge">2</span><br>
| + | |
| − | Advisors
| + | |
| − | </div>
| + | |
| − | <div class="w3-quarter w3-section">
| + | |
| − | <span class="w3-xlarge">0</span><br>
| + | |
| − | BioBrick Parts
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <button class="w3-button w3-light-grey w3-padding-large w3-section">
| + | |
| − | <i class="fa fa-download"></i> Download BioBricks Parts List
| + | |
| − | </button>
| + | |
| − |
| + | |
| − | <!-- End About Section -->
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <!-- Portfolio Section -->
| + | |
| − | <div class="w3-padding-64 w3-content" id="photos">
| + | |
| − | <h2 class="w3-text-light-grey">Lab Photos</h2>
| + | |
| − | <hr style="width:200px" class="w3-opacity">
| + | |
| − | | + | |
| − | <!-- Grid for photos -->
| + | |
| − | <div class="w3-row-padding" style="margin:0 -16px">
| + | |
| − | <div class="w3-half">
| + | |
| − | <img src="Watch_Me_Pipette.jpg" style="width:100%">
| + | |
| − | <img src="Glass_Ware_is_Hot.jpg" style="width:100%">
| + | |
| − | <img src="Cool_Beans.jpg" style="width:100%">
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div class="w3-half">
| + | |
| − | <img src="Super_Sweet_Image.jpg" style="width:100%">
| + | |
| − | <img src="We_Always_Wear_Lab_Coats.jpg" style="width:100%">
| + | |
| − | <img src="Fun_Party.jpg" style="width:100%">
| + | |
| − | <img src="Sweet_Image.jpg" style="width:100%">
| + | |
| − | </div>
| + | |
| − | <!-- End photo grid -->
| + | |
| − | </div>
| + | |
| − | <!-- End Portfolio Section -->
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <!-- Contact Section -->
| + | |
| − | <div class="w3-padding-64 w3-content w3-text-grey" id="contact">
| + | |
| − | <h2 class="w3-text-light-grey">Contact Us</h2>
| + | |
| − | <hr style="width:200px" class="w3-opacity">
| + | |
| − | | + | |
| − | <div class="w3-section">
| + | |
| − | <p><i class="fa fa-map-marker fa-fw w3-text-white w3-xxlarge w3-margin-right"></i> Honolulu, HI</p>
| + | |
| − | <p><i class="fa fa-phone fa-fw w3-text-white w3-xxlarge w3-margin-right"></i> Phone: 867-5309</p>
| + | |
| − | <p><i class="fa fa-envelope fa-fw w3-text-white w3-xxlarge w3-margin-right"> </i> Email: iGEMSHawaii@gmail.com</p>
| + | |
| − | </div><br>
| + | |
| − | <p>Let us know about your project:</p>
| + | |
| − | | + | |
| − | <form action="/action_page.php" target="_blank">
| + | |
| − | <p><input class="w3-input w3-padding-16" type="text" placeholder="Name" required name="Name"></p>
| + | |
| − | <p><input class="w3-input w3-padding-16" type="text" placeholder="Email" required name="Email"></p>
| + | |
| − | <p><input class="w3-input w3-padding-16" type="text" placeholder="Subject" required name="Subject"></p>
| + | |
| − | <p><input class="w3-input w3-padding-16" type="text" placeholder="Message" required name="Message"></p>
| + | |
| − | <p>
| + | |
| − | <button class="w3-button w3-light-grey w3-padding-large" type="submit">
| + | |
| − | <i class="fa fa-paper-plane"></i> SEND MESSAGE
| + | |
| − | </button>
| + | |
| − | </p>
| + | |
| − | </form>
| + | |
| − | <!-- End Contact Section -->
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <!-- Footer -->
| + | |
| − | <footer class="w3-content w3-padding-64 w3-text-grey w3-xlarge">
| + | |
| − | <i class="fa fa-facebook-official w3-hover-opacity"></i>
| + | |
| − | <i class="fa fa-instagram w3-hover-opacity"></i>
| + | |
| − | <p class="w3-medium">Powered by <a href="Sweet_Donut_Picture.jpg" target="_blank" class="w3-hover-text-green">Lots of Coffee and Donuts</a></p>
| + | |
| − | <!-- End footer -->
| + | |
| − | </footer>
| + | |
| − | | + | |
| − | <!-- END PAGE CONTENT -->
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </body> | + | |
| | </html> | | </html> |
| | + | {{Hawaii/Footer}} |
