Team:Tsinghua-A

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
-
{{Team:YourTeamName/CSS}}
+
{{Team:Tsinghua-A/CSS}}
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+
<!DOCTYPE html>
-
<html>
+
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
-
*<head>
+
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"> <![endif]-->
 +
<!--[if IE 8]><html class="no-js lt-ie9"> <![endif]-->
 +
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
 +
<head>
 +
    <meta charset="utf-8">
 +
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
 +
    <title>Sprint - Free Responsive Template</title>
 +
    <meta name="description" content="">
 +
    <meta name="viewport" content="width=device-width">
-
*<title>PlusBusiness</title>
+
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet">
-
*<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
 
-
*<meta http-equiv="imagetoolbar" content="no" />
+
    <link rel="stylesheet" href="css/bootstrap.min.css">
-
*<link rel="stylesheet" href="styles/layout.css" type="text/css" />
+
    <link rel="stylesheet" href="css/normalize.min.css">
-
*<>
+
    <link rel="stylesheet" href="css/font-awesome.min.css">
-
*</head>
+
    <link rel="stylesheet" href="css/animate.css">
-
<body id="top">
+
    <link rel="stylesheet" href="css/templatemo_misc.css">
-
<!-- ####################################################################################################### -->
+
    <link rel="stylesheet" href="css/templatemo_style.css">
-
<div class="wrapper col1">
+
 
-
  <div id="header">
+
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
-
    <div id="logo">
+
 
-
      <h1><a href="#">+Business</a></h1>
+
</head>
-
      <p>Free CSS Website Template</p>
+
<body>
-
    </div>
+
    <!--[if lt IE 7]>
-
    <div id="topnav">
+
    <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
-
      <ul>
+
    <![endif]-->
-
        <li class="active"><a href="index.html">Home</a></li>
+
<!--  Free HTML5 Template by http://www.cssmoban.com -->
-
        <li><a href="style-demo.html">Style Demo</a></li>
+
    <div id="front">
-
        <li><a href="full-width.html">Full Width</a></li>
+
        <div class="site-header">
-
        <li><a href="#">DropDown</a>
+
            <div class="container">
-
          <ul>
+
                <div class="row">
-
            <li><a href="#">Link 1</a></li>
+
                    <div class="col-md-4 col-sm-6 col-xs-6">
-
            <li><a href="#">Link 2</a></li>
+
                        <div id="templatemo_logo">
-
            <li><a href="#">Link 3</a></li>
+
                            <h1><a href="#" title="HTML5 Template">Sprint</a></h1>
-
          </ul>
+
                        </div> <!-- /.logo -->
-
        </li>
+
                    </div> <!-- /.col-md-4 -->
-
        <li class="last"><a href="#">A Long Link Text</a></li>
+
                    <div class="col-md-8 col-sm-6 col-xs-6">
-
      </ul>
+
                        <a href="#" class="toggle-menu"><i class="fa fa-bars"></i></a>
-
    </div>
+
                        <div class="main-menu">
-
    <br class="clear" />
+
                            <ul>
-
  </div>
+
                                <li><a href="#front">Home</a></li>
-
</div>
+
                                <li><a href="#services">Services</a></li>
-
<!-- ####################################################################################################### -->
+
                                <li><a href="#products">Products</a></li>
-
<div class="wrapper col2">
+
                                <li><a href="#contact">Contact</a></li>
-
  <div id="featured_slide">
+
                            </ul>
-
    <div id="featured_content">
+
                        </div> <!-- /.main-menu -->
-
      <ul>
+
                    </div> <!-- /.col-md-8 -->
-
        <li><img src="images/1.jpg" alt="" />
+
                </div> <!-- /.row -->
-
          <div class="floater">
+
                <div class="row">
-
            <h2>About This Template !</h2>
+
                    <div class="col-md-12">
