Difference between revisions of "Team:Greece/our team"

Line 6: Line 6:
 
<body>
 
<body>
 
<!-- Navigation Bar -->
 
<!-- Navigation Bar -->
−
 
+
            <div id='main-wraper'>
−
              <div id='main-wraper'>
+
 
                     <!--<div style='position:absolute;z-index:-1000;border:1px solid black;height:500px;width:100px;background:#e8e4f5;'>.</div>-->
 
                     <!--<div style='position:absolute;z-index:-1000;border:1px solid black;height:500px;width:100px;background:#e8e4f5;'>.</div>-->
 
    <div class='menu_wrap'></div>
 
    <div class='menu_wrap'></div>
Line 17: Line 16:
 
<!--<li class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/home'>HOME</a></li>-->
 
<!--<li class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/home'>HOME</a></li>-->
 
<span id='just_to_align'>
 
<span id='just_to_align'>
−
<li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/our_project'>PROJECT</a></li>
+
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/our_project'>PROJECT</a></li>
−
<li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/modeling'>MODELING</a></li>
+
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/modeling'>MODELING</a></li>
−
<li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/human_practices'>HUMAN PRACTICES</a></li>
+
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/human_practices'>HUMAN PRACTICES</a></li>
−
<li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/contribution'>CONTRIBUTION</a></li>
+
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/contribution'>CONTRIBUTION</a></li>
−
<li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/our_team'>TEAM</a></li>
+
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/our_team'>TEAM</a></li>
 
</span>
 
</span>
 
</ul>
 
</ul>
 
</nav>
 
</nav>
 
                 </div>
 
                 </div>
−
 
−
<!-- Parallel Animated Sectors -->
 
−
 
−
<span style='display:none;' id='sector_box'>
 
−
<a name='img1' href='#' class='scaleme' ><span class='parallelogram skew_by_left'>
 
−
                          <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='first_slice' src='http://cldup.com/0-qq3bcDfK.jpg' ></img></span></a>
 
−
 
−
<a name='img2' href='#' class='scaleme' ><span style='margin-left:-10%' class='parallelogram'>
 
−
                          <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='second_slice' src='http://cldup.com/qQxyWKshfd.jpg'></img></span></a>
 
−
 
−
<a name='img3' href='#' class='scaleme' ><span class='parallelogram'>
 
−
                          <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='third_slice' src='http://cldup.com/0-qq3bcDfK.jpg'></img></span></a>
 
−
 
−
<a href='#' class='scaleme' ><span style='margin-right:-10%' class='parallelogram'>
 
−
                            <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='fourth_slice' src='http://cldup.com/qQxyWKshfd.jpg'></img></span></a>
 
−
 
−
<a href='#' class='scaleme' ><span class='parallelogram skew_by_left'>
 
−
                            <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='fifth_slice' src='http://cldup.com/qQxyWKshfd.jpg'></img></span></a>
 
−
</span>
 
  
 
<!-- The Navigation Menu -->
 
<!-- The Navigation Menu -->
Line 166: Line 146:
 
   display:none;
 
   display:none;
 
}
 
}
−
 
−
/************************************************************
 
−
 
−
************************************************************/
 
 
</style>
 
</style>
−
 
−
<!-- Animating Parallel Sectors-->
 
−
<style>
 
−
/* The key to change for the effect is the overflow hidden of .parallelogram*/
 
−
#sector_box{
 
−
position:absolute;
 
−
padding: 0px;
 
−
margin:-137px 0px 0px 0px;
 
−
width: 100%;
 
−
text-align:center;
 
−
        z-index:100;
 
−
        height: 800px;
 
−
        display:block;
 
−
/*right:20px;
 
−
left:-20px;*/
 
−
}
 
−
#sector_box .parallelogram:not(.skew_by_left){
 
−
  position:relative;
 
−
  margin: 0px;
 
−
  padding: 0px;
 
−
  width: 23%;
 
−
  height: 830px;
 
−
  display: inline-block; 
 
−
  transform: matrix(1.1,0,-0.4,0.866,0,0);
 
−
  overflow:hidden;
 
−
  z-index:100;
 
−
}
 
−
 
−
.skew_by_left{
 
−
margin: 0px;
 
−
padding:0px;
 
−
width: 23.8%;
 
−
height: 830px;
 
−
display: inline-block; 
 
−
overflow:hidden;
 
−
transform: matrix(1.1,0,0,0.866,0,0);
 
−
z-index:-1000;
 
−
}
 
−
 
−
#sector_box .scaleme{
 
−
-webkit-transform: all 1s;
 
−
-moz-transform: all 1s;
 
−
-o-transform: all 1s;
 
−
transform: all 1s;
 
−
        overflow:hidden;
 
−
}
 
−
 
−
#sector_box .scaleme:hover img{
 
−
-webkit-transform: scale(1.05);
 
−
-moz-transform: scale(1.05);
 
−
-o-transform: scale(1.05);
 
−
transform: scale(1.05);
 
−
 
−
-webkit-transition: all 1s;
 
−
-moz-transition: all 1s;
 
−
transition: all 1s;
 
−
}
 
−
 
−
#sector_box .scaleme .parallelogram img{
 
−
position:relative;
 
−
width:100%;
 
−
height:100%;
 
−
}
 
−
</style>
 
−
 
−
 
  
 
<!--Responsive stylesheets-->
 
<!--Responsive stylesheets-->
Line 278: Line 188:
 
.logo{
 
.logo{
 
margin: -21px 0px 0px -65px;
 
margin: -21px 0px 0px -65px;
−
}
 
−
#sector_box{
 
−
margin:-137px 0px 0px 0px;
 
−
left: 0px;
 
−
right: 0px;
 
−
width: 1349px;
 
−
                display:none;
 
−
}
 
−
 
−
#sector_box .parallelogram:not(.skew_by_left){
 
−
width: 312px;
 
−
                height: 730px;
 
−
}
 
−
 
−
.skew_by_left{
 
−
width: 315px;
 
−
                height: 730px;
 
 
}
 
}
 
}
 
}
  
 
@media screen and (min-width: 1367px) and (max-width: 1921px){
 
@media screen and (min-width: 1367px) and (max-width: 1921px){
−
 
+
 
−
        #sector_box {
+
−
                margin: -143px 0px 0px 0px;
+
−
        }
+
−
 
+
−
        #sector_box .parallelogram:not(.skew_by_left){
+
−
        height: 910px;
+
−
}
+
−
+
−
.skew_by_left{
+
−
                height: 910px;
+
−
}
+
−
       
+
 
         .logo{
 
         .logo{
 
                 margin: -18px 0px 0px -52px;
 
                 margin: -18px 0px 0px -52px;
Line 330: Line 211:
 
}
 
}
 
</style>
 
</style>
−
 
−
 
−
 
  
 
<!--Styling script-->
 
<!--Styling script-->

Revision as of 22:16, 4 August 2017