Team:USTC CHINA/HumanPractice

From 2013.igem.org

(Difference between revisions)
Line 3: Line 3:
<head>
<head>
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:USTC_CHINA/main.css?action=raw&ctype=text/css" />
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:USTC_CHINA/main.css?action=raw&ctype=text/css" />
 +
<link rel="stylesheet" type="text/css" href="https://2013.igem.org/Team:USTC_CHINA/humanpractice.css?action=raw&ctype=text/css" />
 +
<script src="http://code.jquery.com/jquery-1.6.3.min.js" type= "text/javascript"> </script>
 +
<script>
 +
$(document).ready(function(){
 +
 +
// set the wrapper width and height to match the img size
 +
$('#wrapper').css({'width':$('#wrapper img').width(),
 +
  'height':$('#wrapper img').height()
 +
})
 +
 +
//tooltip direction
 +
var tooltipDirection;
 +
 +
for (i=0; i<$(".pin").length; i++)
 +
{
 +
// set tooltip direction type - up or down           
 +
if ($(".pin").eq(i).hasClass('pin-down')) {
 +
tooltipDirection = 'tooltip-down';
 +
} else {
 +
tooltipDirection = 'tooltip-up';
 +
}
 +
 +
// append the tooltip
 +
$("#wrapper").append("<div style='left:"+$(".pin").eq(i).data('xpos')+"px;top:"+$(".pin").eq(i).data('ypos')+"px' class='" + tooltipDirection +"'>\
 +
<div class='tooltip'>" + $(".pin").eq(i).html() + "</div>\
 +
</div>");
 +
}   
 +
 +
// show/hide the tooltip
 +
$('.tooltip-up, .tooltip-down').mouseenter(function(){
 +
$(this).children('.tooltip').fadeIn(100);
 +
}).mouseleave(function(){
 +
$(this).children('.tooltip').fadeOut(100);
 +
})
 +
});
 +
</script>
 +
<style>
 +
body {
 +
text-align: center;
 +
font: 13px Arial,Helvetica;
 +
}
 +
 +
/* Relative positioning*/
 +
#wrapper {
 +
position: relative;
 +
margin: 0 auto 20px auto;
 +
border: 1px solid #fafafa;
 +
-moz-box-shadow: 0 3px 3px rgba(0,0,0,.5);
 +
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,.5);
 +
box-shadow: 0 3px 3px rgba(0,0,0,.5);
 +
}
 +
/* Hide the original tooltips contents */
 +
.pin {
 +
display: none;
 +
}
 +
/* Begin styling the tooltips and pins */
 +
.tooltip-up, .tooltip-down {
 +
position: absolute;
 +
background: url(images/arrow-up-down.png);
 +
width: 36px;
 +
height: 52px;
 +
}
 +
.tooltip-down {
 +
background-position: 0 -52px;
 +
}
 +
 +