-
             <p>This is a W3C standards compliant free website template from <a href="http://www.mycodes.net/">源码之家</a>. This template is distributed using a <a href="#">Website Template Licence</a>, which allows you to use and modify the template for both personal and commercial use when you keep the provided credit links in the footer. For more CSS templates visit <a href="#">Free Website Templates</a>.</p>
+
                        <div class="responsive">
-
             <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
                            <div class="main-menu">
-
          </div>
+
                                <ul>
-
        </li>
+
                                    <li><a href="#front">Home</a></li>
-
        <li><img src="images/2.jpg" alt="" />
+
                                    <li><a href="#services">Services</a></li>
-
          <div class="floater">
+
                                    <li><a href="#products">Products</a></li>
-
            <h2>Cursus penati saccum ut curabitur nulla.</h2>
+
                                    <li><a href="#contact">Contact</a></li>
-
             <p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum&hellip;</p>
+
                                </ul>
-
             <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
                            </div>
-
          </div>
+
                        </div>
-
        </li>
+
                    </div>
-
        <li><img src="images/3.jpg" alt="" />
+
                </div>
-
          <div class="floater">
+
            </div> <!-- /.container -->
-
             <h2>Cursus penati saccum ut curabitur nulla.</h2>
+
        </div> <!-- /.site-header -->
-
            <p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet. Nullain convallis ris elis vest liberos nis diculis feugiat in rutrum. Suspendreristibulumfaucibulum lobortor quis tortortor ris sapien sce enim et volutpat sus. Urnaretiumorci orci fauctor leo justo nulla cras ridiculum&hellip;</p>
+
    </div> <!-- /#front -->
-
            <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
 
-
          </div>
+
    <div class="site-slider">
-
        </li>
+
        <ul class="bxslider">
-
      </ul>
+
            <li>
-
     </div>
+
                <img src="images/slider/slide1.jpg" alt="slider image 1">
-
     <a href="javascript:void(0);" id="featured-item-prev"><img src="images/prev.png" alt="" /></a> <a href="javascript:void(0);" id="featured-item-next"><img src="images/next.png" alt="" /></a> </div>
+
                <div class="container">
-
</div>
+
                    <div class="row">
-
<!-- ####################################################################################################### -->
+
                        <div class="col-md-12 text-right">
-
<div class="wrapper col3">
+
                            <div class="slider-caption">
-
  <div id="container">
+
                                <h2>HTML5 CSS3 Template</h2>
-
    <div class="homepage">
+
                            </div>
-
      <ul>
+
                        </div>
-
        <li>
+
                    </div>
-
          <h2><img src="images/4.jpg" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
+
                </div>
-
          <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
+
            </li>
-
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
            <li>
-
        </li>
+
                <img src="images/slider/slide2.jpg" alt="slider image 2">
-
        <li>
+
                <div class="container caption-wrapper">
-
          <h2><img src="images/5.jpg" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
+
                    <div class="slider-caption">
-
          <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
+
                        <h2>Using Bootstrap Framework</h2>
-
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
                    </div>
-
         </li>
+
                </div>
-
        <li class="last">
+
             </li>
-
          <h2><img src="images/6.jpg" alt="" />Nullamlacus dui ipsum conseque loborttis</h2>
+
            <li>
-
          <p>Nullamlacus dui ipsum conseque loborttis non euisque morbi penas dapibulum orna. Urnaultrices quis curabitur phasellentesque congue magnis vestibulum quismodo nulla et feugiat. Adipisciniapellentum leo ut consequam ris felit elit id nibh sociis malesuada.</p>
+
                <img src="images/slider/slide3.jpg" alt="slider image 3">
-
          <p class="readmore"><a href="#">Continue Reading &raquo;</a></p>
+
                <div class="container">
-
        </li>
+
                    <div class="row">
-
      </ul>
+
                        <div class="col-md-12 text-right">
-
      <br class="clear" />
+
                            <div class="slider-caption">
-
    </div>
+
                                <h2>Mobile Ready Website</h2>
-
  </div>
+
                            </div>
-
</div>
+
                        </div>
