Team:AUC TURKEY

From 2014hs.igem.org

(Difference between revisions)
Line 37: Line 37:
<style type="text/css">
<style type="text/css">
/* ## GLOBAL VARIABLES #################### */
/* ## GLOBAL VARIABLES #################### */
-
@mainColor: red; /* first color on page*/
+
/* first color on page*/
-
@secondColor: grey; /* second color on page */
+
/* second color on page */
-
@time: 10s; /* slider animation time */
+
/* slider animation time */
-
@width: 800px;
+
-
@height: 400px;
+
-
 
+
/* ## STYLES ############################## */
/* ## STYLES ############################## */
@-webkit-keyframes progress {
@-webkit-keyframes progress {
-
   0%   { width: 0px; height: 5px; }
+
   0% {
-
   5% { width: 0px; height: 5px; }
+
    width: 0px;
-
   85% { width: inherit; height: 5px; }
+
    height: 5px;
-
   89% { width: inherit; height: 5px; }
+
  }
-
   91% { width: inherit; height: 0px; }
+
   5% {
-
   100% { width: inherit; height: 0px; }
+
    width: 0px;
 +
    height: 5px;
 +
  }
 +
   85% {
 +
    width: inherit;
 +
    height: 5px;
 +
  }
 +
   89% {
 +
    width: inherit;
 +
    height: 5px;
 +
  }
 +
   91% {
 +
    width: inherit;
 +
    height: 0px;
 +
  }
 +
   100% {
 +
    width: inherit;
 +
    height: 0px;
 +
  }
}
}
-
 
@-webkit-keyframes captions {
@-webkit-keyframes captions {
-
   3%   { height: 0px; }
+
   3% {
-
   7% { height: 55px; }
+
    height: 0px;
-
   82% { height: 55px; }
+
  }
-
   87% { height: 0px; }
+
   7% {
 +
    height: 55px;
 +
  }
 +
   82% {
 +
    height: 55px;
 +
  }
 +
   87% {
 +
    height: 0px;
 +
  }
}
}
-
 
@-webkit-keyframes fade {
@-webkit-keyframes fade {
-
   4%   { opacity: 0; }
+
   4% {
-
   15% { opacity: 1; }
+
    opacity: 0;
-
   74% { opacity: 1; }
+
  }
-
   86% { opacity: 0; }
+
   15% {
 +
    opacity: 1;
 +
  }
 +
   74% {
 +
    opacity: 1;
 +
  }
 +
   86% {
 +
    opacity: 0;
 +
  }
}
}
-
 
@-webkit-keyframes slice-top {
@-webkit-keyframes slice-top {
-
   0%   { -webkit-transform: scale(1) rotate(0deg); opacity: 1; top: 0; left: 0; }
+
   0% {
-
   90%   { -webkit-transform: scale(1) rotate(0deg); opacity: 1; top: 0; left: 0; }
+
    -webkit-transform: scale(1) rotate(0deg);
 +
    opacity: 1;
 +
    top: 0;
 +
    left: 0;
 +
  }
 +
   90% {
 +
    -webkit-transform: scale(1) rotate(0deg);
 +
    opacity: 1;
 +
    top: 0;
 +
    left: 0;
 +
  }
   /*  98%  { opacity: 1; } */
   /*  98%  { opacity: 1; } */
-
   100% { -webkit-transform: scale(1.116) rotate(-25deg); opacity: 0; top: -300px; left: -100px; }
+
   100% {
 +
    -webkit-transform: scale(1.116) rotate(-25deg);
 +
    opacity: 0;
 +
    top: -300px;
 +
    left: -100px;
 +
  }
}
}
-
 
@-webkit-keyframes slice-bottom {
@-webkit-keyframes slice-bottom {
-
   0%   { -webkit-transform: scale(1) rotate(0deg); opacity: 1; bottom: 0; right: 0; }
+
   0% {
-
   90%   { -webkit-transform: scale(1) rotate(0deg); opacity: 1; bottom: 0; right: 0; }
+
    -webkit-transform: scale(1) rotate(0deg);
 +
    opacity: 1;
 +
    bottom: 0;
 +
    right: 0;
 +
  }
 +
   90% {
 +
    -webkit-transform: scale(1) rotate(0deg);
 +
    opacity: 1;
 +
    bottom: 0;
 +
    right: 0;
 +
  }
   /*  98%  { opacity: 1; } */
   /*  98%  { opacity: 1; } */
-
   100% { -webkit-transform: scale(1.116) rotate(-25deg); opacity: 0; bottom: -300px; right: -100px; }
+
   100% {
 +
    -webkit-transform: scale(1.116) rotate(-25deg);
 +
    opacity: 0;
 +
    bottom: -300px;
 +
    right: -100px;
 +
  }
}
}
-
 
+
a:link,
-
a:link, a:link:before, a:link:after {
+
a:link:before,
-
  font-weight: normal;
+
a:link:after {
-
  text-decoration: none;
+
  font-weight: normal;
-
  color: white;
+
  text-decoration: none;
-
  content: "";
+
  color: white;
 +
  content: "";
}
}
-
 
