Difference between revisions of "Template:ULaval"

(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; }
 
.judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;}
 
 
 
         body {
 
         body {
             background-color:#F7F5F4;
+
             background-color:white;
 
       }
 
       }
  
  
         footer {
+
          
             background-color:#F7F5F4;
+
</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%;
 
       }
 
       }
 
+
/**************************************************************************************************************************************************************************************************/
.barreBas{
+
/* FOOTER */
width:100%;
+
/**************************************************************************************************************************************************************************************************/
height:180px;
+
}
+
  
 
.wrapperLeftCommanditaires{
 
.wrapperLeftCommanditaires{
        float:left;
+
margin-left:5%;       
         background-image:url("https://static.igem.org/mediawiki/2018/2/2f/T--ULaval--finalFinal.png");
+
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:900px;
+
         width:65%;
 
         position: relative;
 
         position: relative;
 
         top: 50%;
 
         top: 50%;
 
         transform: translateY(-50%);
 
         transform: translateY(-50%);
         height:95px;
+
         height:75%;
 
         margin-left:10px;
 
         margin-left:10px;
}
+
    }
 
+
    .containerRight {
  .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/2019/6/65/T--ULaval--facebookIcone.svg");
+
         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/2019/6/64/T--ULaval--planeteSite.svg");
+
         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 {
+
    .conteneurBoutons a:link {
padding:0px;
+
        padding:0px;
 
       text-decoration: none;
 
       text-decoration: none;
  }
+
    }
  
  .conteneurBoutons a:visited {
+
    .conteneurBoutons a:visited {
 
       text-decoration: none;
 
       text-decoration: none;
  }
+
    }
  
  .conteneurBoutons a:hover {
+
    .conteneurBoutons a:hover {
 
       text-decoration: none;
 
       text-decoration: none;
  }
+
    }
  
  .contenousBoutons a:active {
+
    .contenousBoutons a:active {
 
       text-decoration: none;
 
       text-decoration: none;
  }
 
</style>
 
 
 
<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
 
<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;
 
    }
 
 
 
/**************************************************************************************************************************************************************************************************/
 
/**************************************************************************************************************************************************************************************************/
 
/* 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;
 +
    }
  
/* Navbar container */
+
/*Video section*/
     .navbar {
+
     .video-container{
         margin-top:16px;
+
         margin-top:0px;
        margin-left:0;
+
         z-index: 1;
        margin-right:0;
+
         z-index:1;
+
        position:fixed;
+
        top:0;
+
 
         width:100%;
 
         width:100%;
         opacity: 0.9;
+
         height:300px;
         background-color: rgb(52, 111, 148);
+
         overflow:hidden;
         box-shadow: 0px 3px 12px 0px #000000;
+
         position: fixed;
         height:110px;
+
         top:0;
 +
        left:0;
 
     }
 
     }
  
 
+
#video-bg{
    .wrapperLeft {
+
         width: 100%;
        float:left;
+
        height:110px;
+
         width:231px;
+
 
     }
 
     }
  
    .navbarLogo  {
 
        background-image:url("https://static.igem.org/mediawiki/2019/3/35/T--Ulaval--Team_Logo_Blue.png");
 
        background-repeat: no-repeat;
 
        background-position: center;
 
        background-size: 50% 100%;
 
        position: relative;
 
        top: 50%;
 
        transform: translateY(-50%);
 
        height:106px;
 
        width:150px;
 
        margin-left:5px;
 
    }
 
    .wrapperRight {
 
        float:right;
 
    }
 
  
     /* Links inside the navbar */
+
 
 +
