Difference between revisions of "Team:UNOTT/Experiments"

Line 1: Line 1:
 
{{:Team:UNOTT/Template/NavBar}}
 
{{:Team:UNOTT/Template/NavBar}}
 
<html>
 
<html>
 +
<!DOCTYPE html>
 +
<html >
 
<head>
 
<head>
 +
  <meta charset="UTF-8">
 +
 +
  <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
 +
<link href="https://2017.igem.org/Team:UNOTT/Bootstrap?action=raw&ctype=text/css" rel="stylesheet">
 +
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 +
 
<style>
 
<style>
−
.city {
+
* {
−
  float: left;
+
  box-sizing: border-box;
−
  margin: 10px;
+
}
−
  padding: 10px;
+
body {
−
  max-width: 300px;
+
  font-family: 'Helvetica';
−
  height: 300px;
+
  font-weight: 400;
−
  border: 1px solid black;
+
  text-align: center;
−
}   
+
}
 +
.blocks {
 +
  position: fixed;
 +
  bottom: 0;
 +
  z-index: 1;
 +
  list-style-type: none;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  width: 100%;
 +
  margin: 0;
 +
  padding: 0;
 +
}
 +
.blocks__block {
 +
  will-change: transform;
 +
  position: relative;
 +
  height: 20vh;
 +
  -webkit-box-flex: 1;
 +
      -ms-flex: 1;
 +
          flex: 1;
 +
  -webkit-transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 +
  transition: all 0.7s cubic-bezier(0.23, 1, 0.32, 1);
 +
}
 +
.blocks__block:nth-child(1) {
 +
  background: #EFF0E3;
 +
  -webkit-transform-origin: 0% 100%;
 +
          transform-origin: 0% 100%;
 +
}
 +
.blocks__block:nth-child(2) {
 +
  background: #CDD7B6;
 +
  -webkit-transform-origin: 25% 100%;
 +
          transform-origin: 25% 100%;
 +
}
 +
.blocks__block:nth-child(3) {
 +
  background: #B7D18F;
 +
  -webkit-transform-origin: 50% 100%;
 +
          transform-origin: 50% 100%;
 +
}
 +
.blocks__block:nth-child(4) {
 +
  background: #6C8768;
 +
  -webkit-transform-origin: 75% 100%;
 +
          transform-origin: 75% 100%;
 +
}
 +
.blocks__block:nth-child(5) {
 +
  background: #4B524A;
 +
  -webkit-transform-origin: 100% 100%;
 +
          transform-origin: 100% 100%;
 +
}
 +
.blocks__block.active {
 +
  z-index: 2;
 +
}
 +
.blocks-content {
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  position: absolute;
 +
  bottom: 0;
 +
  left: 0;
 +
  height: 100vh;
 +
  width: 100%;
 +
}
 +
.blocks-content__content {
 +
  will-change: transform, opacity;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  text-align: center;
 +
  -webkit-box-orient: vertical;
 +
  -webkit-box-direction: normal;
 +
      -ms-flex-direction: column;
 +
          flex-direction: column;
 +
  position: fixed;
 +
  width: 100%;
 +
  z-index: 3;
 +
  top: 0;
 +
  left: 0;
 +
  height: 100vh;
 +
  padding: 10vw;
 +
  font-size: 20px;
 +
  opacity: 0;
 +
  visibility: hidden;
 +
  text-align: center;
 +
  -webkit-transform: scale(0.9);
 +
          transform: scale(0.9);
 +
  -webkit-transition: all 0.3s 0.2s ease-out;
 +
  transition: all 0.3s 0.2s ease-out;
 +
}
 +
.blocks-content__content.active {
 +
  opacity: 1;
 +
  -webkit-transform: scale(1);
 +
          transform: scale(1);
 +
  visibility: visible;
 +
}
 +
.blocks-content .blocks__content-close {
 +
  position: absolute;
 +
  right: 2vw;
 +
  top: 2vh;
 +
  font-size: 30px;
 +
  cursor: pointer;
 +
  -webkit-transition: all 0.2s ease-out;
 +
  transition: all 0.2s ease-out;
 +
}
 +
.blocks-content .blocks__content-close:hover {
 +
  -webkit-transform: scale(1.1);
 +
          transform: scale(1.1);
 +
}
 +
.blocks-content p {
 +
  font-size: 16px;
 +
  line-height: 2;
 +
  max-width: 800px;
 +
}
 +
.blocks-content h2 {
 +
  padding: 15px 30px;
 +
  font-weight: 300;
 +
  letter-spacing: 6px;
 +
  box-shadow: inset 0 0 0 3px #000;
 +
}
 +
.blocks-names {
 +
  position: fixed;
 +
  bottom: 0;
 +
  left: 0;
 +
  z-index: 2;
 +
  width: 100%;
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  font-size: 18px;
 +
  letter-spacing: 4px;
 +
  cursor: pointer;
 +
  -webkit-transition: all 0.15s ease-out;
 +
  transition: all 0.15s ease-out;
 +
}
 +
