(20 intermediate revisions by 2 users not shown) | |||
Line 8: | Line 8: | ||
− | /*CONTENU DE LA PAGE DE GARDE*/ | + | /*CONTENU DE LA PAGE DE GARDE notebook*/ |
− | + | table { | |
− | + | border-collapse:collapse; | |
+ | border-spacing:0; | ||
} | } | ||
− | + | ||
− | + | h1{ | |
− | + | font-family: 'Oswald', Arial, sans-serif; | |
− | + | margin-top:-10px; | |
+ | font-size:40px; | ||
+ | color:#333; | ||
+ | text-align:left, center; | ||
} | } | ||
− | + | .main{ | |
− | + | margin-left: 10%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | + | .view { | |
− | + | width: 450px; | |
− | + | margin: 10px; | |
− | + | height: 250px; | |
− | + | float: left; | |
+ | border: 10px solid #fff; | ||
+ | overflow: hidden; | ||
+ | position: relative; | ||
+ | text-align: center; | ||
+ | -webkit-box-shadow: 1px 1px 2px #e6e6e6; | ||
+ | -moz-box-shadow: 1px 1px 2px #e6e6e6; | ||
+ | box-shadow: 1px 1px 2px #e6e6e6; | ||
+ | cursor: default; | ||
+ | background: #fff no-repeat center center; | ||
} | } | ||
− | + | .view .mask,.view .content { | |
− | + | width: 350px; | |
− | + | height: 250px; | |
− | + | 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; | ||
} | } | ||
− | + | .Notebook img { | |
− | + | -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 .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 96: | Line 160: | ||
<!-- CONTENU DE LA PAGE DE GARDE CSS --> | <!-- CONTENU DE LA PAGE DE GARDE CSS --> | ||
− | |||
− | |||
− | + | <h1><B>Notebook</h1> | |
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="main"> | |
− | + | <div class="view Notebook"> | |
− | + | <img src="https://static.igem.org/mediawiki/2016/9/9f/T--Pasteur_Paris--Microbiology_Part.png" width="500" /> | |
− | + | <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> | ||
− | + | </div> | |
− | + | </div> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | </body> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | </body> | + | |
− | + | ||
− | + | ||
</html> | </html> |