/* 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:rgb(255, 255, 255);
+
         color:black;
 +
       
 
         text-align:center;
 
         text-align:center;
 
         text-decoration:none;
 
         text-decoration:none;
 
         text-align: center;
 
         text-align: center;
         margin-right:30px;
+
          
        height:110px;
+
        line-height:110px;
+
        font-family: 'Josefin Sans' !important;
+
 
         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;
         margin-right:30px;
+
         width: 14.285714%;
 
     }
 
     }
 +
    /*Dropdown button*/
 +
    .dropdown .dropbtn{
 +
       
  
    /* Dropdown button */
 
    .dropdown .dropbtn {
 
        font-size:16px;
 
 
         text-transform:uppercase;
 
         text-transform:uppercase;
 
         border: none;
 
         border: none;
 
         outline: none;
 
         outline: none;
         color: #ffffff;
+
         color:black;
         height:110px;
+
          
 
         line-height:110px;
 
         line-height:110px;
 
         background-color: inherit;
 
         background-color: inherit;
        font-family: 'Josefin Sans' !important;
 
 
         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;
 +
       
  
    /* Add a red background color to navbar links on hover */
+
        width: 14.285714%;
    .navbar a:hover, .dropdown:hover .dropbtn {
+
 
     }
 
     }
 
 
 
     /* Dropdown content (hidden by default) */
 
     /* Dropdown content (hidden by default) */
     .dropdown-content {
+
     .dropdown-content{
 
         display: none;
 
         display: none;
 
         position: fixed;
 
         position: fixed;
         background-color:rgb(255, 255, 255);
+
         background-color:white;
         min-width: 160px;
+
         width: 14.285714%;
         box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.8);
+
        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;
 
     }
 
     }
 
    .dropdown-content-right {
 
        right:0;
 
        display: none;
 
        position: absolute;
 
        background-color:#f9f9f9;
 
        min-width: 160px;
 
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 
        border-bottom-left-radius:10px;
 
        border-bottom-right-radius:10px;
 
        z-index: 1;
 
    }
 
 
 
     /* Links inside the dropdown */
 
     /* Links inside the dropdown */
 
     .dropdown-content a {
 
     .dropdown-content a {
 
         float: none;
 
         float: none;
         font-size:13px;
+
          
         height:30px;
+
          
 
         background:transparent;
 
         background:transparent;
         line-height:30px;
+
         line-height:50px;
 
         width:100%;
 
         width:100%;
 
         color: black;
 
         color: black;
 
         text-decoration: none;
 
         text-decoration: none;
 
         display: block;
 
         display: block;
         text-align: left;
+
         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;
 +
       
 
     }
 
     }
 
    .dropdown-content-right a {
 
        float: none;
 
        font-size:13px;
 
        height:30px;
 
        line-height:30px;
 
        background:transparent;
 
        width:100%;
 
        color: black;
 
        text-decoration: none;
 
        display: block;
 
        text-align: left;
 
        -webkit-transition: background-color 0.3s ease-out;
 
        -moz-transition: background-color 0.3s ease-out;
 
        -o-transition: background-color 0.3s ease-out;
 
        transition: background-color 0.3s ease-out;
 
    }
 
 
 
     .textMargin {
 
     .textMargin {
 
         margin-left:12px;
 
         margin-left:12px;
 
     }
 
     }
 
+
   
     .textMargin {
+
    /* Add a grey background color to dropdown links on hover */
         margin-left:12px;
+
     .navbar a:hover, .dropdown:hover, .dropbtn:hover,.dropdown-content a:hover,.dropdown-content .lastElement:hover {
 +
         background-color: #3d9288 ;
 +
        color:whitesmoke;
 
     }
 
     }
 
+
     #home:hover  {
     .dropdown-content .separation {
+
         background-color:rgb(175, 184, 189);
         width:90%;
+
         color:whitesmoke;
        height:4px;
+
        border-bottom:1px #EEEEEE solid;
+
        margin:0 auto;
+
        display:block;
+
         float:none;
+
 
     }
 
     }
 
    .dropdown-content .separation2 {
 
        height:4px;
 
        width:95%;
 
        display:block;
 
        float:none;
 
    }
 
 
    /* Add a grey background color to dropdown links on hover */
 
    .dropdown-content a:hover {
 
        background-color: #EBEBEB;
 
    }
 
 
 
     .dropdown-content .lastElement {
 
     .dropdown-content .lastElement {
         height:35px;
+
         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;
 
     }
 
     }
 
    .dropdown-content .lastElement:hover {
 
        background-color: #EBEBEB;
 
    }
 
 
    .dropdown-content-right .lastElement {
 
        height:35px;
 
        width:100%;
 
        background:transparent;
 
        border-bottom-right-radius:8px;
 
        border-bottom-left-radius:8px;
 
        -webkit-transition: background-color 0.3s ease-out;
 
        -moz-transition: background-color 0.3s ease-out;
 
        -o-transition: background-color 0.3s ease-out;
 
        transition: background-color 0.3s ease-out;
 
    }
 
 
    .dropdown-content-right .lastElement:hover {
 
        background-color: #EBEBEB;
 
    }
 
 
    .dropdown-content-right a:hover {
 
        background-color: #EBEBEB;
 
    }
 
 
 
     /* Show the dropdown menu on hover */
 
     /* Show the dropdown menu on hover */
 
     .dropdown:hover .dropdown-content {
 
     .dropdown:hover .dropdown-content {
Line 370: Line 480:
 
     }
 
     }
  
    .dropdown:hover .dropdown-content-right {
+
@media screen and (max-width: 1500px) {
        display: block;
+
 
     }
+
  .navbar a,.dropdown .dropbtn {
 +
   
 +
  }
 +
.dropdown-content a {
 +
      
 +
  }
 +
}
 +
