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

(Replaced content with "{{Pasteur_Paris_Science}}")
Line 1: Line 1:
 
{{Pasteur_Paris_Science}}
 
{{Pasteur_Paris_Science}}
 +
 +
<html>
 +
 +
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
 +
<style type="text/css">
 +
<html>
 +
 +
 +
/*CONTENU DE LA PAGE DE GARDE notebook*/
 +
 +
 +
table {
 +
border-collapse:collapse;
 +
border-spacing:0;
 +
}
 +
 +
.view {
 +
  width: 450px;
 +
  height: 250px;
 +
  margin: 10px;
 +
  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>
 +
 +
 +
 +
 +
<body>
 +
<!-- CONTENU DE LA PAGE DE GARDE CSS -->
 +
 +
<html lang="en">
 +
 +
            <div class="main">
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/f/f0/Microbiology_Part.png" width="500" />
 +
                    <div class="mask">
 +
                        <h2>Microbiology</h2>
 +
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
 +
                        <a href="#" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/archive/0/01/20160921184515%21Silification.png"width="500" />
 +
                    <div class="mask">
 +
                        <h2>Silification</h2>
 +
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
 +
                        <a href="#" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/1/1b/Cellulose_binding.png" width="500" height="300" />
 +
                    <div class="mask">
 +
                        <h2>Cellulose-binding</h2>
 +
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo</p>
 +
                        <a href="#" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
                <div class="view Notebook">
 +
                    <img src="https://static.igem.org/mediawiki/2016/f/f3/Immunology_part.png" width="500"/>
 +
                    <div class="mask">
 +
                        <h2>Antibody-binding</h2>
 +
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
 +
                        <a href="#" class="info">Read More</a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
     
 +
    </body>
 +
</html>

Revision as of 04:18, 26 September 2016