Difference between revisions of "Team:NJU-China/Basic Part"

Line 111: Line 111:
  
 
}
 
}
 +
/* --------------------------------
 +
 +
Primary style
 +
 +
-------------------------------- */
 +
*, *::after, *::before {
 +
  box-sizing: border-box;
 +
}
 +
 +
html {
 +
  font-size: 62.5%;
 +
}
 +
 +
body {
 +
  font-size: 1.6rem;
 +
  font-family: "Fira Sans", sans-serif;
 +
  color: #383838;
 +
  background-color: #f8f8f8;
 +
}
 +
 +
a {
 +
  color: #491A06;
 +
  text-decoration: none;
 +
}
 +
 +
/* --------------------------------
 +
 +
Main Components
 +
 +
-------------------------------- */
 +
.cd-horizontal-timeline {
 +
  opacity: 0;
 +
  margin: 2em auto;
 +
  -webkit-transition: opacity 0.2s;
 +
  -moz-transition: opacity 0.2s;
 +
  transition: opacity 0.2s;
 +
}
 +
.cd-horizontal-timeline::before {
 +
  /* never visible - this is used in jQuery to check the current MQ */
 +
  content: 'mobile';
 +
  display: none;
 +
}
 +
.cd-horizontal-timeline.loaded {
 +
  /* show the timeline after events position has been set (using JavaScript) */
 +
  opacity: 1;
 +
}
 +
.cd-horizontal-timeline .timeline {
 +
  position: relative;
 +
  height: 100px;
 +
  width: 90%;
 +
  max-width: 800px;
 +
  margin: 0 auto;
 +
}
 +
.cd-horizontal-timeline .events-wrapper {
 +
  position: relative;
 +
  height: 100%;
 +
  margin: 0 40px;
 +
  overflow: hidden;
 +
}
 +
.cd-horizontal-timeline .events-wrapper::after, .cd-horizontal-timeline .events-wrapper::before {
 +
  /* these are used to create a shadow effect at the sides of the timeline */
 +
  content: '';
 +
  position: absolute;
 +
  z-index: 2;
 +
  top: 0;
 +
  height: 100%;
 +
  width: 20px;
 +
}
 +
