Difference between revisions of "Team:Greece/Model"

(Blanked the page)
Line 1: Line 1:
 +
<html>
 +
<head>
 +
    <!--<link type='text/css' rel='stylesheet' href='parallels.css' />
 +
    <link type='text/css' rel='stylesheet' href='navigation_bar.css' />
 +
    <script type='text/javascript' src='https://cldup.com/HJtlSwy2qT.js'></script>-->
  
 +
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 +
 +
<script>
 +
          window.onload = function (){
 +
                void(document.getElementById('sector_box').style.display= 'block');
 +
                       
 +
                // Change color of current link
 +
                $('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
 +
 +
          }
 +
</script>
 +
<noscript>window.onload = function (){ void(document.getElementById('sector_box').style.display= 'block'); }</noscript>
 +
<script>
 +
function caress(ide,num){
 +
if(num == 1){
 +
var new_src = document.getElementById('new').querySelector('#'+ide+'_new').src;
 +
void(document.getElementById(ide).src = new_src);
 +
console.log('New source of '+ide+ ' : ' + new_src);
 +
}else{
 +
var old_src = document.getElementById('old').querySelector('#'+ide+'_old').src;
 +
void(document.getElementById(ide).src = old_src);
 +
console.log('New source of '+ide+ ' : ' + old_src);
 +
}
 +
}
 +
</script>
 +
</head>
 +
<body>
 +
<!-- Preloading Images -->
 +
<div style='display:none' id='old'>
 +
<img id='first_slice_old' src = 'http://cldup.com/qQxyWKshfd.jpg' />
 +
<img id='second_slice_old' src = 'http://cldup.com/qQxyWKshfd.jpg' />
 +
<img id='third_slice_old' src = 'http://cldup.com/0-qq3bcDfK.jpg' />
 +
<img id='fourth_slice_old' src = 'http://cldup.com/qQxyWKshfd.jpg' />
 +
<img id='fifth_slice_old' src = 'http://cldup.com/qQxyWKshfd.jpg' />
 +
</div>
 +
<div style='display:none' id='new'>
 +
<img id='first_slice_new' src = 'http://cldup.com/X6lypLf9dQ.jpg' />
 +
<img id='second_slice_new' src = 'http://cldup.com/9FotBSNnyT.jpg' />
 +
<img id='third_slice_new' src = 'http://cldup.com/U5fH97rZBx.jpg' />
 +
<img id='fourth_slice_new' src = 'http://cldup.com/X6lypLf9dQ.jpg' />
 +
<img id='fifth_slice_new' src = 'http://cldup.com/X6lypLf9dQ.jpg' />
 +
</div>
 +
 +
<!-- Navigation Bar -->
 +
            <div id='main-wraper'>
 +
                    <!--<div style='position:absolute;z-index:-1000;border:1px solid black;height:500px;width:100px;background:#e8e4f5;'>.</div>-->
 +
    <div class='menu_wrap'></div>
 +
<nav class='menu'>
 +
<ul class='clearfix' id='list'>
 +
<li><a target='_self' href='https://2017.igem.org/Team:Greece/home'>
 +
<img class='logo' id='logo' src='https://cldup.com/0IRxBwvTKJ.png' /></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'>
 +
  <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/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/our_team'>TEAM</a></li>
 +
</span>
 +
</ul>
 +
</nav>
 +
                </div>
 +
 +
<!-- Parallel Animated Sectors -->
 +
 +
<span style='display:none;' id='sector_box'>
 +
<a 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 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>
 +
 +
<a 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 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>
 +
 +
<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 -->
 +
<style>
 +
*{
 +
  font-family: Century Gothic;
 +
}
 +
 +
body{ background: #ffffff }
 +
 +
a{
 +
text-decoration: none;
 +
color: #000000;
 +
}
 +
a:visited{ text-decoration:none; }
 +
a:link{ text-decoration:none; }
 +
a:hover{ text-decoration:none; }
 +
a:active{ text-decoration:none; }
 +
 +
.clearfix:after {
 +
    display:block;
 +
    clear:both;
 +
}
 +
.menu_wrap {
 +
position:absolute;
 +
        margin: 0px;
 +
text-align:center;
 +
height: 84px;
 +
        width: 100%;
 +
        -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
 +
        -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
 +
        box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
 +
        background: #ffffff;
 +
        opacity:0.6;
 +
z-index:1000;
 +
/*border:1px solid black;*/
 +
}
 +
 +
.menu {
 +
    position:relative;
 +
    width: 100%;
 +
    margin: -5px 0px 0px 0px;
 +
    z-index: 1000;
 +
    height: 84px;
 +
    -webkit-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
 +
    -moz-box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
 +
    box-shadow: 0px 1px 3px rgba(0,0,0,0.2);
 +
}
 +
 +
.menu li {
 +
position:relative;
 +
padding: 0px;
 +
        margin-right: 3%;
 +
        margin-left: 3%;
 +
        list-style: none;
 +
height: 35px;
 +
/*border-right: 1px solid #428bca;*/
 +
display:inline-block;
 +
}
 +
 +
.menu a{
 +
    transition:all linear 0.25s;
 +
    color:#868383;
 +
font-size:15px;
 +
font-family:Century Gothic;
 +
font-size: 17px;
 +
}
 +
 +
.menu li:hover > a{
 +
    text-decoration:none;
 +
    color:#000000;
 +
}
 +
.menu > ul > li {
 +
    float:left;
 +
margin-left:8px;
 +
    display:inline-block;
 +
    position:relative;
 +
    font-size:18px;
 +
line-height:30px;
 +
}
 +
 +
.menu ul li a {
 +
    padding:4px 25px;
 +
    display:inline-block;
 +
    text-shadow:0px 1px 0px rgba(0,0,0,0.3);
 +
}
 +
 +
/* Logo */
 +
 +
.logo{
 +
position:absolute;
 +
margin: -17px 0px 0px -46px;
 +
width: 150px;
 +
height: 83px;
 +
/*border: 1px solid grey;*/
 +
text-align:left;
 +
/*box-shadow:0px 1px 3px rgba(0,0,0,0.2);*/
 +
        z-index:1000;
 +
}
 +
 +
#just_to_align{
 +
position:absolute;
 +
right: 5%;
 +
width: 100%;
 +
margin: 23px 10px 0px 0px;
 +
/*border: 1px solid black;*/
 +
text-align:right;
 +
}
 +
 +
.li_indiv{
 +
position:relative;
 +
text-align:center;
 +
margin:0px 35px 0px 0px;
 +
/*word-wrap: break-word;*/
 +
/*border:1px solid black;*/
 +
}
 +
 +
.li_indiv a{
 +
position:relative;
 +
top:5px;
 +
}
 +
 +
div #sideMenu a #home_logo img{
 +
  display:none;
 +
}
 +