.referenceTitle {
  
 +
font-weight:bold;
 +
}
  
/**************************************************************************************************************************************************************************************************/
+
.containerRows {
/* CONTENT OF THE PAGE */
+
width:660px;
/**************************************************************************************************************************************************************************************************/
+
margin:0 auto;
.projectLogo {
+
}
       
+
.rowLast
        background: url("https://static.igem.org/mediawiki/2019/b/b1/T--Ulaval--Project_Logo.jpg");
+
{
        background-repeat: no-repeat;
+
margin:0 auto;
        background-size: 100% 100%;
+
    width: 550px;  
        height: 700px;
+
}
        position: relative;
+
    }
+
  
    .mainContainer {
+
.rowLast li{float: left;}
        padding-top:110px;
+
        width:100%;
+
    }
+
  
    .projectDescription {
 
        width:100%;
 
        background-color:#F7F5F4;
 
        font-family: 'Roboto', sans-serif;
 
        padding-top:100px;
 
    }
 
  
    .bigTitle {
+
ul {
        width:76%;
+
list-style:none;
        font-size:34px;
+
}
        font-weight:bold;
+
#big{display: none;}
        padding-bottom:10px;
+
        margin:0 auto;
+
        text-align:center;
+
        margin-bottom:4vh;
+
        font-family: 'Raleway', sans-serif;
+
    }
+
  
    .text {
+
@media screen and (max-width: 1425px){
        width:95%;
+
  #small{display: none;}
        margin:0 auto;
+
  #big{display:contents;}
        text-align:justify;
+
  .testcenter{display: none;}
        margin-bottom:4%;
+
}
    }
+
@media screen and (max-width: 800px){
 +
  #small{display: none;}
 +
  #big{display:contents;}
 +
  .testcenter{display: none;}
 +
  #medium{display: none;}
 +
}
  
     .descriptionContainer {
+
.accordionnav:hover .accordionnavnav-item:hover .accordionnav-item-content,
      display:inline-block;
+
.accordionnav .accordionnav-item--default .accordionnav-item-content {
      text-align: center;
+
     height: 5em;
      width:100%;
+
}
     }
+
.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;
 +
      
 +
}
  
    .descriptionTextBox {
 
      width:48%;
 
      float:left;
 
      height:420px;
 
    }
 
  
.descriptionTextBox2 {
+
.accordionnav-item-content,
      width:48%;
+
.accordionnav:hover .accordionnav-item-content,.accordionnav-item-content1,.accordionnav-item-content2,.accordionnav-item-content3,.accordionnav-item-content4,
      float:left;
+
.accordionnav:hover .accordionnav-item-content1,.accordionnav-item-content2,.accordionnav-item-content3,.accordionnav-item-content4 {
      height:35px;
+
    height: 0;
    }
+
    overflow: hidden;
 +
    transition: height .25s;
 +
}
  
.descriptionTextBoxRight2 {
 
      width:48%;
 
      float:right;
 
      height:35px;
 
    }
 
 
    .descriptionTextBoxRight {
 
      width:48%;
 
      float:right;
 
      height:420px;
 
    }
 
 
    .borderTest {
 
        display:inline-block;
 
        margin:0 auto;
 
        height:420px;
 
        width:4%;
 
    }
 
 
.borderTestSalut {
 
        display:inline-block;
 
        margin:0 auto;
 
        height:35px;
 
        width:4%;
 
    }
 
 
    .border2 {
 
      margin:0 auto;
 
      width:8px;
 
      height:420px;
 
      background-color:#BEBBB8;
 
    }
 
 
    .halfBorder {
 
      margin:0 auto;
 
      margin-bottom:5px;
 
      width:6px;
 
      height:192px;
 
      background-color:#BEBBB8;
 
    }
 
 
