Difference between revisions of "Team:Pasteur Paris/Netbook"

 
(18 intermediate revisions by 2 users not shown)
Line 8: Line 8:
  
  
/*CONTENU DE LA PAGE DE GARDE*/
+
/*CONTENU DE LA PAGE DE GARDE notebook*/
  
  
body{
+
table {
z-index:-2;
+
border-collapse:collapse;
}
+
border-spacing:0;
 
+
div#weeks{
+
position: relative;
+
top: -120px;
+
left: 50px;
+
 
}
 
}
  
  
 
h1{
 
h1{
margin:0px;
+
        font-family: 'Oswald', Arial, sans-serif;
padding:20px 20px 10px 20px;
+
        margin-top:-10px;
font-size:30px;
+
font-size:40px;
 
color:#333;
 
color:#333;
    text-shadow:1px 1px 1px #fff;
+
text-align:left, center;
text-align:left;
+
font-weight:400;
+
    text-align:center;
+
 
}
 
}
  
 
+
.main{
 
+
  margin-left: 10%;
/*la mosaique de semaine*/
+
 
+
 
+
#weekslist{
+
position: relative;
+
font-size:0;
+
width: 810px;
+
margin:0 auto;
+
+
 
}
 
}
 
+
.view {
 
+
  width: 450px;
 
+
  margin: 10px;
#weekslist a{
+
  height: 250px;
  cursor: url("https://static.igem.org/mediawiki/2016/5/5f/Design_pasteur2016.png"), pointer;
+
  float: left;
  margin:2px;
+
  border: 10px solid #fff;
  border 4px solid transparent;
+
  overflow: hidden;
  display: inline-block;
+
  position: relative;
  -webkit-border-radius:10px;
+
  text-align: center;
  border-radius: 10px;
+
  -webkit-box-shadow: 1px 1px 2px #e6e6e6;
  opacity: .5;
+
  -moz-box-shadow: 1px 1px 2px #e6e6e6;
 
+
  box-shadow: 1px 1px 2px #e6e6e6;
  -webkit-transition:all .3s ease-in;
+
  cursor: default;
  -moz-transition:all .3s ease-in;
+
  background: #fff  no-repeat center center;
  -ms-transition:all .3s ease-in;
+
  -o-transition:all .3s ease-in;
+
  transition:all .3s ease-in;
+
 
}
 
}
 
+
.view .mask,.view .content {
#weekslist a:hover{
+
  width: 350px;
  border-color: #000000;
+
  height: 250px;
  opacity: 3.5;
+
  position: absolute;
 +
  overflow: hidden;
 +
  top: 0;
 +
  left: 0;
 +
}
 +
.view img {
 +
  display: block;
 +
  position: relative;
 +
}
 +
.view h2 {
 +
  text-transform: uppercase;
 +
  color: #fff;
 +
  text-align: center;
 +
  position: relative;
 +
  font-size: 17px;
 +
  padding: 10px;
 +
  background: rgba(0, 0, 0, 0.8);
 +
  margin: 20px 0 0 0;
 +
}
 +
.view p {
 +
  font-family: Georgia, serif;
 +
  font-style: italic;
 +
  font-size: 12px;
 +
  position: relative;
 +
  color: #fff;
 +
  padding: 10px 20px 20px;
 +
  text-align: center;
 +
}
 +
.view a.info {
 +
  display: inline-block;
 +
  text-decoration: none;
 +
  padding: 7px 14px;
 +
  background: #000;
 +
  color: #fff;
 +
  text-transform: uppercase;
 +
  -webkit-box-shadow: 0 0 1px #000;
 +
  -moz-box-shadow: 0 0 1px #000;
 +
  box-shadow: 0 0 1px #000;
 +
}
 +
.view a.info: hover {
 +
  -webkit-box-shadow: 0 0 5px #000;
 +
  -moz-box-shadow: 0 0 5px #000;
 +
  box-shadow: 0 0 5px #000;
 
}
 
}
  