.tooltip {
 +
display: none;
 +
width: 200px;
 +
cursor: help;
 +
text-shadow: 0 1px 0 #fff;
 +
position: absolute;
 +
top: 10px;
 +
left: 50%;
 +
z-index: 999;
 +
margin-left: -115px;
 +
padding:15px;
 +
color: #222;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
border-radius: 5px;
 +
-moz-box-shadow: 0 3px 0 rgba(0,0,0,.7);
 +
-webkit-box-shadow: 0 3px 0 rgba(0,0,0,.7);
 +
box-shadow: 0 3px 0 rgba(0,0,0,.7);
 +
background: #fff1d3;
 +
background: -webkit-gradient(linear, left top, left bottom, from(#fff1d3), to(#ffdb90));
 +
background: -webkit-linear-gradient(top, #fff1d3, #ffdb90);
 +
background: -moz-linear-gradient(top, #fff1d3, #ffdb90);
 +
background: -ms-linear-gradient(top, #fff1d3, #ffdb90);
 +
background: -o-linear-gradient(top, #fff1d3, #ffdb90);
 +
background: linear-gradient(top, #fff1d3, #ffdb90);
 +
}
 +
 +
.tooltip::after {
 +
content: '';
 +
position: absolute;
 +
top: -10px;
 +
left: 50%;
 +
margin-left: -10px;
 +
border-bottom: 10px solid #fff1d3;
 +
border-left: 10px solid transparent;
 +
border-right :10px solid transparent;
 +
}
 +
.tooltip-down .tooltip {
 +
bottom: 12px;
 +
top: auto;
 +
}
 +
 +
.tooltip-down .tooltip::after {
 +
bottom: -10px;
 +
top: auto;
 +
border-bottom: 0;
 +
border-top: 10px solid #ffdb90;
 +
}
 +
 +
.tooltip h2 {
 +
font: bold 1.3em 'Trebuchet MS', Tahoma, Arial;
 +
margin: 0 0 10px;
 +
}
 +
 +
.tooltip ul {
 +
margin: 0;
 +
padding: 0;
 +
list-style: none;
 +
}
 +
</style>
</head>
</head>
<body background="https://static.igem.org/mediawiki/2013/6/62/2013ustc-china_Light_grey_bg.png">
<body background="https://static.igem.org/mediawiki/2013/6/62/2013ustc-china_Light_grey_bg.png">
Line 51: Line 177:
</div>
</div>
<div class="content" align="center">
<div class="content" align="center">
 +
<div class="conbar1">
 +
<div id="breadcrumb"><a href="">Home</a> &gt; <a href="">human practice</a></div></div>
 +
<div class="part">
 +
<div class="part-tittle"><h>communication</h></div>
 +
<div class="part-content">
 +
<p>USTC_CHINA 2013, travel almost<span> all </span>over China within half a year<br />
 +
visit<span> Five </span>igem teams,<span> Four </span>CAS institutes,<span> Seventeen </span>senior professors<br />
 +
give special report in<span> Four </span>universities and establish a preliminary cooperative relationship with<span> A </span>famous biotechnology company.<br /></p></div>
 +
<div class="part-details">
 +
            <a href="#">Details</a>
 +
                <div class="part-details-border"></div>
 +
            </div>
 +
</div>
 +
        <div id="wrapper">
 +
  <img width="960" height="580" src="images/China-map.png" alt="World continents">
 +
 
 +
  <div class="pin pin-down" data-xpos="170" data-ypos="100">  
 +
  <h2>North America</h2>  
 +
  <ul>
 +
<li><b>Area (km�):</b> 24,490,000</li>
 +
<li><b>Population:</b> 528,720,588</li>
 +
 +
  </ul>
 +
  </div>
 +
 
 +
  <div class="pin" data-xpos="270" data-ypos="320">  
 +
  <h2>South America</h2>  
 +
  <ul>
 +
<li><b>Area (km�):</b> 17,840,000</li>
 +
<li><b>Population:</b> 382,000,000</li>
 +
 +
  </ul>
 +
  </div>
 +
 
 +
  <div class="pin pin-down" data-xpos="450" data-ypos="110">  
 +
  <h2>Europe</h2>  
 +
  <ul>
 +
<li><b>Area (km�):</b> 10,180,000</li>
 +
<li><b>Population:</b> 731,000,000 </li>
 +
 +
  </ul>
 +
  </div>
 +
 
 +
  <div class="pin" data-xpos="450" data-ypos="250">  
 +
  <h2>Africa</h2>  
 +
  <ul>
 +
<li><b>Area (km�):</b> 30,370,000</li>
 +
<li><b>Population:</b> 1,022,011,000</li>
 +
 +
  </ul>
 +
  </div>
 +
 
 +
  <div class="pin pin-down" data-xpos="650" data-ypos="130">  
 +
  <h2>Asia</h2>  
 +
  <ul>
 +
<li><b>Area (km�):</b> 43,820,000</li>
 +
<li><b>Population:</b> 3,879,000,000</li>
 +
 +
  </ul>
 +
  </div>
 +
 
 +
  <div class="pin pin-down" data-xpos="817" data-ypos="265">  
 +
  <h2>Australia</h2>  
 +
  <ul>
 +
<li><b><img src="images/拼图.png" width="200" height="100" />Area (km):</b> 9,008,500</li>
 +
<li><b>Population:</b> 31,260,000</li>
 +
  </ul>
 +
  </div>
 +
</div> 
 +
<div class="part">
 +
<div class="part-tittle"><h>activity</h></div>
 +
<div class="part-content">
 +
<p>USTC_CHINA 2013, travel almost<span> all </span>over China within half a year<br />
 +
visit<span> Five </span>igem teams,<span> Four </span>CAS institutes,<span> Seventeen </span>senior professors<br />
 +
give special report in<span> Four </span>universities and establish a preliminary cooperative relationship with<span> A </span>famous biotechnology company.<br /></p></div>
 +
<div class="part-details">
 +
            <a href="#">Details</a>
 +
                <div class="part-details-border"></div>
 +
            </div>
 +
</div>

Revision as of 20:32, 25 September 2013

communication

USTC_CHINA 2013, travel almost all over China within half a year
visit Five igem teams, Four CAS institutes, Seventeen senior professors
give special report in Four universities and establish a preliminary cooperative relationship with A famous biotechnology company.

Details
World continents

North America

  • Area (km�): 24,490,000
  • Population: 528,720,588

South America

  • Area (km�): 17,840,000
  • Population: 382,000,000

Europe

  • Area (km�): 10,180,000
  • Population: 731,000,000

Africa

  • Area (km�): 30,370,000
  • Population: 1,022,011,000

Asia

  • Area (km�): 43,820,000
  • Population: 3,879,000,000

Australia

  • Area (km): 9,008,500
  • Population: 31,260,000
activity

USTC_CHINA 2013, travel almost all over China within half a year
visit Five igem teams, Four CAS institutes, Seventeen senior professors
give special report in Four universities and establish a preliminary cooperative relationship with A famous biotechnology company.

Details

Retrieved from "http://2013.igem.org/Team:USTC_CHINA/HumanPractice"