-
<!-- ####################################################################################################### -->
+
                    </div>
-
<div class="wrapper col4">
+
                </div>
-
  <div id="footer">
+
             </li>
-
    <div class="box1">
+
            <li>
-
      <h2>A Little Company Information !</h2>
+
                <img src="images/slider/slide4.jpg" alt="slider image 4">
-
      <img class="imgl" src="images/demo/imgl.gif" alt="" />
+
                <div class="container">
-
      <p>Morbitincidunt maurisque eros molest nunc anteget sed vel lacus mus semper. Anterdumnullam interdum eros dui urna consequam ac nisl nullam ligula vestassa. Condimentumfelis et amet tellent quisquet a leo lacus nec augue</p>
+
                    <div class="row">
-
      <p>Portortornec condimenterdum eget consectetuer condis.</p>
+
                        <div class="col-md-12 text-right">
-
    </div>
+
                            <div class="slider-caption">
-
    <div class="box contactdetails">
+
                                <h2>Responsive Layout</h2>
-
      <h2>Our Contact Details !</h2>
+
                            </div>
-
      <ul>
+
                        </div>
-
        <li>Company Name</li>
+
                    </div>
-
        <li>Street Name &amp; Number</li>
+
                </div>
-
        <li>Town</li>
+
            </li>
-
        <li>Postcode/Zip</li>
+
            <li>
-
        <li>Tel: xxxxx xxxxxxxxxx</li>
+
                <img src="images/slider/slide5.jpg" alt="slider image 5">
-
        <li>Fax: xxxxx xxxxxxxxxx</li>
+
                <div class="container">
-
        <li>Email: info@domain.com</li>
+
                    <div class="row">
-
        <li class="last">LinkedIn: <a href="#">Company Profile</a></li>
+
                        <div class="col-md-12 text-right">
-
      </ul>
+
                            <div class="slider-caption">
-
    </div>
+
                                <h2>Download and use it for free</h2>
-
    <div class="box flickrbox">
+
                            </div>
-
      <h2>Latest Flickr Images !</h2>
+
                        </div>
-
      <div class="wrap">
+
                    </div>
-
        <div class="fix"></div>
+
                </div>
-
        <div class="flickr_badge_image" id="flickr_badge_image1"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></div>
+
             </li>
-
        <div class="flickr_badge_image" id="flickr_badge_image2"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></div>
+
        </ul> <!-- /.bxslider -->
-
        <div class="flickr_badge_image" id="flickr_badge_image3"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></div>
+
        <div class="bx-thumbnail-wrapper">
-
        <div class="flickr_badge_image" id="flickr_badge_image4"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></div>
+
             <div class="container">
-
        <div class="flickr_badge_image" id="flickr_badge_image5"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></div>
+
                <div class="row">
-
        <div class="flickr_badge_image" id="flickr_badge_image6"><a href="#"><img src="images/demo/80x80.gif" alt="" /></a></div>
+
                    <div class="col-md-12">
-
        <div class="fix"></div>
+
                        <div id="bx-pager">
-
      </div>
+
                            <a data-slide-index="0" href=""><img src="images/slider/thumb1.jpg" alt="image 1" /></a>
-
     </div>
+
                            <a data-slide-index="1" href=""><img src="images/slider/thumb2.jpg" alt="image 2" /></a>
-
     <br class="clear" />
+
                            <a data-slide-index="2" href=""><img src="images/slider/thumb3.jpg" alt="image 3" /></a>
-
  </div>
+
                            <a data-slide-index="3" href=""><img src="images/slider/thumb4.jpg" alt="image 4" /></a>
-
</div>
+
                            <a data-slide-index="4" href=""><img src="images/slider/thumb5.jpg" alt="image 5" /></a>
-
<!-- ####################################################################################################### -->
+
                        </div>
-
<div class="wrapper col5">
+
                    </div>
-
  <div id="copyright">
+
                </div>
-
     <p class="fl_left">Copyright &copy; 2011 - All Rights Reserved - <a href="#">Domain Name</a></p>