#weekslist img{
+
.Notebook img {
  -webkt-border-radius:10px;
+
  -webkit-transition: all 0.3s ease-in-out;
   border-radius: 6px;
+
  -moz-transition: all 0.3s ease-in-out;
 +
  -o-transition: all 0.3s ease-in-out;
 +
  -ms-transition: all 0.3s ease-in-out;
 +
  transition: all 0.3s ease-in-out;
 +
}
 +
.Notebook .mask {
 +
  background-color: #A8D5D8 ;
 +
  -webkit-transform: translateX(-300px);
 +
  -moz-transform: translateX(-300px);
 +
  -o-transform: translateX(-300px);
 +
  -ms-transform: translateX(-300px);
 +
  transform: translateX(-300px);
 +
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
 +
  filter: alpha(opacity=100);
 +
  opacity: 1;
 +
  -webkit-transition: all 0.3s ease-in-out;
 +
  -moz-transition: all 0.3s ease-in-out;
 +
  -o-transition: all 0.3s ease-in-out;
 +
  -ms-transition: all 0.3s ease-in-out;
 +
  transition: all 0.3s ease-in-out;
 +
}
 +
.Notebook h2 {
 +
  background: rgba(255, 255, 255, 0.5);
 +
  color: #000;
 +
  -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
 +
  -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
 +
  box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
 +
}
 +
.Notebook p {
 +
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
 +
  filter: alpha(opacity=0);
 +
  opacity: 0;
 +
  color: #333;
 +
  -webkit-transition: all 0.2s linear;
 +
  -moz-transition: all 0.2s linear;
 +
  -o-transition: all 0.2s linear;
 +
  -ms-transition: all 0.2s linear;
 +
  transition: all 0.2s linear;
 +
}
 +
.Notebook:hover .mask {
 +
  -webkit-transform: translateX(0px);
 +
  -moz-transform: translateX(0px);
 +
  -o-transform: translateX(0px);
 +
  -ms-transform: translateX(0px);
 +
  transform: translateX(0px);
 +
}
 +
.Notebook:hover img {
 +
  -webkit-transform: translateX(300px);
 +
  -moz-transform: translateX(300px);
 +
  -o-transform: translateX(300px);
 +
  -ms-transform: translateX(300px);
 +
  transform: translateX(300px);
 +
}
 +
.Notebook:hover p {
 +
  -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
 +
  filter: alpha(opacity=100);
 +
  opacity: 1;
 
}
 
}
 
  
 
</style>
 
</style>
Line 83: Line 160:
 
<!-- CONTENU DE LA PAGE DE GARDE CSS -->
 
<!-- CONTENU DE LA PAGE DE GARDE CSS -->
  
<div id="weeks">
 
<h1>Notebook </h1>
 
  
 +
<h1><B>Notebook</h1>
  
  <div id="weekslist"><center>
+
            <div class="main">
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week1"><img src = "https://static.igem.org/mediawiki/2016/3/34/Week1_pasteur2016.png" width= 150px alt=""><a/>  
+
                <div class="view Notebook">
   
+
                    <img src="https://static.igem.org/mediawiki/2016/9/9f/T--Pasteur_Paris--Microbiology_Part.png" width="500" />
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week2"><img src = "https://static.igem.org/mediawiki/2016/4/4c/Week2_pasteur2016.png" width= 150px  alt=""><a/>
+
                    <div class="mask">
 +
                        <h2>Microbiology</h2>
 +
                        <p>“Multiplication is division”. </br>From our designed sequences, to our biobricks, through the protein production, here comes the details of our microbiology lab work.</p>
 +
                        <a href="https://2016.igem.org/Team:Pasteur_Paris/Microbiology" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/d/d1/T--Pasteur_Paris--T--iGEM16_Pasteur_Paris--BBa_K2053002_Fig1.png"width="500" />
 +
                    <div class="mask">
 +
                        <h2>Silification </h2>
 +
                        <p>“As solid as a roc".</br>The physicochemical characterisation of the silification reaction induced by our protein.</p>
 +
                        <a href="https://2016.igem.org/Team:Pasteur_Paris/Silification" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/5/5f/T--Pasteur_Paris--Cellulose_binding_pasteur.png" width="500" height="300" />
 +
                    <div class="mask">
 +
                        <h2>Cellulose-Binding</h2>
 +
                        <p>Binding tests of our protein to our cellulose support.</p>
 +
                        <a href="https://2016.igem.org/Team:Pasteur_Paris/Binding_cellulose" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/9/97/T--Pasteur_Paris--Immunology_pasteur.png" width="500"/>
 +
                    <div class="mask">
 +
                        <h2>Immunoassays</h2>
 +
                        <p>Experimentation and tests of the immunodetection system: viral proteins recognition. </p>
 +
                        <a href="https://2016.igem.org/Team:Pasteur_Paris/Immunology" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/6/6a/T--Pasteur_Paris--Cellulose_binding.png" width="500"/>
 +
                    <div class="mask">
 +
                        <h2>Patch conception</h2>
 +
                        <p>Conditions and quantities to respect to have a strong patch able of being binded with our protein.</p>
 +
                        <a href="https://2016.igem.org/Team:Pasteur_Paris/Patch" class="info">Read More</a>
 +
                    </div>
 +
                </div>
  