.halfBorderSecond {
 
      margin:0 auto;
 
      width:6px;
 
      height:192px;
 
      background-color:#BEBBB8;
 
    }
 
 
.lilBorder {
 
      margin:0 auto;
 
      margin-bottom:5px;
 
      width:6px;
 
      height:35px;
 
      background-color:#BEBBB8;
 
    }
 
 
.borderTest2 {
 
        display:inline-block;
 
        margin:0 auto;
 
        height:800px;
 
        width:4%;
 
    }
 
 
    .border2 {
 
      margin:0 auto;
 
      width:8px;
 
      height:420px;
 
      background-color:#BEBBB8;
 
    }
 
 
    .halfBorder2 {
 
      margin:0 auto;
 
      margin-bottom:5px;
 
      width:6px;
 
      height:382px;
 
      background-color:#BEBBB8;
 
    }
 
 
    .projectLogo img {
 
       
 
        max-width: 100%;
 
        max-height: 100vh;
 
        margin: auto;
 
     
 
    }
 
 
    .descriptionBoxTitle {
 
        font-size:26px;
 
        font-weight:bold;
 
        text-align:center;
 
        width:100%;
 
        margin-top:100px;
 
        margin-bottom:20px;
 
        font-family: 'Roboto', sans-serif;
 
 
    }
 
 
    .descriptionBoxText {
 
        width:80%;
 
        font-size:16px;
 
        height:100px;
 
        margin:0 auto;
 
        margin-top:100px;
 
        text-align:justify;
 
    }
 
 
    .descriptionBoxImage {
 
        width:293px;
 
        height:261px;
 
        background-image:url("file:///D:/Template/figure.png");
 
        background-repeat: no-repeat;
 
        background-position: center;
 
        background-size: 100% 100%;
 
        margin:0 auto;
 
       
 
    }
 
  
 +
.acordionnavnav {
 +
    padding: 0;
 +
    margin: 0 auto;
 +
    width: 100%;
 
      
 
      
    .wrapper {
+
}
        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;
 +
}
  
.bigWrapper{
+
.accordionnav h1 {
margin-left:10px;
+
  padding: 0.6em 1em 0.5em 1em ;
height:60px;
+
  margin:0;
width:200px;
+
margin:0 auto;
+
 
}
 
}
  
+
.accordionnav .accordionnav-item {
 +
  background-color:rgb(175, 184, 189);
 +
 
  
    .TeamContainer {
+
}
        background: url("https://static.igem.org/mediawiki/2019/0/0f/T--Ulaval--team.jpg");
+
        background-repeat: no-repeat;
+
        background-size: 100% 150%;
+
        height: 700px;
+
        position: relative;
+
    }
+
  
 +
.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;
  
    .borderWrapper {
 
      background-color:#F7F5F4;
 
      width:100%;
 
      padding-right:12px;
 
      height:350px;
 
      margin-top:25px;
 
      margin-left:-6px;
 
 
}
 
}
  
    .testingSomething {
+
 
      background-color:black;
+
.sidenav {
      height:350px;
+
  height: 100%;
      width:104%;
+
  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;
 
}
 
}
  
    .leftSolutionWrapper {
+
.sidenav a {
      float:left;
+
  padding: 8px 8px 8px 32px;
 +
  text-decoration: none;
 +
  font-size: 20px;
 +
  color: black;
 +
  display: block;
 +
  transition: 0.3s;
 
}
 
}
   
 
    .halfSolutionBorder {
 
      width:6px;
 
      background-color:#BEBBB8;
 
      height:157px;
 
     
 
    } 
 
  
