Difference between revisions of "Team:Greece/modeling"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<link type='text/css' rel='stylesheet' href='navigation_bar.css' />
+
<link type='text/css' rel='stylesheet' href='parallels.css' />
 
</head>
 
</head>
 
<body>
 
<body>
−
<div id='main-wraper'>
+
<div id='sector_box'>
−
<!--<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://scontent-frt3-2.xx.fbcdn.net/v/t1.0-9/19894766_1578295635526080_6714302824538971318_n.jpg?oh=6302c72597373a43c3a264cf8008564a&oe=5A01A2CD' /></a></li>
+
−
<!--<li class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/home'>HOME</a></li>-->
+
−
<div 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>
+
−
</div>
+
−
</ul>
+
−
</nav>
+
−
+
−
 
+
−
<!--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;
+
−
        </script>
+
−
</div>
+
−
 
+
−
<div id='sector_box'>
+
 
<a id='first_slice' class='scaleme' href='#'><div class='parallelogram skew_by_left'><img src='samplebw.jpg'></img></div></a>
 
<a id='first_slice' class='scaleme' href='#'><div class='parallelogram skew_by_left'><img src='samplebw.jpg'></img></div></a>
 
<a id='second_slice' class='scaleme' href='#'><div style='margin-left:-100px' class='parallelogram'><img src='kitty2.jpg'></img></div></a>
 
<a id='second_slice' class='scaleme' href='#'><div style='margin-left:-100px' class='parallelogram'><img src='kitty2.jpg'></img></div></a>
Line 52: Line 11:
 
<a id='fifth_slice' class='scaleme' href='#'><div class='parallelogram skew_by_left'><img src='kitty5.jpg'></img></div></a>
 
<a id='fifth_slice' class='scaleme' href='#'><div class='parallelogram skew_by_left'><img src='kitty5.jpg'></img></div></a>
 
 
−
</div>
+
</div>
 
<style>
 
<style>
−
/************************************************************
+
/* The key to change for the effect is the overflow hidden of .parallelogram*/
−
THE NAVIGATION MENU
+
−
************************************************************/
+
−
 
+
−
 
+
−
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:-4px 20px 0px 20px;
+
−
text-align:center;
+
−
right:5px;
+
−
left:5px;
+
−
height:70px;
+
−
        box-shadow:0px 1px 3px rgba(0,0,0,0.2);
+
−
        background:#ffffff;
+
−
        opacity:0.6;
+
−
z-index:-10;
+
−
/*border:1px solid black;*/
+
−
}
+
−
 
+
−
.menu {
+
−
    position:relative;
+
−
    width:1500px;
+
−
    left:0%;
+
−
}
+
−
+
−
.menu li {
+
−
position:relative;
+
−
padding:0px;
+
−
    margin-right:50px;
+
−
    margin-left:65px;
+
−
    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:-20px 0px 0px -30px;
+
−
width:122px;
+
−
height:69px;
+
−
/*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:10px;
+
−
width:100%;
+
−
margin:12px 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>
+
−
<style>
+
−
/*The key to change for the effect is the overflow hidden of .parallelogram*/
+
 
#sector_box{
 
#sector_box{
 
position:absolute;
 
position:absolute;

Revision as of 11:35, 13 July 2017