<a href="https://2016.igem.org/Team:Pasteur_Paris/week3"><img src = "https://static.igem.org/mediawiki/2016/e/ef/Week3_pasteur2016.png"  width= 150px  alt=""><a/>
+
            </div>
 
+
        </div>
  <a href="https://2016.igem.org/Team:Pasteur_Paris/week4"><img src = "https://static.igem.org/mediawiki/2016/2/29/Week4_pasteur2016.png" width= 150px  alt=""><a/>
+
 
+
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week5"><img src = "https://static.igem.org/mediawiki/2016/9/98/Week5_pasteur2016.png" width= 150px  alt=""><a/>
+
 
+
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week6"><img src = "https://static.igem.org/mediawiki/2016/e/e7/Week6_pasteur2016.png" width= 150px  alt=""><a/>
+
    </li>
+
 
+
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week7"><img src = "https://static.igem.org/mediawiki/2016/9/9c/Week7_pasteur2016.png" width= 150px  alt=""><a/>
+
    </li>
+
 
+
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week8"><img src = "https://static.igem.org/mediawiki/2016/7/7e/Week8_pasteur2016.png" width= 150px  alt=""><a/>
+
 
+
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week9"><img src = "https://static.igem.org/mediawiki/2016/0/0f/Week9_pasteur2016.png" width= 150px  alt=""><a/>
+
   
+
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week10"><img src = "https://static.igem.org/mediawiki/2016/7/79/Week10_pasteur2016.png" width= 150px  alt=""><a/>
+
   
+
    ><a href="https://2016.igem.org/Team:Pasteur_Paris/week11"><img src = "https://static.igem.org/mediawiki/2016/d/de/Week11_pasteur2016.png" width= 150px  alt=""><a/>
+
   
+
    <a href="https://2016.igem.org/Team:Pasteur_Paris/week12"><img src = "https://static.igem.org/mediawiki/2016/d/de/Week12_pasteur2016.png" width= 150px  alt=""><a/>
+
 
+
  <a href="https://2016.igem.org/Team:Pasteur_Paris/week13"><img src = "https://static.igem.org/mediawiki/2016/8/8e/Week13_pasteur2016.png" width= 150px  alt=""><a/>
+
   
+
  <a href="https://2016.igem.org/Team:Pasteur_Paris/week14"><img src = "https://static.igem.org/mediawiki/2016/a/ac/Week14_pasteur2016.png" width= 150px  alt=""><a/>
+
   
+
  <a href="https://2016.igem.org/Team:Pasteur_Paris/week15"><img src = "https://static.igem.org/mediawiki/2016/c/c1/Week15_pasteur2016.png" width= 150px  alt=""><a/>
+
    </li>
+
 
        
 
        
</center></div>      
+
     </body>
</div>
+
     
+
    <div><center><a href="#weeks"><img src="https://static.igem.org/mediawiki/2016/6/69/Arrowup_pasteur_2016.png" /></a></center></div>
+
 
+
 
+
</body>
+
 
+
 
+
 
</html>
 
</html>

Latest revision as of 00:28, 20 October 2016