Team:BIOSINT Mexico/notebook

From 2014.igem.org

(Difference between revisions)
Line 7: Line 7:
padding-left: 200px;
padding-left: 200px;
background: transparent url(quote.gif) no-repeat; }
background: transparent url(quote.gif) no-repeat; }
-
/* General Button Style */
+
@import url("http://fonts.googleapis.com/css?family=Montserrat:400,700");
-
.button{
+
button {
-
   position: relative;
+
   position: absolute;
-
display:block;
+
  top: 50%;
-
background: transparent;
+
  left: 50%;
-
width:200px;
+
  -webkit-transform: translate(-50%, -50%);
-
height:60px;
+
  -moz-transform: translate(-50%, -50%);
-
line-height:60px;
+
  -o-transform: translate(-50%, -50%);
-
text-align:center;
+
  -ms-transform: translate(-50%, -50%);
-
font-size:25px;
+
  transform: translate(-50%, -50%);
-
text-decoration:none;
+
  background: #1c222a;
-
text-transform:uppercase;
+
  border: 0;
-
margin:40px auto;
+
  line-height: 40px;
 +
  padding: 0px 40px;
 +
  -webkit-border-radius: 20px;
 +
  border-radius: 20px;
 +
  cursor: pointer;
 +
  -webkit-transition: all 0.3s ease;
 +
  -moz-transition: all 0.3s ease;
 +
  -o-transition: all 0.3s ease;
 +
  -ms-transition: all 0.3s ease;
 +
  transition: all 0.3s ease;
 +
  overflow: hidden;
 +
  outline: none;
 +
  font-family: 'Montserrat', sans-serif;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  font-size: 14px;
 +
  color: #72d2ff;
}
}
-
.button:before, .button:after {
+
button:hover:after {
-
width:200px;
+
-
  left: 0px;
+
-
height:27px;
+
-
  z-index: -1;
+
-
}
+
-
.violet{ color: violet; }
+
-
.indigo{ color: indigo; }
+
-
.slateblue{ color: slateblue; }
+
-
.mediumseagreen{ color: mediumseagreen; }
+
-
.yellowgreen{ color: yellowgreen; }
+
-
.orange{ color: orange; }
+
-
.indianred{ color: indianred; }
+
-
/* Button Border Style */
+
-
.violet:before,.violet:after {
+
-
border: 3px solid violet;
+
-
}
+
-
.indigo:before,.indigo:after {
+
-
border: 3px solid indigo;
+
-
}
+
-
.slateblue:before,.slateblue:after {
+
-
border: 3px solid slateblue;
+
-
}
+
-
.mediumseagreen:before,.mediumseagreen:after {
+
-
border: 3px solid mediumseagreen;
+
-
}
+
-
.yellowgreen:before,.yellowgreen:after {
+
-
border: 3px solid yellowgreen;
+
-
}
+
-
.orange:before,.orange:after {
+
-
border: 3px solid orange;
+
-
}
+
-
.indianred:before,.indianred:after {
+
-
border: 3px solid indianred;
+
-
}
+
-
 
+
-
.button:before{
+
-
  position: absolute;
+
   content: '';
   content: '';
-
  border-bottom: none;
 
-
  -webkit-transform: perspective(15px) rotateX(5deg);
 
-
  -moz-transform: perspective(15px) rotateX(5deg);
 
-
  transform: perspective(15px) rotateX(5deg); 
 
-
}
 
-
.button:after{
 
   position: absolute;
   position: absolute;
-
   top: 32px;
+
   width: 200px;
-
   content: '';
+
   left: -200px;
-
   border-top: none;
+
   -webkit-transform: skewX(-20deg);
-
   -webkit-transform: perspective(15px) rotateX(-5deg);
+
   -moz-transform: skewX(-20deg);
-
   -moz-transform: perspective(15px) rotateX(-5deg);
+
  -o-transform: skewX(-20deg);
-
   transform: perspective(15px) rotateX(-5deg);
+
   -ms-transform: skewX(-20deg);
 +
  transform: skewX(-20deg);
 +
   background-image: -webkit-linear-gradient(left, transparent, rgba(255,255,255,0.06), transparent);
 +
  background-image: -moz-linear-gradient(left, transparent, rgba(255,255,255,0.06), transparent);
 +
  background-image: -o-linear-gradient(left, transparent, rgba(255,255,255,0.06), transparent);
 +
  background-image: -ms-linear-gradient(left, transparent, rgba(255,255,255,0.06), transparent);
 +
  background-image: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
 +
  height: 50px;
 +
  -webkit-animation: shine 0.7s ease;
 +
  -moz-animation: shine 0.7s ease;
 +
  -o-animation: shine 0.7s ease;
 +
  -ms-animation: shine 0.7s ease;
 +
  animation: shine 0.7s ease;
}
}
-
 
+
@-moz-keyframes shine {
-
/* Button Hover Style */
+
  100% {
-
.violet:hover:before, .violet:hover:after {
+
    left: 200px;
-
background: violet;
+
  }
}
}
-
.indigo:hover:before, .indigo:hover:after {
+
@-webkit-keyframes shine {
-
background: indigo;
+
  100% {
 +
    left: 200px;
 +
  }
}
}
-
.mediumseagreen:hover:before, .mediumseagreen:hover:after {
+
@-o-keyframes shine {
-
background: mediumseagreen;
+
  100% {
 +
    left: 200px;
 +
  }
}
}
-
.slateblue:hover:before, .slateblue:hover:after {
+
@-ms-keyframes shine {
-
background: slateblue;
+
  100% {
 +
    left: 200px;
 +
  }
}
}
-
.yellowgreen:hover:before, .yellowgreen:hover:after {
+
@keyframes shine {
-
background: yellowgreen;
+
  100% {
-
}
+
    left: 200px;
-
.orange:hover:before, .orange:hover:after {
+
  }
-
background: orange;
+
-
}
+
-
.indianred:hover:before, .indianred:hover:after {
+
-
background: indianred;
+
}
}
-
.button:hover{
 
-
color:#fff;
 
-
}
 
  </style>
  </style>
<body>
<body>
Line 108: Line 92:
<div>
<div>
-
<a href="https://2014.igem.org/Team:BIOSINT_Mexico/protocols" class="button mediumseagreen">PROTOCOLS</a>
+
<a href="https://2014.igem.org/Team:BIOSINT_Mexico/protocols"><button style="align:center; position:relative; top:20px; left: 100px;">Protocols</button></a>
-
<a href="https://2014.igem.org/Team:BIOSINT_Mexico/lab%20records" class="button yellowgreen">LAB RECORDS</a>
+
<a href="https://2014.igem.org/Team:BIOSINT_Mexico/protocols"><button style="align:center; position:relative; top:20px; left: 400px;">Lab Records</button></a>
</div>
</div>
</body></html>
</body></html>

Revision as of 03:10, 18 October 2014

BSMexNotebookBanner.png

NOTEBOOK

Welcome to our records, here you will find both the date to date calendar- since the summer until this month- and the sketch of all the protocols considered in this project. We included daily record of our laboratory work per month. Our numerous team has come together since september 2013 and have been laboring since then: coming up with the theoretical work, designing our parts, gathering our materials and getting in touch with potential sponsors. This summarizes primordially our wet lab experiences.

Retrieved from "http://2014.igem.org/Team:BIOSINT_Mexico/notebook"