Difference between revisions of "Team:USP-EEL-Brazil/Collaborations"

Line 1: Line 1:
 
{{USP-EEL-Brazil}}
 
{{USP-EEL-Brazil}}
 
<html>
 
<html>
 +
<head>
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<style>
 +
* {
 +
    box-sizing: border-box;
 +
}
  
−
<img src="img_girl.jpg" alt="Foto do C.B.Sin. 2018" width="500" height="600">
+
body {
 +
    margin: 0;
 +
    font-family: Arial;
 +
}
  
−
<h1 >Clube de Biologia Sintética</h1>
+
/* The grid: Three equal columns that floats next to each other */
−
<p>Texto descrevendo o C.B.Sin</p>
+
.column {
 +
    float: left;
 +
    width: 25%;
 +
    padding: 50px;
 +
    text-align: center;
 +
    font-size: 25px;
 +
    cursor: pointer;
 +
    color: white;
 +
}
  
 +
.containerTab {
 +
    padding: 20px;
 +
    color: white;
 +
}
  
−
<h1  style="position:relative;top: 500px;" >Professors<h1>
+
/* Clear floats after the columns */
 +
.row:after {
 +
    content: "";
 +
    display: table;
 +
    clear: both;
 +
}
  
 +
/* Closable button inside the container tab */
 +
.closebtn {
 +
    float: right;
 +
    color: white;
 +
    font-size: 35px;
 +
    cursor: pointer;
 +
}
 +
</style>
 +
</head>
 +
<body>
  
 +
<div style="text-align:center">
 +
  <h2>Expanding Grid</h2>
 +
  <p>Click on the boxes below:</p>
 +
</div>
  
 +
<!-- Three columns -->
 +
<div class="row">
 +
  <div class="column" onclick="openTab('b1');" style="background:green;">
 +
 +
  <img src="https://static.igem.org/mediawiki/2018/e/e4/T--USP-EEL-Brazil--Taiseteste.jpg" alt="Taise" title="Seriously, how let the dogs out?!" />
 +
 +
</div>
 +
 +
<div class="column" onclick="openTab('b2');" style="background:blue;">
 +
 +
<img src="https://static.igem.org/mediawiki/2018/2/20/T--USP-EEL-Brazil--Cibele.jpg" alt="Cibele" title="After my plastic surgery!" />
 +
 +
 +
</div>
 +
 +
  <div class="column" onclick="openTab('b3');" style="background:red;">
 +
    Box 3
 +
 +
</div>
 +
 +
 +
<div class="column" onclick="openTab('b4');" style="background:purple;">
 +
 +
  <img src="https://static.igem.org/mediawiki/2018/e/e4/T--USP-EEL-Brazil--Taiseteste.jpg" alt="Taise" title="Seriously, how let the dogs out?!" />
 +
 +
</div>
 +
 +
 +
</div>
 +
 +
<!-- Full-width columns: (hidden by default) -->
 +
<div id="b1" class="containerTab" style="display:none;background:green">
 +
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 +
  <h2>Box 1</h2>
 +
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
 +
</div>
 +
 +
<div id="b2" class="containerTab" style="display:none;background:blue">
 +
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 +
  <h2>Box 2</h2>
 +
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
 +
</div>
 +
 +
<div id="b3" class="containerTab" style="display:none;background:red">
 +
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 +
  <h2>Box 3</h2>
 +
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
 +
</div>
 +
 +
<div id="b4" class="containerTab" style="display:none;background:purple">
 +
  <span onclick="this.parentElement.style.display='none'" class="closebtn">&times;</span>
 +
  <h2>Box 4</h2>
 +
  <p>Lorem ipsum dolor sit amet, te quo doctus abhorreant, et pri deleniti intellegat, te sanctus inermis ullamcorper nam. Ius error diceret deseruisse ad</p>
 +
</div>
 +
 +
<script>
 +
function openTab(tabName) {
 +
  var i, x;
 +
  x = document.getElementsByClassName("containerTab");
 +
  for (i = 0; i < x.length; i++) {
 +
    x[i].style.display = "none";
 +
  }
 +
  document.getElementById(tabName).style.display = "block";
 +
}
 +
</script>
 +
 +
</body>
 
</html>
 
</html>

Revision as of 16:31, 4 July 2018

Expanding Grid

Click on the boxes below:

Taise
Cibele
Box 3
Taise