Difference between revisions of "Team:UNOTT/Results"

Line 1: Line 1:
 
{{:Team:UNOTT/Template/NavBarTest}}
 
{{:Team:UNOTT/Template/NavBarTest}}
−
<html>
+
 
 +
<html >
 
<head>
 
<head>
−
<style>   
+
  <meta charset="UTF-8">
 +
  <title>Expandable Boxes With CSS Transitions</title>
 +
  <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script>
 +
 
 +
 
 +
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 +
 
 +
 
 +
<style>
 +
.container2 {
 +
 
 +
  width: 80%;
 +
  margin: auto;
 +
  padding-right: 20px;
 +
  padding-bottom: 700px;
 +
  margin-right: 100px;
 +
  padding-top: 250px;
 +
 +
 
 +
}
 +
 
 +
.expandable-boxes {
 +
  position: relative;
 +
}
 +
 
 +
.expandable-box {
 +
  width: 30%;
 +
  height: 200px;
 +
  float: left;
 +
  margin: 0 3% 20px 0;
 +
  border: 1px solid #999;
 +
  border-radius: 12px;
 +
  padding: 10px;
 +
  box-sizing: border-box;
 +
  -webkit-transition: all .3s ease-in-out;
 +
  -moz-transition: all .3s ease-in-out;
 +
  -o-transition: all .3s ease-in-out;
 +
  -ms-transition: all .3s ease-in-out;
 +
  transition: all .3s ease-in-out;
 +
  background-color: #02263e;
 +
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, .25),
 +
    0 30px 10px -20px rgba(0, 0, 0, .25);
 +
}
 +
.expandable-box.open {
 +
  border-color: #D74214;
 +
  border-width: thick;
 +
  width: 96%;
 +
  height: 500px;
 +
  margin: 0;
 +
  background-color: #02263e;
 +
}
 +
.expandable-box.out {
 +
  width: 0;
 +
  height: 0;
 +
  overflow: hidden;
 +
  border: none;
 +
  padding: 0;
 +
  margin: 0;
 +
  opacity: 0;
 +
 
 +
}
 +
body {
 +
  background: #ffffff;
 +
 
 +
}
 +
h1{
 +
    color: #02263e;
 +
}
 +
h2{
 +
    color: #ffffff;
 +
}
 +
p{
 +
    color: #ffffff;
 +
}
 +
 
 +
html {
 +
height: 100%;
 +
}
 +
body {
 +
display: flex;
 +
align-items: center;
 +
justify-content: center;
 +
height: 100%;
 +
   user-select: none;
 +
background: #ffffff;
 +
}
 +
 
 +
#whoa-cool-button {
 +
font-family: 'Roboto';
 +
font-size: 18pt;
 +
font-weight: bold;
 +
color: white;
 +
background: #009688;
 +
padding: 15px 0px;
 +
border-radius: 20px;
 +
box-shadow: 0px 15px 0px 0px #00695C;
 +
cursor: pointer;
 +
transition: .2s;
 +
margin-right: 0px;
 +
    width: 100px;
 +
    height:100p;
 +
}
 +
 
 +
#whoa-cool-button:active {
 +
transform: translateY(14px);
 +
box-shadow: 0px 1px 0px 0px #00695C;
 +
}
 +
 
 +
.clickbutton{
 +
    position: relative;
 +
    font-family: 'Roboto';
 +
font-size: 18pt;
 +
font-weight: bold;
 +
color: white;
 +
    top: 280px;
 +
    left:300px;
 +
    background-color: #B7D18F;
 +
    box-shadow: 0px 15px 0px 0px #00695C;
 +
    width: 100px;
 +
    text-align: center;
 +
}
 +
 
 +
.clickbutton1{
 +
    position: relative;
 +
    font-family: 'Roboto';
 +
font-size: 18pt;
 +
font-weight: bold;
 +
color: white;
 +
    top: 230px;
 +
    left:800px;
 +
    background-color: #B7D18F;
 +
    box-shadow: 0px 15px 0px 0px #00695C;
 +
    width: 100px;
 +
    text-align: center;
 +
}
 +
 
 +
 
 +
.white-bg{
 +
    background-color: #ffffff;
 +
    padding-left: 350px;
 +
    padding-right: 350px;
 +
}
 +
 
 
</style>
 
</style>
 +
 +
 +
 
</head>
 
</head>
  
 
<body>
 
<body>
 
<center>
 
<center>
−
<div id="container" style=" background-color: #02263E;">
+
  <h1 style="color: #ffffff;">EXPERIMENTS</h1>
−
<p><span style="color: #ffffff;">&nbsp;</span></p>
+
</center>
−
<p><span style="color: #ffffff;">&nbsp;</span></p>
+
  <div class="container2">
−
<h1 style="text-align: center;"><span style="color: #ffffff;">RESULTS</span></h1>
+
  <div class="expandable-boxes">
−
<p><span style="color: #ffffff;">&nbsp;</span></p>
+
    <div class="expandable-box">
 +
      <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: CREATE pgRNA</h4>
 +
 
 +
      <div id="clear2" style="display: none;">
 +
<p></p>
 +
                  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
 
 +
 
 +
<div class="clickbutton">
 +
    <a href="https://2017.igem.org/Team:UNOTT/Experiments">
 +
                      <p>BACK</p>
 +
    </a>
 
