Team:Nanjing China Bio/Index
From 2012.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
- | <html | + | <html> |
<head> | <head> | ||
- | + | <meta charset="utf-8"> | |
- | <meta | + | <title>Kroft template</title> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <title> | + | |
<!-- CSS --> | <!-- CSS --> | ||
- | + | <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> | |
+ | <link rel="stylesheet" href="css/social-icons.css" type="text/css" media="screen" /> | ||
+ | <!-- ENDS CSS --> | ||
- | + | <!--[if IE]> | |
- | + | <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> | |
- | + | ||
- | + | ||
- | <!--[if IE | + | |
- | + | ||
- | <script | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<![endif]--> | <![endif]--> | ||
- | <!-- ENDS | + | <!-- ENDS JS --> |
- | <!-- | + | <!-- JS --> |
- | + | <script type="text/javascript" src="js/jquery.min.js"></script> | |
- | + | <script type="text/javascript" src="js/custom.js"></script> | |
- | + | <script type="text/javascript" src="js/slider.js"></script> | |
+ | <script src="js/slides/source/slides.min.jquery.js"></script> | ||
+ | <script src="js/quicksand.js"></script> | ||
+ | <!-- superfish --> | ||
+ | <link rel="stylesheet" media="screen" href="css/superfish.css" /> | ||
+ | <script type="text/javascript" src="js/superfish-1.4.8/js/hoverIntent.js"></script> | ||
+ | <script type="text/javascript" src="js/superfish-1.4.8/js/superfish.js"></script> | ||
+ | <script type="text/javascript" src="js/superfish-1.4.8/js/supersubs.js"></script> | ||
+ | <!-- ENDS superfish --> | ||
+ | |||
+ | <!-- poshytip --> | ||
+ | <link rel="stylesheet" href="js/poshytip-1.0/src/tip-twitter/tip-twitter.css" type="text/css" /> | ||
+ | <link rel="stylesheet" href="js/poshytip-1.0/src/tip-yellowsimple/tip-yellowsimple.css" type="text/css" /> | ||
+ | <script type="text/javascript" src="js/poshytip-1.0/src/jquery.poshytip.min.js"></script> | ||
+ | <!-- ENDS poshytip --> | ||
- | + | <!-- Tweet --> | |
- | + | <link rel="stylesheet" href="css/jquery.tweet.css" media="all" type="text/css"/> | |
- | + | <script src="js/tweet/jquery.tweet.js" type="text/javascript"></script> | |
- | + | <!-- ENDS Tweet --> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <!-- ENDS | + | |
- | + | ||
<!-- prettyPhoto --> | <!-- prettyPhoto --> | ||
- | < | + | <script type="text/javascript" src="js/prettyPhoto/js/jquery.prettyPhoto.js"></script> |
+ | <link rel="stylesheet" href="js/prettyPhoto/css/prettyPhoto.css" type="text/css" media="screen" /> | ||
<!-- ENDS prettyPhoto --> | <!-- ENDS prettyPhoto --> | ||
- | <!-- | + | <!-- GOOGLE FONTS --> |
- | < | + | <link href='http://fonts.googleapis.com/css?family=Droid+Serif:400italic' rel='stylesheet' type='text/css'> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</head> | </head> | ||
<body> | <body> | ||
- | + | <!-- Dynamic Background --> | |
- | + | <div id="headerimgs"> | |
- | + | <div id="headerimg1" class="headerimg"></div> | |
- | + | <div id="headerimg2" class="headerimg"></div> | |
- | + | </div> | |
- | <div id=" | + | <!-- ENDS Dynamic Background --> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <!-- ENDS | + | |
- | <!-- | + | <!-- background nav --> |
- | <div id=" | + | <div id="headernav"> |
+ | <div id="back" class="btn"></div> | ||
+ | <div id="next" class="btn"></div> | ||
+ | </div> | ||
+ | <!-- ENDS background nav --> | ||
- | + | <div id="top-gap"></div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
+ | <!-- wrapper --> | ||
+ | <div class="wrapper"> | ||
- | + | <a href="index.html"><img id="logo" src="img/logo.png" alt="Kroft"></a> | |
- | + | ||
- | + | ||
- | + | <!-- nav bar holder --> | |
- | + | <div id="nav-bar-holder"> | |
- | + | <!-- Navigation --> | |
- | + | <ul id="nav" class="sf-menu"> | |
- | < | + | <li class="current-menu-item"><a href="index.html">Home</a></li> |
- | + | <li><a href="gallery.html">Gallery</a></li> | |
- | + | <li><a href="page.html">Pages</a> | |
- | + | <ul> | |
- | + | <li><a href="page.html">Sidebar page</a></li> | |
- | + | <li><a href="page-fullwidth.html">Fullwidth page</a></li> | |
- | + | </ul> | |
- | < | + | </li> |
- | < | + | <li><a href="portfolio.html">Portfolio posts</a></li> |
- | + | <li><a href="blog.html">Blog</a></li> | |
- | <li | + | <li><a href="contact.html">Contact</a></li> |
- | < | + | </ul> |
- | + | <!-- ENDS Navigation --> | |
- | + | ||
- | + | <!-- Social --> | |
- | + | <ul class="social"> | |
- | + | <li><a href="http://www.facebook.com" class="poshytip facebook" title="Become a fan"></a></li> | |
- | </ul> | + | <li><a href="http://www.twitter.com" class="poshytip twitter" title="Follow my tweets"></a></li> |
- | < | + | <li><a href="http://www.dribbble.com" class="poshytip dribbble" title="Working on..."></a></li> |
- | + | </ul> | |
- | + | <!-- ENDS Social --> | |
- | <!-- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <!-- ENDS | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
- | + | <!-- ENDS nav bar holder --> | |
- | + | ||
- | + | <!-- content wrap --> | |
- | + | <div id="content-wrap"> | |
- | + | ||
- | + | <!-- Page wrap --> | |
- | + | <div id="page-wrap"> | |
- | + | ||
- | + | ||
- | + | <!-- Front slider --> | |
- | < | + | <div id="front-slides"> |
+ | <div class="slides_container"> | ||
+ | <div class="slide"> | ||
+ | <img src="img/dummies/04.jpg" alt="pic" width="940" height="360" /> | ||
+ | <div class="caption">Slider images thanks to Moe Pike at thebeaststudio.com</div> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | <img src="img/dummies/03.jpg" alt="pic" width="940" height="360" /> | ||
+ | <div class="caption">Download this template at luiszuno.com</div> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | <img src="img/dummies/01.jpg" alt="pic" width="940" height="360" /> | ||
+ | <div class="caption">More freebies each week at luiszuno.com</div> | ||
+ | </div> | ||
+ | <div class="slide"> | ||
+ | <img src="img/dummies/02.jpg" alt="pic" width="940" height="360" /> | ||
+ | <div class="caption">Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante.</div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div id="front-slides-cover"></div> | ||
+ | |||
+ | <!-- Headline --> | ||
+ | <div id="headline"><h6></h6></div> | ||
+ | <!-- ENDS Headline --> | ||
+ | |||
+ | </div> | ||
+ | <!-- ENDS Front slider --> | ||
+ | |||
+ | |||
+ | <!-- Reel slider --> | ||
+ | <div id="reel"> | ||
+ | <div class="slides_container"> | ||
+ | |||
+ | <div class="slide-box"> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/bargraph32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Download this template</h6> | ||
+ | <div class="box-divider"></div>This is a free license template, this mean you can use it on your personal and commercial porjects, however you are not allowed to re distribute it "as is" elsewhere or create different template or wordpress theme from this one for re distribution. <a href="http://luiszuno.com/blog/downloads/kroft-template-html">Download this template!</a> | ||
+ | </div> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/boxupload32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Download this template</h6> | ||
+ | <div class="box-divider"></div>This is a free license template, this mean you can use it on your personal and commercial porjects, however you are not allowed to re distribute it "as is" elsewhere or create different template or wordpress theme from this one for re distribution. <a href="http://luiszuno.com/blog/downloads/kroft-template-html">Download this template!</a> | ||
+ | </div> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/article32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Download this template</h6> | ||
+ | <div class="box-divider"></div>This is a free license template, this mean you can use it on your personal and commercial porjects, however you are not allowed to re distribute it "as is" elsewhere or create different template or wordpress theme from this one for re distribution. <a href="http://luiszuno.com/blog/downloads/kroft-template-html">Download this template!</a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide-box"> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/circleright32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Pellentesque morbi</h6> | ||
+ | <div class="box-divider"></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est tristique senectus et netus et malesuada. | ||
+ | </div> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/exchange32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Pellentesque morbi</h6> | ||
+ | <div class="box-divider"></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est tristique senectus et netus et malesuada. | ||
+ | </div> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/cup32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Pellentesque morbi</h6> | ||
+ | <div class="box-divider"></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est tristique senectus et netus et malesuada. | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="slide-box"> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/folder32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Pellentesque morbi</h6> | ||
+ | <div class="box-divider"></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est tristique senectus et netus et malesuada. | ||
+ | </div> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/heart32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Pellentesque morbi</h6> | ||
+ | <div class="box-divider"></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est tristique senectus et netus et malesuada. | ||
+ | </div> | ||
+ | <div class="box-container"> | ||
+ | <img src="img/mono-icons/lightbulb32.png" class="box-icon" alt="pic"/> | ||
+ | <h6>Pellentesque morbi</h6> | ||
+ | <div class="box-divider"></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est tristique senectus et netus et malesuada. | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | <a href="#" class="prev"></a> | ||
+ | <a href="#" class="next"></a> | ||
+ | </div> | ||
+ | <!-- ENDS Reel slider --> | ||
+ | |||
+ | |||
+ | |||
+ | <!-- Featured --> | ||
+ | <div class="featured-title"> | ||
+ | <div class="ribbon"><span>Featured content</span></div> | ||
+ | </div> | ||
+ | |||
+ | <ul class="featured-posts"> | ||
+ | <li> | ||
+ | <a href="single.html" class="thumb" title="An image"><img src="img/dummies/290x170/01.jpg" alt="Post" /></a> | ||
+ | <div class="excerpt"> | ||
+ | <div class="heading"><a href="single.html">Place holder images</a></div>Place holder images thanks to Moe Pike at <a href="http://thebeaststudio.com">thebeaststudio.com</a>, visit his site for more of his work. | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="single.html" class="thumb" title="An image"><img src="img/dummies/290x170/02.jpg" alt="Post" /></a> | ||
+ | <div class="excerpt"> | ||
+ | <div class="heading"><a href="single.html">Get more freebies</a></div>Visit <a href="http://www.luiszuno.com">luiszuno.com</a> for more freebies. Updated weekly! | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="single.html" class="thumb" title="An image"><img src="img/dummies/290x170/03.jpg" alt="Post" /></a> | ||
+ | <div class="excerpt"> | ||
+ | <div class="heading"><a href="single.html">License </a></div>All files available for download in this site are free for personal and commercial use. The only restriction is that you cannot post this content for download "as is" on another website. | ||
+ | </div> | ||
+ | </li> | ||
+ | <li> | ||
+ | <a href="single.html" class="thumb" title="An image"><img src="img/dummies/290x170/04.jpg" alt="Post" /></a> | ||
+ | <div class="excerpt"> | ||
+ | <div class="heading"><a href="single.html">Pellentesque habitant morbi</a></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Donec eu libero sit amet quam egestas semper. | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="single.html" class="thumb" title="An image"><img src="img/dummies/290x170/01.jpg" alt="Post" /></a> | ||
+ | <div class="excerpt"> | ||
+ | <div class="heading"><a href="single.html">Pellentesque habitant morbi</a></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Donec eu libero sit amet quam egestas semper. | ||
+ | </div> | ||
+ | </li> | ||
+ | |||
+ | <li> | ||
+ | <a href="single.html" class="thumb" title="An image"><img src="img/dummies/290x170/02.jpg" alt="Post" /></a> | ||
+ | <div class="excerpt"> | ||
+ | <div class="heading"><a href="single.html">Pellentesque habitant morbi</a></div>Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Donec eu libero sit amet quam egestas semper. | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <div class="clear"></div> | ||
+ | <!-- ENDS Featured --> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | <!-- ENDS Page wrap --> | ||
+ | |||
+ | </div> | ||
+ | <!-- ENDS content wrap --> | ||
+ | |||
+ | </div> | ||
+ | <!-- ENDS Wrapper --> | ||
+ | |||
+ | <!-- FOOTER --> | ||
+ | <div id="footer"> | ||
+ | <div class="footer-wrapper"> | ||
+ | |||
+ | |||
+ | <!-- footer-cols --> | ||
+ | <ul id="footer-cols"> | ||
+ | <li> | ||
+ | <h6>About the theme</h6> | ||
+ | <p>Pellentesque accumsan porttitor, accumsan porttitor ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Tincidunt quis, accumsan porttitor facilisis habitant morbi tristique senectus accumsan porttitor et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, Aenean ultricies mi vitae est. Tincidunt quis feugiat vitae.</p> | ||
+ | <p>Accumsan porttitor ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Tincidunt quis, accumsan porttitor, <a href="http://luiszuno.com">luiszuno.com</a>.</p> | ||
+ | </li> | ||
+ | <li> | ||
+ | <h6>Categories</h6> | ||
+ | <ul> | ||
+ | <li><a href="#">Webdesign in this era</a></li> | ||
+ | <li><a href="#/">Wordpress core techniques</a></li> | ||
+ | <li><a href="#">Photo editing</a></li> | ||
+ | <li><a href="#">Code in php</a></li> | ||
+ | <li><a href="#">Drawings by hand</a></li> | ||
+ | <li><a href="#">Buy Themeforest items</a></li> | ||
+ | <li><a href="#">Lorem ipsum dolor amet</a></li> | ||
+ | <li><a href="#">Tincidunt quis, accumsan porttitor</a></li> | ||
+ | <li><a href="#">Donec eu libero sit amet quam</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li> | ||
+ | <div id="tweets" class="footer-col tweet"> | ||
+ | <h6>Twitter widget</h6> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | <!-- ENDS footer-cols --> | ||
+ | |||
+ | <div id="footer-glare"></div> | ||
+ | |||
</div> | </div> | ||
- | |||
</div> | </div> | ||
- | + | <!-- ENDS FOOTER --> | |
- | < | + | |
- | < | + | <!-- footer-bottom --> |
- | + | <div id="footer-bottom"> | |
- | + | <div class="bottom-wrapper"> | |
- | + | <div id="bottom-left"> | |
- | + | © 2011 Ansimuz. <a href="http://themeforest.net/user/Ansimuz?ref=ansimuz">View portfolio</a> | |
- | + | </div> | |
- | + | <div id="bottom-right"> | |
+ | <ul id="footer-nav"> | ||
+ | <li><a href="index.html">Home</a></li> | ||
+ | <li><a href="gallery.html">Gallery</a></li> | ||
+ | <li><a href="page.html">Pages</a> | ||
+ | <li><a href="page.html">Contact</a> | ||
+ | </ul> | ||
+ | </div> | ||
</div> | </div> | ||
- | |||
</div> | </div> | ||
- | + | <!-- ENDS footer-bottom --> | |
- | + | ||
- | <!-- ENDS | + | |
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | </body> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + |
Revision as of 07:50, 2 September 2012
Featured content
-
Place holder images thanks to Moe Pike at thebeaststudio.com, visit his site for more of his work.
-
Visit luiszuno.com for more freebies. Updated weekly!
-
All files available for download in this site are free for personal and commercial use. The only restriction is that you cannot post this content for download "as is" on another website.
-
Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Donec eu libero sit amet quam egestas semper.
-
Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Donec eu libero sit amet quam egestas semper.
-
Tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam. Donec eu libero sit amet quam egestas semper.