Difference between revisions of "Team:NYMU-Taipei/Notebook-Lab Book"

 
(97 intermediate revisions by 4 users not shown)
Line 6: Line 6:
 
<head>
 
<head>
  
−
<link href='https://fonts.googleapis.com/css?family=Product+Sans' rel='stylesheet' type='text/css'>
+
<link href="https://fonts.googleapis.com/css?family=Product+Sans" rel="stylesheet" type="text/css">
 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
 +
<link href="https://2016.igem.org/Team:NYMU-Taipei/StyleSheets/sheet?action=raw&ctype=text/css" rel="stylesheet">
  
 
<style type="text/css" rel="stylesheet">
 
<style type="text/css" rel="stylesheet">
  
 
@media screen and (min-width: 300px) and (max-width: 1000px){
 
@media screen and (min-width: 300px) and (max-width: 1000px){
 +
.Labbook{display:none;}
 +
.Labbooksp{width:100%;}
 +
.fund{height:250px; width:100%; padding-top:50px;}
 +
.fund a{ box-shadow:0 0 5px #999; position:relative; margin:auto; bottom:0px; text-decoration:none; color:#FFF; display:block; border: solid 1px #69F; background-color:#6CF; border-radius:3px; width:100px; text-align:center;}
 +
.bfund a:hover{ box-shadow:0 0 5px #666; background-color:#6BF;}
 +
 
}
 
}
  
Line 19: Line 26:
  
 
body{background-color:#FFFFFF;}
 
body{background-color:#FFFFFF;}
−
h1{font-family: 'Product Sans', Arial, sans-serif; color:#FFFFFF; font-size:72px;}
+
h1{font-family: 'Product Sans', Arial, sans-serif; color:#FFFFFF; font-size:72px; display:block;}
−
.wrap{ width:964px; margin:auto; background-color:#CCCCCC; margin-top:100px;}
+
h2{font-family: 'Product Sans', Arial, sans-serif; color:#000000;}
−
.header{width:100%; text-align:center; background-color:#000000;}
+
.wrap{ width:1100px; margin:auto; background-color:#CCCCCC; margin-top:10px;}
−
.mask{ height:180px; overflow:hidden; border:solid 1px #999; justify-content:space-between; display:flex; position:relative; margin:-1px 0 0 -1px;}
+
.header{width:80%; text-align:center; background-color:#000000; margin:auto; margin-top:100px;}
 +
.mask{ height:240px; overflow:hidden; border:solid 1px #999; margin:-1px 0 0 -1px; width:320px; float:left;}
 
.boxWrap{
 
.boxWrap{
−
width: 240px;
+
width: 320px;
 
-moz-transition:margin-top .5s ease-out;
 
-moz-transition:margin-top .5s ease-out;
 
-webkit-transition:margin-top .5s ease-out;
 
-webkit-transition:margin-top .5s ease-out;
Line 30: Line 38:
 
-ms-transition:margin-top .5s ease-out;
 
-ms-transition:margin-top .5s ease-out;
 
}
 
}
−
.boxWrap:hover{ margin-top:-179px;}
+
.boxWrap:hover{ margin-top:-239px;}
 
.boxWrap h1{ font-size:17px; color:#000;}
 
.boxWrap h1{ font-size:17px; color:#000;}
−
.box1, .box2{ padding:10px; background-color:#EEE; color:#666; height:160px;}
+
.box1{ padding:10px; background-color:#EEE; color:#FFF; height:220px;}
 +
.box2{ padding:10px; background-color:#666; color:#FFF; height:220px;}
 
.box2{ margin-top: -1px; position:relative;}
 
.box2{ margin-top: -1px; position:relative;}
−
.box2 p{ margin-bottom:.5em;}
+
.box2 p{ margin-bottom:.5em;}.box2 h1{ color:#FFF;}
−
.box2 a{ box-shadow:0 0 5px #999; position:absolute; left:70px; bottom:10px; text-decoration:none; color:#FFF; display:block; border: solid 1px #69F; background-color:#6CF; border-radius:3px; width:100px; text-align:center;}
+
.box2 a{ box-shadow:0 0 5px #999; position:relative; margin:auto; bottom:0px; text-decoration:none; color:#FFF; display:block; border: solid 1px #69F; background-color:#6CF; border-radius:3px; width:100px; text-align:center;}
−
.box2 a:hover{ box-shadow:0 0 5px #666; background-color:#6BF;
+
.box2 a:hover{ box-shadow:0 0 5px #666; background-color:#6BF;}
 +
.Labbook{width:100%;}
 +
.Labbooksp{display:none;}
  
 
}
 
}
Line 46: Line 57:
 
<body>
 
<body>
  
−
<div class="wrap">
+
  <div class="prototypeprototypesp">
−
  <div class="header"><h1>Lab Book</h1></div>
+
        <div class="imageimage00">
−
  <div class="mask">
+
            <img src="https://static.igem.org/mediawiki/2016/4/41/T--NYMU-Taipei--%E5%88%86%E9%A0%81_notebook_%E6%89%8B%E6%A9%9F%E7%89%88_labnote.jpg" width="100%" height="100%" />
 +
        </div>
 +
    </div>
  
 +
    <div class="prototypeprototype">
 +
        <div class="imageimage00">
 +
            <img src="https://static.igem.org/mediawiki/2016/1/17/%E5%88%86%E9%A0%81_labnote_%E5%8A%A0%E5%AD%97%E7%89%88_labnote.jpg" width="100%" height="100%" />
 +
        </div>
 +
    </div>
  
−
    <div class="boxWrap">
+
<div id="wrap">
  
−
      <div class="box1">
+
<div class="Labbooksp">
−
        <img src="images/a1.jpg" width="220" height="140" />
+
−
        <h1>Illustrator</h1>
+
−
        </div>
+
  
−
      <div class="box2">
+
<div class="fund">
−
        <h1>Illustrator</h1>
+
<h4><i>Metarhizium anisopliae</i></h4>
−
         <p>本課程將從最基本的工具操作、平面設計、插畫設計、icon 設計、logo 設計、印刷排版...講起，課程內將有大量的範例讓您實際操作，因此沒有學過 illustrator 的也可以參加喔!</p>
+
         <p>This page contains our experimental progress with <i>Metarhizium anisopliae</i>, which includes cultivation, transformation, and characterization essay.</p>
−
        <a href="javascript:;">我要報名</a>
+
<a href="https://2016.igem.org/Team:NYMU-Taipei/Notebook-Lab_Book-prototype_lab_book"><i>Metarhizium anisopliae</i></a>
−
      </div>
+
</div>
  
−
    </div>
+
<div class="fund">
 +
<h4><i>Bactrocera dorsalis</i></h4>
 +
        <p>This subpage contains the protocols for the cultivation of <i>Bactocera dorsalis</i> and hemolymph extraction of various insects</p>
 +
<a href="https://2016.igem.org/Team:NYMU-Taipei/Notebook-Lab_Book-fruit_flies_hemolymph"><i>Bactrocera dorsalis</i></a>
 +
</div>
  
 +
<div class="fund">
 +
<h4>Escherichia coli</h4>
 +
        <p>Here is our plasmid construction lab note. We classified our experiment records into six categories and listed our records in a day-by-day format to make it easier to understand.</p>
 +
<a href="https://2016.igem.org/Team:NYMU-Taipei/Notebook-Lab_Book-Lab_note"><i>Escherichia coli</i></a>
 +
</div>
  
−
  </div>
+
</div>
 +
 
 +
<div class="Labbook">
 +
<div class="wrap">
 
   <div class="mask">
 
   <div class="mask">
 
     <div class="boxWrap">
 
     <div class="boxWrap">
 
       <div class="box1">
 
       <div class="box1">
−
         <img src="images/a2.jpg" width="220" height="140" />
+
         <img src="https://static.igem.org/mediawiki/2016/2/2a/T--NYMU-Taipei--%E4%B8%BB%E9%A0%81-%E9%BB%91%E5%83%B5%E8%8F%8C.jpg" width="300" height="200" />
−
         <h1>Photoshop</h1>
+
         <h1><i>Metarhizium anisopliae</i></h1>
 
         </div>
 
         </div>
 
       <div class="box2">
 
       <div class="box2">
−
         <h1>Photoshop</h1>
+
         <h1><i>Metarhizium anisopliae</i></h1><br />
−
         <p>Photoshop 是影像設計界最重要的軟體，想學習職業級的影像處理技巧以及合成技巧嗎！您不能錯過本課程喔！全課程包含大量的修圖範例、去背、特效合成範例、商業設計範例</p>
+
         <p>This page contains our experimental progress with <i>Metarhizium anisopliae</i>, which includes cultivation, transformation, and characterization essay.</p><br /><br />
−
         <a href="javascript:;">我要報名</a>
+
         <a href="https://2016.igem.org/Team:NYMU-Taipei/Notebook-Lab_Book-prototype_lab_book">Click</a>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
Line 84: Line 111:
 
     <div class="boxWrap">
 
     <div class="boxWrap">
 
       <div class="box1">
 
       <div class="box1">
−
         <img src="images/a3.jpg" width="220" height="140" />
+
         <img src="https://static.igem.org/mediawiki/2016/3/34/T--NYMU-Taipei--%E4%B8%BB%E9%A0%81-prototype.jpg" width="300" height="200" />
−
         <h1>ActionScript 3.0</h1>
+
         <h1>Bactrocera dorsalis</h1>
 
         </div>
 
         </div>
 
       <div class="box2">
 
       <div class="box2">
−
         <h1>ActionScript 3.0</h1>
+
         <h1><i>Bactrocera dorsalis</i></h1><br />
−
         <p>本課程是 ActionScript 3.0 的入門課程，從最基本的指令語法講起，讓您一步一步打好 ActionScript 3.0 基礎，再討論「物件導向程式設計」的觀念，讓您學會 ActionScript 3.0 精髓</p>
+
         <p>This subpage contains the protocols for the cultivation of <i>Bactocera dorsalis</i> and hemolymph extraction of various insects</p><br /><br />
−
         <a href="javascript:;">我要報名</a>
+
         <a href="https://2016.igem.org/Team:NYMU-Taipei/Notebook-Lab_Book-fruit_flies_hemolymph">Click</a>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
Line 97: Line 124:
 
     <div class="boxWrap">
 
     <div class="boxWrap">
 
       <div class="box1">
 
       <div class="box1">
−
         <img src="images/a4.jpg" width="220" height="140" />
+
         <img src="https://static.igem.org/mediawiki/2016/7/7b/T--NYMU-Taipei--%E4%B8%BB%E9%A0%81_wetlab.jpg" width="300" height="200" />
−
         <h1>Android APP</h1>
+
         <h1>Escherichia coli</h1>
 
         </div>
 
         </div>
 
       <div class="box2">
 
       <div class="box2">
−
         <h1>Android APP</h1>
+
         <h1><i>Escherichia coli</i></h1><br />
−
        <p>完全的入門攻略 一起加入熱血的 Android 行列，適合對像：對手機開發有高度狂熱者，至少寫過任一物件導向程式語言，對類別有一定基礎者，都是奶綠茶老師實際開發過的 APP</p>
+
         <p>Here is our plasmid construction lab note. We classified our experiment records into six categories and listed our records in a day-by-day format to make it easier to understand.</p><br /><br />
−
        <a href="javascript:;">我要報名</a>
+
         <a href="https://2016.igem.org/Team:NYMU-Taipei/Notebook-Lab_Book-Lab_note">Click</a>
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <div class="mask">
+
−
    <div class="boxWrap">
+
−
      <div class="box1">
+
−
        <img src="images/a5.jpg" width="220" height="140" />
+
−
        <h1>Mobile Web</h1>
+
−
        </div>
+
−
      <div class="box2">
+
−
        <h1>Mobile Web</h1>
+
−
         <p>使用 HTML5 和 CSS3 語法，搭配 JavaScript 和 jQuery 語法製作動態翻頁、AJAX 載入、觸控事件，符合 iOS 和 Android 系統，還可以使用 Phonegap 將網頁包裝成 APP 上架</p>
+
−
        <a href="javascript:;">我要報名</a>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <div class="mask">
+
−
    <div class="boxWrap">
+
−
      <div class="box1">
+
−
        <img src="images/a6.jpg" width="220" height="140" />
+
−
        <h1>User Interface</h1>
+
−
        </div>
+
−
      <div class="box2">
+
−
        <h1>User Interface</h1>
+
−
        <p>所謂 User Interface 設計即使用者與系統之間的一個溝通介面設計，而 User Experience Design 在設計的過程中，讓 UI 的設計更直覺及更貼近人性思維</p>
+
−
         <a href="javascript:;">我要報名</a>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <div class="mask">
+
−
    <div class="boxWrap">
+
−
      <div class="box1">
+
−
        <img src="images/a7.jpg" width="220" height="140" />
+
−
        <h1>ActionScript 3.0 & XML</h1>
+
−
        </div>
+
−
      <div class="box2">
+
−
        <h1>ActionScript 3.0 & XML</h1>
+
−
        <p>Flash 和網頁的傳值與接值，如何和伺服端程式溝通，結合 XML 的整合應用，讓作品更方便的新增與管理，實作練習在專案上常使用到的互動式 Flash 新聞公告，Flash 留言版</p>
+
−
        <a href="javascript:;">我要報名</a>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
  <div class="mask">
+
−
    <div class="boxWrap">
+
−
      <div class="box1">
+
−
        <img src="images/a8.jpg" width="220" height="140" />
+
−
        <h1>Photoshop JPG & RAW</h1>
+
−
        </div>
+
−
      <div class="box2">
+
−
        <h1>Photoshop JPG & RAW</h1>
+
−
        <p>為攝影玩家量身打造的 Photoshop 攝影後製課程!! 課程內有大量的照片和範例讓您實際操作，從基礎圖的像光學觀念分析講解，讓您札札實實打好後製基礎，最實用的修片後製技巧</p>
+
−
        <a href="javascript:;">我要報名</a>
+
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
</div>
 +
</div>
 +
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 00:58, 20 October 2016

Metarhizium anisopliae

This page contains our experimental progress with Metarhizium anisopliae, which includes cultivation, transformation, and characterization essay.

Metarhizium anisopliae

Bactrocera dorsalis

This subpage contains the protocols for the cultivation of Bactocera dorsalis and hemolymph extraction of various insects

Bactrocera dorsalis

Escherichia coli

Here is our plasmid construction lab note. We classified our experiment records into six categories and listed our records in a day-by-day format to make it easier to understand.

Escherichia coli

Metarhizium anisopliae

Metarhizium anisopliae


This page contains our experimental progress with Metarhizium anisopliae, which includes cultivation, transformation, and characterization essay.



Click

Bactrocera dorsalis

Bactrocera dorsalis


This subpage contains the protocols for the cultivation of Bactocera dorsalis and hemolymph extraction of various insects



Click

Escherichia coli

Escherichia coli


Here is our plasmid construction lab note. We classified our experiment records into six categories and listed our records in a day-by-day format to make it easier to understand.



Click