.rightSolutionWrapper {
+
.sidenav a:hover {
      float:right;
+
  background-color: #3d9288 ;
 +
  color:whitesmoke;
 +
 
 
}
 
}
  
 
+
.sidenav .closebtn {
.wrapperFloatRight {
+
  position: absolute;
height:350px;
+
  top: 0;
width:35px;
+
  right: 25px;
 +
  font-size: 36px;
 +
  margin-left: 50px;
 +
}
 +
.sidenav .lastElement{
 +
  padding-bottom: 50px;
 
}
 
}
  
 
+
@media screen and (max-height: 450px) {
.buttonClick{
+
  .sidenav {padding-top: 15px;}
    background-color: #3f4041;
+
  .sidenav a {font-size: 18px;}
   
+
}
        border: none;
+
@media screen and (min-width: 1425px) {
        color: white;
+
  .sidenav{display: none;}
        padding: 20px 34px;
+
}
        text-align: center;
+
@media screen and (max-width: 1425px) {
        text-decoration: none;
+
  .sidenav{width:0px;}
        display: inline-block;
+
        font-size: 20px;
+
        margin: 4px 2px;
+
        cursor: pointer;
+
 
}
 
}
 
 
</style>
 
</style>
 
<script>
 
<script>
Line 650: Line 662:
 
}
 
}
 
</script>
 
</script>
 
+
<script>
</p><p>
+
  function openNav() {
<style>
+
    document.getElementById("mySidenav").style.width = "250px";
.referenceTitle {
+
  }
font-size:17px;
+
 
font-weight:bold;
+
  function closeNav() {
}
+
     document.getElementById("mySidenav").style.width = "0";
 
+
  }
.containerRows {
+
  </script>
width:660px;
+
margin:0 auto;
+
}
+
.rowLast
+
{
+
margin:0 auto;
+
     width: 550px;
+
}
+
 
+
.rowLast li{float: left;}
+
 
+
 
+
ul {
+
list-style:none;
+
}
+
</style>
+
 
+
 
+
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--- THIS IS WHERE THE HTML BEGINS --->
 
<!--- THIS IS WHERE THE HTML BEGINS --->
Line 683: Line 677:
 
<head>  
 
<head>  
  
<!-- This tells the browser that your page is responsive -->
 
 
<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="navbar">
+
 
<div class="wrapperLeft"><div class="navbarLogo"></div></div>
+
  <div id="mySidenav" class="sidenav">
<div class="wrapperRight">
+
    <a style="padding:15px;margin-top:15px;font-size:25px;"href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    <a style="font-size:16px;" href="https://2019.igem.org/Team:ULaval">Home</a>
+
    <div class="accordionnav">
    <div class="dropdown">
+
      <section  class="accordionnav-item ">
        <button class="dropbtn">Project
+
          <h1>Notebook</h1>
            <i class="fa fa-caret-down"></i>
+
          <div class="accordionnav-item-content1">
        </button>
+
            <a href="https://2019.igem.org/Team:ULaval/Notebook"><span class="textMargin"id="#h6">Lab Journal</span></a>
        <div class="dropdown-content">
+
                    <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Experiments"><span class="textMargin"id="#h6">Experiments</span></a>
            <a href="https://2019.igem.org/Team:ULaval/Description"><span class="textMargin">Description</span></a>
+
          </div>
             <a href="https://2019.igem.org/Team:ULaval/Design"><span class="textMargin">Design</span></a>
+
      </section>
             <a href="https://2019.igem.org/Team:ULaval/Results"><span class="textMargin">Results</span></a>
+
      <section class="accordionnav-item">
            <a href="https://2019.igem.org/Team:ULaval/Model"><span class="textMargin">Model</span></a>
+
          <h1>Parts</h1>
            <a href="https://2019.igem.org/Team:ULaval/Demonstrate"><span class="textMargin">Demonstrate</span></a>
+
          <div class="accordionnav-item-content1">
            <a href="https://2019.igem.org/Team:ULaval/Software"><span class="textMargin">Software</span></a>
+
             <a href="https://2019.igem.org/Team:ULaval/Parts"><span class="textMargin"id="#h6">Overview</span></a>
            <a href="https://2019.igem.org/Team:ULaval/Hardware"><span class="textMargin">Hardware</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>
     </div>
+
     </section>
    <div class="dropdown">
+
      <section class="accordionnav-item">
        <button class="dropbtn">Parts
+
          <h1>Human Practices</h1>
             <i class="fa fa-caret-down"></i>
+
          <div class="accordionnav-item-content3">
        </button>
+
             <a href="https://2019.igem.org/Team:ULaval/Human_Practices"><span class="textMargin"id="#h6">Human Practices</span></a>
        <div class="dropdown-content">
+
            <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/Parts"><span class="textMargin">Overview</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/Basic_Part"><span class="textMargin">Basic Parts</span></a>
