Difference between revisions of "Team:UNOTT"

 
(392 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
<html>
+
{{:Team:UNOTT/Template/NavBarTest}}
  
  
−
<div class="column full_size" >
+
<html >
−
<img src="http://i.imgur.com/MOwCvtc.png">
+
<head>
−
</div>
+
  <meta charset="UTF-8">
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
 +
 +
 
  
  
 +
<style>
 +
      @import url(https://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);
  
−
<div class="column full_size" >
+
      /* Base Styles
−
<h1> Welcome to the iGEM Nottingham 2017 Wiki!</h1>
+
      ===================================*/
−
<p>If you would like to collaborate with/sponsor us please contact igemnotts@outlook.com. Thanks! </p>
+
      body {
−
</div>
+
      color: #183532;
 +
      font-family: 'Lato', sans-serif;
 +
      font-weight: 400;
 +
      line-height: 1.8;
 +
        background-color: #fff;
 +
        width: auto;
 +
        position:absolute;
  
−
<div class="clear"></div>
+
      }
  
−
<div class="column full_size" >
 
−
<h5>KeyColi: the Biological password!</h5>
 
−
<ul>
 
−
<li>We plan to use the physical properties of GM bacteria/and or spectrum of their products as a portable biological key.</li>
 
−
<li>See project's widgets on the left of the screen for a more in depth description and some of our current progress!</li>
 
−
</ul>
 
−
<p></p>
 
−
</div>
 
  
−
<div class="column half_size" >
+
      /* Layout Styles
−
<div class="highlight">
+
      ===================================*/
−
<h5></h5>
+
      section:not(:first-of-type),
−
<p></p>
+
      section:not(:nth-of-type(n2)) {
−
<p></p>
+
      margin-top: 80px;
−
</div>
+
      }
−
</div>
+
      .section-two,
 +
      .section-three,
 +
      footer {
 +
      margin-top: 80px;
 +
      }
  
−
<div class="column half_size" >
 
−
<div class="highlight">
 
−
<h5></h5>
 
−
<p></p>
 
−
</div>
 
−
</div>
 
  
−
</div>
+
     
  
 +
      /* Cover / Jumbotron Styles
 +
      ===================================*/
 +
      section .cover {
 +
      padding-top: 70px;
 +
     
 +
      background-repeat: no-repeat;
 +
      background-size: cover;
 +
      height: 100vh;
 +
        width: 100vw;
 +
     
 +
      display: -ms-flexbox;
 +
      display: flex;
 +
       
 +
      }
  
  
 +
      /* Section One Styles
 +
      ===================================*/
 +
      .section-one-content {
 +
      padding: 1em 1em;
 +
      color: #ffffff;
 +
      font-weight: 300;
 +
        height:350px;
 +
      }
 +
      .section-one-content h1 {
 +
      margin: 0 0 0px;
 +
      }
 +
      #section-one-left {
 +
      background: #183532;
 +
      }
 +
      #section-one-middle {
 +
      background: #244F4A;
 +
      }
 +
      #section-one-right {
 +
      background: #2A5C56;
 +
       
 +
      }
  
−
<div class="column half_size" >
+
      .section-two,
−
<h5></h5>
+
      .section-three {
−
<p></p>
+
      background: #fff;
 +
      }
  
−
<h5></h5>
+
      /* CSS Image Styles
−
<p></p>
+
      ====================================================*/
 +
      .css-img-wrapper {
 +
          display: -webkit-box;
 +
          display: -ms-flexbox;
 +
          display: flex;
 +
          -webkit-box-orient: vertical;
 +
          -webkit-box-direction: normal;
 +
              -ms-flex-direction: column;
 +
                  flex-direction: column;
 +
          -ms-flex-wrap: nowrap;
 +
              flex-wrap: nowrap;
 +
          -webkit-box-pack: center;
 +
              -ms-flex-pack: center;
 +
                  justify-content: center;
 +
          -ms-flex-line-pack: center;
 +
              align-content: center;
 +
          -webkit-box-align: center;
 +
              -ms-flex-align: center;
 +
                  align-items: center;
 +
      }
 +
      .img-designers,
 +
      .img-developers {
 +
      height: 400px;
 +
      width: 400px;
 +
      background-position: center center;
 +
      background-size: cover;
 +
      }
 +
      .img-designers {
 +
      background: #183532;
 +
      }
 +
      .img-developers {
 +
      background: #2A5C56;
 +
      }
  
