Talk:Team:Mingdao

From 2014hs.igem.org

(Difference between revisions)
(Created page with "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><met...")
Line 1: Line 1:
-
<&#33;DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><&#33;-- TemplateBeginEditable name="doctitle" --><title>Test</title><&#33;-- TemplateEndEditable --><&#33;-- TemplateBeginEditable name="head" --><&#33;-- TemplateEndEditable --><style type="text/css"><&#33;--
+
<!DOCTYPE html>
-
body {
+
<!--[if lt IE 8 ]><html class="no-js ie ie7" lang="en"> <![endif]-->
-
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
+
<!--[if IE 8 ]><html class="no-js ie ie8" lang="en"> <![endif]-->
-
background-color: #4E5869;
+
<!--[if (gte IE 8)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
-
margin: 0;
+
<head>
-
padding: 0;
+
 
-
color: #000;
+
  <!--- Basic Page Needs
-
}
+
  ================================================== -->
-
/* ~~ 元素/標籤選取器 ~~ */
+
  <meta charset="utf-8">
-
ul, ol, dl { /* 由於瀏覽器之間的差異，最佳作法是在清單中使用零寬度的欄位間隔及邊界。為了保持一致，您可以在這裡指定所要的量，或在清單包含的清單項目 (LI、DT、DD) 上指定所要的量。請記住，除非您寫入較為特定的選取器，否則在此執行的作業將重疊顯示到 .nav 清單。 */
+
<title>Sparrow - Free Responsive HTML5/CSS3 Template</title>
-
padding: 0;
+
<meta name="description" content="">
-
margin: 0;
+
<meta name="author" content="">
-
}
+
 
-
h1, h2, h3, h4, h5, h6, p {
+
  <!-- Mobile Specific Metas
-
margin-top: 0; /* 移除上方邊界可以解決邊界可能從其包含的 Div 逸出的問題。剩餘的下方邊界可以保持 Div 不與接在後面的元素接觸。 */
+
  ================================================== -->
-
padding-right: 15px;
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-
padding-left: 15px; /* 將欄位間隔加入至 Div 內元素的兩側 (而不是 Div 本身)，即可不需執行任何方塊模型的計算作業。具有側邊欄位間隔的巢狀 Div 也可當做替代方法。 */
+
 
-
}
+
<!-- CSS
-
a img { /* 這個選取器會移除某些瀏覽器在影像由連結所圍繞時，影像周圍所顯示的預設藍色邊框 */
+
    ================================================== -->
-
border: none;
+
  <link rel="stylesheet" href="css/default.css">
-
}
+
<link rel="stylesheet" href="css/layout.css">
-
/* ~~ 網站連結的樣式設定必須保持此順序，包括建立滑過 (Hover) 效果的選取器群組在內。~~ */
+
  <link rel="stylesheet" href="css/media-queries.css">
-
a:link {
+
 
-
color:#414958;
+
  <!-- Script
-
text-decoration: underline; /* 除非您要設定非常獨特的連結樣式，否則最好提供底線，以便快速看出 */
+
  ================================================== -->
-
}
+
<script src="js/modernizr.js"></script>
-
a:visited {
+
 
-
color: #4E5869;
+
  <!-- Favicons
-
text-decoration: underline;
+
================================================== -->
-
}
+
<link rel="shortcut icon" href="favicon.ico" >
-
a:hover, a:active, a:focus { /* 這個選取器群組可以讓使用鍵盤導覽的使用者，也和使用滑鼠的使用者一樣擁有相同的滑過體驗。 */
+
 
-
text-decoration: none;
+
</head>
-
}
+
 
-
/* ~~ 這個容器環繞著所有其他的 Div，並依百分比設定其寬度 ~~ */
+
<body>
-
.container {
+
 
-
width: 80%;
+
  <!-- Header
-
max-width: 1260px;/* 建議您使用最大寬度，如此版面在大型螢幕上就不致於過寬，讓行保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
+
  ================================================== -->
-
min-width: 780px;/* 建議您使用最小寬度，如此版面在大型螢幕上就不致於過窄，讓行在側欄中保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
+
  <header>
-
background-color: #FFF;
+
 
-
margin: 0 auto; /* 兩側的自動值與寬度結合後，版面便會置中對齊。如果將 .container 的寬度設為 100%，就不需要這麼做。 */
+
      <div class="row">
-
overflow: hidden; /* 這個宣告可以讓 .container 清除其中的所有浮動欄。 */
+
 
-
}
+
        <div class="twelve columns">
-
/* ~~ 這是版面的欄位。~~
+
 
-
1) 欄位間隔只會置於 Div 的頂端或底部。這些 Div 內的元素在兩側會有欄位間隔，可讓您不需進行「方塊模型計算」。請記住，如果對 Div 本身加入任何側邊的欄位間隔或邊框，在計算「總」寬度時，就會將這些加入您定義的寬度。您也可以選擇移除 Div 中元素的欄位間隔，然後在其中放置沒有寬度的第二個 Div，並依設計所需放置欄位間隔。
+
            <div class="logo">
-
2) 尚未為這些欄位提供邊界，因為它們全都是浮動的。如果必須加入邊界，請避免將其放在浮動方向的一側 (例如將右邊界放在設定為向右浮動的 Div 上)。在許多時候，您都可以改用欄位間隔。對於必須違反此規則的 Div，您應該在 Div 的規則中加入 "display:inline" 宣告，以防止某些版本的 Internet Explorer 將邊界加倍。
+
              <a href="index.html"><img alt="" src="images/logo.png"></a>
-
3) 因為可在文件中多次使用類別 (也可對單一的元素套用多個類別)，所以已為欄位指定類別名稱，而非 ID。例如，您可在必要時將兩個側邊列 Div 堆疊起來。如有需要，也可以將這些名稱輕鬆地變更為 ID (只要您在每份文件中只使用一次)。
+
            </div>
-
4) 如果想要將導覽放在右方而非左方，只要將這些欄設定為往反方向浮動 (全部往右，而非全部往左)，它們就會以相反順序呈現。您不需要在 HTML 原始碼中移動 Div。
+
 
-
*/
+
            <nav id="nav-wrap">
-
.sidebar1 {
+
 
-
float: left;
+
              <a class="mobile-btn" href="#nav-wrap" title="Show navigation">Show navigation</a>
-
width: 20%;
+
            <a class="mobile-btn" href="#" title="Hide navigation">Hide navigation</a>
-
background-color: #93A5C4;
+
 
-
padding-bottom: 10px;
+
              <ul id="nav" class="nav">
-
}
+
 
-
.content {
+
              <li class="current"><a href="index.htm">Home</a></li>
-
padding: 10px 0;
+
              <li><span><a href="blog.html">Blog</a></span>
-
width: 60%;
+
                    <ul>
-
float: left;
+
                        <li><a href="blog.html">Blog Index</a></li>
-
}
+
                        <li><a href="single.html">Post</a></li>
-
.sidebar2 {
+
                    </ul>
-
float: left;
+
                  </li>
-
width: 20%;
+
                  <li><span><a href="portfolio-index.html">Portfolio</a></span>
-
background-color: #93A5C4;
+
                    <ul>
-
padding: 10px 0;
+
                        <li><a href="portfolio-index.html">Portfolio Index</a></li>
-
}
+
                        <li><a href="portfolio.html">Portfolio Entry</a></li>
-
/* ~~ 這個群組選取器會在 .content 區域空間中提供清單 ~~ */
+
                    </ul>
-
.content ul, .content ol {
+
                  </li>
-
padding: 0 15px 15px 40px; /* 這個欄位間隔反映出上方標題和段落規則中的右方間隔。當欄位間隔位於下方時，便可將清單中的其他元素間隔開來；當位於左方時，則可藉此建立縮排。這些動作均可依需要進行調整。 */
+
              <li><a href="about.html">About</a></li>
-
}
+
                  <li><a href="contact.html">Contact</a></li>
-
/* ~~ 導覽清單樣式 (如果選擇使用 Spry 之類的預製飛出選單，則可移除) ~~ */
+
                  <li><a href="styles.html">Features</a></li>
-
ul.nav {
+
 
-
list-style: none; /* 這會移除清單標記 */
+
              </ul> <!-- end #nav -->
-
border-top: 1px solid #666; /* 這會建立連結的上方邊框，其他則都會使用下方邊框放置在 LI 上 */
+
 
-
margin-bottom: 15px; /* 這會在下方的內容上建立導覽間的間距 */
+
            </nav> <!-- end #nav-wrap -->
-
}
+
 
-
ul.nav li {
+
        </div>
-
border-bottom: 1px solid #666; /* 這會建立按鈕分隔 */
+
 
-
}
+
      </div>
-
ul.nav a, ul.nav a:visited { /* 將這些選取器放入群組，即可確保您的連結即使在受到點擊後仍保有按鈕外觀 */
+
 
-
padding: 5px 5px 5px 15px;
+
  </header> <!-- Header End -->
-
display: block; /* 這會為連結提供區塊屬性，使連結能填滿包含它的整個 LI，讓整個區域都能回應滑鼠點按動作。 */
+
 
-
text-decoration: none;
+
  <!-- Intro Section
-
background-color: #8090AB;
+
  ================================================== -->
-
color: #000;
+
  <section id="intro">
-
}
+
 
-
ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* 這會同時變更滑鼠及鍵盤導覽器的背景及文字顏色 */
+
      <!-- Flexslider Start-->
-
background-color: #6F7D94;
+
  <div id="intro-slider" class="flexslider">
-
color: #FFF;
+
 
-
}
+
  <ul class="slides">
