Difference between revisions of "Team:Vilnius-Lithuania/test"

Line 1: Line 1:
 
<html>
 
<html>
 
<style>
 
<style>
−
.s5_is_slide{
+
    .boxgridBig, .boxgridMedium {
−
  float: left;  
+
        height: 200px;
−
  position: absolute;
+
    }
−
  z-index:0;
+
    .boxgridBig {
−
  overflow: hidden;
+
        width: 241px;
−
  left:0;  
+
        float: left;
−
  bottom:0; 
+
    }
−
  background:#000000;
+
    .boxgridMedium {
−
  visibility: visible;  
+
        width: 298px;
−
  margin:0px !important;
+
        float: left;
−
  padding:0px !important;
+
    }
−
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+
    .boxgrid {
−
  filter: alpha(opacity=0);
+
        overflow: hidden;
−
  -moz-opacity: 0;
+
        position: relative;
−
  -khtml-opacity: 0;
+
    }
−
  opacity: 0;
+
−
}
+
  
−
.s5_is{  
+
    .boxgrid img{
−
  overflow: hidden;  
+
        position: absolute;
−
  position: relative;
+
        top: 0;
−
  padding:0;
+
        left: 0;
−
  cursor:pointer;
+
        border: 0;
−
}
+
    }
  
−
.s5_is_display {
+
    .boxcaption{
−
  position: absolute;  
+
        float: left;
−
  top: 0;
+
        position: absolute;
−
  z-index:1;
+
        background: #000;
−
  font-size:1em;
+
        width: 100%;
−
  padding-left:15px;
+
        opacity: .8;
−
  padding-right:15px;
+
        padding: 10px;
−
  padding-bottom:15px;
+
        /* For IE 5-7 */
−
  color:#CCCCCC;
+
        filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
−
}
+
        /* For IE 8 */
 +
        -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
 +
    }
 +
    .boxcaption:hover {
 +
        text-decoration: none;
 +
    }
  
−
.s5_is_display h3 {
+
    h2.onBlack {
−
  white-space:nowrap;
+
        color:white;
−
  padding-top:15px;
+
        margin-top: -5px;
−
  padding-bottom:15px;
+
        border: none;
−
  font-size:1.1em;
+
        Font-size: 26px;
−
  color:#FFFFFF;
+
        padding-bottom: 0px;
−
}
+
        line-height:1em;
 +
    }
 +
    p.onBlack {
 +
        color:white;
 +
        margin-right:18px;
 +
        font-size: 14px;
 +
        font-weight: bold;
 +
    }
 +
    p.onBlackIntro {
 +
        font-size:17px;
 +
        font-style: italic;
 +
        color:white;
 +
        margin-right:10px;
 +
        margin-bottom:10px;
 +
    }
 
</style>
 
</style>
−
<div class="row">
+
<script src="https://2013.igem.org/Team:SDU-Denmark/core/jquerytools?action=raw&ctype=text/javascript" type="text/javascript" ></script>
−
    <div class="col-md-12" style="padding-top: 10px;">
+
</html>
−
        <script src="http://www.atavismonline.com//media/system/js/mootools-core.js" type="text/javascript"></script>
+
 
−
        <script src="http://www.atavismonline.com//media/system/js/mootools-more.js" type="text/javascript"></script>
+
<html>
−
        <script type="text/javascript" src="http://www.atavismonline.com/templates/cleanout/js/s5_info_slide.js"></script>
+
<script type="text/javascript">
−
         <div id="s5_body">
+
    $(document).ready(function() {
−
             <div class="custom-centered">
+
        $('#box1').hover(function(){
−
                <div class="s5_is" style="float: left; width: 243px; height: 200px; margin-right: 10px;"><img src="" style="background-color: #784136;" width="243" height="200" border="0" />
+
            var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px";
−
                    <div class="s5_is_slide">
+
            $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160});
−
                        <h3 style="margin-top: 0px;">ApplicationApplicationApplicationApplicationApplicationApplicationApplicationApplicationApplication</h3>
+
        }, function() {
−
                        Some<br /><br />Text</div>
+
            $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
−
                </div>
+
        });
−
             </div>
+
        $('#box2').hover(function(){
 +
            var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px";
 +
            $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160});
 +
         }, function() {
 +
            $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
 +
        });
 +
        $('#box3').hover(function(){
 +
            var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px";
 +
             $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160});
 +
        }, function() {
 +
            $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
 +
        });
 +
        $('#box4').hover(function(){
 +
            var smallTop = $('#box1').height() - $(".cover", this).height() -10 +"px";
 +
            $(".cover", this).stop().animate({top:smallTop},{queue:false,duration:160});
 +
        }, function() {
 +
            $(".cover", this).stop().animate({top:'160px'},{queue:false,duration:160});
 +
        });
 +
    });
 +
</script>
 +
 
 +
    <div class="boxgrid boxgridBig" id="box1" style="margin-right: 10px;">
 +
        <img src="" width="242" height="200" style="background-color: #784136;">
 +
        <div class="cover boxcaption" style="top: 160px">
 +
            <h2 class="onBlack">Title</h2>
 +
            <p class="onBlackIntro"></p>
 +
             <p class="onBlack">Learn more...</p>
 
         </div>
 
         </div>
−
        <script type='text/javascript'>
 
−
            $$('.s5_is_slide').each(function(item,index){item.wrapInner(new Element('div',{'class':'s5_is_display'}));});
 
−
            var options = {wrapperId:"s5_body"};
 
−
            new Slidex(options);
 
−
        </script>
 
 
     </div>
 
     </div>
−
</div>
+
 
 
</html>
 
</html>

Revision as of 14:52, 24 July 2015

Title

Learn more...