Template:Team:KIT-Kyoto/first

<html>
<div class="clear"><hr /></div>
<div id="first">
<img src="https://static.igem.org/mediawiki/2014/7/7f/Kitlogo.png" width="140" height="140" alt="kit" style="">
</div>
<div id="first_box_left"></div>
<div id="first_box_right"></div>
<div id="first_box_top"></div>
<div id="first_box_bottom"></div>

<script type="text/javascript">
$(function(){
        var main = $("#container,#SideMenu,#igem,#page-top,#mobilemenu");
	main.css({opacity:'0'});
        $("#first").css({opacity:'0'});
        setTimeout(function(){
        $("#first_box_left").animate({left:"50%"},400);
        $("#first_box_right").animate({right:"50%"},400);
        $("#first_box_top").animate({top:"50%"},400);
        $("#first_box_bottom").animate({bottom:"50%"},400);
        },1000);
        setTimeout(function(){
        $("#first").animate({opacity:'1'},800);
        $("#first_box_left,#first_box_right,#first_box_top,#first_box_bottom").animate({opacity:'0'},400);
        },1400);
	setTimeout(function(){
        main.stop().animate({opacity:'1'},3000);
        $("#first").stop().animate({opacity:'0'},1000);
        },3000);
});  
</script>

<style type="text/css">
#first{
position:fixed;
width:300px;
height:300px;
top:50%;
left:50%;
margin-top:-150px;
margin-left:-150px;
background-color:rgba(300,300,300,0.7);
text-align:center;
}

#first img{
position:fixed;
top:50%;
left:50%;
margin-top:-70px;
margin-left:-70px;
}

#first_box_left,#first_box_right,#first_box_top,#first_box_bottom{
position:fixed;
height:300px;
width:300px;
}

#first_box_left,#first_box_right{
top:50%;
margin-top:-150px;
}

#first_box_top,#first_box_bottom{
left:50%;
margin-left:-150px;
}

#first_box_left{
left:-150px;
border-top:2px solid rgba(300,300,300,0.5);
margin-left:-150px;
}
#first_box_right{
right:-150px;
border-bottom:2px solid rgba(300,300,300,0.5);
margin-right:-150px;
}

#first_box_top{
top:-150px;
border-right:2px solid rgba(300,300,300,0.5);
margin-top:-150px;
}
#first_box_bottom{
bottom:-150px;
border-left:2px solid rgba(300,300,300,0.5);
margin-bottom:-150px;
}
#first a:link,#first a:visited,#first a:active{
color:forestgreen;
}
#first a:hover{
color:lime;
}
</style>