Difference between revisions of "Team:NCTU Formosa/Practices"

 
(118 intermediate revisions by 6 users not shown)
Line 1: Line 1:
 
{{Team:NCTU_Formosa/navigation}}
 
{{Team:NCTU_Formosa/navigation}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
 
<style tpe=text/css>
 
<style tpe=text/css>
−
.logo{
+
/* v1.0 | 20080212 */
−
background-image:url("https://static.igem.org/mediawiki/2015/5/53/2015_NCTU_Formosa_11897155_889492047791513_1100794190_n.jpg");
+
 
−
position:absolute;
+
html, body, div, span, applet, object, iframe,
−
background-size:80%;
+
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
−
background-repeat: no-repeat;
+
a, abbr, acronym, address, big, cite, code,
−
height:50vh;
+
del, dfn, em, font, img, ins, kbd, q, s, samp,
−
width:20vw;
+
small, strike, strong, sub, tt, var,
−
right:0vw;
+
b, u, i, center,
−
top:0vh;
+
dl, dt, dd, ol, ul, li,
 +
fieldset, form, label, legend,
 +
table, caption, tbody, tfoot, thead, tr, th, td {
 +
    margin: 0;
 +
    padding: 0;
 +
    border: 0;
 +
    outline: 0;
 +
    vertical-align: baseline;
 +
    background: transparent;
 
}
 
}
−
.topback{
+
body {
−
background-color:#808080;
+
    line-height: 1;
−
position:adsolute;
+
}
−
top:0vh;
+
ol, ul {
−
width:100vw;
+
    list-style: none;
−
height:14vh;
+
}
−
}
+
blockquote, q {
−
.photo1{
+
    quotes: none;
−
background-image:url("https://static.igem.org/mediawiki/2015/0/09/NCTU_FORMOSA_HP_asian.png");
+
}
 +
blockquote:before, blockquote:after,
 +
q:before, q:after {
 +
    content: '';
 +
    content: none;
 +
}
 +
 
 +
/* remember to define focus styles! */
 +
:focus {
 +
    outline: 0;
 +
}
 +
 
 +
/* remember to highlight inserts somehow! */
 +
ins {
 +
    text-decoration: none;
 +
}
 +
del {
 +
    text-decoration: line-through;
 +
}
 +
 
 +
/* tables still need 'cellspacing="0"' in the markup */
 +
table {
 +
    border-collapse: collapse;
 +
    border-spacing: 0;
 +
}
 +
 
 +
.p01{
 +
background-color: #FF3333;
 
position:relative;
 
position:relative;
 
height:70vh;
 
height:70vh;
−
width:70vw;
+
width:100%;
−
left:11vw;
+
left:0vw;
−
background-size:80%;
+
opacity:0.7;
−
background-repeat: no-repeat;
+
−
top:13vh;
+
 
}
 
}
−
.content1{
+
.p02{
−
color:#000;
+
background-color:#FCFCDE;
−
font-family:Myriad Pro;
+
position:relative;
−
font-size:16pt;
+
width:100%;
−
height:40vh;
+
}
−
width:30vw;
+
.background1{
−
position:absolute;
+
background-image:url("https://static.igem.org/mediawiki/2015/8/8d/NCTU_Formosa_E.cotector1.png");
−
left:68vw;
+
−
top:40vh;
+
−
background-color:#fff;
+
−
}
+
−
.icon1{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/a/a5/NCTU-Formosa-homepage_icon1.png");
+
−
position:absolute;
+
−
width:15vw;
+
−
height:25vh;
+
−
left:68vw;
+
 
background-repeat:no-repeat;
 
background-repeat:no-repeat;
−
background-size:50%;
+
background-position:center 13vh;
−
top:20vh;
+
−
}
+
−
.iconcon{
+
−
font-family:Myriad Pro;
+
−
font-size:20pt;
+
−
position:absolute;
+
−
width:15vw;
+
−
height:20vh;
+
−
left:78vw;
+
−
top:25vh;
+
−
}
+
−
.photo2{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/c/c3/NCTU_FORMOSA_HP_biocamp.png");
+
 
position:relative;
 
position:relative;
 
height:70vh;
 
height:70vh;
−
width:70vw;
+
width:40vw;
−
left:40vw;
+
background-size:55%;
−
background-size:80%;
+
top:0vh;
−
background-repeat: no-repeat;
+
left:10vw;
−
top:15vh;
+
opacity:1.0;
 +
float:left;
 
}
 
}
−
.content2{
+
−
color:#000;
+
.background2{
−
font-family:Myriad Pro;
+
background-image:url("https://static.igem.org/mediawiki/2015/5/59/Policy_and_Practice.png");
−
font-size:16pt;
+
−
height:40vh;
+
−
width:30vw;
+
−
position:absolute;
+
−
left:10vw;
+
−
top:115vh;
+
−
background-color:#fff;
+
−
}
+
−
.icon2{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/c/c5/NCTU_formosa_Homepage_icon2.png");
+
−
position:absolute;
+
−
width:15vw;
+
−
height:25vh;
+
−
left:10vw;
+
 
background-repeat:no-repeat;
 
background-repeat:no-repeat;
−
background-size:50%;
+
background-position:center;
−
top:95vh;
+
position:relative;
 +
height:100vh;
 +
width:80vw;
 +
margin:0 auto;
 +
background-size:80%;
 +
top:0vh;
 +
left:0vw;
 +
opacity:0.9;
 
}
 
}
−
.iconcon2{
+
−
font-family:Myriad Pro;
+
.title{
 +
font-family:Arial;
 +
font-size:33pt;
 +
position:relative;
 +
right:20vw;
 +
top:33vh;
 +
color:#fff;
 +
z-index:100;
 +
float:right;
 +
text-align:center;
 +
}
 +
 
 +
.content{
 +
font-family:Arial;
 
font-size:20pt;
 
font-size:20pt;
−
position:absolute;
+
width:60vw;
−
width:20vw;
+
margin:0 auto;
−
height:20vh;
+
 
left:20vw;
 
left:20vw;
−
top:100vh;
+
right:20vw;
 +
top:9vh;
 +
color:#000;
 +
text-align: justify;
 +
padding-top:6vh;
 +
padding-bottom:8vh;
 +
}
 +
.goto{
 +
position:relative;
 +
padding-left:20vw;
 +
padding-top:3vh;
 +
float:left;
 +
z-index:100;
 
}
 
}
−
.photo3{
+
.goto a{
−
background-image:url("https://static.igem.org/mediawiki/2015/a/a4/NCTU_Formosa_hp_newsletter.png");
+
text-decoration:none;
 +
color:#000;
 +
}
 +
.goto1{
 
position:relative;
 
position:relative;
−
height:70vh;
+
padding-left:76vw;
−
width:70vw;
+
padding-top:3vh;
−
left:9vw;
+
−
background-size:80%;
+
−
background-repeat: no-repeat;
+
−
top:20vh;
+
 
}
 
}
−
.content3{
+
.goto1 a{
 +
text-decoration:none;
 +
color:#000;
 +
}
 +
p{
 +
text-indent: 40px;
 +
font-family:Arial;
 +
font-size:14pt;
 +
position:relative;
 
color:#000;
 
color:#000;
−
font-family:Myriad Pro;
+
text-align: justify;
−
font-size:16pt;
+
LINE-HEIGHT:25pt;
−
height:40vh;
+
−
width:30vw;
+
−
position:absolute;
+
−
left:66vw;
+
−
top:190vh;
+
−
background-color:#fff;
+
−
}
+
−
.icon3{
+
−
background-image:url("https://static.igem.org/mediawiki/2015/d/d5/NCTU_formosa_Homepage_icon3.png");
+
−
position:absolute;
+
−
width:15vw;
+
−
height:25vh;
+
−
left:65vw;
+
−
background-repeat:no-repeat;
+
−
background-size:50%;
+
−
top:170vh;
+
 
}
 
}
−
.iconcon3{
+
h1{
−
font-family:Myriad Pro;
+
font-size:25pt;
 +
text-align: center;
 +
}
 +
h2{
 
font-size:20pt;
 
font-size:20pt;
−
position:absolute;
+
padding-top:2vh;
−
width:20vw;
+
text-align: center;}
−
height:20vh;
+
.image{
−
left:75vw;
+
mragin:0 auto;
−
top:175vh;
+
width:auto;
−
}
+
text-align:center;
−
ul, li {
+
font-size:11pt;
−
margin: 0;
+
padding-top:50px;
−
padding: 0;
+
padding-bottom:50px;
−
list-style: none;
+
 
}
 
}
−
.slideshow {
+
.reference{
−
position: relative;
+
font-size:10pt;
−
height: 160px;
+
position:relative;
−
width: 210px;
+
border-top:#999 1px solid;
−
float: left;
+
text-align:left;
−
margin: 0 10px;
+
−
border: 3px solid #ddd;
+
 
}
 
}
−
.slideshow li {
+
.text_pro{
−
position: absolute;
+
width:20vw;
 +
position:absolute;
 +
top:10vh;
 +
left:52vw;
 +
font-size:1.8em;
 +
text-align:center;
 
}
 
}
−
.slideshow a img{
+
.text_exch{
−
display: block;
+
width:22vw;
−
padding: 0;
+
position:absolute;
−
margin: 0 auto;
+
top:52vh;
−
border: none;
+
left:-5vw;
 +
font-size:1.8em;
 +
text-align:center;
 
}
 
}
−
.slideshow li a{
+
.text_con{
−
display: block;
+
width:20vw;
−
}
+
position:absolute;
−
.slideshowController {
+
top:61vh;
−
position: absolute;
+
left:65vw;
−
right: 0;
+
font-size:1.8em;
−
bottom: 0;
+
text-align:center;
−
}
+
−
.slideshowController a {
+
−
background: transparent url(images/arrows.png) no-repeat left top;
+
−
display: block;
+
−
width: 30px;
+
−
height: 30px;
+
−
position: absolute;
+
−
right: 60px;
+
−
bottom: 0;
+
−
z-index: 9999;
+
−
outline: none; /* 去除超連結虛線 */
+
−
}
+
−
.slideshowController .next{
+
−
background-position: -30px 0;
+
−
right: 0;
+
−
}
+
−
.slideshowController .play{
+
−
background-position: -60px 0;
+
−
right: 30px;
+
−
}
+
−
.slideshowController .pause{
+
−
background-position: -90px 0;
+
 
}
 
}
 +
 
</style>
 
</style>
−
<script type="text/javascript">
 
−
    $(function(){
 
−
// 預設圖片淡出淡入的動畫時間
 
−
var _fadeSpeed = 600;
 
−
 
−
// 把每一個 .slideshow 取出來做處理
 
−
$('.slideshow').each(function(){
 
−
// 先取得相關的 ul , li
 
−
// 並產生控制器
 
−
var $this = $(this),
 
−
$ul = $this.find('ul'),
 
−
$li = $ul.find('li'),
 
−
$controller = $('<div class="slideshowController"><a href="#"></a><a href="#" class="play"></a><a href="#" class="next"></a></div>').css('opacity', 0),
 
−
_len = $li.length,
 
−
_index = 0, timer, _speed = 2000;
 
−
 
−
// 先把第一張圖片之外的都透明度設成 0
 
−
$li.eq(_index).css('z-index', 2).siblings().css('opacity', 0);
 
−
 
−
// 加入控制器並當滑鼠移入時顯示; 滑鼠移出時隱藏
 
−
$this.append($controller).hover(function(){
 
−
$controller.stop().animate({
 
−
opacity: 1
 
−
});
 
−
}, function(){
 
−
$controller.stop().animate({
 
−
opacity: 0
 
−
});
 
−
});
 
−
 
−
// 當點擊到控制器上面的按鈕時
 
−
$controller.delegate('a', 'click', function(){
 
−
// 先取得按鈕的 class
 
−
var $a = $(this),
 
−
_className = $a.attr('class');
 
−
 
−
// 如果按的是 play 或是 pause 鈕
 
−
if(('play pause').indexOf(_className) > -1){
 
−
// 切換目前按鈕圖案
 
−
// 並依狀態來啟動或停止計時器
 
−
$a.toggleClass('pause').hasClass('pause') ? timer = setTimeout(autoClickNext, _fadeSpeed + _speed) : clearTimeout(timer);
 
−
return false;
 
−
}
 
−
 
−
// 停止計時器
 
−
clearTimeout(timer);
 
−
// 移除 pause 鈕
 
−
$a.siblings('.pause').removeClass('pause');
 
−
// 依按鈕功能來決定上下張圖片索引
 
−
_index = ('next' == _className ? _index + 1 : _index - 1 + _len) % _len;
 
−
// 切換圖片
 
−
show();
 
−
 
−
return false;
 
−
});
 
−
 
−
// 自動播放下一張
 
−
function autoClickNext() {
 
−
_index = (_index + 1) % _len;
 
−
show();
 
−
timer = setTimeout(autoClickNext, _fadeSpeed + _speed);
 
−
}
 
−
 
−
// 淡入淡出圖片
 
−
function show() {
 
−
$li.eq(_index).animate({
 
−
opacity: 1,
 
−
zIndex: 2
 
−
}, _fadeSpeed).siblings(':visible').animate({
 
−
opacity: 0,
 
−
zIndex: 1
 
−
}, _fadeSpeed);
 
−
}
 
−
// 如果有設定預設自動播放的話
 
−
if($this.hasClass('autoPlay')){
 
−
$controller.find('.play').click();
 
−
}
 
−
});
 
−
});
 
−
    </script>
 
 
</head>
 
</head>
 
<body>
 
<body>
−
</div><!-- #wrapper -->
+
<div class="p01">
−
<div class="logo"></div>
+
<div class="background1"></div>
−
<div class="photo1"></div>
+
<div class="title">Policy and Practices</div>
−
<div class="icon1"></div>
+
</div>
−
<div class="iconcon">Team exchange</div>
+
<div class="p02">
−
<div class="content1">1. <font color="#AC1F4A";>Host iGEM Asia Meetup </font>: 27teams 210 participants <br> 2. Skype Meetups : <br> KAIT_ Japan, Amoy_ China, TU Delft, and Oxford <br> 3. Host mini conference for iGEM <font color="#AC1F4A";>high school team</font> : Mingdao & HSNU <br>  4. Conference with iGEMers and Professors</div>
+
    <div class="background2">
−
<div class="photo2"></div>
+
<div class="text_pro">
−
<div class="content2">1.<font color="#AC1F4A";>Edcationaly</font>:<br> Lecture iGEM and Sythentic Biology in Biocamp <br> 2. <font color="#AC1F4A";>Legally</font>: <br> Inqure Science and Tech Law expert with patent <br> 3. <font color="#AC1F4A";>Clinically</font>:<br> Visit Cancer Doctor and Recovered Patient <br> </div>
+
Be Bald !<br><br>
−
<div class="icon2"> </div>
+
BioCamp<br><br>
−
<div class="iconcon2"> iGEM, Sythentic Biology and Project Promoting </div>
+
Questionnaire<br><br>
−
<div class="photo3"></div>
+
<a href="https://2015.igem.org/Team:NCTU_Formosa/Promotion" style="font-size:1.2em;">See more</a>
−
<div class="content3"> 1. Took part in Amoy Newsletter <br> 2. Experince side effect of chemotherapy- Bald <br> 3. Donation Program: ONE PENY ONE CARE <br>
+
</div>
 +
<div class="text_exch">
 +
 +
                Participate Newsletter<br><br>
 +
Mini Conference<br><br>
 +
Skype Meetup<br><br>
 +
                Held 2015 iGEM Asian Conference<br><br>
 +
<a href="https://2015.igem.org/Team:NCTU_Formosa/Teamexchange" style="font-size:1.2em;">See more</a>
 +
</div>
 +
<div class="text_con">
 +
Economical: ApexBio<br><br>
 +
Legal: The institute of technology science<br><br>
 +
Clinical: Doctors and Patients <br><br>
 +
<a href="https://2015.igem.org/Team:NCTU_Formosa/ApexBio" style="font-size:1.2em;">See more</a>
 +
</div>
 +
</div>
 +
 
 +
 
 +
 
 +
 
 +
<div class="goto">
 +
<a href="https://2015.igem.org/Team:NCTU_Formosa/Project"><img src="https://static.igem.org/mediawiki/2015/3/3c/%E7%AE%AD%E9%A0%AD1.png"; width=50vw;><br><br>Back to project</a>
 +
</div>
 +
<div class="goto1">
 +
<a href="https://2015.igem.org/Team:NCTU_Formosa/Design"><img src="https://static.igem.org/mediawiki/2015/c/c2/%E7%AE%AD%E9%A0%AD2.png"; width=50vw;><br><br>Go to Design</a>
 
</div>
 
</div>
−
<div class="icon3"></div>
+
</div>  
−
<div class="iconcon3"> About Project </div>
+
  
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{Team:NCTU_Formosa/footer}}

Latest revision as of 01:10, 19 September 2015

Policy and Practices
Be Bald !

BioCamp

Questionnaire

See more
Participate Newsletter

Mini Conference

Skype Meetup

Held 2015 iGEM Asian Conference

See more
Economical: ApexBio

Legal: The institute of technology science

Clinical: Doctors and Patients

See more


Back to project


Go to Design