a:visited {
a:visited {
-
  font-weight: normal;
+
  font-weight: normal;
-
  text-decoration: none;
+
  text-decoration: none;
-
  color: grey;
+
  color: grey;
}
}
-
 
a:focus {
a:focus {
-
  font-weight: bold;
+
  font-weight: bold;
-
  text-decoration: none;
+
  text-decoration: none;
}
}
-
 
a:hover {
a:hover {
-
  font-weight: normal;
+
  font-weight: normal;
-
  text-decoration: none;
+
  text-decoration: none;
-
  color: lightgrey;
+
  color: lightgrey;
}
}
-
 
a:active {
a:active {
-
  font-weight: normal;
+
  font-weight: normal;
-
  text-decoration: none;
+
  text-decoration: none;
-
  color: grey;
+
  color: grey;
}
}
-
 
#wrapper {
#wrapper {
-
   width: @width;
+
   width: 800px;
-
   height: @height;
+
   height: 400px;
   margin: 20px auto;
   margin: 20px auto;
   position: relative;
   position: relative;
}
}
-
 
.slider {
.slider {
-
   width: @width;
+
   width: 800px;
-
   height: @height;
+
   height: 400px;
-
   background-color: @secondColor;
+
   background-color: #808080;
   overflow: hidden;
   overflow: hidden;
   display: none;
   display: none;
   position: absolute;
   position: absolute;
}
}
-
 
.shadow {
.shadow {
   display: block;
   display: block;
Line 139: Line 190:
   display: none;
   display: none;
}
}
-
 
.controls {
.controls {
   position: absolute;
   position: absolute;
Line 147: Line 197:
   overflow: hidden;
   overflow: hidden;
}
}
-
 
.left {
.left {
   float: left;
   float: left;
-
   -moz-transform:rotate(-45deg);
+
   -moz-transform: rotate(-45deg);
-
   -webkit-transform:rotate(-45deg);
+
   -webkit-transform: rotate(-45deg);
-
   -o-transform:rotate(-45deg);
+
   -o-transform: rotate(-45deg);
-
   -ms-transform:rotate(-45deg);
+
   -ms-transform: rotate(-45deg);
-
   transform:rotate(-45deg);
+
   transform: rotate(-45deg);
}
}
-
 
.right {
.right {
   float: right;
   float: right;
-
   -moz-transform:rotate(135deg);
+
   -moz-transform: rotate(135deg);
-
   -webkit-transform:rotate(135deg);
+
   -webkit-transform: rotate(135deg);
-
   -o-transform:rotate(135deg);
+
   -o-transform: rotate(135deg);
-
   -ms-transform:rotate(135deg);
+
   -ms-transform: rotate(135deg);
-
   transform:rotate(135deg);
+
   transform: rotate(135deg);
}
}
-
 
.arrow {
.arrow {
   height: 50px;
   height: 50px;
Line 171: Line 218:
   border-top: 10px solid;
   border-top: 10px solid;
   border-left: 10px solid;
   border-left: 10px solid;
-
   border-color: rgba(255,255,255,0.3);
+
   border-color: rgba(255, 255, 255, 0.3);
   margin: 19.5% 30px;
   margin: 19.5% 30px;
   cursor: pointer;
   cursor: pointer;
   opacity: 0;
   opacity: 0;
-
   -webkit-animation: fade @time infinite;
+
   -webkit-animation: fade 10s infinite;
-
   -webkit-transition:border-color 0.2s;
+
   -webkit-transition: border-color 0.2s;
-
   -moz-transition:border-color 0.2s;
+
   -moz-transition: border-color 0.2s;
-
   -o-transition:border-color 0.2s;
+
   -o-transition: border-color 0.2s;
-
   transition:border-color 0.2s
+
   transition: border-color 0.2s;
}
}
-
 
.fade {
.fade {
-
  -webkit-animation: fade @time;
+
  -webkit-animation: fade 10s;
}
}
-
 
.arrow:hover {
.arrow:hover {
-
   border-color: rgba(255,255,255,0.7);
+
   border-color: rgba(255, 255, 255, 0.7);
}
}
-
 
.progressbar {
.progressbar {
   position: absolute;
   position: absolute;
   bottom: 0px;
   bottom: 0px;
   height: 5px;
   height: 5px;
-
   background-color: @mainColor;
+
   background-color: #ff0000;
   z-index: 999;
   z-index: 999;
-
   -webkit-animation: progress @time linear infinite;
+
   -webkit-animation: progress 10s linear infinite;
}
}
-
 
.captions {
.captions {
   position: absolute;
   position: absolute;
Line 204: Line 247:
   width: inherit;
   width: inherit;
   height: 0px;
   height: 0px;
-
 
+
   background-color: rgba(0, 0, 0, 0.4);
-
   background-color: rgba(0,0,0,0.4);
+
   -webkit-animation: captions 10s infinite;
-
   -webkit-animation: captions @time infinite;
+
   -webkit-transition: background-color 0.2s;
   -webkit-transition: background-color 0.2s;
   -moz-transition: background-color 0.2s;
   -moz-transition: background-color 0.2s;
   -o-transition: background-color 0.2s;
   -o-transition: background-color 0.2s;
-
   transition: background-color 0.2s
+
   transition: background-color 0.2s;
}
}
-
 