.cd-horizontal-timeline .events-wrapper::before {
 +
  left: 0;
 +
  background-image: -webkit-linear-gradient( left , #f8f8f8, rgba(248, 248, 248, 0));
 +
  background-image: linear-gradient(to right, #f8f8f8, rgba(248, 248, 248, 0));
 +
}
 +
.cd-horizontal-timeline .events-wrapper::after {
 +
  right: 0;
 +
  background-image: -webkit-linear-gradient( right , #f8f8f8, rgba(248, 248, 248, 0));
 +
  background-image: linear-gradient(to left, #f8f8f8, rgba(248, 248, 248, 0));
 +
}
 +
.cd-horizontal-timeline .events {
 +
  /* this is the grey line/timeline */
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: 0;
 +
  top: 49px;
 +
  height: 2px;
 +
  /* width will be set using JavaScript */
 +
  background: #dfdfdf;
 +
  -webkit-transition: -webkit-transform 0.4s;
 +
  -moz-transition: -moz-transform 0.4s;
 +
  transition: transform 0.4s;
 +
}
 +
.cd-horizontal-timeline .filling-line {
 +
  /* this is used to create the green line filling the timeline */
 +
  position: absolute;
 +
  z-index: 1;
 +
  left: 0;
 +
  top: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  background-color: #491A06;
 +
  -webkit-transform: scaleX(0);
 +
  -moz-transform: scaleX(0);
 +
  -ms-transform: scaleX(0);
 +
  -o-transform: scaleX(0);
 +
  transform: scaleX(0);
 +
  -webkit-transform-origin: left center;
 +
  -moz-transform-origin: left center;
 +
  -ms-transform-origin: left center;
 +
  -o-transform-origin: left center;
 +
  transform-origin: left center;
 +
  -webkit-transition: -webkit-transform 0.3s;
 +
  -moz-transition: -moz-transform 0.3s;
 +
  transition: transform 0.3s;
 +
}
 +
.cd-horizontal-timeline .events a {
 +
  position: absolute;
 +
  bottom: 0;
 +
  z-index: 2;
 +
  text-align: center;
 +
  font-size: 1.3rem;
 +
  padding-bottom: 15px;
 +
  color: #383838;
 +
  /* fix bug on Safari - text flickering while timeline translates */
 +
  -webkit-transform: translateZ(0);
 +
  -moz-transform: translateZ(0);
 +
  -ms-transform: translateZ(0);
 +
  -o-transform: translateZ(0);
 +
  transform: translateZ(0);
 +
}
 +
.cd-horizontal-timeline .events a::after {
 +
  /* this is used to create the event spot */
 +
  content: '';
 +
  position: absolute;
 +
  left: 50%;
 +
  right: auto;
 +
  -webkit-transform: translateX(-50%);
 +
  -moz-transform: translateX(-50%);
 +
  -ms-transform: translateX(-50%);
 +
  -o-transform: translateX(-50%);
 +
  transform: translateX(-50%);
 +
  bottom: -5px;
 +
  height: 12px;
 +
  width: 12px;
 +
  border-radius: 50%;
 +
  border: 2px solid #dfdfdf;
 +
  background-color: #f8f8f8;
 +
  -webkit-transition: background-color 0.3s, border-color 0.3s;
 +
  -moz-transition: background-color 0.3s, border-color 0.3s;
 +
  transition: background-color 0.3s, border-color 0.3s;
 +
}
 +
.no-touch .cd-horizontal-timeline .events a:hover::after {
 +
  background-color: #491A06;
 +
  border-color: #491A06;
 +
}
 +
.cd-horizontal-timeline .events a.selected {
 +
  pointer-events: none;
 +
}
 +
.cd-horizontal-timeline .events a.selected::after {
 +
  background-color: #491A06;
 +
  border-color: #491A06;
 +
}
 +
.cd-horizontal-timeline .events a.older-event::after {
 +
  border-color: #491A06;
 +
}
 +
@media only screen and (min-width: 1100px) {
 +
  .cd-horizontal-timeline {
 +
    margin: 6em auto;
 +
  }
 +
  .cd-horizontal-timeline::before {
 +
    /* never visible - this is used in jQuery to check the current MQ */
 +
    content: 'desktop';
 +
  }
 +
}
 +
 +
.cd-timeline-navigation a {
 +
  /* these are the left/right arrows to navigate the timeline */
 +
  position: absolute;
 +
  z-index: 1;
 +
  top: 50%;
 +
  bottom: auto;
 +
  -webkit-transform: translateY(-50%);
 +
  -moz-transform: translateY(-50%);
 +
  -ms-transform: translateY(-50%);
 +
  -o-transform: translateY(-50%);
 +
  transform: translateY(-50%);
 +
  height: 34px;
 +
  width: 34px;
 +
  border-radius: 50%;
 +
  border: 2px solid #dfdfdf;
 +
  /* replace text with an icon */
 +
  overflow: hidden;
 +
  color: transparent;
 +
  text-indent: 100%;
 +
  white-space: nowrap;
 +
  -webkit-transition: border-color 0.3s;
 +
  -moz-transition: border-color 0.3s;
 +
  transition: border-color 0.3s;
 +
}
 +
.cd-timeline-navigation a::after {
 +
  /* arrow icon */
 +
  content: '';
 +
  position: absolute;
 +
  height: 16px;
 +
  width: 16px;
 +
  left: 50%;
 +
  top: 50%;
 +
  bottom: auto;
 +
  right: auto;
 +
  -webkit-transform: translateX(-50%) translateY(-50%);
 +
  -moz-transform: translateX(-50%) translateY(-50%);
 +
  -ms-transform: translateX(-50%) translateY(-50%);
 +
  -o-transform: translateX(-50%) translateY(-50%);
 +
  transform: translateX(-50%) translateY(-50%);
 +
  background: url(https://static.igem.org/mediawiki/2017/a/a1/NJU_China_iGEM_2017_calendar_cd-arrow.svg) no-repeat 0 0;
 +
}
 +
.cd-timeline-navigation a.prev {
 +
  left: 0;
 +
  -webkit-transform: translateY(-50%) rotate(180deg);
 +
  -moz-transform: translateY(-50%) rotate(180deg);
 +
  -ms-transform: translateY(-50%) rotate(180deg);
 +
  -o-transform: translateY(-50%) rotate(180deg);
 +
  transform: translateY(-50%) rotate(180deg);
 +
}
 +
.cd-timeline-navigation a.next {
 +
  right: 0;
 +
}
 +
.no-touch .cd-timeline-navigation a:hover {
 +
  border-color: #491A06;
 +
}
 +
.cd-timeline-navigation a.inactive {
 +
  cursor: not-allowed;
 +
}
 +
.cd-timeline-navigation a.inactive::after {
 +
  background-position: 0 -16px;
 +
}
 +
.no-touch .cd-timeline-navigation a.inactive:hover {
 +
  border-color: #dfdfdf;
 +
}
 +
 +
.cd-horizontal-timeline .events-content {
 +
  position: relative;
 +
  width: 100%;
 +
  margin: 2em 0;
 +
  overflow: hidden;
 +
  -webkit-transition: height 0.4s;
 +
  -moz-transition: height 0.4s;
 +
  transition: height 0.4s;
 +
}
 +
.cd-horizontal-timeline .events-content li {
 +
  position: absolute;
 +
  z-index: 1;
 +
  width: 100%;
 +
  left: 0;
 +
  top: 0;
 +
  -webkit-transform: translateX(-100%);
 +
  -moz-transform: translateX(-100%);
 +
  -ms-transform: translateX(-100%);
 +
  -o-transform: translateX(-100%);
 +
  transform: translateX(-100%);
 +
  padding: 0 5%;
 +
  opacity: 0;
 +
  -webkit-animation-duration: 0.4s;
 +
  -moz-animation-duration: 0.4s;
 +
  animation-duration: 0.4s;
 +
  -webkit-animation-timing-function: ease-in-out;
 +
  -moz-animation-timing-function: ease-in-out;
 +
  animation-timing-function: ease-in-out;
 +
}
 +
.cd-horizontal-timeline .events-content li.selected {
 +
  /* visible event content */
 +
  position: relative;
 +
  z-index: 2;
 +
  opacity: 1;
 +
  -webkit-transform: translateX(0);
 +
  -moz-transform: translateX(0);
 +
  -ms-transform: translateX(0);
 +
  -o-transform: translateX(0);
 +
  transform: translateX(0);
 +
}
 +
.cd-horizontal-timeline .events-content li.enter-right, .cd-horizontal-timeline .events-content li.leave-right {
 +
  -webkit-animation-name: cd-enter-right;
 +
  -moz-animation-name: cd-enter-right;
 +
  animation-name: cd-enter-right;
 +
}
 +
.cd-horizontal-timeline .events-content li.enter-left, .cd-horizontal-timeline .events-content li.leave-left {
 +
  -webkit-animation-name: cd-enter-left;
 +
  -moz-animation-name: cd-enter-left;
 +
  animation-name: cd-enter-left;
 +
}
 +
.cd-horizontal-timeline .events-content li.leave-right, .cd-horizontal-timeline .events-content li.leave-left {
 +
  -webkit-animation-direction: reverse;
 +
  -moz-animation-direction: reverse;
 +
  animation-direction: reverse;
 +
}
 +
.cd-horizontal-timeline .events-content li > * {
 +
  max-width: 800px;
 +
  margin: 0 auto;
 +
}
 +
.cd-horizontal-timeline .events-content h2 {
 +
  font-weight: bold;
 +
  font-size: 15px;
 +
  font-family: proxima-nova,"Arial",Helvetica,sans-serif,"Playfair Display", serif;
 +
  font-weight: 300;
 +
  line-height: 1.2;
 +
  color: #2B1D08;
 +
}
 +
.cd-horizontal-timeline .events-content em {
 +
  display: block;
 +
  font-style: italic;
 +
  margin: 24px auto;
 +
}
 +
.cd-horizontal-timeline .events-content em::before {
 +
  content: '- ';
 +
}
 +
.cd-horizontal-timeline .events-content p {
 +
  font-size: 1.4rem;
 +
  color: #270D00;
 +
}
 +
.cd-horizontal-timeline .events-content em, .cd-horizontal-timeline .events-content p {
 +
  line-height: 1.6;
 +
}
 +
@media only screen and (min-width: 768px) {
 +
  .cd-horizontal-timeline .events-content h2 {
 +
    font-size: 4.5rem;
 +
  }
 +
  .cd-horizontal-timeline .events-content em {
 +
    font-size: 3.0rem;
 +
  }
 +
  .cd-horizontal-timeline .events-content p {
 +
    font-size: 2.0rem;
 +
  }
 +
}
 +
 +
@-webkit-keyframes cd-enter-right {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0%);
 +
  }
 +
}
 +
@-moz-keyframes cd-enter-right {
 +
  0% {
 +
    opacity: 0;
 +
    -moz-transform: translateX(100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -moz-transform: translateX(0%);
 +
  }
 +
}
 +
@keyframes cd-enter-right {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(100%);
 +
    -moz-transform: translateX(100%);
 +
    -ms-transform: translateX(100%);
 +
    -o-transform: translateX(100%);
 +
    transform: translateX(100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0%);
 +
    -moz-transform: translateX(0%);
 +
    -ms-transform: translateX(0%);
 +
    -o-transform: translateX(0%);
 +
    transform: translateX(0%);
 +
  }
 +
}
 +
@-webkit-keyframes cd-enter-left {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0%);
 +
  }
 +
}
 +
@-moz-keyframes cd-enter-left {
 +
  0% {
 +
    opacity: 0;
 +
    -moz-transform: translateX(-100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -moz-transform: translateX(0%);
 +
  }
 +
}
 +
@keyframes cd-enter-left {
 +
  0% {
 +
    opacity: 0;
 +
    -webkit-transform: translateX(-100%);
 +
    -moz-transform: translateX(-100%);
 +
    -ms-transform: translateX(-100%);
 +
    -o-transform: translateX(-100%);
 +
    transform: translateX(-100%);
 +
  }
 +
  100% {
 +
    opacity: 1;
 +
    -webkit-transform: translateX(0%);
 +
    -moz-transform: translateX(0%);
 +
    -ms-transform: translateX(0%);
 +
    -o-transform: translateX(0%);
 +
    transform: translateX(0%);
 +
  }
 +
}
 +
 
</style>
 
</style>
 
</head>
 
</head>

Revision as of 17:41, 30 October 2017

PROJECT

BCL2- siRNAs design

BCL2-si RNA – 1 sequence: CCGGGAGAACAGGGTATGATA
BCL2-si RNA – 2 sequence: TACGAGTGGGATGCTGGAGAT
BCL2-si RNA – 3 sequence: GTGGATGACTGAGTACCTGAA
BCL2-si RNA – 4 sequence: CTGCATCACTCTGGGTGCATA
These four parts are artificially designed RNA strands that function as the silencing tool for BCL2 gene’s expression through base-pairing with corresponding mRNAs. BCL2 protein is anti-apoptotic, mainly located in the cytoplasm side of the nuclear membrane, the endoplasmic reticulum and the outer membrane of mitochondria. By muting BCL2 gene’s expression, we can induce more cells’ apoptosis theoretically. We design four sequences and have a DNA synthesis company produce plasmids with codes inserted for each of them.

tPEP - lamp 2b fusion protein’s coding DNA fragment

tPEP is a peptide (CKGGRAKDC ) targeted to adipose tissue as the ligand of adipocytes’ prohibitin, whilst lamp 2b is a integrin for exosomes. This part is artificially designed to create a fusion protein, tPep at the outward end of lamp 2b. With the assistance of such proteins, exosomes are capable of carrying siRNAs precisely towards adipose tissues. When the tPep binds the prohibitin of the adipocyte and an exosome’ membrane merge into the adipocyte’s, it’s time for siRNAs to act.
We package BCL2-siRNAs into exosomes by transfecting HEK293 cells with a plasmid expressing BCL2-siRNA and then collect siRNA-encapsulated exosomes. When we inject the modified exosomes into the bloodstream, exosomes will specifically identify adipocytes and fuse with them under the direction of the tPep. Once siRNAs make their entrance into adipocytes, they cause the degradation of BCL2 mRNA via base-paring. Subsequently, adipocytes’ apoptosis increase.
To ensure the interference efficacy of BCL2 siRNA, four siRNA sequences targeting different sites of BCL2 mRNA were designed. After we transfected them into the mouse adipocytes, we could detect efficient knock-down of BCL2. Among these four sequences, BCL2-siRNA-2 exhibits the most powerful efficacy.
To prove the targeting property of tPep exosomes, we co-incubated them respectively with 3T3L1 cells (mouse adipose tissues) and C2C12 (mouse myoblasts). Also we set parallel experiments using exosomes without tPep-lamp 2b fusion protein. It was thrilling to see only tPep exosomes accumulated in the 3T3L1 cells while the other groups’ results were contrary. This fully illustrates tPep exosomes can target precisely to the adipose tissues.

NJU-CHINA

READ MORE