Difference between revisions of "Team:Greece/modeling"

Line 74: Line 74:
 
                           <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='first_slice' src='http://cldup.com/0-qq3bcDfK.jpg' ></img></span></a>
 
                           <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'>
+
<a name='img2' href='#' class='scaleme' ><span id='span_left' 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>
 
                           <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='second_slice' src='http://cldup.com/qQxyWKshfd.jpg'></img></span></a>
  
Line 80: Line 80:
 
                           <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='third_slice' src='http://cldup.com/0-qq3bcDfK.jpg'></img></span></a>
 
                           <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'>
+
<a href='#' class='scaleme' ><span id='span_right' 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>
 
                             <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='fourth_slice' src='http://cldup.com/qQxyWKshfd.jpg'></img></span></a>
  
Line 214: Line 214:
 
<!-- Animating Parallel Sectors-->
 
<!-- Animating Parallel Sectors-->
 
<style>
 
<style>
 +
 +
#span_left{ margin-left: -10%; }
 +
#span_right{ margin-right: -10%; }
 +
 
/* The key to change for the effect is the overflow hidden of .parallelogram*/
 
/* The key to change for the effect is the overflow hidden of .parallelogram*/
 
#sector_box{
 
#sector_box{
Line 365: Line 369:
 
           margin-left: 3%;
 
           margin-left: 3%;
 
     }
 
     }
 +
@media screen and (min-width: 1367px) and (max-width: 1441px){
 +
.skew_by_left{ width: 24.8%; }
 +
#sector_box{ margin:-147px 0px 0px 0px; }
 +
#span_left{ margin: -11%; }
 +
#span_right{ margin: -11%; }
 +
}
 
}
 
}
  

Revision as of 16:52, 15 August 2017