+
             <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/Composite_Part"><span class="textMargin">Composite Parts</span></a>
+
             <a href="https://2019.igem.org/Team:ULaval/Human_Practices/ExpertInsight"><span class="textMargin"id="#h6">Expert Insight</span></a>
        </div>
+
          <a href="https://2019.igem.org/Team:ULaval/Human_Practices/Market_Consultation"><span class="textMargin"id="#h6">Market Consultation</span></a>
    </div>
+
           
    <div class="dropdown">
+
             <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Safety"><span class="textMargin"id="#h6">Safety</span></a>
        <button class="dropbtn">Notebook
+
          </div>
             <i class="fa fa-caret-down"></i>
+
      </section>
        </button>
+
     
        <div class="dropdown-content">
+
      <section class="accordionnav-item" style="padding-bottom: 100px;">
             <a href="https://2019.igem.org/Team:ULaval/Notebook"><span class="textMargin">Lab Journal</span></a>
+
          <h1>Project</h1>
             <a href="https://2019.igem.org/Team:ULaval/Experiments"><span class="textMargin">Experiments</span></a>
+
          <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>
+
        <div class="navbar">
    <div class="dropdown">
+
            <a href="https://2019.igem.org/Team:ULaval"id="h5" style="font-size:25px;">Home</a>
        <button class="dropbtn">Human Practices
+
            <div class="dropdown" id=small>
             <i class="fa fa-caret-down"></i>
+
                <button class="dropbtn"id="h5">Project
        </button>
+
                    <i class="fa fa-caret-down"></i>
        <div class="dropdown-content">
+
                </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/Entrepreneurship"><span class="textMargin">Entrepreneurship</span></a>
+
                    <a href="https://2019.igem.org/Team:ULaval/Design"><span class="textMargin"id="#h6">Design</span></a>
            <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Safety"><span class="textMargin">Safety</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()">&#9776; open</span></a>
 
         </div>
 
         </div>
    </div>
 
    <div class="dropdown">
 
        <button class="dropbtn">Team
 
            <i class="fa fa-caret-down"></i>
 
        </button>
 
        <div class="dropdown-content-right">
 
            <a href="https://2019.igem.org/Team:ULaval/Team"><span class="textMargin">Team members</span></a>
 
            <a href="https://2019.igem.org/Team:ULaval/Attributions"><span class="textMargin">Attributions</span></a>
 
            <a class="lastElement" href="file:///D:/Template/Achievements.html"><span class="textMargin">Achievements</span></a>
 
            <a class="lastElement" href="https://2019.igem.org/Team:ULaval/Collaborations"><span class="textMargin">Collaborations</span></a>
 
 
         </div>
 
         </div>
    </div>
 
</div>
 
</div>
 
 
 
 
</body>
 
</body>
 +
<script>
  
 +
        window.addEventListener('scroll', function() {
 +
            document.querySelector('.navbar').style.marginTop =
 +
            Math.max(85, 185 - this.scrollY) + 'px';
 +
        }, false);
  
</p>
+
        window.addEventListener('scroll', function() {
<!--  
+
            document.querySelector('.video-container').style.marginTop =
NewPP limit report
+
            Math.max(-100, 0 - this.scrollY) + 'px';
CPU time usage: 0.007 seconds
+
        }, false);
Real time usage: 0.008 seconds
+
Preprocessor visited node count: 14/1000000
+
Preprocessor generated node count: 64/1000000
+
Post‐expand include size: 82/2097152 bytes
+
Template argument size: 0/2097152 bytes
+
Highest expansion depth: 2/40
+
Expensive parser function count: 0/100
+
-->
+
  
<!-- Saved in parser cache with key 2018_igem_org:pcache:idhash:2655-0!*!*!*!*!*!* and timestamp 20190520133326 and revision id 482529
+
        window.addEventListener('scroll', function() {
-->
+
            document.querySelector('.teamlogo').style.marginTop =
</div>             <div class="visualClear"></div>
+
            Math.max(0, 100 - this.scrollY) + 'px';
            </div>
+
        }, false);
    </div>
+
        </script>
 +
</html>
  
        </div>
 
    </div>
 
</html>
 
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!--- Content of the page  --->
 
<!--- Content of the page  --->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->

Latest revision as of 01:44, 15 December 2019

Team:ULaval - 2019.igem.org