.captions:hover {
.captions:hover {
-
   background-color: rgba(0,0,0,0.8);
+
   background-color: rgba(0, 0, 0, 0.8);
   cursor: pointer;
   cursor: pointer;
-
 
 
}
}
-
 
.captions span {
.captions span {
   position: absolute;
   position: absolute;
Line 232: Line 271:
   cursor: pointer;
   cursor: pointer;
   -webkit-font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
-
   -webkit-animation: fade @time infinite;
+
   -webkit-animation: fade 10s infinite;
}
}
-
 
.images {
.images {
-
display: none;
+
  display: none;
   position: absolute;
   position: absolute;
   width: inherit;
   width: inherit;
   height: inherit;
   height: inherit;
}
}
-
 
.images img {
.images img {
   position: absolute;
   position: absolute;
Line 248: Line 285:
   height: inherit;
   height: inherit;
}
}
-
 
.image {
.image {
-
  position: absolute;
+
  position: absolute;
-
  width: inherit;
+
  width: inherit;
}
}
-
 
.slice-top {
.slice-top {
-
  top: 0;
+
  top: 0;
-
  height: 50%;
+
  height: 50%;
-
  background-color: green;
+
  background-color: green;
-
  -webkit-transform-origin: top center;
+
  -webkit-transform-origin: top center;
-
  -webkit-animation: slice-top @time infinite;
+
  -webkit-animation: slice-top 10s infinite;
}
}
-
 
.slice-bottom {
.slice-bottom {
-
  bottom: 0;
+
  bottom: 0;
-
  height: 50%;
+
  height: 50%;
-
  background-color: green;
+
  background-color: green;
-
  -webkit-transform-origin: bottom center;
+
  -webkit-transform-origin: bottom center;
-
  -webkit-animation: slice-bottom @time infinite;
+
  -webkit-animation: slice-bottom 10s infinite;
}
}
-
 
/*
/*
#slider:hover .progressbar, #slider:hover .arrow, #slider:hover .fade, #slider:hover .slice-top, #slider:hover .slice-bottom, #slider:hover .captions, #slider:hover .captions span {
#slider:hover .progressbar, #slider:hover .arrow, #slider:hover .fade, #slider:hover .slice-top, #slider:hover .slice-bottom, #slider:hover .captions, #slider:hover .captions span {
Line 278: Line 311:
  -webkit-animation-iteration-count: 1 !important;
  -webkit-animation-iteration-count: 1 !important;
} */
} */
-
 
/* LOADER */
/* LOADER */
@-webkit-keyframes rotate {
@-webkit-keyframes rotate {
-
   0% { opacity: .2; -webkit-transform: rotateZ(-360deg); }
+
   0% {
-
   50% { opacity: 1; -webkit-transform: rotateZ(0deg); }
+
    opacity: .2;
-
   100% { opacity: .2; -webkit-transform: rotateZ(360deg); }
+
    -webkit-transform: rotateZ(-360deg);
 +
  }
 +
   50% {
 +
    opacity: 1;
 +
    -webkit-transform: rotateZ(0deg);
 +
  }
 +
   100% {
 +
    opacity: .2;
 +
    -webkit-transform: rotateZ(360deg);
 +
  }
}
}
-
 
.loader {
.loader {
-
   top: ~"calc(50% - 53px)";
+
   top: calc(50% - 53px);
-
   left: ~"calc(50% - 53px)";
+
   left: calc(50% - 53px);
   height: 100px;
   height: 100px;
   width: 100px;
   width: 100px;
   display: none;
   display: none;
}
}
-
 
+
.loader,
-
.loader, .loader:before, .loader:after {
+
.loader:before,
 +
.loader:after {
   position: absolute;
   position: absolute;
   border: 3px solid transparent;
   border: 3px solid transparent;
-
   border-top: 3px solid @mainColor;
+
   border-top: 3px solid #ff0000;
   border-radius: 50%;
   border-radius: 50%;
   -webkit-animation: rotate linear infinite;
   -webkit-animation: rotate linear infinite;
Line 303: Line 344:
   content: '';
   content: '';
}
}
-
 
.loader:before {
.loader:before {
   height: 75px;
   height: 75px;
Line 311: Line 351:
   -webkit-animation-duration: 6s;
   -webkit-animation-duration: 6s;
}
}
-
 
.loader:after {
.loader:after {
   height: 50px;
   height: 50px;
Line 319: Line 358:
   -webkit-animation-duration: 3s;
   -webkit-animation-duration: 3s;
}
}
 +
</style>
</style>

Revision as of 15:08, 11 June 2014

Back to top Take a Tour




sdasd

Bildunterschrift

Retrieved from "http://2014hs.igem.org/Team:AUC_TURKEY"