-
/* ~~ 其他 float/clear 類別 ~~ */
+
 
-
.fltrt {  /* 這個類別可用來讓元素在頁面中浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
+
  <!-- Slide -->
-
float: right;
+
  <li>
-
margin-left: 8px;
+
  <div class="row">
-
}
+
  <div class="twelve columns">
-
.fltlft { /* 這個類別可用來讓元素在頁面左方浮動，浮動的元素必須位於頁面上相鄰的元素之前。 */
+
  <div class="slider-text">
-
float: left;
+
  <h1>Free amazing site template<span>.</span></h1>
-
margin-right: 8px;
+
  <p>Aenean condimentum, lacus sit amet luctus lobortis, dolores et quas molestias excepturi
-
}
+
                        enim tellus ultrices elit, amet consequat enim elit noneas sit amet luctu. lacus sit amet luctus lobortis, dolores et quas molestias excepturi
-
.clearfloat { /* 這個類別可放置在 <br /> 或空白的 Div 上，當做接在 #container 內最後一個浮動 Div 後方的最後一個元素 (如果已移除 .container 上的 overflow:hidden) */
+
                        enim tellus ultrices elit.</p>
-
clear:both;
+
  </div>
-
height:0;
+
                    <div class="slider-image">
-
font-size: 1px;
+
                        <img src="images/sliders/home-slider-image-01.png" alt="" />
-
line-height: 0px;
+
                    </div>
-
}
+
  </div>