+
            </div>
-
    <p class="fl_right">Template from <a href="http://www.mycodes.net/" title="源码之家">网站模板</a></p>
+
        </div>
-
    <br class="clear" />
+
    </div> <!-- /.site-slider -->
-
  </div>
+
 
-
</div>
+
    <div id="services" class="content-section">
 +
        <div class="container">
 +
             <div class="row">
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="service-item">
 +
                        <span class="service-icon first"></span>
 +
                        <h3>Easy Customization</h3>
 +
                        <p>Cras congue orci at diam condimentum, in dignissim tellus elementum. Praesent id mauris eu urna vehicula rutrum sed in elit. Sed sed urna porta, viverra lacus in.</p>
 +
                    </div> <!-- /.service-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="service-item">
 +
                        <span class="service-icon second"></span>
 +
                        <h3>Web Design</h3>
 +
                        <p>Nulla in nunc elit. Etiam porttitor nibh et felis molestie fermentum. Ut quis diam porttitor, dictum dolor in, volutpat nulla. Phasellus egestas eu lacus eu pharetra.</p>
 +
                    </div> <!-- /.service-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="service-item">
 +
                        <span class="service-icon third"></span>
 +
                        <h3>High Quality</h3>
 +
                        <p>Sprint is <a href="#">free responsive template</a> using HTML5 CSS3 based on Bootstrap framework. Feel free to download, edit and use it for your websites.</p>
 +
                    </div> <!-- /.service-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="service-item">
 +
                        <span class="service-icon fourth"></span>
 +
                        <h3>Professional Design</h3>
 +
                        <p>Morbi id nisi enim. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare. Nam tortor justo, rutrum ut condimentum.</p>
 +
                    </div> <!-- /.service-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
            </div> <!-- /.row -->
 +
        </div> <!-- /.container -->
 +
     </div> <!-- /#services -->
 +
 
 +
     <div id="product-promotion" class="content-section">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-md-12 text-center">
 +
                    <h1 class="section-title">New Products</h1>
 +
                </div> <!-- /.col-md-12 -->
 +
            </div> <!-- /.row -->
 +
            <div class="row">
 +
                <div class="col-md-2 col-sm-3">
 +
                    <div class="item-small">
 +
                        <img src="images/promotion/promotion1.jpg" alt="Product 1">
 +
                        <h4>Nullam Non Ultrices Arcu</h4>
 +
                    </div> <!-- /.item-small -->
 +
                </div> <!-- /.col-md-2 -->
 +
                <div class="col-md-8 col-sm-6">
 +
                    <div class="item-large">
 +
                        <img src="images/promotion/promotion2.jpg" alt="Product 2">
 +
                        <div class="item-large-content">
 +
                            <div class="item-header">
 +
                                <h2 class="pull-left">Fusce facilisis semper magna</h2>
 +
                                <span class="pull-right">Rate: <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i>
 +
                                <i class="fa fa-star-half-o"></i></span>
 +
                                <div class="clearfix"></div>
 +
                            </div> <!-- /.item-header -->
 +
                            <p>Integer ac dui interdum, varius sem eu, vulputate ipsum. Donec fringilla, est ac hendrerit elementum, libero nulla sodales odio, a placerat urna lectus at sem. Vivamus vehicula accumsan orci a tempus. Vestibulum a augue iaculis, tincidunt lacus venenatis, aliquet ante. Sprint is <a href="#">free website template</a> that can be used for any purpose.<br><br>Aliquam iaculis lectus accumsan, egestas lorem ac, malesuada purus. Aenean in tincidunt libero. Etiam vitae dolor vel justo temllicitudin. Download <a rel="nofollow" href="#/free-templates">templates</a> for your websites. Sed fermentum, neque in dignissim aliquam, quam ante pellentesque quam, posuere eros purus purus. Ut non est magna.</p>
 +
                        </div> <!-- /.item-large-content -->
 +
                    </div> <!-- /.item-large -->
 +
                </div> <!-- /.col-md-8 -->
 +
                <div class="col-md-2 col-sm-3">
 +
                    <div class="item-small">
 +
                        <img src="images/promotion/promotion3.jpg" alt="Product 3">
 +
                        <h4>Morbi Sit Amet Lorem</h4>
 +
                    </div> <!-- /.item-small -->
 +
                </div> <!-- /.col-md-2 -->
 +
            </div> <!-- /.row -->
 +
        </div> <!-- /.container -->
 +
    </div> <!-- /#product-promotion -->
 +
