Line 7: | Line 7: | ||
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> | ||
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
− | |||
<!-- Comfortaa Import --> | <!-- Comfortaa Import --> | ||
<link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'> | <link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'> | ||
Line 172: | Line 171: | ||
.navbar-default .navbar-nav .open .dropdown-menu > .active > a, | .navbar-default .navbar-nav .open .dropdown-menu > .active > a, | ||
.navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, | .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, | ||
− | .navbar-default .navbar-nav . | + | .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { |
+ | color: #ffffff; | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | .navig_bar .navbar-right img { | ||
+ | height:10px; | ||
+ | } | ||
+ | .navig_bar { | ||
+ | font-size:16px; | ||
+ | margin-top: 10px; | ||
+ | } | ||
+ | .navig_bar_left_button { | ||
+ | margin: 0 2px; | ||
+ | border-left: 1px solid #000; | ||
+ | border-right: 1px solid #000; | ||
+ | } | ||
+ | .navig_bar_button { | ||
+ | margin: 0 2px; | ||
+ | border-right: 1px solid #000; | ||
+ | } | ||
+ | |||
+ | .navbar { | ||
+ | margin-bottom: 0; | ||
+ | } | ||
+ | |||
+ | .banner { | ||
+ | padding-bottom: 50px; | ||
+ | padding-top:0px; | ||
+ | margin: 0px; | ||
+ | } | ||
+ | |||
+ | #index_title { | ||
+ | font-family: 'Comfortaa'; | ||
+ | font-style: normal; | ||
+ | font-size: 300%; | ||
+ | text-align: center; | ||
+ | float: none; | ||
+ | color: #6792A0; | ||
+ | margin-top: 20px; | ||
+ | padding-top: 0px; | ||
+ | padding-bottom: 0px; | ||
+ | } | ||
+ | .Banner_img { | ||
+ | margin: auto; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 0px; | ||
+ | width: 50%; | ||
+ | padding: 0px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .HumanPractices-img { | ||
+ | width: 960px; | ||
+ | height: 460px; | ||
+ | } | ||
+ | |||
+ | .Header-img { | ||
+ | width: 100%; | ||
+ | height: 400px; | ||
+ | background-repeat: no-repeat; | ||
+ | background-size: contain; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #headerImage { | ||
+ | width:100%; | ||
+ | height:400px; | ||
+ | min-height: 400px; | ||
+ | min-width:100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | #headerImage h1 { | ||
+ | margin: 0; | ||
+ | color: white; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | margin-right: -50%; | ||
+ | transform: translate(-50%, -50%) | ||
+ | } | ||
+ | |||
+ | |||
+ | |||
+ | .flip3D{ | ||
+ | width:315px; height:315px; margin:10px; float:center; margin: auto; | ||
+ | border-weight: 10px; | ||
+ | cursor: pointer; | ||
+ | |||
+ | } | ||
+ | .flip3D > .front{ | ||
+ | |||
+ | border-radius: 5px; | ||
+ | border-color: #00274c; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | width:275px; height:275px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | float: center; | ||
+ | } | ||
+ | .flip3D > .back{ | ||
+ | overflow: hidden; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 0px; | ||
+ | border-radius: 5px; | ||
+ | border-color: #00274c; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 700px ) rotateY( 180deg ); | ||
+ | transform: perspective( 700px ) rotateY( 180deg ); | ||
+ | width:275px; height:275px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | } | ||
+ | .flip3D:hover > .front{ | ||
+ | -webkit-transform: perspective( 700px ) rotateY( -180deg ); | ||
+ | transform: perspective( 700px ) rotateY( -180deg ); | ||
+ | } | ||
+ | .flip3D:hover > .back{ | ||
+ | -webkit-transform: perspective( 700px ) rotateY( 0deg ); | ||
+ | transform: perspective( 700px ) rotateY( 0deg ); | ||
+ | } | ||
+ | .vertical-center { | ||
+ | position: relative; | ||
+ | top: 50%; | ||
+ | -webkit-transform: translateY(-50%); | ||
+ | transform: translateY(-50%); | ||
+ | } | ||
+ | img.board-img { | ||
+ | height: 220px; | ||
+ | width: 220px; | ||
+ | border-radius: 5px; | ||
+ | } | ||
+ | |||
+ | h3.name-tag { | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-size: 15px; | ||
+ | margin-top: 0px; | ||
+ | font-weight: bold; | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | p.desc { | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-size: 11px; | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | p.teamText{ | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-weight: bold; | ||
+ | font-size: 12px; | ||
+ | margin-left: 10px; | ||
+ | margin-bottom: 0px; | ||
+ | } | ||
+ | |||
+ | #doubleSpace { | ||
+ | line-height: 30px; | ||
+ | } | ||
+ | |||
+ | ul.teamTextList{ | ||
+ | font-family: 'Comfortaa', cursive !important; | ||
+ | font-size: 11px; | ||
+ | margin-top: 0px; | ||
+ | padding-top: 0px; | ||
+ | } | ||
+ | |||
+ | li { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | a { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | a:visited | ||
+ | { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | |||
+ | p > a:visited { | ||
+ | color: black; | ||
+ | } | ||
+ | |||
+ | ul.Content { | ||
+ | width: 400px; | ||
+ | margin:0 auto; | ||
+ | text-align:left; | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | #h3Header { | ||
+ | color: grey; | ||
+ | } | ||
+ | |||
+ | #h1Header { | ||
+ | color: white; | ||
+ | } | ||
+ | |||
+ | #h1MaizeHeader { | ||
+ | color: #ffc72C; | ||
+ | } | ||
+ | |||
+ | .Footer-Table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 2px; | ||
+ | } | ||
+ | |||
+ | #HQ_page td { | ||
+ | padding: 3px; | ||
+ | border: none; | ||
+ | } | ||
+ | .overlay { | ||
+ | position:absolute; | ||
+ | z-index:12; | ||
+ | top:50%; | ||
+ | left:0; | ||
+ | width:100%; | ||
+ | text-align:center; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 768px) { | ||
+ | |||
+ | /* Navbar positioning foo */ | ||
+ | .navbar-wrapper { | ||
+ | margin-top: 0; | ||
+ | margin-bottom: -90px; /* Negative margin to pull up carousel. 90px is roughly margins and height of navbar. */ | ||
+ | } | ||
+ | /* The navbar becomes detached from the top, so we round the corners */ | ||
+ | .navbar-wrapper .navbar { | ||
+ | border-radius: 4px; | ||
+ | } | ||
+ | |||
+ | /* Special class on .container surrounding .navbar, used for positioning it into place. */ | ||
+ | .navbar-wrapper { | ||
+ | background-color: #00274c; | ||
+ | position: relative; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | right: 0; | ||
+ | z-index: 10; | ||
+ | } | ||
+ | |||
+ | .container-footer { | ||
+ | padding-top: 50px; | ||
+ | padding-bottom: 50px; | ||
+ | background-color: #00274c; | ||
+ | |||
+ | } | ||
+ | |||
+ | .Banner_img { | ||
+ | margin: auto; | ||
+ | margin-bottom: 0px; | ||
+ | margin-top: 0px; | ||
+ | width: 50%; | ||
+ | padding: 0px; | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .HumanPractices-img { | ||
+ | width: 960px; | ||
+ | height: 460px; | ||
+ | } | ||
+ | |||
+ | |||
+ | } | ||
+ | |||
+ | #ProtoCat4Button { | ||
+ | background-color: #00274c; | ||
+ | border: none; | ||
+ | color: white; | ||
+ | padding: 8px 18px; | ||
+ | text-align: center; | ||
+ | text-decoration: none; | ||
+ | display: inline-block; | ||
+ | font-size: 16px; | ||
+ | } | ||
+ | |||
+ | |||
+ | .flip3D_HP{ | ||
+ | width:200px; height:200px; margin:10px; float:center; margin: auto; | ||
+ | border-weight: 10px; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .flip3D_HP > .front{ | ||
+ | border-radius: 5px; | ||
+ | border-color: #72c9b6; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | width:250px; height:250px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | float: center; | ||
+ | } | ||
+ | .flip3D_HP > .back{ | ||
+ | padding-top:20px; | ||
+ | padding-bottom:20px; | ||
+ | border-radius: 5px; | ||
+ | border-color: #72c9b6; | ||
+ | background: rgba(0,0,0,0.0); | ||
+ | border-style: solid; | ||
+ | position:absolute; | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 180deg ); | ||
+ | transform: perspective( 600px ) rotateY( 180deg ); | ||
+ | width:250px; height:250px; | ||
+ | backface-visibility: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | -webkit-transition:-webkit-transform .5s linear 0s; | ||
+ | transition:-webkit-transform .5s linear 0s; | ||
+ | transition:transform .5s linear 0s; | ||
+ | transition: transform .5s linear 0s, -webkit-transform .5s linear 0s; | ||
+ | box-shadow: 0 15px 50px rgba(0,0,0,0.0); | ||
+ | } | ||
+ | .flip3D_HP:hover > .front{ | ||
+ | -webkit-transform: perspective( 600px ) rotateY( -180deg ); | ||
+ | transform: perspective( 600px ) rotateY( -180deg ); | ||
+ | } | ||
+ | .flip3D_HP:hover > .back{ | ||
+ | -webkit-transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | transform: perspective( 600px ) rotateY( 0deg ); | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | <div class="navbar-wrapper"> | ||
+ | <div class="container"> | ||
+ | <div class="navbar navbar-static-top"> | ||
+ | <ul class="nav navbar-nav"> | ||
+ | <li class="navig_bar_button"><a href="https://2017.igem.org/Team:Michigan_Software">Home</a></li> | ||
+ | <li class="dropdown navig_bar_button"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Project <span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/Contribution">Overview</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/Installation">Installation</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/Demonstrate">Demonstrate</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/Results">Results</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="dropdown navig_bar_button"> | ||
+ | <a class="dropdown-toggle" data-toggle="dropdown" href="#">Outreach <span class="caret"></span></a> | ||
+ | <ul class="dropdown-menu"> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/Collaborations">Collaboration</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/HP/Silver">HP Silver</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/HP/Gold_Integrated">HP Gold</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class="navig_bar_button"> | ||
+ | <a href="https://2017.igem.org/Team:Michigan_Software/Measurement">Measurement</a> | ||
+ | </li> | ||
+ | <li class="navig_bar_button"> | ||
+ | <a href="https://2017.igem.org/Team:Michigan_Software/Attributions">Attributions</a> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> |
Revision as of 19:01, 31 October 2017