.blocks-names .blocks__name {
 +
  -webkit-box-flex: 1;
 +
      -ms-flex: 1;
 +
          flex: 1;
 +
  height: 20vh;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-align: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
}
 +
/* Demo */
 +
main {
 +
   position: relative;
 +
  z-index: 1;
 +
  padding: 3vh 5vw;
 +
  height: 80vh;
 +
  display: -webkit-box;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -ms-flex-flow: column wrap;
 +
      flex-flow: column wrap;
 +
  -webkit-box-pack: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  background: #02263e;
 +
}
 +
main h1 {
 +
  margin: 0;
 +
  font-weight: 400;
 +
  color: #ffffff;
 +
}
 +
main h1 a {
 +
  font-size: 48px;
 +
}
 +
main p {
 +
  font-weight: 300;
 +
  font-size: 16px;
 +
  max-width: 340px;
 +
  margin: 7px auto;
 +
  color:#ffffff;
 +
}
 +
main a {
 +
  text-decoration: none;
 +
  color: #38c5b9;
 +
  font-size: 30px;
 +
}
 +
main .plate {
 +
  position: absolute;
 +
  top: 50%;
 +
  left: 50%;
 +
  max-width: 380px;
 +
  width: 100%;
 +
  -webkit-transform: translate(-50%, -50%);
 +
          transform: translate(-50%, -50%);
 +
  z-index: -1;
 +
}
 +
 
 
</style>
 
</style>
 +
 
</head>
 
</head>
  
 
<body>
 
<body>
−
<p> space space space space space space space </p>
 
−
<div class="column full_size">
 
−
<h1 style=>Protocols</h1>
 
  
−
<h4>Coming soon!</h5>
+
<html>
−
<p>This page is yet to be made</p>
+
  <body>
  
 +
    <main>
 +
      <h1><a href="http://">EXPERIMENTS</a></h1>
 +
      <p>All our lab work over the course of our project.</p>
  
 +
    </main>
 +
    <!-- Component starts here-->
 +
    <ul class="blocks-names">
 +
      <li class="blocks__name">MISSION: AMPLIFYING PARTS</li>
 +
      <li class="blocks__name">MISSION: SYNTHESISING BRICKS</li>
 +
      <li class="blocks__name">MISSION: MUTATING DCAS9</li>
 +
      <li class="blocks__name">MISSION: LIGATING BRICKS</li>
 +
      <li class="blocks__name">MISSION: CONTROL PLASMID TRANSFORMATION</li>
 +
    </ul>
 +
    <ul class="blocks">
 +
      <li class="blocks__block" id="1"></li>
 +
      <li class="blocks__block" id="2"></li>
 +
      <li class="blocks__block" id="3"></li>
 +
      <li class="blocks__block" id="4"></li>
 +
      <li class="blocks__block" id="5"></li>
 +
    </ul>
 +
    <ul class="blocks-content">
 +
      <li class="blocks-content__content">
 +
        <div class="content__close"></div>
 +
        <h2>MISSION: AMPLIFYING PARTS</h2>
 +
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 +
      </li>
  
−
</div><img src="https://static.igem.org/mediawiki/2017/7/7f/Nottstoplog.png" style= position: fixed; align=center;>
+
      <li class="blocks-content__content">
 +
        <h2>MISSION: SYNTHESISING BRICKS</h2>
 +
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 +
      </li>
 +
      <li class="blocks-content__content">
 +
        <h2>MISSION: MUTATING DCAS9</h2>
 +
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 +
      </li>
 +
      <li class="blocks-content__content">
 +
        <h2>MISSION: LIGATING BRICKS</h2>
 +
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 +
      </li>
 +
      <li class="blocks-content__content">
 +
        <h2>MISSION: CONTROL PLASMID TRANSFORMATION</h2>
 +
        <p>Text</p><i class="blocks__content-close fa fa-times"></i>
 +
      </li>
 +
    </ul>
 +
  </body>
 +
</html>
 +
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  
 +
    <script src="js/index.js"></script>
  
−
 
−
 
−
<div id="footer">
 
−
<div class="container">
 
−
 
−
<p class="text-muted">STICK TEXT HERE </p>
 
−
</div>
 
−
</div>
 
 
</body>
 
</body>
 +
</html>
 +
  
 
</html>
 
</html>
 
{{:Team:UNOTT/Template/Footer}}
 
{{:Team:UNOTT/Template/Footer}}
−
</html>
 

Revision as of 13:22, 22 August 2017

EXPERIMENTS

All our lab work over the course of our project.

  • MISSION: AMPLIFYING PARTS
  • MISSION: SYNTHESISING BRICKS
  • MISSION: MUTATING DCAS9
  • MISSION: LIGATING BRICKS
  • MISSION: CONTROL PLASMID TRANSFORMATION

  • MISSION: AMPLIFYING PARTS

    Text

  • MISSION: SYNTHESISING BRICKS

    Text

  • MISSION: MUTATING DCAS9

    Text

  • MISSION: LIGATING BRICKS

    Text

  • MISSION: CONTROL PLASMID TRANSFORMATION

    Text

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

   <script src="js/index.js"></script>

</body> </html>


</html>