|
|
| Line 5: |
Line 5: |
| | </head> | | </head> |
| | <body> | | <body> |
| − | <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://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>
| |
| − |
| |
| | <div id='sector_box'> | | <div id='sector_box'> |
| | <a href='#' id='first_slice' class='scaleme' ><span class='parallelogram skew_by_left'> | | <a href='#' id='first_slice' class='scaleme' ><span class='parallelogram skew_by_left'> |
| Line 39: |
Line 22: |
| | </div> | | </div> |
| | | | |
| − | /************************************************************
| |
| − | 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>
| |
| − | <!--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>
| |
| | <style> | | <style> |
| | /* 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*/ |