<div class="copyrights">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>
 +
    <div id="products" class="content-section">
 +
         <div class="container">
 +
            <div class="row">
 +
                <div class="col-md-12 text-center">
 +
                    <h1 class="section-title">All Products</h1>
 +
                </div> <!-- /.col-md-12 -->
 +
            </div> <!-- /.row -->
 +
            <div class="row">
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_1.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product1.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Nunc Consectetur</h3>
 +
                        <span>Price: <em class="text-muted">$260.00</em> - <em class="price">$180.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_3.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product2.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Donec Vitae Massa</h3>
 +
                        <span>Price: <em class="text-muted">$320.00</em> - <em class="price">$240.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_2.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product3.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Fusce Dignissim Neque</h3>
 +
                        <span>Price: <em class="text-muted">$480.00</em> - <em class="price">$340.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_1.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product4.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Mauris Adipiscing Enim</h3>
 +
                        <span>Price: <em class="text-muted">$260.00</em> - <em class="price">$140.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_3.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product5.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Quisque Tincidunt</h3>
 +
                        <span>Price: <em class="text-muted">$350.00</em> - <em class="price">$220.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_1.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product6.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Aliquam Malesuada</h3>
 +
                        <span>Price: <em class="text-muted">$470.00</em> - <em class="price">$330.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_2.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product7.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Sed Eleifend Tortor</h3>
 +
                        <span>Price: <em class="text-muted">$620.00</em> - <em class="price">$460.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
                <div class="col-md-3 col-sm-6">
 +
                    <div class="product-item">
 +
                        <div class="item-thumb">
 +
                            <span class="note"><img src="images/small_logo_3.png" alt=""></span>
 +
                            <div class="overlay">
 +
                                <div class="overlay-inner">
 +
                                    <a href="#nogo" class="view-detail">Add to Cart</a>
 +
                                </div>
 +
                            </div> <!-- /.overlay -->
 +
                            <img src="images/products/product8.jpg" alt="">
 +
                        </div> <!-- /.item-thumb -->
 +
                        <h3>Integer tincidunt</h3>
 +
                        <span>Price: <em class="text-muted">$840.00</em> - <em class="price">$720.00</em></span>
 +
                    </div> <!-- /.product-item -->
 +
                </div> <!-- /.col-md-3 -->
 +
            </div> <!-- /.row -->
 +
        </div> <!-- /.container -->
 +
     </div> <!-- /#products -->
 +
 
 +
     <div id="contact" class="content-section">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-md-12 text-center">
 +
                    <h1 class="section-title">Contact Us</h1>
 +
                </div> <!-- /.col-md-12 -->
 +
            </div> <!-- /.row -->
 +
            <div class="row">
 +
                <div class="col-md-offset-2 col-md-8 text-center bigger-text">
 +
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, itaque vero facere laudantium voluptas temporibus mollitia nisi deleniti illo minima quisquam corporis possimus nesciunt. Accusantium modi dolores in ex officiis!</p>
 +
                </div>
 +
                <div class="col-md-6 col-sm-6">
 +
                    <div id="map">
 +
                    </div>
 +
                </div> <!-- /.col-md-6 -->
 +
                <div class="col-md-6 col-sm-6">
 +
                    <div class="row contact-form">
 +
                        <fieldset class="col-md-6 col-sm-6">
 +
                            <input id="name" type="text" name="name" placeholder="Name">
 +
                        </fieldset>
 +
                        <fieldset class="col-md-6 col-sm-6">
 +
                            <input type="email" name="email" id="email" placeholder="Email">
 +
                        </fieldset>
 +
                        <fieldset class="col-md-12">
 +
                            <input type="text" name="subject" id="subject" placeholder="Subject">
 +
                        </fieldset>
 +
                        <fieldset class="col-md-12">
 +
                            <textarea name="comments" id="comments" placeholder="Message"></textarea>
 +
                        </fieldset>
 +
                        <fieldset class="col-md-12">
 +
                            <input type="submit" name="send" value="Send Message" id="submit" class="button">
 +
                        </fieldset>
 +
                    </div> <!-- /.contact-form -->
 +
                </div> <!-- /.col-md-6 -->
 +
            </div> <!-- /.row -->
 +
        </div> <!-- /.container -->
 +
     </div> <!-- /#products -->
 +
 
 +
    <div class="site-footer">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-md-6 col-sm-6">
 +
                    <span>Copyright &copy; 2084 <a href="#">Company Name</a> - <a href="http://www.cssmoban.com/">Free HTML5 Template</a> Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></span>
 +
                </div> <!-- /.col-md-6 -->
 +
                <div class="col-md-6 col-sm-6">
 +
                    <ul class="social">
 +
                        <li><a href="#" class="fa fa-facebook"></a></li>
 +
                        <li><a href="#" class="fa fa-twitter"></a></li>
 +
                        <li><a href="#" class="fa fa-instagram"></a></li>
 +
                        <li><a href="#" class="fa fa-linkedin"></a></li>
 +
                        <li><a href="#" class="fa fa-rss"></a></li>
 +
                    </ul>
 +
                </div> <!-- /.col-md-6 -->
 +
            </div> <!-- /.row -->
 +
        </div> <!-- /.container -->
 +
    </div> <!-- /.site-footer -->
 +
 
 +
   
 +
    <script src="js/vendor/jquery-1.10.1.min.js"></script>
 +
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>
 +
    <script src="js/jquery.easing-1.3.js"></script>
 +
    <script src="js/bootstrap.js"></script>
 +
    <script src="js/plugins.js"></script>
 +
    <script src="js/main.js"></script>
 +
    <!--  Free HTML5 Template by http://www.cssmoban.com -->
