Difference between revisions of "Team:Tec-Monterrey/sandbox"

m
m
Line 13: Line 13:
  
 
     <style>
 
     <style>
 +
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW ***************************************************/
 +
/**********************************************************************************************************************/
 +
.slideshow {
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
background-color: #222222;
 +
}
 +
 +
.slideshow .right-arrow-pane, .basic-page .slideshow .left-arrow-pane{
 +
position:absolute;
 +
right:0;
 +
top:0;
 +
height:100%;
 +
width:100px;
 +
background: rgba(0,0,0,0);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    z-index:75;
 +
    cursor:pointer;
 +
}
 +
 +
.slideshow .left-arrow-pane {
 +
left:0;
 +
width:82px;
 +
right:auto;
 +
}
 +
 +
.slideshow .right-arrow-pane .arrow, .basic-page .slideshow .left-arrow-pane .arrow {
 +
position:absolute;
 +
top:50%;
 +
left:30%;
 +
transform:translate(-50%, -50%);
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
    /*z-index:50;*/
 +
}
 +
 +
.slideshow .left-arrow-pane .arrow {
 +
right:30%;
 +
left:auto;
 +
transform: translate(50%, -50%);
 +
}
 +
 +
.slideshow .right-arrow-pane .arrow div, .basic-page .slideshow .left-arrow-pane .arrow div{
 +
height:50px;
 +
width:50px;
 +
transform:rotate(45deg);
 +
border-style: solid;
 +
border-color: rgba(255, 255, 255, .5);
 +
border-width:5px 5px 0 0;
 +
-webkit-transition: all 0.3s;
 +
    -moz-transition: all 0.3s;
 +
    -ms-transition: all 0.3s;
 +
    -o-transition: all 0.3s;
 +
    transition: all 0.3s;
 +
}
 +
 +
.slideshow .left-arrow-pane .arrow div{
 +
transform:rotate(-135deg);
 +
}
 +
 +
.slideshow .right-arrow-pane:hover, .basic-page .slideshow .left-arrow-pane:hover {
 +
background:rgba(0,0,0,.25);
 +
}
 +
 +
.slideshow .right-arrow-pane:hover .arrow {
 +
left:35%;
 +
}
 +
 +
.slideshow .left-arrow-pane:hover .arrow {
 +
right:35%;
 +
}
 +
 +
.slideshow .right-arrow-pane:hover .arrow div, .basic-page .slideshow .left-arrow-pane:hover .arrow div{
 +
border-color:rgba(255,255,255,1);
 +
}
 +
 +
.slideshow .bubbles {
 +
position:absolute;
 +
width:100%;
 +
height:40px;
 +
bottom:20px;
 +
left:0;
 +
/*background-color:blue;*/
 +
display:flex;
 +
justify-content: center;
 +
z-index:50;
 +
}
 +
 +
.slideshow .bubbles div {
 +
height:40px;
 +
width:40px;
 +
border-radius:25px;
 +
border:solid white 5px;
 +
margin:0 20px 0 0;
 +
cursor:pointer;
 +
}
 +
 +
.slideshow .bubbles div:last-child {
 +
margin-right: 0;
 +
}
 +
 +
.slideshow .bubbles div:hover {
 +
background-color: white;
 +
}
 +
 +
.slideshow .bubbles div.active {
 +
background-color:white;
 +
}
 +
 +
.slideshow .pauseBtn {
 +
position:absolute;
 +
height:60px;
 +
width:60px;
 +
bottom:20px;
 +
right:150px;
 +
background:rgba(34,34,34,.75);
 +
border-radius:10px;
 +
z-index:60;
 +
}
 +
 +
.slideshow .pauseBtn .bars {
 +
visibility: hidden;
 +
position:absolute;
 +
top:50%;
 +
left:50%;
 +
transform:translate(-50%, -50%);
 +
width:30px;
 +
height:35px;
 +
}
 +
 +
