Difference between revisions of "Team:Pasteur Paris/Netbook"
| Line 11: | Line 11: | ||
| − | + | table { | |
| − | + | border-collapse:collapse; | |
| + | border-spacing:0; | ||
} | } | ||
| − | + | .view { | |
| − | + | width: 500px; | |
| − | + | height: 300px; | |
| − | + | 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: 400px; | |
| − | + | height: 300px; | |
| − | + | 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 83: | Line 148: | ||
<!-- CONTENU DE LA PAGE DE GARDE CSS --> | <!-- 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> | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | </body> | + | |
| − | + | ||
| − | + | ||
</html> | </html> | ||
