Difference between revisions of "Team:UNOTT/Description"

Line 38: Line 38:
 
     font-family: 'Karla', sans-serif;
 
     font-family: 'Karla', sans-serif;
 
     background-color: #ffffff;
 
     background-color: #ffffff;
 +
}
 +
.button {
 +
  display: inline-block;
 +
  border-radius: 4px;
 +
  background-color: #f4511e;
 +
  border: none;
 +
  color: #FFFFFF;
 +
  text-align: center;
 +
  font-size: 28px;
 +
  padding: 20px;
 +
  width: 200px;
 +
  transition: all 0.5s;
 +
  cursor: pointer;
 +
  margin: 5px;
 +
}
 +
 +
.button span {
 +
  cursor: pointer;
 +
  display: inline-block;
 +
  position: relative;
 +
  transition: 0.5s;
 +
}
 +
 +
.button span:after {
 +
  content: '\00bb';
 +
  position: absolute;
 +
  opacity: 0;
 +
  top: 0;
 +
  right: -20px;
 +
  transition: 0.5s;
 +
}
 +
 +
.button:hover span {
 +
  padding-right: 25px;
 +
}
 +
 +
.button:hover span:after {
 +
  opacity: 1;
 +
  right: 0;
 +
}
 +
 +
.image {
 +
  position: center;
 +
  width: 100%;
 +
}
 +
 +
.crop {
 +
    width: 100%;
 +
    height: 1000px;
 +
    overflow: hidden;
 +
}
 +
 +
 +
h2 span.spacer {
 +
  padding:0 5px;
 +
}
 +
 +
.crop {
 +
    width: 100%;
 +
    height: 700px;
 +
    overflow: hidden;
 +
}
 +
 +
h2 span {
 +
  color: white;
 +
  font: 100px/100px Helvetica, Sans-Serif;
 +
  letter-spacing: 10px; 
 +
  background: rgb(0, 0, 0); /* fallback color */
 +
  background: rgba(0, 0, 0, 0.7);
 +
  padding: 10px;
 +
}
 +
h2 {
 +
  position: absolute;
 +
  top: 350px;
 +
  left: 0;
 +
  width: 100%;
 +
  font-family: 'Karla', sans-
 +
}
 +
h3 span {
 +
  color: white;
 +
  font: 20px/20px Helvetica, Sans-Serif;
 +
  letter-spacing: 0px; 
 +
  background: rgb(0, 0, 0); /* fallback color */
 +
  background-color: #D74214;
 +
  padding: 10px;
 +
  float: right;
 +
  position: relative;
 +
  top: -10px;
 +
}
 +
.container2 {
 +
 
 +
  width: 80%;
 +
  margin: auto;
 +
  padding-right: 20px;
 +
  padding-bottom: 700px;
 +
  margin-right: 100px;
 +
  padding-top: 250px;
 +
 +
 +
}
 +
 +
.expandable-boxes {
 +
  position: relative;
 +
}
 +
 +
.expandable-box {
 +
  width: 40%;
 +
  height: 300px;
 +
  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: #red;
 +
  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-color: #ffffff;
 +
  font-color: #ffffff;
 +
}
 +
h1{
 +
    color: #02263e;
 +
}
 +
h2{
 +
    color: #ffffff;
 +
}
 +
p{
 +
    color: #ffffff;
 +
}
 +
 +
html {
 +
height: 100%;
 +
}
 +
li {
 +
  color: #B7D18F; /* bullet color */
 +
}
 +
li span {
 +
  color: #ffffff; /* text color */
 +
}
 +
 +
 +
 +
 +
 +
 +
 +
.white-bg{
 +
    background-color: #ffffff;
 +
    padding-left: 350px;
 +
    padding-right: 350px;
 +
}
 +
 +
.icons{
 +
    position: relative;
 +
    top:-80px;
 +
}
 +
 +
.icons2{
 +
    position: relative;
 +
    top:-20px;
 +
}
 +
 +
.icons3{
 +
    position: relative;
 +
    top:-40px;
 +
}
 +
 +
.icons4{
 +
    position: relative;
 +
    top:0px;
 
}
 
}
 
</style>
 
</style>
Line 51: Line 246:
 
</div>
 
</div>
  
 +
 +
<!-- Section Two; -->
 +
<section class="container section-two" id="spydesingers">
 +
<div class="row">
 +
<div class="col-md-6 to-match">
 +
<h2 style="color:#4b524a;">The Problem </h2>
 +
<article>
 +
<p>Recently, there has been a rise in cyber security breaches
 +
</p>
 +
                    <p>Companies are turning to physical security strategies involving biometric and digital keys to secure their clients' accounts.</p>
 +
 +
<p>
 +
</p>
 +
<p
 +
</p>
 +
</article>
 +
</div>
 +
<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">
 +
<img src="https://static.igem.org/mediawiki/2017/archive/b/b0/20171026145318%21T--UNOTT--openlock.png" class="img-responsive img-circle img-designers">
 +
</div>
 +
</section>
 +
<!--//Close Section Two -->
 +
 +
 +
<!--// Section Three -->
 +
<section class="container section-three" id="spydevelopers">
 +
<div class="row">
 +
<div class="col-md-6 css-img-wrapper hidden-xs hidden-sm">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2017/e/e4/T--UNOTT--ourkey.png" class="img-circle img-responsive img-developers"></div>
 +
</div>
 +
<div class="col-md-6">
 +
<h2 style="color:#4b524a;">Our solution</h2>
 +
<article>
 +
<p>
 +
A randomly assorted biometric which utilises CRISPRi to synthesise a random fluorescent key in <i>E. coli</i>. Our security system is called <i> Key. coli </i>.
 +
</p>
 +
<p>
 +
</p>
 +
<p>
 +
</p>
 +
</article>
 +
</div>
 +
</div>
 +
</section>
 +
<!--//Close Section Three -->
 
<div class="contentmargin"
 
<div class="contentmargin"
 
<p> write here write here write write here write here write write here write here write write here write here write write here write here writewrite here write here write write here write here write write here write here writewrite here write here write write here write here write write here write here write </p>
 
<p> write here write here write write here write here write write here write here write write here write here write write here write here writewrite here write here write write here write here write write here write here writewrite here write here write write here write here write write here write here write </p>

Revision as of 19:12, 31 October 2017

 

 

 

PROJECT DESCRIPTION

 

The Problem

Recently, there has been a rise in cyber security breaches

Companies are turning to physical security strategies involving biometric and digital keys to secure their clients' accounts.

Our solution

A randomly assorted biometric which utilises CRISPRi to synthesise a random fluorescent key in E. coli. Our security system is called Key. coli .

write here write here write write here write here write write here write here write write here write here write write here write here writewrite here write here write write here write here write write here write here writewrite here write here write write here write here write write here write here write