(change logo in blue) |
|||
(72 intermediate revisions by 2 users not shown) | |||
Line 54: | Line 54: | ||
body {background-color:white; } | body {background-color:white; } | ||
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
− | |||
− | |||
− | |||
body { | body { | ||
− | background-color: | + | background-color:white; |
} | } | ||
− | footer { | + | |
− | background-color: | + | </style> |
+ | |||
+ | |||
+ | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
+ | <style> | ||
+ | *{ | ||
+ | margin-left:0; | ||
+ | margin-right:0; | ||
+ | padding:0; | ||
+ | } | ||
+ | html,body{ | ||
+ | height:100%; | ||
+ | width:100%; | ||
+ | margin:0px; | ||
+ | padding:0px; | ||
+ | font-family:Arial, Helvetica, sans-serif; | ||
+ | background-color:white; | ||
+ | } | ||
+ | @font-face { | ||
+ | font-family: 'elianto'; | ||
+ | src: | ||
+ | url('https://static.igem.org/mediawiki/2019/0/0d/T--Ulaval--elianto-webfont.woff') format('woff'); | ||
+ | font-weight: normal; | ||
+ | font-style: normal; | ||
+ | |||
+ | } | ||
+ | h1,h2{font-family: elianto;text-align: center;color: #27304D;padding-bottom:50px;border-bottom: 1px solid transparent;} | ||
+ | |||
+ | body { | ||
+ | font-size: 100%;text-align: justify; | ||
+ | } | ||
+ | |||
+ | body, caption, th, td, input, textarea, select, option, legend, fieldset, h1, h2, h3, h4, h5, h6 { | ||
+ | font-size-adjust: 0.5; | ||
+ | |||
+ | } | ||
+ | |||
+ | #page { | ||
+ | font-size: 2em; | ||
+ | /* equivalent to 16px */ | ||
+ | line-height: 1.25; | ||
+ | /* equivalent to 20px */ | ||
+ | |||
+ | } | ||
+ | |||
+ | |||
+ | @media (min-width: 43.75em) { | ||
+ | #page { | ||
+ | font-size: 1.5em; | ||
+ | /* equivalent to 16px */ | ||
+ | line-height: 1.375; | ||
+ | /* equivalent to 22px */ | ||
+ | } | ||
+ | } | ||
+ | |||
+ | h1 { | ||
+ | font-size: 2em; | ||
+ | /* 2x body copy size = 32px */ | ||
+ | line-height: 1.25; | ||
+ | /* 45px / 36px */ | ||
+ | } | ||
+ | #h5 { | ||
+ | font-size: 0.5em; | ||
+ | /* 2x body copy size = 32px */ | ||
+ | |||
+ | } | ||
+ | |||
+ | @media (min-width: 43.75em) { | ||
+ | h1 { | ||
+ | font-size: 2.5em; | ||
+ | /* 2.5x body copy size = 40px */ | ||
+ | line-height: 1.125; | ||
+ | } | ||
+ | #h5 { | ||
+ | font-size: 1em; | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 56.25em) { | ||
+ | h1 { | ||
+ | font-size: 3em; | ||
+ | /* 3x body copy size = 48px */ | ||
+ | line-height: 1.05; | ||
+ | /* keep to a multiple of the 20px line height and something more appropriate for display headings */ | ||
+ | } | ||
+ | #h5 { | ||
+ | font-size: 1.5em; | ||
+ | /* 3x body copy size = 48px */ | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | h2 { | ||
+ | font-size: 1.625em; | ||
+ | /* 1.625x body copy size = 26px */ | ||
+ | line-height: 1.15384615; | ||
+ | /* 30px / 26px */ | ||
+ | } | ||
+ | #h6 { | ||
+ | font-size: 0.8em; | ||
+ | /* 1.625x body copy size = 26px */ | ||
+ | |||
+ | } | ||
+ | @media (min-width: 43.75em) { | ||
+ | h2 { | ||
+ | font-size: 2em; | ||
+ | /* 2x body copy size = 32px */ | ||
+ | line-height: 1.25; | ||
+ | } | ||
+ | #h6 { | ||
+ | font-size: 1em; | ||
+ | /* 2x body copy size = 32px */ | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 56.25em) { | ||
+ | h2{ | ||
+ | font-size: 2.25em; | ||
+ | /* 2.25x body copy size = 36px */ | ||
+ | line-height: 1.25; | ||
+ | } | ||
+ | #h6 { | ||
+ | font-size: 1.125em; | ||
+ | /* 2.25x body copy size = 36px */ | ||
+ | |||
+ | } | ||
+ | } | ||
+ | |||
+ | h3 { | ||
+ | font-size: 1.375em; | ||
+ | /* 1.375x body copy size = 22px */ | ||
+ | line-height: 1.13636364; | ||
+ | /* 25px / 22px */ | ||
+ | } | ||
+ | |||
+ | @media (min-width: 43.75em) { | ||
+ | h3 { | ||
+ | font-size: 1.5em; | ||
+ | /* 1.5x body copy size = 24px */ | ||
+ | line-height: 1.25; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | @media (min-width: 56.25em) { | ||
+ | h3 { | ||
+ | font-size: 1.75em; | ||
+ | /* 1.75x body copy size = 28px */ | ||
+ | line-height: 1.25; | ||
+ | } | ||
+ | } | ||
+ | |||
+ | h4 { | ||
+ | font-size: 1.125em; | ||
+ | /* 1.125x body copy size = 18px */ | ||
+ | line-height: 1.11111111; | ||
+ | } | ||
+ | |||
+ | @media (min-width: 43.75em) { | ||
+ | h4 { | ||
+ | line-height: 1.22222222; | ||
+ | /* (22px / 18px */ | ||
+ | } | ||
+ | } | ||
+ | |||
+ | blockquote { | ||
+ | font-size: 1.25em; | ||
+ | /* 20px / 16px */ | ||
+ | line-height: 1.25; | ||
+ | /* 25px / 20px */ | ||
+ | } | ||
+ | |||
+ | @media (min-width: 43.75em) { | ||
+ | blockquote { | ||
+ | font-size: 1.5em; | ||
+ | /* 24px / 16px = */ | ||
+ | line-height: 1.45833333; | ||
+ | /* 35px / 24px */ | ||
+ | } | ||
+ | } | ||
+ | |||
+ | |||
+ | footer { | ||
+ | background-color:white; | ||
height:180px; | height:180px; | ||
width:100%; | width:100%; | ||
} | } | ||
− | + | /**************************************************************************************************************************************************************************************************/ | |
− | + | /* FOOTER */ | |
− | + | /**************************************************************************************************************************************************************************************************/ | |
− | + | ||
− | + | ||
.wrapperLeftCommanditaires{ | .wrapperLeftCommanditaires{ | ||
− | + | margin-left:5%; | |
− | background-image:url("https://static.igem.org/mediawiki/ | + | float:left; |
+ | |||
+ | background-image:url("https://static.igem.org/mediawiki/2019/4/48/T--Ulaval--AllSponsorsUpdated.png"); | ||
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center; | background-position: center; | ||
background-size: 100% 100%; | background-size: 100% 100%; | ||
− | width: | + | width:65%; |
position: relative; | position: relative; | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
− | height: | + | height:75%; |
margin-left:10px; | margin-left:10px; | ||
− | } | + | } |
− | + | .containerRight { | |
− | + | ||
float:right; | float:right; | ||
width:200px; | width:200px; | ||
Line 95: | Line 275: | ||
transform: translateY(-50%); | transform: translateY(-50%); | ||
height:110px; | height:110px; | ||
− | + | } | |
− | .conteneurBoutons { | + | .conteneurBoutons { |
− | width:85px; | + | width:85px; |
− | height:40px; | + | height:40px; |
− | float:right; | + | float:right; |
− | } | + | } |
− | .boutonFacebook { | + | .boutonFacebook { |
float:left; | float:left; | ||
− | background-image:url("https://static.igem.org/mediawiki/ | + | background-image:url("https://static.igem.org/mediawiki/2018/6/65/T--ULaval--facebookIcone.svg"); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center; | background-position: center; | ||
background-size: 100% 100%; | background-size: 100% 100%; | ||
− | width:40px; | + | width:40px; |
− | height:40px; | + | height:40px; |
− | } | + | } |
− | .boutonSite { | + | .boutonSite { |
float:right; | float:right; | ||
− | background-image:url("https://static.igem.org/mediawiki/ | + | background-image:url("https://static.igem.org/mediawiki/2018/6/64/T--ULaval--planeteSite.svg"); |
background-repeat: no-repeat; | background-repeat: no-repeat; | ||
background-position: center; | background-position: center; | ||
background-size: 100% 100%; | background-size: 100% 100%; | ||
− | width:40px; | + | width:40px; |
− | height:40px; | + | height:40px; |
− | }¸ | + | }¸ |
− | + | .conteneurBoutons a:link { | |
− | padding:0px; | + | padding:0px; |
text-decoration: none; | text-decoration: none; | ||
− | + | } | |
− | + | .conteneurBoutons a:visited { | |
text-decoration: none; | text-decoration: none; | ||
− | + | } | |
− | + | .conteneurBoutons a:hover { | |
text-decoration: none; | text-decoration: none; | ||
− | + | } | |
− | + | .contenousBoutons a:active { | |
text-decoration: none; | text-decoration: none; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
/* MENU */ | /* MENU */ | ||
/**************************************************************************************************************************************************************************************************/ | /**************************************************************************************************************************************************************************************************/ | ||
+ | /*Navigation Bar Wrapping*/ | ||
+ | .NavigationBar{ | ||
+ | position:sticky; | ||
+ | top:0; | ||
+ | z-index:10; | ||
+ | } | ||
+ | /*Center Logo*/ | ||
+ | .teamlogo{ | ||
+ | margin-top: 100px; | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | left: 46.6%; | ||
+ | height:200px; | ||
+ | z-index: 100; | ||
+ | } | ||
− | + | /*Video section*/ | |
− | . | + | .video-container{ |
− | margin-top: | + | margin-top:0px; |
− | + | z-index: 1; | |
− | + | ||
− | z-index:1 | + | |
− | + | ||
− | + | ||
width:100%; | width:100%; | ||
− | + | height:300px; | |
− | + | overflow:hidden; | |
− | + | position: fixed; | |
− | + | top:0; | |
+ | left:0; | ||
} | } | ||
− | + | #video-bg{ | |
− | + | width: 100%; | |
− | + | ||
− | + | ||
− | width: | + | |
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | /* | + | |
+ | /* Navbar container */ | ||
+ | .navbar{ | ||
+ | margin-top: 185px; | ||
+ | position: fixed; | ||
+ | top:0px; | ||
+ | line-height: 115px; | ||
+ | margin-left:0px; | ||
+ | margin-right:0; | ||
+ | z-index:1; | ||
+ | width:100%; | ||
+ | opacity: 0.90; | ||
+ | background-color: rgb(175, 184, 189); | ||
+ | box-shadow: 0px 3px 12px 0px #000000; | ||
+ | } | ||
+ | /*Element inside Menu*/ | ||
.navbar a { | .navbar a { | ||
float:left; | float:left; | ||
− | color: | + | color:black; |
+ | |||
text-align:center; | text-align:center; | ||
text-decoration:none; | text-decoration:none; | ||
text-align: center; | text-align: center; | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
text-transform:uppercase; | text-transform:uppercase; | ||
− | + | ||
− | /* The dropdown container */ | + | width: 14.28571428%; /* Four links of equal widths */ |
− | .dropdown { | + | |
+ | } | ||
+ | /*Menu element*/ | ||
+ | /*The dropdown container*/ | ||
+ | .dropdown{ | ||
float:left; | float:left; | ||
+ | text-align:center; | ||
overflow: hidden; | overflow: hidden; | ||
− | + | width: 14.285714%; | |
} | } | ||
+ | /*Dropdown button*/ | ||
+ | .dropdown .dropbtn{ | ||
+ | |||
− | |||
− | |||
− | |||
text-transform:uppercase; | text-transform:uppercase; | ||
border: none; | border: none; | ||
outline: none; | outline: none; | ||
− | color: | + | color:black; |
− | + | ||
line-height:110px; | line-height:110px; | ||
background-color: inherit; | background-color: inherit; | ||
− | |||
margin: 0; /* Important for vertical align on mobile phones */ | margin: 0; /* Important for vertical align on mobile phones */ | ||
} | } | ||
+ | |||
+ | .navbar.minimized{ | ||
+ | height:50px; | ||
+ | } | ||
+ | .navbar.minimized a{ | ||
+ | float:left; | ||
+ | color:black; | ||
+ | text-align:center; | ||
+ | text-decoration:none; | ||
+ | text-align: center; | ||
+ | text-transform:uppercase; | ||
+ | |||
− | + | width: 14.285714%; | |
− | + | ||
} | } | ||
− | |||
− | |||
/* Dropdown content (hidden by default) */ | /* Dropdown content (hidden by default) */ | ||
− | .dropdown-content { | + | .dropdown-content{ |
display: none; | display: none; | ||
position: fixed; | position: fixed; | ||
− | background-color: | + | background-color:white; |
− | + | width: 14.285714%; | |
− | box-shadow: 0px 8px 16px 0px | + | text-align: center |
+ | box-shadow: 0px 8px 16px 0px black; | ||
border-bottom-left-radius:8px; | border-bottom-left-radius:8px; | ||
border-bottom-right-radius:8px; | border-bottom-right-radius:8px; | ||
z-index: 1; | z-index: 1; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Links inside the dropdown */ | /* Links inside the dropdown */ | ||
.dropdown-content a { | .dropdown-content a { | ||
float: none; | float: none; | ||
− | + | ||
− | + | ||
background:transparent; | background:transparent; | ||
− | line-height: | + | line-height:50px; |
width:100%; | width:100%; | ||
color: black; | color: black; | ||
text-decoration: none; | text-decoration: none; | ||
display: block; | display: block; | ||
− | text-align: | + | text-align: center; |
-webkit-transition: background-color 0.3s ease-out; | -webkit-transition: background-color 0.3s ease-out; | ||
-moz-transition: background-color 0.3s ease-out; | -moz-transition: background-color 0.3s ease-out; | ||
-o-transition: background-color 0.3s ease-out; | -o-transition: background-color 0.3s ease-out; | ||
transition: background-color 0.3s ease-out; | transition: background-color 0.3s ease-out; | ||
+ | |||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.textMargin { | .textMargin { | ||
margin-left:12px; | margin-left:12px; | ||
} | } | ||
− | + | ||
− | . | + | /* Add a grey background color to dropdown links on hover */ |
− | + | .navbar a:hover, .dropdown:hover, .dropbtn:hover,.dropdown-content a:hover,.dropdown-content .lastElement:hover { | |
+ | background-color: #3d9288 ; | ||
+ | color:whitesmoke; | ||
} | } | ||
− | + | #home:hover { | |
− | + | background-color:rgb(175, 184, 189); | |
− | + | color:whitesmoke; | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
.dropdown-content .lastElement { | .dropdown-content .lastElement { | ||
− | height: | + | height:50px; |
width:100%; | width:100%; | ||
background:transparent; | background:transparent; | ||
Line 340: | Line 475: | ||
transition: background-color 0.3s ease-out; | transition: background-color 0.3s ease-out; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
/* Show the dropdown menu on hover */ | /* Show the dropdown menu on hover */ | ||
.dropdown:hover .dropdown-content { | .dropdown:hover .dropdown-content { | ||
Line 370: | Line 480: | ||
} | } | ||
− | + | @media screen and (max-width: 1500px) { | |
− | + | ||
− | } | + | .navbar a,.dropdown .dropbtn { |
+ | |||
+ | } | ||
+ | .dropdown-content a { | ||
+ | |||
+ | } | ||
+ | } | ||
+ | .referenceTitle { | ||
+ | font-weight:bold; | ||
+ | } | ||
− | + | .containerRows { | |
− | + | width:660px; | |
− | + | margin:0 auto; | |
− | . | + | } |
− | + | .rowLast | |
− | + | { | |
− | + | margin:0 auto; | |
− | + | width: 550px; | |
− | + | } | |
− | + | ||
− | + | ||
− | + | .rowLast li{float: left;} | |
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | + | ul { | |
− | + | list-style:none; | |
− | + | } | |
− | + | #big{display: none;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | @media screen and (max-width: 1425px){ | |
− | + | #small{display: none;} | |
− | + | #big{display:contents;} | |
− | + | .testcenter{display: none;} | |
− | + | } | |
− | + | @media screen and (max-width: 800px){ | |
+ | #small{display: none;} | ||
+ | #big{display:contents;} | ||
+ | .testcenter{display: none;} | ||
+ | #medium{display: none;} | ||
+ | } | ||
− | . | + | .accordionnav:hover .accordionnavnav-item:hover .accordionnav-item-content, |
− | + | .accordionnav .accordionnav-item--default .accordionnav-item-content { | |
− | + | height: 5em; | |
− | + | } | |
− | } | + | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content1, |
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content1 { | ||
+ | height: 7.5em; | ||
+ | } | ||
+ | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content2, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content2 { | ||
+ | height: 15em; | ||
+ | } | ||
+ | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content3, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content3 { | ||
+ | height: 26.25em; | ||
+ | } | ||
+ | .accordionnav:hover .accordionnav-item:hover .accordionnav-item-content4, | ||
+ | .accordionnav .accordionnav-item--default .accordionnav-item-content4 { | ||
+ | height: 30em; | ||
+ | |||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | . | + | .accordionnav-item-content, |
− | + | .accordionnav:hover .accordionnav-item-content,.accordionnav-item-content1,.accordionnav-item-content2,.accordionnav-item-content3,.accordionnav-item-content4, | |
− | + | .accordionnav:hover .accordionnav-item-content1,.accordionnav-item-content2,.accordionnav-item-content3,.accordionnav-item-content4 { | |
− | + | height: 0; | |
− | + | overflow: hidden; | |
+ | transition: height .25s; | ||
+ | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
+ | .acordionnavnav { | ||
+ | padding: 0; | ||
+ | margin: 0 auto; | ||
+ | width: 100%; | ||
− | + | } | |
− | + | ||
− | + | ||
+ | .accordionnav .accordionnav-item { | ||
+ | background-color: rgb(175, 184, 189); | ||
+ | border: 1px solid rgb(175, 184, 189); | ||
+ | border-right: 1px solid transparent; | ||
+ | padding: 0em; | ||
+ | color: black; | ||
+ | } | ||
− | . | + | .accordionnav h1 { |
− | + | padding: 0.6em 1em 0.5em 1em ; | |
− | + | margin:0; | |
− | + | ||
− | margin:0 | + | |
} | } | ||
− | + | .accordionnav .accordionnav-item { | |
+ | background-color:rgb(175, 184, 189); | ||
+ | |||
− | + | } | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | .accordionnav-item:hover .accordionnav-item-content a,.accordionnav-item-content1 a,.accordionnav-item-content2 a,.accordionnav-item-content3 a,.accordionnav-item-content4 a | ||
+ | { | ||
+ | background-color:white; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
− | + | ||
− | + | .sidenav { | |
− | + | height: 100%; | |
− | + | width: 300px; | |
+ | position: fixed; | ||
+ | z-index: 10000; | ||
+ | top: 10px; | ||
+ | left: 0; | ||
+ | background-color: rgb(175, 184, 189); | ||
+ | overflow-x: hidden; | ||
+ | transition: 0.5s; | ||
+ | padding-top: 60px; | ||
+ | font-size: 10px; | ||
} | } | ||
− | + | .sidenav a { | |
− | + | padding: 8px 8px 8px 32px; | |
+ | text-decoration: none; | ||
+ | font-size: 20px; | ||
+ | color: black; | ||
+ | display: block; | ||
+ | transition: 0.3s; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | . | + | .sidenav a:hover { |
− | + | background-color: #3d9288 ; | |
+ | color:whitesmoke; | ||
+ | |||
} | } | ||
− | + | .sidenav .closebtn { | |
− | . | + | position: absolute; |
− | + | top: 0; | |
− | + | right: 25px; | |
+ | font-size: 36px; | ||
+ | margin-left: 50px; | ||
+ | } | ||
+ | .sidenav .lastElement{ | ||
+ | padding-bottom: 50px; | ||
} | } | ||
− | + | @media screen and (max-height: 450px) { | |
− | . | + | .sidenav {padding-top: 15px;} |
− | + | .sidenav a {font-size: 18px;} | |
− | + | } | |
− | + | @media screen and (min-width: 1425px) { | |
− | + | .sidenav{display: none;} | |
− | + | } | |
− | + | @media screen and (max-width: 1425px) { | |
− | + | .sidenav{width:0px;} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | |||
</style> | </style> | ||
<script> | <script> | ||
Line 650: | Line 662: | ||
} | } | ||
</script> | </script> | ||
− | + | <script> | |
− | < | + | function openNav() { |
− | + | document.getElementById("mySidenav").style.width = "250px"; | |
− | + | } | |
− | + | ||
− | + | function closeNav() { | |
− | + | document.getElementById("mySidenav").style.width = "0"; | |
− | + | } | |
− | . | + | </script> |
− | width | + | |
− | + | ||
− | } | + | |
− | + | ||
− | { | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | . | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | </ | + | |
− | + | ||
− | + | ||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
<!--- THIS IS WHERE THE HTML BEGINS ---> | <!--- THIS IS WHERE THE HTML BEGINS ---> | ||
Line 683: | Line 677: | ||
<head> | <head> | ||
− | |||
<meta name="viewport" content="width=device-width, initial-scale=1"> | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | <title>Team:ULaval - 2019.igem.org</title> | ||
</head> | </head> | ||
Line 697: | Line 691: | ||
<body> | <body> | ||
− | <div class=" | + | |
− | < | + | <div id="mySidenav" class="sidenav"> |
− | <div class=" | + | <a style="padding:15px;margin-top:15px;font-size:25px;"href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a> |
− | + | <div class="accordionnav"> | |
− | + | <section class="accordionnav-item "> | |
− | + | <h1>Notebook</h1> | |
− | + | <div class="accordionnav-item-content1"> | |
− | + | <a href="https://2019.igem.org/Team:ULaval/Notebook"><span class="textMargin"id="#h6">Lab Journal</span></a> | |
− | + | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Experiments"><span class="textMargin"id="#h6">Experiments</span></a> | |
− | + | </div> | |
− | <a href="https://2019.igem.org/Team:ULaval/ | + | </section> |
− | <a href="https://2019.igem.org/Team:ULaval/ | + | <section class="accordionnav-item"> |
− | + | <h1>Parts</h1> | |
− | + | <div class="accordionnav-item-content1"> | |
− | + | <a href="https://2019.igem.org/Team:ULaval/Parts"><span class="textMargin"id="#h6">Overview</span></a> | |
− | + | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Basic_Part"><span class="textMargin"id="#h6">Basic Parts</span></a> | |
+ | </div> | ||
+ | </section> | ||
+ | <section class="accordionnav-item"> | ||
+ | <h1>Team</h1> | ||
+ | <div class="accordionnav-item-content2"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Team"><span class="textMargin"id="#h6">Team members</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Attributions"><span class="textMargin"id="#h6">Attributions</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Achievements.html"><span class="textMarginid"id=#h6> Achievements</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Collaborations"><span class="textMargin"id="#h6">Collaborations</span></a> | ||
</div> | </div> | ||
− | </ | + | </section> |
− | + | <section class="accordionnav-item"> | |
− | + | <h1>Human Practices</h1> | |
− | < | + | <div class="accordionnav-item-content3"> |
− | + | <a href="https://2019.igem.org/Team:ULaval/Human_Practices"><span class="textMargin"id="#h6">Human Practices</span></a> | |
− | + | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Pathogens_Detections"><span class="textMargin"id="#h6">Pathogens Detections</span></a> | |
− | <a href="https://2019.igem.org/Team:ULaval/ | + | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Our_Approach"><span class="textMargin"id="#h6">Our Approach</span></a> |
− | <a href="https://2019.igem.org/Team:ULaval/ | + | <a href="https://2019.igem.org/Team:ULaval/Public_Engagement"><span class="textMargin"id="#h6">Public Engagement</span></a> |
− | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/ | + | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/ExpertInsight"><span class="textMargin"id="#h6">Expert Insight</span></a> |
− | + | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Market_Consultation"><span class="textMargin"id="#h6">Market Consultation</span></a> | |
− | + | ||
− | + | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Safety"><span class="textMargin"id="#h6">Safety</span></a> | |
− | + | </div> | |
− | < | + | </section> |
− | + | ||
− | + | <section class="accordionnav-item" style="padding-bottom: 100px;"> | |
− | <a href="https://2019.igem.org/Team:ULaval/ | + | <h1>Project</h1> |
− | <a href="https://2019.igem.org/Team:ULaval/ | + | <div class="accordionnav-item-content4"> |
+ | <a href="https://2019.igem.org/Team:ULaval/Description"><span class="textMargin">Description</span></a> | ||
+ | |||
+ | <a href="https://2019.igem.org/Team:ULaval/Design"><span class="textMargin"id="#h6">Design</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Contribution"><span class="textMargin"id="#h6">Characterization</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Results"><span class="textMargin"id="#h6">Results</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Model"><span class="textMargin"id="#h6">Model</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Software"><span class="textMargin"id="#h6">Software</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Hardware"><span class="textMargin"id="#h6">Hardware</span></a> | ||
+ | </div> | ||
+ | </section> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | <div class="NavigationBar"> | ||
+ | <a id=medium href="https://2019.igem.org/Team:ULaval"><img class = teamlogo src = "https://static.igem.org/mediawiki/2019/e/e6/T--Ulaval--TeamLogo.png" ></a> | ||
+ | |||
+ | <div class="video-container"> | ||
+ | <video autoplay loop muted id="video-bg"> | ||
+ | <source src="https://static.igem.org/mediawiki/2019/6/6e/T--Ulaval--videoNavbar.mp4" type="video/mp4"> | ||
+ | </video> | ||
</div> | </div> | ||
− | + | <div class="navbar"> | |
− | + | <a href="https://2019.igem.org/Team:ULaval"id="h5" style="font-size:25px;">Home</a> | |
− | + | <div class="dropdown" id=small> | |
− | <i class="fa fa-caret-down"></i> | + | <button class="dropbtn"id="h5">Project |
− | + | <i class="fa fa-caret-down"></i> | |
− | + | </button> | |
− | <a href="https://2019.igem.org/Team:ULaval/Human_Practices"><span class="textMargin">Human Practices</span></a> | + | <div class="dropdown-content"> |
− | <a href="https://2019.igem.org/Team:ULaval/Public_Engagement"><span class="textMargin">Public Engagement</span></a> | + | <a href="https://2019.igem.org/Team:ULaval/Description"><span class="textMargin"id="#h6">Description</span></a> |
− | <a href="https://2019.igem.org/Team:ULaval/ | + | <a href="https://2019.igem.org/Team:ULaval/Design"><span class="textMargin"id="#h6">Design</span></a> |
− | + | <a href="https://2019.igem.org/Team:ULaval/Contribution"><span class="textMargin"id="#h6">Characterization</span></a> | |
+ | <a href="https://2019.igem.org/Team:ULaval/Results"><span class="textMargin"id="#h6">Results</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Model"><span class="textMargin"id="#h6">Model</span></a> | ||
+ | |||
+ | <a href="https://2019.igem.org/Team:ULaval/Software"><span class="textMargin"id="#h6">Software</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Hardware"><span class="textMargin"id="#h6">Hardware</span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="dropdown" id=small> | ||
+ | <button class="dropbtn"id="h5">Parts | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Parts"><span class="textMargin"id="#h6">Overview</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Basic_Part"><span class="textMargin"id="#h6">Basic Parts</span></a> | ||
+ | |||
+ | </div> | ||
+ | </div> | ||
+ | <a class="testcenter" id="home" href="https://2019.igem.org/Team:ULaval" id=small >_ _</a> | ||
+ | <div class="dropdown" id=small> | ||
+ | <button class="dropbtn"id="h5">Notebook | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Notebook"><span class="textMargin"id="#h6">Lab Journal</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Experiments"><span class="textMargin"id="#h6">Experiments</span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="dropdown" id=small> | ||
+ | <button class="dropbtn"id="h5">Human Practices | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices"><span class="textMargin"id="#h6">Human Practices</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Pathogens_Detections"><span class="textMargin"id="#h6">Pathogens Detections</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Our_Approach"><span class="textMargin"id="#h6">Our Approach</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Public_Engagement"><span class="textMargin"id="#h6">Public Engagement</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/ExpertInsight"><span class="textMargin"id="#h6">Expert Insight</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Market_Consultation"><span class="textMargin"id="#h6">Market Consultation</span></a> | ||
+ | |||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Safety"><span class="textMargin"id="#h6">Safety</span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <div class="dropdown" id=small> | ||
+ | <button class="dropbtn"id="h5">Team | ||
+ | <i class="fa fa-caret-down"></i> | ||
+ | </button> | ||
+ | <div class="dropdown-content"> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Team"><span class="textMargin"id="#h6">Team members</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Attributions"><span class="textMargin"id="#h6">Attributions</span></a> | ||
+ | <a href="https://2019.igem.org/Team:ULaval/Achievements.html"><span class="textMarginid"id=#h6>Achievements</span></a> | ||
+ | <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Collaborations"><span class="textMargin"id="#h6">Collaborations</span></a> | ||
+ | </div> | ||
+ | </div> | ||
+ | <a id=big ><span style="font-size:25px;cursor:pointer;float:right;margin-right: 50px;" onclick="openNav()">☰ open</span></a> | ||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
</body> | </body> | ||
+ | <script> | ||
+ | window.addEventListener('scroll', function() { | ||
+ | document.querySelector('.navbar').style.marginTop = | ||
+ | Math.max(85, 185 - this.scrollY) + 'px'; | ||
+ | }, false); | ||
− | + | window.addEventListener('scroll', function() { | |
− | + | document.querySelector('.video-container').style.marginTop = | |
− | + | Math.max(-100, 0 - this.scrollY) + 'px'; | |
− | + | }, false); | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | window.addEventListener('scroll', function() { | |
− | + | document.querySelector('.teamlogo').style.marginTop = | |
− | + | Math.max(0, 100 - this.scrollY) + 'px'; | |
− | + | }, false); | |
− | + | </script> | |
+ | </html> | ||
− | |||
− | |||
− | |||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | ||
<!--- Content of the page ---> | <!--- Content of the page ---> | ||
<!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> | <!-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------> |
Latest revision as of 01:44, 15 December 2019