</body>
</body>
</html>
</html>

Revision as of 07:07, 15 October 2014

{{Team:Tsinghua-A/CSS/BOOTSTRAP}} {{Team:Tsinghua-A/CSS/NORMALIZE}} {{Team:Tsinghua-A/CSS/FONT-AWESOME}} {{Team:Tsinghua-A/CSS/ANIMATE}} {{Team:Tsinghua-A/CSS/TEMPLATEMO_MISC}} {{Team:Tsinghua-A/CSS/TEMPLATEMO_STYLE}} {{Team:Tsinghua-A/SCRIPT}} <!DOCTYPE html> 

 

    
    
    Sprint - Free Responsive Template
    
    

    

    
    
    
    
    
    

    



    
	
     

    

        
    
            
  • 
                slider image 1
                
    
                    
    
                        
    
                            
    
                                
    HTML5 CSS3 Template
    
                            
    
                        
    
                    
    
                
    
            
    • 
            
  • 
                slider image 2
                
    
                    
    
                        
    Using Bootstrap Framework
    
                    
    
                
    
            
    • 
            
  • 
                slider image 3
                
    
                    
    
                        
    
                            
    
                                
    Mobile Ready Website
    
                            
    
                        
    
                    
    
                
    
            
    • 
            
  • 
                slider image 4
                
    
                    
    
                        
    
                            
    
                                
    Responsive Layout
    
                            
    
                        
    
                    
    
                
    
            
    • 
            
  • 
                slider image 5
                
    
                    
    
                        
    
                            
    
                                
    Download and use it for free
    
                            
    
                        
    
                    
    
                
    
            
    • 
        
 
        

            

                

                    

                        

                            image 1
                            image 2
                            image 3
                            image 4
                            image 5
                        

                    

                

            

        

    
 

    

        

            

                

                    

                        
                        