-
--></style><&#33;--[if lte IE 7]><style>
+
  </div>
-
.content { margin-right: -1px; } /* 這個 1 像素的負邊界可放在此版面中的任何欄上，而具有相同的修正效果。 */
+
  </li>
-
ul.nav a { zoom: 1; }  /* zoom 屬性可為 IE 提供修正連結之間多餘空白時所需的 hasLayout 觸發。 */
+
 
-
</style><&#33;[endif]--></head><body><div class="container"><div class="sidebar1"><ul class="nav"><li><a href="#">連結一</a></li><li><a href="#">連結二</a></li><li><a href="#">連結三</a></li><li><a href="#">連結四</a></li></ul><p> 以上的連結示範基本的導覽結構，此結構使用以 CSS 設定樣式的項目清單。請以此做為起點，然後修改屬性來產生您獨有的外觀。如果需要飛出選單，請使用 a Spry menu、menu widget from Adobe's Exchange 或多種其他的 Javascript 或 CSS 解決方案自行建立。</p><p>如果想要將導覽列於頂端，只需將 ul.nav 移到頁面頂端，然後重新建立樣式設定即可。</p><&#33;-- end .sidebar1 --></div><div class="content"><h1>This is a testing page</h1><p>請注意，這些版面的 CSS 都有詳細的註解。如果您是在「設計」檢視中進行大部分的作業，可以看一下程式碼來取得有關使用流動版面 CSS 的提示。您可以在啟動您的網站之前，將這些註解移除。有關這些 CSS 版面所使用的技巧之詳細資訊，請至 Adobe 開發人員中心閱讀本文 - <a href=http://www.adobe.com/go/adc_css_layouts">http://www.adobe.com/go/adc_css_layouts</a>。</p><h2>清除</h2><p>因為所有的欄都是浮動的，所以這個版面會在 .container 上使用 overflow:hidden。這項清除技巧可強制 .container 辨識欄結束的位置，以顯示放置在 .container 上的任何邊框或背景顏色。如果有伸出 .container 外的大型元素，就會顯示為截斷。您同時也無法使用負的邊界或具有負值的絕對定位，將元素拉到 .container 外，如果這麼做，元素將無法在 .container 外顯示。</p><p>如果您需要使用這些屬性，就必須使用不同的清除方法。最可靠的方法是在最後的浮動欄之後 (但在 .container 結束之前) 加入 &lt;br class="clearfloat" /&gt; or &lt;div class="clearfloat"&gt;&lt;/div&gt;，這樣就會產生相同的清除效果。</p><h3>頁尾</h3><p>在欄後加入頁尾 (但仍在 .container 內) 會導致此項 overflow:hidden 清除方法失敗。您可以將 .footer 在第一個 .container 外放入第二個 .container 中，而不會造成不良影響。最簡單的選擇可能是以包含頁首和頁尾的版面為起點，然後再將頁首移除，以利用該版面類型中的清除方法。</p><h4>Internet Explorer 條件式註解</h4><p>這些流動版面包含 Internet Explorer 條件式註解 (IECC)，可用來修正兩個問題。 </p><ol><li>瀏覽器在依百分比而定的版面中捨入 Div 大小的方法不一致。如果瀏覽器必須呈現 144.5 像素或 564.5 像素等數字，就必須將其捨入成最接近的整數。Safari 和 Opera 會捨去小數位，Internet Explorer 會進位，Firefox 則會向上進一欄然後向下捨去一欄，以將容器完全填滿。這些捨入問題可能會導致某些版面的不一致。在此 IECC 中，有 1 像素的負邊界可用來修正 IE。您可以將其移到任何欄 (左右方皆可)，依您的版面需求而定。</li><li>zoom 屬性會加入至導覽清單內的錨點，因為在某些情況下，IE6 或 IE7 中會呈現多餘的空白。縮放能為 IE 提供修正此問題的專屬 hasLayout 屬性。</li></ol><&#33;-- end .content --></div><div class="sidebar2"><h4>背景</h4><p>就本質而言，任何 Div 上的背景顏色都只會顯示內容的長度。如果您想要使用分隔線而非顏色，請將邊框放置在 .content Div 的側邊 (但只有在其一定會包含更多內容時，才能這麼做)。</p><&#33;-- end .sidebar2 --></div><&#33;-- end .container --></div></body></html>
+
            <!-- Slide -->
 +
  <li>
 +
  <div class="row">
 +
  <div class="twelve columns">
 +
  <div class="slider-text">
 +
  <h1>Responsive + HTML5 + CSS3<span>.</span></h1>
 +
  <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
 +
                        deleniti eos et accusamus. amet consequat enim elit noneas sit amet luctu. lacus sit amet luctus lobortis.
 +
                        Aenean condimentum, lacus sit amet luctus.</p>
 +
  </div>
 +
                    <div class="slider-image">
 +
                        <img src="images/sliders/home-slider-image-02.png" alt="" />
 +
                    </div>
 +
  </div>
 +
  </div>
 +
  </li>
 +
 
 +
  </ul>
 +
 
 +
  </div> <!-- Flexslider End-->
 +
 
 +
  </section> <!-- Intro Section End-->
 +
 
 +
  <!-- Info Section
 +
  ================================================== -->
 +
  <section id="info">
 +
 
 +
      <div class="row">
 +
 
 +
        <div class="bgrid-quarters s-bgrid-halves">
 +
 
 +
          <div class="columns">
 +
              <h2>Clean & Modern.</h2>
 +
 
 +
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
 +
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 +
              </p>
 +
          </div>
 +
 
 +
          <div class="columns">
 +
              <h2>Responsive.</h2>
 +
 
 +
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
 +
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 +
              </p>
 +
          </div>
 +
 
 +
          <div class="columns s-first">
 +
              <h2>HTML5 + CSS3.</h2>
 +
 
 +
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
 +
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 +
              </p>
 +
          </div>
 +
 
 +
          <div class="columns">
 +
              <h2>Free of Charge.</h2>
 +
 
 +
              <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
 +
              Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 +
              </p>
 +
          </div>
 +
 
 +
          </div>
 +
 
 +
      </div>
 +
 
 +
  </section> <!-- Info Section End-->
 +
 
 +
  <!-- Works Section
 +
  ================================================== -->
 +
  <section id="works">
 +
 
 +
      <div class="row">
 +
 
 +
        <div class="twelve columns align-center">
 +
            <h1>Some of our recent works.</h1>
 +
        </div>
 +
 
 +
        <div id="portfolio-wrapper" class="bgrid-quarters s-bgrid-halves">
 +
 
 +
      <div class="columns portfolio-item">
 +
              <div class="item-wrap">
 +
      <a href="portfolio.html">
 +
                    <img alt="" src="images/portfolio/geometrics.jpg">
 +
                    <div class="overlay"></div>
 +
                    <div class="link-icon"><i class="fa fa-link"></i></div>
 +
                  </a>
 +
    <div class="portfolio-item-meta">
 +
      <h5><a href="portfolio.html">Geometrics</a></h5>
 +
                    <p>Illustration</p>
 +
    </div>
 +
              </div>
 +
    </div>
 +
 
 +
            <div class="columns portfolio-item">
 +
              <div class="item-wrap">
 +
      <a href="portfolio.html">
 +
                    <img alt="" src="images/portfolio/console.jpg">
 +
                    <div class="overlay"></div>
 +
                    <div class="link-icon"><i class="fa fa-link"></i></div>
 +
                  </a>
 +
    <div class="portfolio-item-meta">
 +
      <h5><a href="portfolio.html">Console</a></h5>
 +
                    <p>Web Development</p>
 +
    </div>
 +
              </div>
 +
    </div>
 +
 
 +
            <div class="columns portfolio-item s-first">
 +
              <div class="item-wrap">
 +
      <a href="portfolio.html">
 +
                    <img alt="" src="images/portfolio/camera-man.jpg">
 +
                    <div class="overlay"></div>
 +
                    <div class="link-icon"><i class="fa fa-link"></i></div>
 +
                  </a>
 +
    <div class="portfolio-item-meta">
 +
      <h5><a href="portfolio.html">Camera Man</a></h5>
 +
                    <p>Photography</p>
 +
    </div>
 +
              </div>
 +
    </div>
 +
 
 +
            <div class="columns portfolio-item">
 +
              <div class="item-wrap">
 +
      <a href="portfolio.html">
 +
                    <img alt="" src="images/portfolio/into-the-light.jpg">
 +
                    <div class="overlay"></div>
 +
                    <div class="link-icon"><i class="fa fa-link"></i></div>
 +
                  </a>
 +
    <div class="portfolio-item-meta">
 +
      <h5><a href="portfolio.html">Into The Light</a></h5>
 +
                    <p>Branding</p>
 +
    </div>
 +
              </div>
 +
    </div>
 +
 
 +
        </div>
 +
 
 +
      </div>
 +
 
 +
  </section> <!-- Works Section End-->
 +
 
 +
  <!-- Journal Section
 +
  ================================================== -->
 +
  <section id="journal">
 +
 
 +
      <div class="row">
 +
        <div class="twelve columns align-center">
 +
            <h1>Our latest posts and rants.</h1>
 +
        </div>
 +
      </div>
 +
 
 +
      <div class="blog-entries">
 +
 
 +
        <!-- Entry -->
 +
        <article class="row entry">
 +
 
 +
            <div class="entry-header">
 +
 
 +
              <div class="permalink">
 +
                  <a href="single.html"><i class="fa fa-link"></i></a>
 +
              </div>
 +
 
 +
              <div class="ten columns entry-title pull-right">
 +
                  <h3><a href="single.html">Proin gravida nibh vel velit auctor aliquet Aenean sollicitudin auctor.</a></h3>
 +
              </div>
 +
 
 +
              <div class="two columns post-meta end">
 +
                  <p>
 +
                  <time datetime="2014-01-31" class="post-date" pubdate="">Jan 31, 2014</time>
 +
                  <span class="dauthor">By Sakura Haruno</span>
 +
                  </p>
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
            <div class="ten columns offset-2 post-content">
 +
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
 +
              deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.
 +
              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
 +
              <a class="more-link" href="single.html">Read More<i class="fa fa-arrow-circle-o-right"></i></a></p>
 +
            </div>
 +
 
 +
        </article> <!-- Entry End -->
 +
 
 +
        <!-- Entry -->
 +
        <article class="row entry">
 +
 
 +
            <div class="entry-header">
 +
 
 +
              <div class="permalink">
 +
                  <a href="single.html"><i class="fa fa-link"></i></a>
 +
              </div>
 +
 
 +
              <div class="ten columns entry-title pull-right">
 +
                  <h3><a href="single.html">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit sed.</a></h3>
 +
              </div>
 +
 
 +
              <div class="two columns post-meta end">
 +
                  <p>
 +
                  <time datetime="2014-01-29" class="post-date" pubdate="">Jan 30, 2014</time>
 +
                  <span class="dauthor">By John Doe</span>
 +
                  </p>
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
            <div class="ten columns offset-2 post-content">
 +
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
 +
              deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.
 +
              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
 +
              <a class="more-link" href="single.html">Read More<i class="fa fa-arrow-circle-o-right"></i></a></p>
 +
            </div>
 +
 
 +
        </article> <!-- Entry End -->
 +
 
 +
        <!-- Entry -->
 +
        <article class="row entry">
 +
 
 +
            <div class="entry-header">
 +
 
 +
              <div class="permalink">
 +
                  <a href="single.html"><i class="fa fa-link"></i></a>
 +
              </div>
 +
 
 +
              <div class="ten columns entry-title pull-right">
 +
                  <h3><a href="blog-single.html">Quis autem vel esse eum iure reprehenderit qui in ea voluptate velit esse.</a></h3>
 +
              </div>
 +
 
 +
              <div class="two columns post-meta end">
 +
                  <p>
 +
                  <time datetime="2014-01-28" class="post-date" pubdate="">Jan 28, 2014</time>
 +
                  <span class="dauthor">By Naruto Uzumaki</span>
 +
                  </p>
 +
              </div>
 +
 
 +
            </div>
 +
 
 +
            <div class="ten columns offset-2 post-content">
 +
              <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
 +
              deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate.
 +
              At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.
 +
              <a class="more-link" href="single.html">Read More<i class="fa fa-arrow-circle-o-right"></i></a></p>
 +
            </div>
 +
 
 +
        </article> <!-- Entry End -->
 +
 
 +
      </div> <!-- Entries End -->
 +
 
 +
  </section> <!-- Journal Section End-->
 +
 
 +
  <!-- Call-To-Action Section
 +
  ================================================== -->
 +
  <section id="call-to-action">
 +
 
 +
      <div class="row">
 +
 
 +
        <div class="eight columns offset-1">
 +
 
 +
            <h1><a rel="nofollow" href="http://www.a2hosting.com/?utm___source=styleshoutdemo&utm_medium=__cpm&utm_content=&utm_campaign=">Host This Template on A2 Hosting.</a></h1>
 +
            <p>300% Faster Hosting on Their SwiftServer SSDs.</p>
 +
 
 +
        </div>
 +
 
 +
        <div class="three columns action">
 +
 
 +
            <a rel="nofollow" href="http://www.a2hosting.com/?utm___source=styleshoutdemo&utm_medium=__cpm&utm_content=&utm_campaign=" class="button">Sign Up Now</a>
 +
 
 +
        </div>
 +
 
 +
      </div>
 +
 
 +
  </section> <!-- Call-To-Action Section End-->
 +
 
 +
  <!-- Tweets Section
 +
  ================================================== -->
 +
  <section id="tweets">
 +
 
 +
      <div class="row">
 +
 
 +
        <div class="tweeter-icon align-center">
 +
            <i class="fa fa-twitter"></i>
 +
        </div>
 +
 
 +
        <ul id="twitter" class="align-center">
 +
            <li>
 +
              <span>
 +
              This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
 +
              Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum
 +
              <a href="#">http://t.co/CGIrdxIlI3</a>
 +
              </span>
 +
              <b><a href="#">2 Days Ago</a></b>
 +
            </li>
 +
            <!--
 +
            <li>
 +
              <span>
 +
              This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet.
 +
              Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum
 +
              <a href="#">http://t.co/CGIrdxIlI3</a>
 +
              </span>
 +
              <b><a href="#">3 Days Ago</a></b>
 +
            </li>
 +
            -->
 +
        </ul>
 +
 
 +
        <p class="align-center"><a href="#" class="button">Follow us</a></p>
 +
 
 +
      </div>
 +
 
 +
  </section> <!-- Tweet Section End-->
 +
 
 +
 
 +
 
 +
  <!-- footer
 +
  ================================================== -->
 +
  <footer>
 +
 
 +
      <div class="row">
 +
 
 +
        <div class="twelve columns">
 +
 
 +
            <ul class="footer-nav">
 +
