|
|
| (13 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| − | {{:Team:UChile_Biotec/css}}
| |
| − | <html>
| |
| − | <head>
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <style>
| |
| − | * {
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| | | | |
| − | body {
| |
| − | margin: 0;
| |
| − | font-family: Arial;
| |
| − | }
| |
| − |
| |
| − | /* The grid: Four equal columns that floats next to each other */
| |
| − | .column {
| |
| − | float: left;
| |
| − | width: 25%;
| |
| − | padding: 10px;
| |
| − | }
| |
| − |
| |
| − | /* Style the images inside the grid */
| |
| − | .column img {
| |
| − | opacity: 0.8;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .column img:hover {
| |
| − | opacity: 1;
| |
| − | }
| |
| − |
| |
| − | /* Clear floats after the columns */
| |
| − | .row:after {
| |
| − | content: "";
| |
| − | display: table;
| |
| − | clear: both;
| |
| − | }
| |
| − |
| |
| − | /* The expanding image container */
| |
| − | .container {
| |
| − | position: relative;
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | /* Expanding image text */
| |
| − | #imgtext {
| |
| − | position: absolute;
| |
| − | bottom: 15px;
| |
| − | left: 15px;
| |
| − | color: white;
| |
| − | font-size: 20px;
| |
| − | }
| |
| − |
| |
| − | /* Closable button inside the expanded image */
| |
| − | .closebtn {
| |
| − | position: absolute;
| |
| − | top: 10px;
| |
| − | right: 15px;
| |
| − | color: white;
| |
| − | font-size: 35px;
| |
| − | cursor: pointer;
| |
| − | }
| |
| − | </style>
| |
| − | </head>
| |
| − | <body>
| |
| − |
| |
| − | <div class="column full_size">
| |
| − |
| |
| − | <div style="text-align:center">
| |
| − | <h2>Tabbed Image Gallery</h2>
| |
| − | <p>Click on the images below:</p>
| |
| − | </div>
| |
| − |
| |
| − | <!-- The four columns -->
| |
| − | <div class="row">
| |
| − | <div class="column">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/f/f9/T--UChile_Biotec--Pactices8.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);">
| |
| − | </div>
| |
| − | <div class="column">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/a/a4/T--UChile_Biotec--Pactices9.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);">
| |
| − | </div>
| |
| − | <div class="column">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/4/4a/T--UChile_Biotec--Pactices10.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);">
| |
| − | </div>
| |
| − | <div class="column">
| |
| − | <img src="https://static.igem.org/mediawiki/2018/0/0a/T--UChile_Biotec--Pactices11.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);">
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | <div class="container">
| |
| − | <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
| |
| − | <img id="expandedImg" style="width:100%">
| |
| − | <div id="imgtext"></div>
| |
| − | </div>
| |
| − |
| |
| − | <script>
| |
| − | function myFunction(imgs) {
| |
| − | var expandImg = document.getElementById("expandedImg");
| |
| − | var imgText = document.getElementById("imgtext");
| |
| − | expandImg.src = imgs.src;
| |
| − | imgText.innerHTML = imgs.alt;
| |
| − | expandImg.parentElement.style.display = "block";
| |
| − | }
| |
| − | </script>
| |
| − |
| |
| − | </div>
| |
| − |
| |
| − | </body>
| |
| − | </html>
| |
| − |
| |
| − | <html>
| |
