Difference between revisions of "Team:Greece/our team"

Line 1: Line 1:
 
<html>
 
<html>
 
<head>
 
<head>
−
<script src='jquery_min.js'></script>
+
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
−
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
+
−
<meta name="viewport" content="width=device-width, initial-scale=1.0">
+
  
 
</head>
 
</head>
Line 10: Line 8:
  
 
               <div id='main-wraper'>
 
               <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>
 
    <div class='menu_wrap'></div>
 
<nav class='menu'>
 
<nav class='menu'>
Line 28: Line 27:
 
                 </div>
 
                 </div>
  
 +
<!-- Parallel Animated Sectors -->
  
−
<svg width="100%" height="300" viewBox="0 0 400 400" style='border:1px solid black; background-color: #ffffff'>
+
<span style='display:none;' id='sector_box'>
−
<script role='Interactivity'>
+
<a name='img1' href='#' class='scaleme' ><span class='parallelogram skew_by_left'>
−
console.log('This is interactivity script');
+
                          <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='first_slice' src='http://cldup.com/0-qq3bcDfK.jpg' ></img></span></a>
−
+
−
function changeStroke(id){
+
−
//Add boldStroke
+
−
$('#'+id).addClass('boldStroke');
+
−
//Make cursor as a pointer
+
−
$('#'+id).css( 'cursor', 'pointer' );
+
−
}
+
−
function removeStroke(id){ $('#'+id).removeClass('boldStroke'); }
+
−
+
−
function displayProfile(id){
+
−
//Display profile
+
−
void(document.getElementById('profile').src = id+'.jpg');
+
−
void(document.getElementById('details').innerText = document.getElementById('desc_'+id).value);
+
−
void(document.getElementById('profile').style.visibility = 'visible');
+
−
}
+
−
</script>
+
−
+
−
<defs>
+
−
<pattern id="Image" x="0%" y="0%" patternUnits="userSpaceOnUse" height="100%" width="100%">
+
−
  <image width='50%' height='40%' x="0" y="0" href="me.jpg"></image>
+
−
</pattern>
+
−
+
−
<pattern id="Image2" x="0%" y="0%" patternUnits="userSpaceOnUse" height="100%" width="100%">
+
−
<image width='50%' height='40%' x="160" y="-50" href="me2.jpg"></image>
+
−
</pattern>
+
−
+
−
<pattern id="Image3" x="0%" y="0%" patternUnits="userSpaceOnUse" height="100%" width="100%">
+
−
<image width='50%' height='40%' x="105" y="125" href="me2.jpg"></image>
+
−
</pattern>
+
−
</defs>
+
−
+
−
<circle cx="50" cy="100" r="35" stroke="green" stroke-width="2" fill="url(#Image)" id='circle1' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)'/>
+
−
+
−
<line x1="85" y1="85" x2="172" y2="55" stroke-width="4" stroke="red" />
+
−
<line x1="87" y1="95" x2="175" y2="65" stroke-width="4" stroke="red" />
+
−
+
−
<circle cx="160" cy="220" r="35" stroke="green" stroke-width="2" fill="url(#Image2)" id='circle2' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
+
−
+
−
<line x1="74" y1="124" x2="137" y2="189" stroke-width="4" stroke="red" />
+
−
<line x1="67" y1="131" x2="128" y2="195" stroke-width="4" stroke="red" />
+
−
+
−
<circle cx="210" cy="51" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle3' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
+
−
+
−
<line x1="193" y1="208" x2="260" y2="180" stroke-width="4" stroke="red" />
+
  
−
<circle cx="295" cy="170" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle4' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
+
<a name='img2' href='#' class='scaleme' ><span style='margin-left:-10%' 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>
−
<line x1="325" y1="187" x2="420" y2="230" stroke-width="4" stroke="red" />
+
  
−
<circle cx="450" cy="250" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle5' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
+
<a name='img3' 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>
−
<line x1="320" y1="145" x2="400" y2="100" stroke-width="4" stroke="red" />
+
  
−
<circle cx="433" cy="83" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle6' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
+
<a href='#' class='scaleme' ><span style='margin-right:-10%' 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>
−
<line x1="125" y1="234" x2="48" y2="273" stroke-width="4" stroke="red" />
+
−
<line x1="130" y1="244" x2="57" y2="282" stroke-width="4" stroke="red" />
+
−
<line x1="140" y1="253" x2="63" y2="293" stroke-width="4" stroke="red" />
+
−
+
−
<circle cx="27" cy="305" r="35" stroke="green" stroke-width="2" fill="url(#Image3)" id='circle7' class='svgGraphic' onclick="displayProfile(this.id)" onmouseover="changeStroke(this.id)" onmouseleave='removeStroke(this.id)' />
+
−
+
−
</svg>
+
−
<script>
+
−
var x = document.getElementById("x"),
+
−
y = document.getElementById("y"),
+
−
viewbox = document.querySelector("svg");
+
  