.slideshow .pauseBtn .bars > div{
 +
float:right;
 +
width:10px;
 +
height:100%;
 +
background:rgba(255,255,255,.75);
 +
}
 +
 +
.slideshow .pauseBtn .bars > div:first-child {
 +
float:left;
 +
}
 +
 +
.slideshow .pauseBtn:hover {
 +
background: rgba(34,34,34,1);
 +
cursor: pointer;
 +
}
 +
 +
.slideshow .pauseBtn:hover .bars > div {
 +
background: rgba(255,255,255,1);
 +
}
 +
 +
.slideshow .pauseBtn .tri {
 +
visibility: hidden;
 +
position: absolute;
 +
top:50%;
 +
left:50%;
 +
transform: translate(-50%, -50%);
 +
}
 +
 +
.slideshow .pauseBtn .tri > div {
 +
width: 0;
 +
height: 0;
 +
border-top: 18px solid transparent;
 +
border-left-style: solid;
 +
border-left-width: 30px;
 +
border-left-color:rgba(255,255,255,.75);
 +
border-bottom: 18px solid transparent;
 +
}
 +
 +
.slideshow .pauseBtn:hover .tri > div{
 +
border-left-color:rgba(255,255,255,1);
 +
}
 +
 +
.slideshow .pauseBtn .tri.active, .basic-page .slideshow .pauseBtn .bars.active {
 +
visibility: visible;
 +
}
 +
 +
.slideshow .content {
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100%;
 +
height:100%;
 +
}
 +
 +
.slideshow .content .slide {
 +
visibility:hidden;
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
height:100%;
 +
width:100%;
 +
overflow:hidden;
 +
-webkit-transition: left 1s;
 +
    -moz-transition: left 1s;
 +
    -ms-transition: left 1s;
 +
    -o-transition: left 1s;
 +
    transition: left 1s;
 +
}
 +
 +
.slideshow .content .slide:first-child {
 +
visibility:visible;
 +
left:0;
 +
z-index: 1;
 +
}
 +
 +
.slideshow .content .slide > img:first-child {
 +
position:absolute;
 +
top:0;
 +
left:0;
 +
width:100vw;
 +
height:auto;
 +
}
 +
 +
.slideshow .content .slide.active {
 +
left:0 !important;
 +
}
 +
 +
.slideshow .content .slide.left {
 +
left:-100vw !important;
 +
}
 +
 +
.slideshow .content .slide.right {
 +
left:100vw !important;
 +
}
 +
 +
.splash .slideshow .title {
 +
top:65%;
 +
left:200px;
 +
}
 +
 +
#HQ_page .slideshow .title p {
 +
font-size:7em;
 +
}
 +
 +
.notransition {
 +
-webkit-transition: none !important;
 +
    -moz-transition: none !important;
 +
    -ms-transition: none !important;
 +
    -o-transition: none !important;
 +
    transition: none !important;
 +
}
 +
/**********************************************************************************************************************/
 +
/**********************************************************************************************************************/
 +
/******************************************************* SLIDESHOW *****************************************************/
 +
 +
 
#scroll-section {
 
#scroll-section {
 
   display: contents;
 
   display: contents;
Line 330: Line 588:
 
             });
 
             });
 
     </script>
 
     </script>
−
 
+
    <script type="text/javascript" src="https://2018.igem.org/Team:Purdue/JQuery/SlideShow?
 +
action=raw&ctype=text/javascript"></script>
 
     </body>
 
     </body>
 
</html>
 
</html>
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}
 
{{:Team:Tec-Monterrey/Templates/Tec-Monterrey_Footer}}

Revision as of 00:45, 14 October 2018

Skip

E. coding
Tec-Monterrey
Seccion Acevedo Interactive Entertainement System Co. S.A. de C.V. Ind.

Infection

Detection

Test

Contact Us

Av. Eugenio Garza Sada 2501

64849 Monterrey, Mexico

Sponsors