Difference between revisions of "Team:UNOTT/Description"

Line 11: Line 11:
 
}
 
}
  
−
.leftcol {
+
<style>
−
width: 40%;
+
      @import url(https://fonts.googleapis.com/css?family=Lato:300,400,300italic,400italic);
−
float: left;
+
−
position: relative;
+
−
min-height: 1px;
+
−
right: -100px;
+
−
padding-left: 15px;
+
−
+
−
}
+
  
−
.rightcol {
+
      /* Base Styles
−
width: 40%;
+
      ===================================*/
−
float: right;
+
      body {
−
position: relative;
+
      color: #183532;
−
top: 200px;
+
      font-family: 'Lato', sans-serif;
−
min-height: 1px;
+
      font-weight: 400;
−
right: 100px;
+
      line-height: 1.8;
−
padding-left: 15px;
+
        background-color: #fff;
−
padding-bottom:500px;
+
        width: auto;
−
}
+
        position:absolute;
  
−
.contentmargin{
+
      }
−
  margin: auto;
+
−
    width: 70%;
+
−
    padding: 10px;
+
−
    font-family: 'Karla', sans-serif;
+
−
    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 {
+
      /* Layout Styles
−
  content: '\00bb';
+
      ===================================*/
−
  position: absolute;
+
      section:not(:first-of-type),
−
  opacity: 0;
+
      section:not(:nth-of-type(n2)) {
−
  top: 0;
+
      margin-top: 80px;
−
  right: -20px;
+
      }
−
  transition: 0.5s;
+
      .section-two,
−
}
+
      .section-three,
 +
      footer {
 +
      margin-top: 80px;
 +
      }
  
−
.button:hover span {
 
−
  padding-right: 25px;
 
−
}
 
  
−
.button:hover span:after {
+
     
−
  opacity: 1;
+
−
  right: 0;
+
−
}
+
  
−
.image {  
+
      /* Cover / Jumbotron Styles
−
  position: center;  
+
      ===================================*/
−
  width: 100%;
+
      section .cover {
−
}
+
      padding-top: 70px;
 +
     
 +
      background-repeat: no-repeat;
 +
      background-size: cover;
 +
      height: 100vh;
 +
        width: 100vw;
 +
     
 +
      display: -ms-flexbox;
 +
      display: flex;
 +
       
 +
      }
  
−
.crop {
 
−
    width: 100%;
 
−
    height: 1000px;
 
−
    overflow: hidden;
 
−
}
 
  
 +
      /* Section One Styles
 +
      ===================================*/
 +
      .section-one-content {
 +
      padding: 40px 20px;
 +
      color: #ffffff;
 +
      font-weight: 300;
 +
      }
 +
      .section-one-content h1 {
 +
      margin: 0 0 20px;
 +
      }
 +
      #section-one-left {
 +
      background: #183532;
 +
      }
 +
      #section-one-middle {
 +
      background: #244F4A;
 +
      }
 +
      #section-one-right {
 +
      background: #2A5C56;
 +
      }
  
−
h2 span.spacer {
+
      .section-two,
−
  padding:0 5px;
+
      .section-three {
−
}
+
      background: #fff;
 +
      }
  
−
.crop {
+
      /* CSS Image Styles
−
    width: 100%;
+
      ====================================================*/
−
    height: 700px;
+
      .css-img-wrapper {
−
    overflow: hidden;
+
          display: -webkit-box;
−
}
+
          display: -ms-flexbox;
−
 
+
          display: flex;
−
h2 span {
+
          -webkit-box-orient: vertical;
−
  color: white;
+
          -webkit-box-direction: normal;
−
  font: 100px/100px Helvetica, Sans-Serif;
+
              -ms-flex-direction: column;
−
  letter-spacing: 10px; 
+
                  flex-direction: column;
−
  background: rgb(0, 0, 0); /* fallback color */
+
          -ms-flex-wrap: nowrap;
−
  background: rgba(0, 0, 0, 0.7);
+
              flex-wrap: nowrap;
−
  padding: 10px;
+
          -webkit-box-pack: center;
−
}
+
              -ms-flex-pack: center;
−
h2 {
+
                  justify-content: center;
−
  position: absolute;
+
          -ms-flex-line-pack: center;
−
  top: 350px;
+
              align-content: center;
−
  left: 0;
+
          -webkit-box-align: center;
−
  width: 100%;
+
              -ms-flex-align: center;
−
  font-family: 'Karla', sans-
+
                  align-items: center;
−
}
+
      }
−
h3 span {  
+
      .img-designers,
−
  color: white;
+
      .img-developers {
−
  font: 20px/20px Helvetica, Sans-Serif;
+
      height: 400px;
−
  letter-spacing: 0px;
+
      width: 400px;
−
  background: rgb(0, 0, 0); /* fallback color */
+
      background-position: center center;
−
  background-color: #D74214;
+
      background-size: cover;
−
  padding: 10px;
+
      }
−
  float: right;
+
      .img-designers {
−
  position: relative;
+
      background: #183532;
−
  top: -10px;
+
      }
−
}
+
      .img-developers {
−
.container2 {
+
      background: #2A5C56;
−
 
+
      }
−
  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 */
+
−
}
+
  
  
  
 +
      /* Media Styles
 +
      ===================================*/
 +
      @media (min-width: 480px) {
 +
      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;
 +
      }
 +
      }
  
 +
@media only screen and (max-width: 500px) {
 +
    .section.cover {
 +
        max-width:100%;
 +
    }
  
 +
    .cover {
 +
        max-width:100%;
 +
    }
  
  
−
.white-bg{
 
−
    background-color: #ffffff;
 
−
    padding-left: 350px;
 
−
    padding-right: 350px;
 
 
}
 
}
  
−
.icons{
+
      h1 {
−
     position: relative;
+
          font-size: 300px;
−
    top:-80px;
+
         
 +
     }
 +
.maintext {
 +
position: absolute;
 +
left: 33%%;
 +
top: 10%;
 
}
 
}
  
−
.icons2{
+
.maintext2 {
−
    position: relative;
+
position: absolute;
−
    top:-20px;
+
left: 33%;
 +
top: 40%;
 
}
 
}
  
−
.icons3{
+
.mainimage{
−
    position: relative;
+
max-width: 100%;
−
    top:-40px;
+
height: auto;  
 
}
 
}
  
−
.icons4{
 
−
    position: relative;
 
−
    top:0px;
 
−
}
 
 
</style>
 
</style>
 
</head>
 
</head>

Revision as of 19:15, 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