</div>
 
</div>
  
−
<img src="https://static.igem.org/mediawiki/2017/0/0d/T--UNOTT--GIF.gif">
 
−
</center>
 
  
 +
<div class="clickbutton1">
 +
    <a href="https://2017.igem.org/Team:UNOTT/Results">
 +
                      <p>RESULTS</p>
 +
    </a>
 +
</div>
  
  
 +
      </div>
 +
  </div>
  
 +
    <div class="expandable-box">
 +
      <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: CREATE pREPORTER</h4>
 +
  <div id="clear3" style="display: none;">
 +
      <p></p>
 +
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  
  
 +
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Experiments">
 +
            <p>BACK</p>
 +
</a>
 +
</div>
  
  
 +
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
            <p>RESULTS</p>
 +
</a>
 +
</div>
 +
    </div>
 +
</div>
  
−
<body>
+
    <div class="expandable-box">
−
<div>
+
      <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: PROMOTER LIBRARY</h4>
 +
  <div id="clear4" style="display: none;">
 +
      <p></p>
 +
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  
 +
 +
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Experiments">
 +
            <p>BACK</p>
 +
</a>
 +
</div>
 +
 +
 +
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
            <p>RESULTS</p>
 +
</a>
 +
</div>
 +
    </div>
 +
  </div>
 +
 +
    <div class="expandable-box">
 +
      <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: RANDOM LIGATIONS</h4>
 +
      <div id="clear5" style="display: none;">
 +
      <p></p>
 +
 +
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
 +
 +
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Experiments">
 +
            <p>BACK</p>
 +
</a>
 +
</div>
 +
 +
 +
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
            <p>RESULTS</p>
 +
</a>
 +
</div>
 +
    </div>
 +
</div>
 +
 +
    <div class="expandable-box">
 +
      <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: FREEZE DRYING</h4>
 +
      <div id="clear6" style="display: none;">
 +
      <p></p>
 +
      <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
 +
 +
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Experiments">
 +
            <p>BACK</p>
 +
</a>
 +
</div>
 +
 +
 +
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
            <p>RESULTS</p>
 +
</a>
 +
</div>
 +
    </div>
 +
</div>
 +
 +
    <div class="expandable-box">
 +
      <h4 style="color: #ffffff; font-weight: bold; font-size: 30px;">OBJECTIVE: CRISPRi & gRNA EFFICIENCY</h4>
 +
      <div id="clear7" style="display: none;">
 +
          <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
 +
 +
 +
<div class="clickbutton">
 +
<a href="https://2017.igem.org/Team:UNOTT/Experiments">
 +
                  <p>BACK</p>
 +
</a>
 +
</div>
 +
 +
 +
<div class="clickbutton1">
 +
<a href="https://2017.igem.org/Team:UNOTT/Results">
 +
                  <p>RESULTS</p>
 +
</a>
 +
</div>
 +
   
 +
    </div>
 +
</div>
 +
  </div>
 +
</div>
 +
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 +
 +
 +
    <script>$(document).ready(function() {
 +
        //HOW TO HIDE
 +
        var mydiv = document.getElementById('clear2');
 +
        var mydiv1 = document.getElementById('clear3');
 +
        var mydiv2 = document.getElementById('clear4');
 +
        var mydiv3 = document.getElementById('clear5');
 +
        var mydiv4 = document.getElementById('clear6');
 +
        var mydiv5 = document.getElementById('clear7');
 +
//HOW TO HIDE
 +
 +
      $('.expandable-box').click(function(e) {
 +
        if($(this).hasClass('open')) {
 +
            //HOW TO HIDE
 +
 +
            //HOW TO HIDE
 +
          $('.expandable-box.out').not($(this)).removeClass('out');
 +
          $(this).removeClass('open');
 +
          mydiv.style.display = 'none';
 +
          mydiv1.style.display = 'none';
 +
          mydiv2.style.display = 'none';
 +
          mydiv3.style.display = 'none';
 +
          mydiv4.style.display = 'none';
 +
          mydiv5.style.display = 'none';
 +
        }
 +
        else {
 +
          $('.expandable-box').not($(this)).addClass('out');
 +
          $(this).addClass('open');
 +
 +
          //HOW TO HIDE
 +
            mydiv.style.display = 'block'
 +
            mydiv1.style.display = 'block'
 +
            mydiv2.style.display = 'block'
 +
            mydiv3.style.display = 'block'
 +
            mydiv4.style.display = 'block'
 +
            mydiv5.style.display = 'block'
 +
            //HOW TO HIDE
 +
        }
 +
      });
 +
    });</script>
 +
 +
 +
 +
 +
</body>
 
</html>
 
</html>
 +
 +
 
{{:Team:UNOTT/Template/Footer}}
 
{{:Team:UNOTT/Template/Footer}}

Revision as of 13:34, 25 October 2017

Expandable Boxes With CSS Transitions

EXPERIMENTS

OBJECTIVE: CREATE pgRNA

OBJECTIVE: CREATE pREPORTER

OBJECTIVE: PROMOTER LIBRARY

OBJECTIVE: RANDOM LIGATIONS

OBJECTIVE: FREEZE DRYING

OBJECTIVE: CRISPRi & gRNA EFFICIENCY