(147 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <!-- bootstrap imports --> | ||
+ | <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> | ||
+ | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
+ | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.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> | ||
+ | <!-- Comfortaa Import --> | ||
+ | <link href='https://fonts.googleapis.com/css?family=Comfortaa:300,400,700' rel='stylesheet' type='text/css'> | ||
+ | |||
+ | <!-- https://work.smarchal.com/twbscolor/css/00274c0a436cecf0f1ffffff0 --> | ||
+ | <style> | ||
+ | /*Overrule Wiki Settings*/ | ||
+ | #sideMenu, #top_title {display:none;} | ||
+ | body { | ||
+ | font-family: 'Comfortaa'; | ||
+ | color: #00274c; | ||
− | + | } | |
− | + | #bodyContent a:hover { | |
− | + | color: #00274c; | |
+ | } | ||
+ | |||
+ | #globalWrapper { | ||
+ | font-size: 100%; | ||
+ | padding-bottom: 0px; | ||
+ | margin-bottom: -10px; | ||
+ | |||
+ | } | ||
+ | |||
+ | #HQ_page table { | ||
+ | margin-right: auto; | ||
+ | margin-left: auto; | ||
+ | margin-top: 0; | ||
+ | margin-bottom: 0; | ||
+ | border: none; | ||
+ | } | ||
− | + | #HQ_page h1 { | |
+ | font-family: 'Comfortaa'; | ||
+ | font-weight: normal; | ||
+ | } | ||
+ | |||
+ | |||
− | + | #content { padding:0px; width:100%; margin-top: -12px; margin-left:0px;} | |
− | + | .navbar-default { | |
− | + | background-color: #00274c; | |
− | + | border-color: #0a436c; | |
+ | } | ||
+ | .mw-content-ltr ol, .mw-content-rtl .mw-content-ltr ol{ | ||
+ | position: absolute; | ||
+ | bottom: 10px; | ||
+ | left: 50%; | ||
+ | z-index: 15; | ||
+ | width: 60%; | ||
+ | padding-left: 0; | ||
+ | margin-left: -30%; | ||
+ | text-align: center; | ||
+ | list-style: none; | ||
+ | } | ||
+ | .slide-prev { | ||
+ | position:absolute; | ||
+ | top:400px; | ||
+ | left:0; | ||
+ | z-index:100; | ||
+ | } | ||
− | + | .slide-next { | |
− | + | position:absolute; | |
− | + | top:400px; | |
− | + | right:0; | |
− | + | z-index:100; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .carousel-inner > .item img { | |
− | + | min-height:100%; | |
− | + | min-width:1024px; | |
− | + | height:auto; | |
− | + | width:auto; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .carousel-item { | |
− | + | background-size: cover; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | .carousel-caption { | |
− | + | position: absolute; | |
− | + | top: 50%; | |
− | + | transform: translateY(-30%); | |
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .navbar-default .navbar-brand { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-brand:hover, | ||
+ | .navbar-default .navbar-brand:focus { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .navbar-default .navbar-text { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > li > a { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > li > a:hover, | ||
+ | .navbar-default .navbar-nav > li > a:focus { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .navbar-default .navbar-nav > .active > a, | ||
+ | .navbar-default .navbar-nav > .active > a:hover, | ||
+ | .navbar-default .navbar-nav > .active > a:focus { | ||
+ | color: #ffffff; | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | p > a { | ||
+ | color: #00274c; | ||
+ | } | ||
+ | |||
+ | #footer a:hover { | ||
+ | color: white; | ||
+ | decoration: none; | ||
+ | } | ||
− | + | .active > a:hover { | |
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .navbar-default .navbar-nav > .open > a, | ||
+ | .navbar-default .navbar-nav > .open > a:visited, | ||
+ | .navbar-default .navbar-nav > .open > a:hover, | ||
+ | .navbar-default .navbar-nav > .open > a:focus { | ||
+ | color: #ffffff; | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | .navbar-default .navbar-toggle { | ||
+ | border-color: #0a436c; | ||
+ | } | ||
+ | .navbar-default .navbar-toggle:hover, | ||
+ | .navbar-default .navbar-toggle:focus { | ||
+ | background-color: #0a436c; | ||
+ | } | ||
+ | .navbar-default .navbar-toggle .icon-bar { | ||
+ | background-color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-collapse, | ||
+ | .navbar-default .navbar-form { | ||
+ | border-color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-link { | ||
+ | color: #ecf0f1; | ||
+ | } | ||
+ | .navbar-default .navbar-link:hover { | ||
+ | color: #ffffff; | ||
+ | } | ||
− | + | @media (max-width: 767px) { | |
− | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a { | |
− | + | color: #ecf0f1; | |
− | + | } | |
− | + | .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, | |
+ | .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { | ||
+ | color: #ffffff; | ||
+ | } | ||
+ | .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: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: absolute !important; | |
− | + | border: none; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | #headerImage { | |
− | + | width:100%; | |
− | + | height:300px; | |
− | + | 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%); | ||
+ | font-size: 50px; | ||
+ | } | ||
− | |||
− | |||
− | + | .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 !important; | ||
+ | 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{ | |
− | <div class=" | + | 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/Improve">Improvements</a></li> | ||
+ | <li><a href="https://2017.igem.org/Team:Michigan_Software/Results">Results</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> | ||
+ | </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> |
Latest revision as of 20:20, 1 November 2017