<li><a href="#">Home.</a></li>
 +
              <li><a href="#">Blog.</a></li>
 +
              <li><a href="#">Portfolio.</a></li>
 +
              <li><a href="#">About.</a></li>
 +
              <li><a href="#">Contact.</a></li>
 +
              <li><a href="#">Features.</a></li>
 +
  </ul>
 +
 
 +
            <ul class="footer-social">
 +
              <li><a href="#"><i class="fa fa-facebook"></i></a></li>
 +
              <li><a href="#"><i class="fa fa-twitter"></i></a></li>
 +
              <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
 +
              <li><a href="#"><i class="fa fa-linkedin"></i></a></li>
 +
              <li><a href="#"><i class="fa fa-skype"></i></a></li>
 +
              <li><a href="#"><i class="fa fa-rss"></i></a></li>
 +
            </ul>
 +
 
 +
            <ul class="copyright">
 +
              <!--<li>&copy; 2014 Sparrow</li> -->
 +
              <li>Design by <a href="http://www.styleshout.com/">Styleshout</a></li>
 +
              <li>Sponsored by <a rel="nofollow" href="http://www.a2hosting.com/?utm___source=styleshoutdemo&utm_medium=__cpm&utm_content=&utm_campaign=">A2Hosting</a></li>
 +
            </ul>
 +
 
 +
        </div>
 +
 
 +
        <div id="go-top" style="display: block;"><a title="Back to Top" href="#">Go To Top</a></div>
 +
 
 +
      </div>
 +
 
 +
  </footer> <!-- Footer End-->
 +
 
 +
  <!-- Java Script
 +
  ================================================== -->
 +
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 +
  <script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
 +
  <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
 +
 
 +
  <script src="js/jquery.flexslider.js"></script>
 +
  <script src="js/doubletaptogo.js"></script>
 +
  <script src="js/init.js"></script>
 +
 
 +
</body>
 +
 
 +
</html>

Revision as of 03:18, 9 March 2014

<!DOCTYPE html> Sparrow - Free Responsive HTML5/CSS3 Template

  • Free amazing site template.

    Aenean condimentum, lacus sit amet luctus lobortis, dolores et quas molestias excepturi enim tellus ultrices elit, amet consequat enim elit noneas sit amet luctu. lacus sit amet luctus lobortis, dolores et quas molestias excepturi enim tellus ultrices elit.

  • Responsive + HTML5 + CSS3.

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti eos et accusamus. amet consequat enim elit noneas sit amet luctu. lacus sit amet luctus lobortis. Aenean condimentum, lacus sit amet luctus.

Clean & Modern.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Responsive.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

HTML5 + CSS3.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Free of Charge.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Some of our recent works.
Geometrics

Illustration
Console

Web Development
Camera Man

Photography
Into The Light

Branding

Our latest posts and rants.

Host This Template on A2 Hosting.

300% Faster Hosting on Their SwiftServer SSDs.

Sign Up Now
  • This is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum http://t.co/CGIrdxIlI3 2 Days Ago

Follow us

Retrieved from "http://2014hs.igem.org/Talk:Team:Mingdao"