</style>
 +
 +
<!-- Animating Parallel Sectors-->
 +
<style>
 +
 +
#sector_box a #span_left { margin-left: -10%; }
 +
#sector_box a #span_right{ margin-right: -10%; }
 +
 +
/* 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-->
 +
<!--DEFAULT PROPERTIES ARE INHERITED FROM 1920px - 1080px RESOLUTION-->
 +
 +
<style>
 +
 +
/* DEFAULT PROPERTIES ARE INHERITED FROM 1535px WIDTH*/
 +
 +
/* < 1024px Resolution Desktop Screen */
 +
 +
/* < 1366px Resolution Desktop Screen*/
 +
 +
@media screen and (min-width: 1025px) and (max-width: 1367px) {
 +
 +
.menu_wrap{
 +
position:relative;
 +
                margin:-10px 0px 0px 0px;
 +
                width: 1348px;
 +
/*No left or right margins - menu wides fullscreen*/
 +
}
 +
 +
.menu{
 +
position:absolute;
 +
width: 1348px;
 +
margin: -81px 0px 0px 0px;
 +
}
 +
 +
.menu > ul > li{
 +
margin-left:12px;
 +
}
 +
.menu li{
 +
margin-right: 35px;
 +
margin-left: 35px;
 +
}
 +
 +
#just_to_align{
 +
right:60px;
 +
margin:14px 10px 0px 0px;
 +
}
 +
.logo{
 +
margin: -21px 0px 0px -61px;
 +
}
 +
#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){
 +
 +
        #sector_box {
 +
                margin: -146px 0px 0px 0px;
 +
        }
 +
 +
        #sector_box .parallelogram:not(.skew_by_left){
 +
        height: 910px;
 +
}
 +
 +
.skew_by_left{
 +
                height: 910px;
 +
}
 +
       
 +
        .logo{
 +
                margin: -18px 0px 0px -48px;
 +
        }
 +
     
 +
        .menu li {
 +
                margin-right: 4%;
 +
                margin-left: 4%;
 +
        }
 +
 +
@media screen and (min-width: 1367px) and (max-width: 1770px){
 +
    .menu li{
 +
          margin-right: 3%;
 +
          margin-left: 3%;
 +
    }
 +
@media screen and (min-width: 1367px) and (max-width: 1531px){
 +
 +
.skew_by_left{ width: 24.8%; }
 +
#sector_box{ margin:-147px 0px 0px 0px; }
 +
#sector_box a #span_left { margin-left: -11%; }
 +
#sector_box a #span_right { margin-right: -11%; }
 +
 +
}
 +
}
 +
 +
}
 +
</style>
 +
 +
<!--Styling script-->
 +
<script>
 +
//Changes shall apply under void()
 +
// Upper black toolbar stays there id = 'top_menu_14'  -> Could be display:block
 +
// Main div wrapper contains code and all other stuff id = 'content' -> Change id to 'content2'
 +
// Reason: iGEM puts everything in document.getElementById('content') - change id - cause element 404
 +
void(document.getElementById('content').id = 'content0')
 +
 +
// Div (placeholder) containing the iGEM logo and some text id = 'top_title' -> Apply display: none
 +
void(document.getElementById('top_title').style.display = 'none');
 +
 +
// Small icon in the top black toolbar id = 'bars_item' -> Apply display: none
 +
void(document.getElementById('bars_item').style.display = 'none');
 +
// Same application for it's side effect (display an ugly div by default)
 +
 +
void(document.getElementById('user_item').style.display = 'none');
 +
void(document.getElementById('sideMenu').style.display = 'none');
 +
var element = document.getElementById('home_logo');
 +
element.outerHTML = '';
 +
delete element;
 +
 +
// Change color of current link
 +
$('a[href*="' +window.location.href+'"]').each(function() { $(this).css('color', '#000000'); });
 +
</script>
 +
<style>
 +
#loading-background{
 +
    position: fixed;
 +
    margin: -17px 0px 0px 0px;
 +
    z-index:10000;
 +
    width:100%;
 +
    height:100%;
 +
    zoom: 35%;
 +
background:url();
 +
}
 +
</style>
 +
</body>
 +
</html>

Revision as of 14:22, 16 August 2017