Easy Customization

                        
Cras congue orci at diam condimentum, in dignissim tellus elementum. Praesent id mauris eu urna vehicula rutrum sed in elit. Sed sed urna porta, viverra lacus in.

                    
 
                
 
                

                    

                        
                        
Web Design

                        
Nulla in nunc elit. Etiam porttitor nibh et felis molestie fermentum. Ut quis diam porttitor, dictum dolor in, volutpat nulla. Phasellus egestas eu lacus eu pharetra.

                    
 
                
 
                

                    

                        
                        
High Quality

                        
Sprint is free responsive template using HTML5 CSS3 based on Bootstrap framework. Feel free to download, edit and use it for your websites.

                    
 
                
 
                

                    

                        
                        
Professional Design

                        
Morbi id nisi enim. Ut congue interdum pharetra facilisi. Aenean consectetur pellentesque mauris nec ornare. Nam tortor justo, rutrum ut condimentum.

                    
 
                
 
            
 
        
 
    
 

    

        

            

                

                    
New Products

                
 
            
 
            

                

                    

                        Product 1
                        
Nullam Non Ultrices Arcu

                    
 
                
 
                

                    

                        Product 2
                        

                            

                                
Fusce facilisis semper magna

                                Rate: 
                                
                                

                            
 
                            
Integer ac dui interdum, varius sem eu, vulputate ipsum. Donec fringilla, est ac hendrerit elementum, libero nulla sodales odio, a placerat urna lectus at sem. Vivamus vehicula accumsan orci a tempus. Vestibulum a augue iaculis, tincidunt lacus venenatis, aliquet ante. Sprint is free website template that can be used for any purpose.

Aliquam iaculis lectus accumsan, egestas lorem ac, malesuada purus. Aenean in tincidunt libero. Etiam vitae dolor vel justo temllicitudin. Download templates for your websites. Sed fermentum, neque in dignissim aliquam, quam ante pellentesque quam, posuere eros purus purus. Ut non est magna.

                        
 
                    
 
                
 
                

                    

                        Product 3
                        
Morbi Sit Amet Lorem

                    
 
                
 
            
 
        
 
    
 
	
Collect from 网页模板

    

        

            

                

                    
All Products

                
 
            
 
            

                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Nunc Consectetur

                        Price: $260.00 - $180.00
                    
 
                
 
                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Donec Vitae Massa

                        Price: $320.00 - $240.00
                    
 
                
 
                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Fusce Dignissim Neque

                        Price: $480.00 - $340.00
                    
 
                
 
                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Mauris Adipiscing Enim

                        Price: $260.00 - $140.00
                    
 
                
 
                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Quisque Tincidunt

                        Price: $350.00 - $220.00
                    
 
                
 
                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Aliquam Malesuada

                        Price: $470.00 - $330.00
                    
 
                
 
                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Sed Eleifend Tortor

                        Price: $620.00 - $460.00
                    
 
                
 
                

                    

                        

                            
                            

                                

                                    Add to Cart
                                

                            
 
                            
                        
 
                        
Integer tincidunt

                        Price: $840.00 - $720.00
                    
 
                
 
            
 
        
 
    
 

    

        

            

                

                    
Contact Us

                
 
            
 
            

                

                    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores, itaque vero facere laudantium voluptas temporibus mollitia nisi deleniti illo minima quisquam corporis possimus nesciunt. Accusantium modi dolores in ex officiis!

                

                

                    

                    

                
 
                

                    

                        

                            
                        

                        

                            
                        

                        

                            
                        

                        

                            
                        

                        

                            
                        

                    
 
                
 
            
 
        
 
    
 

    

        

            

                

                    Copyright © 2084 Company Name - Free HTML5 Template Collect from 网页模板
Retrieved from "http://2014.igem.org/Team:Tsinghua-A"