Difference between revisions of "Team:Greece/Team"
CharisKomos (Talk | contribs) |
CharisKomos (Talk | contribs) |
||
| Line 50: | Line 50: | ||
<script> | <script> | ||
function onHoverChanges(idz){ | function onHoverChanges(idz){ | ||
| − | |||
$('#'+idz).addClass('opace'); | $('#'+idz).addClass('opace'); | ||
| + | } | ||
| + | |||
| + | function onHoverHide(idz){ | ||
| + | $('.circlez').removeClass('opace'); | ||
} | } | ||
</script> | </script> | ||
| Line 100: | Line 103: | ||
<li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Model'>MODELING</a></li> | <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Model'>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/ | + | <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Achievements'>ACHIEVEMENTS</a></li> |
<li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Team'>TEAM</a></li> | <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Team'>TEAM</a></li> | ||
</span> | </span> | ||
| Line 110: | Line 113: | ||
<!--min-x, min-y, width, height--> | <!--min-x, min-y, width, height--> | ||
| − | <circle class='circlez' cx="-230" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t1' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | + | <a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))"> |
| + | <circle class='circlez' cx="-230" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t1' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | ||
<text class='animate_text' id='t1' x='0' y='275' text-anchor='middle' fill='#000000'> | <text class='animate_text' id='t1' x='0' y='275' text-anchor='middle' fill='#000000'> | ||
<tspan x="-230" dy="2.5em" onclick="displayMe('c_t1')">OVERVIEW:</tspan> | <tspan x="-230" dy="2.5em" onclick="displayMe('c_t1')">OVERVIEW:</tspan> | ||
<tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">UNITS/DISCIPLINES/</tspan> | <tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">UNITS/DISCIPLINES/</tspan> | ||
<tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">TRAINING</tspan> | <tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">TRAINING</tspan> | ||
| − | </text> | + | </text></a> |
| − | <circle class='circlez' cx="190" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t2' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | + | |
| + | <a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))"> | ||
| + | <circle class='circlez' cx="190" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t2' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | ||
<text class='animate_text' id='t2' x='0' y='335' text-anchor='middle' fill='#000000'> | <text class='animate_text' id='t2' x='0' y='335' text-anchor='middle' fill='#000000'> | ||
<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">MEMBERS</tspan> | <tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">MEMBERS</tspan> | ||
| − | </text> | + | </text></a> |
| − | <circle class='circlez' cx="610" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t3' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | + | |
| + | <a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))"> | ||
| + | <circle class='circlez' cx="610" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t3' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | ||
<text class='animate_text' id='t3' x='0' y='335' text-anchor='middle' fill='#000000'> | <text class='animate_text' id='t3' x='0' y='335' text-anchor='middle' fill='#000000'> | ||
<tspan x="615" dy="1.5em" onclick="displayMe('c_t3')">SUPERVISORS</tspan> | <tspan x="615" dy="1.5em" onclick="displayMe('c_t3')">SUPERVISORS</tspan> | ||
| − | </text> | + | </text></a> |
| − | <circle class='circlez' cx="1020" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t4' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | + | |
| + | <a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))"> | ||
| + | <circle class='circlez' cx="1020" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t4' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> | ||
<text class='animate_text' id='t4' x='0' y='335' text-anchor='middle' fill='#000000'> | <text class='animate_text' id='t4' x='0' y='335' text-anchor='middle' fill='#000000'> | ||
<tspan x="1025" dy="1.5em" onclick="displayMe('c_t4')">ATTRIBUTIONS</tspan> | <tspan x="1025" dy="1.5em" onclick="displayMe('c_t4')">ATTRIBUTIONS</tspan> | ||
| − | </text> | + | </text></a> |
</svg> | </svg> | ||
| Line 184: | Line 194: | ||
z-index: 999; | z-index: 999; | ||
overflow: hidden; | overflow: hidden; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <style> | ||
| + | /* Responsive stylesheets */ | ||
| + | /* DEFAULT PROPERTIES ARE INHERITED FROM 1920px - 1080px RESOLUTION */ | ||
| + | |||
| + | /* 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:-5px 0px 0px 0px; | ||
| + | width: 1348px; | ||
| + | height: 85px; | ||
| + | /*No left or right margins - menu wides fullscreen*/ | ||
| + | } | ||
| + | |||
| + | .menu{ | ||
| + | position:absolute; | ||
| + | width: 1348px; | ||
| + | margin: -83px 0px 0px 0px; | ||
| + | } | ||
| + | |||
| + | .menu > ul > li{ | ||
| + | margin-left:12px; | ||
| + | } | ||
| + | .menu li{ | ||
| + | margin-right: 35px; | ||
| + | margin-left: 35px; | ||
| + | } | ||
| + | |||
| + | #just_to_align{ | ||
| + | right: 60px; | ||
| + | margin: 17px 10px 0px 0px; | ||
| + | } | ||
| + | .logo{ | ||
| + | margin: -23px 0px 0px -52px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | @media screen and (min-width: 1367px) and (max-width: 1921px){ | ||
| + | |||
| + | .logo{ | ||
| + | margin: -21px 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%; | ||
| + | } | ||
| + | |||
| + | .menu{ margin:-5px 0px 0px 0px; height: 80px;} | ||
| + | .menu_wrap{ margin: -5px 0px 0px 0px;} | ||
| + | } | ||
| + | |||
| + | @media screen and (min-width: 1770px) and (max-width: 1921px){ | ||
| + | |||
| + | .menu_wrap{ margin: -12px 0px 0px 0px; } | ||
| + | |||
| + | .menu{ margin: -83px 0px 0px 0px; } | ||
| + | |||
| + | #just_to_align{ margin: 13px 10px 0px 0px; } | ||
| + | |||
| + | } | ||
| + | |||
} | } | ||
</style> | </style> | ||
Revision as of 18:24, 2 September 2017