−
viewbox.addEventListener("mousemove", function(evt) {
+
<a href='#' class='scaleme' ><span class='parallelogram skew_by_left'>
−
JSON.stringify(evt.target.getBoundingClientRect());
+
                            <img onmouseover='caress(this.id, 1)' onmouseleave='caress(this.id, 0)' id='fifth_slice' src='http://cldup.com/qQxyWKshfd.jpg'></img></span></a>
−
console.log('x:'+evt.offsetX+' '+'y:'+evt.offsetY);
+
</span>
−
}, false);
+
−
</script>
+
−
+
−
<table width='100%' height='200px' id='personnel'>
+
−
<tr>
+
−
<th width='20%'></th>
+
−
<th width='30%'>
+
−
<img width='300px' height='350px' src id='profile' /> <!--style='visibility: hidden'-->
+
−
</th>
+
−
<th width='30%'>
+
−
<div width='450px' height='200px' id='details' class='detailBox'></div>
+
−
</th>
+
−
<th width='20%'></th>
+
−
</tr>
+
−
</table>
+
−
<input type='hidden' value="Colorectal cancer (CRC), also known as bowel cancer and colon cancer, is the development of cancer from the colon or rectum (parts of the large intestine).
+
−
A cancer is the abnormal growth of cells that have the ability to invade or spread to other parts of the body.[9] Signs and symptoms may include blood in the stool, a change in bowel movements, weight loss, and feeling tired all the time.
+
−
Most colorectal cancers are due to old age and lifestyle factors with only a small number of cases due to underlying genetic disorders.[2][3] Some risk factors include diet, obesity, smoking, and lack of physical activity.
+
−
Dietary factors that increase the risk include red and processed meat as well as alcohol.[2] Another risk factor is inflammatory bowel disease, which includes Crohn's disease and ulcerative colitis.[2] Some of the inherited genetic disorders that can cause colorectal cancer include familial adenomatous polyposis and hereditary non-polyposis colon cancer; however, these represent less than 5% of cases.[2][3] It typically starts as a benign tumor, often in the form of a polyp, which over time becomes cancerous.[2]" id='desc_circle1' />
+
−
<input type='hidden' value='This is the SECOND hidden element' id='desc_circle2' />
+
−
<input type='hidden' value='This is the THIRD hidden element' id='desc_circle3' />
+
−
<input type='hidden' value='This is the FOURTH hidden element' id='desc_circle4' />
+
−
<input type='hidden' value='This is the FIFTH hidden element' id='desc_circle5' />
+
−
<input type='hidden' value='This is the SIXTH hidden element' id='desc_circle6' />
+
−
<input type='hidden' value='This is the SEVENTH hidden element' id='desc_circle7' />
+
  
 +
<!-- The Navigation Menu -->
 
<style>
 
<style>
−
<!-- The Navigation Menu -->
 
  
−
body{ background-color: #ffffff }
+
body{ background: #ffffff }
  
 
a{
 
a{
Line 248: Line 166:
 
   display:none;
 
   display:none;
 
}
 
}
 +
 +
/************************************************************
 +
 +
************************************************************/
 +
</style>
 +
 +
<!-- Animating Parallel Sectors-->
 +
<style>
 +
/* 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*/
 
/* DEFAULT PROPERTIES ARE INHERITED FROM 1535px WIDTH*/
Line 337: Line 331:
 
</style>
 
</style>
  
−
<style>
 
−
.boldStroke{ stroke-width: 5 }
 
−
 
−
.detailBox{
 
−
word-wrap: break-word;
 
−
text-align: justify;
 
−
text-justify: inter-word;
 
−
padding: 5px 10px 10px 0px;
 
−
}
 
−
 
−
/*table,th,tr{border:1px solid black;}*/
 
  
−
th, tr{ padding:0px 10px;}
+
 
−
+
 
−
#profile{
+
−
overflow: hidden;
+
−
visibility: hidden;
+
−
+
−
border-radius:12px;
+
−
-webkit-border-radius:12px;
+
−
-moz-border-radius:12px;
+
−
+
−
-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);
+
−
}
+
−
</style>
+
 
<!--Styling script-->
 
<!--Styling script-->
 
<script>
 
<script>
Line 386: Line 356:
 
</script>
 
</script>
 
</body>
 
</body>
−
 
 
</html>
 
</html>

Revision as of 22:13, 4 August 2017