−
</div>
 
  
  
−
<div class="column half_size" >
+
      /* Media Styles
−
<h5></h5>
+
      ===================================*/
−
<p></p>
+
      @media (min-width: 480px) {
−
<p></p>
+
      body {
 +
      font-size: 16px;
 +
             
 +
               
 +
      }
 +
      }
 +
      @media (min-width: 768px) {
 +
      .section-one-content {
 +
      padding: 40px 40px;
 +
      }
 +
      }
 +
      @media (min-width: 992px) {
 +
      .section-one-content {
 +
      padding: 40px 20px;
 +
      }
 +
      }
 +
      @media (min-width: 1200px) {
 +
      .section-one-content {
 +
      padding: 40px 40px;
 +
      }
 +
      }
  
−
</div>
+
@media only screen and (max-width: 500px) {
 +
    .section.cover {
 +
        max-width:100%;
 +
    }
  
 +
    .cover {
 +
        max-width:100%;
 +
    }
  
−
<div class="column half_size" >
 
−
<h5></h5>
 
−
<p></p>
 
−
<ul>
 
−
<li></li>
 
−
</ul>
 
−
</div>
 
  
−
<div class="column half_size" >
+
}
−
<h2></h2>
+
−
<h4></h4>
+
  
−
</div>
+
h1 {
 +
          font-size: 300px;
 +
          font-color: #ffffff;
 +
    }
 +
.maintext {
 +
position: absolute;
 +
left: 33%%;
 +
top: 10%;
 +
}
  
 +
.maintext2 {
 +
position: absolute;
 +
left: 33%;
 +
top: 40%;
 +
}
  
 +
.mainimage{
 +
max-width: 100%;
 +
height: auto;
 +
}
  
 +
</style>
  
 +
</head>
  
 +
<body>
 +
  <body data-spy="scroll" data-target="#myScrollspy" class="">
  
  
 +
 +
<!-- Full Screen Landing Section -->
 +
<div class="cover">
 +
 +
<img class="mainimage"src="https://static.igem.org/mediawiki/2017/1/12/T--UNOTT--CoverImg.png">
 +
 +
     
 +
 +
</div>
 +
 +
<!-- //Close Full Screen Landing Section -->
 +
 +
 +
<!-- Section One; as seen on many site 3 main option sections for content -->
 +
<section class="container-fluid section-one">
 +
<div class="row">
 +
<div class="col-md-4 section-one-content" id="section-one-left">
 +
<h1>What?</h1>
 +
<p> An unpredicatable security system consisting of bacteria. <br>
 +
</p>
 +
 +
</div>
 +
 +
<div class="col-md-4 section-one-content" id="section-one-middle">
 +
<h1>Why?</h1>
 +
<p> To secure customer accounts that require high-end security.<br>
 +
</p>
 +
 +
</div>
 +
 +
<div class="col-md-4 section-one-content" id="section-one-right">
 +
<h1>How?</h1>
 +
<p>Unique expression of fluorescent proteins linked to CRISPR dCas9 interference.</p>
 +
 +
</div>
 +
</div>
 +
</section>
 +
<!-- //Close Section One -->
 +
 +
 +
 +
 +
 +
<!--// Section Three -->
 +
<section class="container section-three" id="spydevelopers">
 +
<div class="row">
 +
<img src="https://static.igem.org/mediawiki/2017/0/08/T--UNOTT--Slogan.png" style="width:100%;height:auto;">
 +
</div>
 +
</section>
 +
<!--//Close Section Three -->
 +
 +
<br> </br>
 +
</body>
 
</html>
 
</html>
 +
 +
{{:Team:UNOTT/Template/Footer}}

Latest revision as of 00:57, 2 November 2017


What?

An unpredicatable security system consisting of bacteria.

Why?

To secure customer accounts that require high-end security.

How?

Unique expression of fluorescent proteins linked to CRISPR dCas9 interference.