Difference between revisions of "Team:Shanghaitech"

 
(94 intermediate revisions by 4 users not shown)
Line 1: Line 1:
−
{{Shanghaitech}}
+
{{Shanghaitech/custom}}
−
<html>
+
{{Shanghaitech/css}}
−
<!--[if IE 8 ]><html class="ie ie8" class="no-js" lang="en"> <![endif]-->
+
{{Shanghaitech/js}}
−
<!--[if (gte IE 9)|!(IE)]><!--><html class="no-js" lang="en"> <!--<![endif]-->
+
<html lang="en">
 
<head>
 
<head>
−
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
<style type="text/css">
−
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
     #home-button{height: 210px;width: 225px;left: 50%;    margin-bottom: 30px;
−
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+
                display: inline-block;    position: relative;    left: 50%;    transform: translateX(-50%);}
−
     <title>Shanghaitech</title>
+
     #home-button #home-button-bg{
−
     <meta name="description" content="">
+
        background: url("https://static.igem.org/mediawiki/2017/5/5f/T--Shanghaitech--Home-Homepage-botton-thick.png") no-repeat 50% 50%/contain;
 +
        width: 336.75px;height: 199.5px;position: absolute;display:block;
 +
     }
 +
     #home-button:hover #home-button-bg{
 +
        background: url("https://static.igem.org/mediawiki/2017/7/7e/T--Shanghaitech--Home-Homepage-button-flat.png") no-repeat 50% 50%/contain;height: 295.5px;width: 424.5px;position: absolute;left: -94.5px;top: -69px;
 +
    }
  
−
    <!-- CSS FILES -->
+
</style>
−
    <link rel="stylesheet" href="https://igemshare.github.io/css/bootstrap.min.css"/>
+
−
    <link rel="stylesheet" href="https://igemshare.github.io/css/style.css">
+
−
    <link rel="stylesheet" href="https://igemshare.github.io/css/flexslider.css"/>
+
−
    <link rel="stylesheet" type="text/css" href="https://igemshare.github.io/css/style.css" media="screen" data-name="skins">
+
−
    <link rel="stylesheet" href="https://igemshare.github.io/css/layout/wide.css" data-name="layout">
+
−
 
+
−
    <link rel="stylesheet" href="https://igemshare.github.io/css/animate.css"/>
+
−
 
+
−
    <link rel="stylesheet" type="text/css" href="https://igemshare.github.io/css/switcher.css" media="screen" />
+
−
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
+
−
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
+
−
    <!--[if lt IE 9]>
+
−
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
+
−
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
+
−
    <![endif]-->
+
 
</head>
 
</head>
−
<body class="home">
+
<body>
−
    <header id="header">
+
<img src="https://static.igem.org/mediawiki/2017/7/7e/T--Shanghaitech--Home-Homepage-button-flat.png" style="display:none"/>
−
        <!-- Start header-top -->
+
<div id="main-content-wrapper" style="max-width:none;">
−
        <div id="header-top">
+
<div id="content-block" style="max-width:none;padding:0px">
−
            <div class="container">
+
<a href="https://2017.igem.org/Team:Shanghaitech/Awards" style="
−
                <div class="row">
+
    color: #607D6F;
−
                    <div class="hidden-xs col-lg-7 col-sm-5 top-info"><span><em class="fa fa-phone"></em>Phone: (+86) 189-3077-2686</span> <span class="hidden-sm"><em class="fa fa-envelope"></em>Email: hyp16@126.com</span></div>
+
    display: block;
−
                    <div class="col-lg-5">
+
    max-width: 600px;
−
                        <ul class="dropdown-items clearfix">
+
    margin: 0 auto;
 +
"><h1 style="
 +
">奖项及致谢(Click me to see our awards and our special thanks)</h1></a>
  
−
                            <li>
+
<div id="home-story-wrapper" style="position:relative;">
−
                                <div class="my-account">
+
−
                                    <div class="dropdown">
+
−
                                        <a class="account-dropdown" href="#" data-toggle="dropdown">
+
−
                                            Hi, Respectful Judges
+
−
                                            <span class="caret"></span>
+
−
                                        </a>
+
−
                                            <ul class="dropdown-menu pull-right" role="menu">
+
−
                                                    <li>
+
−
                                                        <a href="#">Welcome to our website：）</a>
+
−
                                                    </li>
+
−
                                                </ul>
+
−
                                         
+
−
                                        </a>
+
−
                                 
+
−
                                    </div>
+
−
                                </div>
+
−
                            </li>
+
−
                       
+
−
                        </ul>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
        </div>
+
−
        <!--/.header-top -->
+
  
−
       
+
    <img src="https://static.igem.org/mediawiki/2017/0/0b/T--Shanghaitech--Home-Homepage-story.png" alt="homepage-story" style="width:100%;height:auto;max-height:none" height=3000 width=2388/>
 +
</div>
  
−
        <div id="menu-bar">
+
<a href="https://2017.igem.org/Team:Shanghaitech/project" id="home-button"><span id="home-button-bg"></span></a>
−
            <div class="container">
+
<p style="text-align: center"><video height="600" src="https://static.igem.org/mediawiki/2017/1/10/T--Shanghaitech--Hardware--Project.mp4" controls style="max-width:100%" poster="https://static.igem.org/mediawiki/2017/thumb/e/e6/T--Shanghaitech--works363636hop1.jpg/800px-T--Shanghaitech--works363636hop1.jpg"></video>
−
                <div class="row">
+
</p>
−
                    <!-- Logo / Mobile Menu -->
+
−
                    <div  class="col-lg-3 col-sm-3 ">
+
−
                        <div id="logo">
+
−
                            <h1><a href="index.html"><img src="images/logo.png" alt=""/></a></h1>
+
−
                        </div>
+
−
                    </div>
+
−
                    <!-- Navigation
+
−
        ================================================== -->
+
−
                    <div class="col-lg-9 col-sm-9 navbar navbar-default navbar-static-top container" role="navigation">
+
−
                        <!--  <div class="container">-->
+
−
                        <div class="navbar-header">
+
−
                            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+
−
                                <span class="sr-only">Toggle navigation</span>
+
−
                                <span class="icon-bar"></span>
+
−
                                <span class="icon-bar"></span>
+
−
                                <span class="icon-bar"></span>
+
−
                            </button>
+
−
                        </div>
+
−
                        <div class="navbar-collapse collapse">
+
−
                            <ul class="nav navbar-nav">
+
−
                               
+
−
                                <li><a href="index.html"><span class="data-hover"data-hover="Home">Home</span></a>
+
−
                                    <ul class="dropdown-menu">
+
−
                                        <li class="active"><a href="index.html">Home</a></li>
+
−
                                        <li><a href="#">To be continued</a></li>
+
−
                                    </ul>
+
−
                                </li>
+
  
  
−
                                <li><a href="index.html"><span class="data-hover"data-hover="Project">Project</span></a>
+
</div></div>
−
                                    <ul class="dropdown-menu">
+
−
                                        <li class="active"><a href="index.html">Home</a></li>
+
−
                                        <li><a href="#">To be continued</a></li>
+
−
                                    </ul>
+
−
                                </li>
+
−
         
+
  
−
                                <li><a href="Modeling_overview.html"><span class="data-hover"data-hover="Modeling">Modeling</span></a>
+
</body>
−
                                    <ul class="dropdown-menu">
+
−
                                        <li ><a href="index.html">Overview</a></li>
+
−
                                        <li><a href="#">To be continued</a></li>
+
−
                                    </ul>
+
−
                                </li>  
+
  
−
 
−
 
−
                                <li><a href="Modeling_overview.html"><span class="data-hover"data-hover="Microfludics">Microfludics</span></a>
 
−
                                    <ul class="dropdown-menu">
 
−
                                        <li ><a href="index.html">Overview</a></li>
 
−
                                        <li><a href="#">To be continued</a></li>
 
−
                                    </ul>
 
−
                                </li>
 
−
 
−
                                <li><a href="Lab_overview.html"><span class="data-hover"data-hover="Lab">Lab</span></a>
 
−
                                    <ul class="dropdown-menu">
 
−
                                        <li ><a href="index.html">Overview</a></li>
 
−
                                        <li><a href="#">To be continued</a></li>
 
−
                                    </ul>
 
−
                                </li>
 
−
                               
 
−
 
−
                                <li><a href="Huaman_overview.html"><span class="data-hover"data-hover="Human_Practice">Human_Practice</span></a>
 
−
                                    <ul class="dropdown-menu">
 
−
                                        <li ><a href="index.html">Overview</a></li>
 
−
                                        <li><a href="#">To be continued</a></li>
 
−
                                    </ul>
 
−
                                </li>
 
−
 
−
 
−
                                <li><a href="Huaman_overview.html"><span class="data-hover"data-hover="Team">Team</span></a>
 
−
                                    <ul class="dropdown-menu">
 
−
                                        <li ><a href="index.html">Official Team Profile</a></li>
 
−
                                        <li><a href="#">Our Team</a></li>
 
−
                                        <li><a href="#">Acknowledgements</a></li>
 
−
                                        <li><a href="#">Contact Us</a></li>
 
−
                                    </ul>
 
−
                                </li>
 
−
 
−
 
−
 
−
                     
 
−
                           
 
−
                            </ul>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
        <!--/#menu-bar -->
 
−
        <!--<div class="slider_block">
 
−
            <div class="flexslider top_slider">
 
−
                <ul class="slides">
 
−
                    <li class="slide1">
 
−
                        <div class="container">
 
−
                            <div class="flex_caption1">
 
−
 
−
                                <p class="slide-heading FromTop">Voluptas Assumenda Est </p><br/>
 
−
 
−
                                <p class="sub-line FromBottom">Dolore Magnam Aliquam Quaerat Voluptatem  </p><br/>
 
−
 
−
                                <a href="" class="slider-read FromLeft">Now</a>
 
−
                            </div>
 
−
                            <div class="flex_caption2 FromRight"></div>
 
−
                        </div>
 
−
                    </li>
 
−
 
−
                    <li class="slide2">
 
−
                        <div class="container">
 
−
                            <div class="slide flex_caption1">
 
−
                                <p class="slide-heading FromTop">??? is our theme</p><br/>
 
−
 
−
                                <p class="sub-line FromRight">Dolore Magnam Aliquam Quaerat Voluptatem </p><br/>
 
−
 
−
                                <a href="" class="slider-read FromLeft">Now</a>
 
−
 
−
                            </div>
 
−
                            <div class="flex_caption2 FromBottom"></div>
 
−
                        </div>
 
−
                    </li>
 
−
 
−
                    <li class="slide3">
 
−
                        <div class="container">
 
−
                            <div class="slide flex_caption1">
 
−
                                <p class="slide-heading FromTop">Easy to Maintain </p><br/>
 
−
 
−
                                <p class="sub-line FromRight">Powerful Features </p><br/>
 
−
 
−
                                <a href="" class="slider-read FromLeft">Now</a>
 
−
 
−
                            </div>
 
−
                            <div class="flex_caption2 FromRight"></div>
 
−
                        </div>
 
−
                    </li>
 
−
                </ul>
 
−
            </div>
 
−
        </div>-->
 
−
    </header>
 
−
<!--End Header-->
 
−
 
−
<section class="wrapper">
 
−
<!--start info service-->
 
−
    <section class="info_service">
 
−
        <div class="container">
 
−
            <div class="row sub_content">
 
−
                <div class="col-lg-12 col-md-12 col-sm-12 wow fadeInDown">
 
−
                    <h1 class="intro text-center">????????</h1>
 
−
                    <p class="lead text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa nesciunt odit sunt vitae voluptatibus. Ad animi dicta dolore et illo incidunt sint.</p>
 
−
                </div>
 
−
                <div class="rs_box  wow bounceInRight" data-wow-offset="200">
 
−
                    <div class="col-md-3 col-sm-6">
 
−
                        <div class="serviceBox_3">
 
−
                            <div class="service-icon">
 
−
                                <i class="fa fa-globe"></i>
 
−
                            </div>
 
−
                            <div class="service-content">
 
−
                                <h3>Web Development</h3>
 
−
                                <p>
 
−
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum malesuada.
 
−
                                </p>
 
−
                            </div>
 
−
                            <div class="read">
 
−
                                <a href="#">read more...</a>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
 
−
                    <div class="col-md-3 col-sm-6">
 
−
                        <div class="serviceBox_3">
 
−
                            <div class="service-icon">
 
−
                                <i class="fa fa-rocket"></i>
 
−
                            </div>
 
−
                            <div class="service-content">
 
−
                                <h3>Brand Building</h3>
 
−
                                <p>
 
−
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum malesuada.
 
−
                                </p>
 
−
                            </div>
 
−
                            <div class="read">
 
−
                                <a href="#">read more...</a>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
 
−
                    <div class="col-md-3 col-sm-6">
 
−
                        <div class="serviceBox_3">
 
−
                            <div class="service-icon">
 
−
                                <i class="fa fa-mobile"></i>
 
−
                            </div>
 
−
                            <div class="service-content">
 
−
                                <h3>Responsive Design</h3>
 
−
                                <p>
 
−
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum malesuada.
 
−
                                </p>
 
−
                            </div>
 
−
                            <div class="read">
 
−
                                <a href="#">read more...</a>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
 
−
                    <div class="col-md-3 col-sm-6">
 
−
                        <div class="serviceBox_3">
 
−
                            <div class="service-icon">
 
−
                                <i class="fa fa-twitter"></i>
 
−
                            </div>
 
−
                            <div class="service-content">
 
−
                                <h3>Clean & Clear Design</h3>
 
−
                                <p>
 
−
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dictum malesuada.
 
−
                                </p>
 
−
                            </div>
 
−
                            <div class="read">
 
−
                                <a href="#">read more...</a>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </section>
 
−
<!--end info service-->
 
−
 
−
<!--Start recent work-->
 
−
    <section class="latest_work">
 
−
        <div class="container">
 
−
            <div class="row sub_content">
 
−
                <div class="col-md-12">
 
−
                    <div class="dividerHeading">
 
−
                        <h4><span>Recent Work</span></h4>
 
−
                    </div>
 
−
                    <div id="recent-work-slider" class="owl-carousel">
 
−
                        <div class="recent-item box">
 
−
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_1.png" class="img-responsive" alt=""/>
 
−
                                <!-- <div class="option inner">
 
−
                                    <div>
 
−
                                        <h5>Touch and Swipe</h5>
 
−
                                        <a href="images/portfolio/full/portfolio_1.png" class="fa fa-search mfp-image"></a>
 
−
                                        <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                        <span>Mobile</span>
 
−
                                    </div>
 
−
                                </div>-->
 
−
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_1.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
                        <div class="recent-item box">
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_2.png" class="img-responsive" alt=""/>
 
−
                                <!--<div class="option inner">
 
−
                                    <div>
 
−
                                        <h5>Touch and Swipe</h5>
 
−
                                        <a href="images/portfolio/full/portfolio_2.png" class="fa fa-search mfp-image"></a>
 
−
                                        <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                        <span>Mobile</span>
 
−
                                    </div>
 
−
                                </div>-->
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_2.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
                        <div class="recent-item box">
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_3.png" class="img-responsive" alt=""/>
 
−
                                <!--<div class="option inner">
 
−
                                    <div>
 
−
                                        <h5>Touch and Swipe</h5>
 
−
                                        <a href="images/portfolio/full/portfolio_3.png" class="fa fa-search mfp-image"></a>
 
−
                                        <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                        <span>Mobile</span>
 
−
                                    </div>
 
−
                                </div>-->
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_3.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
                        <div class="recent-item box">
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_4.png" class="img-responsive" alt=""/>
 
−
                                <!--<div class="option inner">
 
−
                                    <div>
 
−
                                        <h5>Touch and Swipe</h5>
 
−
                                        <a href="images/portfolio/full/portfolio_4.png" class="fa fa-search mfp-image"></a>
 
−
                                        <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                        <span>Mobile</span>
 
−
                                    </div>
 
−
                                </div>-->
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_4.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
                        <div class="recent-item box">
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_5.png" class="img-responsive" alt=""/>
 
−
                                <!--<div class="option inner">
 
−
                                    <div>
 
−
                                        <h5>Touch and Swipe</h5>
 
−
                                        <a href="images/portfolio/full/portfolio_5.png" class="fa fa-search mfp-image"></a>
 
−
                                        <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                        <span>Mobile</span>
 
−
                                    </div>
 
−
                                </div>-->
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_5.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
                        <div class="recent-item box">
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_6.png" class="img-responsive" alt=""/>
 
−
                                <!--<div class="option inner">
 
−
                                    <div>
 
−
                                        <h5>Touch and Swipe</h5>
 
−
                                        <a href="images/portfolio/full/portfolio_6.png" class="fa fa-search mfp-image"></a>
 
−
                                        <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                        <span>Mobile</span>
 
−
                                    </div>
 
−
                                </div>-->
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_6.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
 
−
                        <div class="recent-item box">
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_7.png" class="img-responsive" alt=""/>
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_7.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
 
−
                        <div class="recent-item box">
 
−
                            <figure class="touching effect-bubba">
 
−
                                <img src="images/portfolio/portfolio_8.png" class="img-responsive" alt=""/>
 
−
                                <div class="option">
 
−
                                    <a href="portfolio_single.html" class="fa fa-link"></a>
 
−
                                    <a href="images/portfolio/full/portfolio_8.png" class="fa fa-search mfp-image"></a>
 
−
                                </div>
 
−
                                <figcaption class="item-description">
 
−
                                    <h5>Touch and Swipe</h5>
 
−
                                    <p>Mobile</p>
 
−
                                </figcaption>
 
−
                            </figure>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </section>
 
−
<!--Start recent work-->
 
−
 
−
<!-- Parallax with Testimonial -->
 
−
    <section class="parallax parallax-1">
 
−
        <div class="container">
 
−
            <!--<h2 class="center">Testimonials</h2>-->
 
−
            <div class="row">
 
−
                <div id="parallax-testimonial-carousel" class="parallax-testimonial carousel wow fadeInUp">
 
−
                    <div class="carousel-inner">
 
−
                        <div class="active item">
 
−
                            <div class="parallax-testimonial-item">
 
−
                                <blockquote>
 
−
                                    <p>Donec convallis, metus nec tempus aliquet, nunc metus adipiscing leo, a lobortis nisi dui ut odio. Nullam ultrices, eros accumsan vulputate faucibus, turpis tortor dictum.</p>
 
−
                                </blockquote>
 
−
                                <p>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                </p>
 
−
                                <div class="parallax-testimonial-review">
 
−
                                    <img src="images/testimonials/1.png" alt="testimonial">
 
−
                                    <span>Jonathan Dower</span>
 
−
                                    <small>Company Inc.</small>
 
−
                                </div>
 
−
                            </div>
 
−
                        </div>
 
−
 
−
                        <div class="item">
 
−
                            <div class="parallax-testimonial-item">
 
−
                                <blockquote>
 
−
                                    <p>Metus aliquet tincidunt metus, sit amet mattis lectus sodales ac. Suspendisse rhoncus dictum eros, ut egestas eros luctus eget. Nam nibh sem, mattis et feugiat ut, porttitor nec risus.</p>
 
−
                                </blockquote>
 
−
                                <p>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                </p>
 
−
                                <div class="parallax-testimonial-review">
 
−
                                    <img src="images/testimonials/2.png" alt="testimonial">
 
−
                                    <span>Jonathan Dower</span>
 
−
                                    <small>Leopard</small>
 
−
                                </div>
 
−
                            </div>
 
−
                        </div>
 
−
 
−
                        <div class="item">
 
−
                            <div class="parallax-testimonial-item">
 
−
                                <blockquote>
 
−
                                    <p>Nunc aliquet tincidunt metus, sit amet mattis lectus sodales ac. Suspendisse rhoncus dictum eros, ut egestas eros luctus eget. Nam nibh sem, mattis et feugiat ut, porttitor nec risus.</p>
 
−
                                </blockquote>
 
−
                                <p>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                    <i class="fa fa-star"></i>
 
−
                                </p>
 
−
                                <div class="parallax-testimonial-review">
 
−
                                    <img src="images/testimonials/3.png" alt="testimonial">
 
−
                                    <span>Jonathan Dower</span>
 
−
                                    <small>Leopard</small>
 
−
                                </div>
 
−
                            </div>
 
−
                        </div>
 
−
                    </div>
 
−
                    <ol class="carousel-indicators">
 
−
                        <li data-slide-to="0" data-target="#parallax-testimonial-carousel" class=""></li>
 
−
                        <li data-slide-to="1" data-target="#parallax-testimonial-carousel" class="active"></li>
 
−
                        <li data-slide-to="2" data-target="#parallax-testimonial-carousel" class=""></li>
 
−
                    </ol>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </section>
 
−
<!-- end : Parallax with Testimonial -->
 
−
 
−
    <section class="feature_bottom">
 
−
        <div class="container">
 
−
            <div class="row sub_content">
 
−
                <div class="col-lg-6  wow slideInLeft" data-wow-duration="1s">
 
−
                    <div class="dividerHeading">
 
−
                        <h4><span>Why Choose Us?</span></h4>
 
−
                    </div>
 
−
                    <p>Cras mattis consectetur purus sit amet fermen. Lorem ipsum dolor sit amet, consec adipiscing elit. Maecenas sed diam eget risus varius bland sit amet non fringilla ullamcorper magna. Nulla eu mi magna. Etiam suscipit commodo ad gravida.</p>
 
−
                    <ul class="list_style circle">
 
−
                        <li><a href="#"> Donec convallis, metus nec tempus aliquet</a></li>
 
−
                        <li><a href="#"> Aenean commodo ligula eget dolor</a></li>
 
−
                        <li><a href="#"> Cum sociis natoque penatibus mag ipsum</a></li>
 
−
                        <li><a href="#"> Lorem ipsum dolor sit amet cons adipiscing</a></li>
 
−
                        <li><a href="#"> Accumsan vulputate faucibus turpis dictum</a></li>
 
−
                    </ul>
 
−
                </div>
 
−
 
−
                <!-- TESTIMONIALS -->
 
−
                <div class="col-lg-6 wow slideInRight" data-wow-duration="1s">
 
−
                    <div class="dividerHeading">
 
−
                        <h4><span>What Client's Say</span></h4>
 
−
                    </div>
 
−
 
−
                    <ul class="progress-skill-bar mrg-0">
 
−
                        <li>
 
−
                            <span class="lable">70%</span>
 
−
                            <div class="progress_skill">
 
−
                                <div data-height="100" role="progressbar" data-value="70" class="bar" style="width: 0px; height: 0px;">
 
−
                                    System design
 
−
                                </div>
 
−
                            </div>
 
−
                        </li>
 
−
                        <li>
 
−
                            <span class="lable">80%</span>
 
−
                            <div class="progress_skill">
 
−
                                <div data-height="100" role="progressbar" data-value="80" class="bar" style="width: 0px; height: 0px;">
 
−
                                    Data analysis
 
−
                                </div>
 
−
                            </div>
 
−
                        </li>
 
−
                        <li>
 
−
                            <span class="lable">90%</span>
 
−
                            <div class="progress_skill">
 
−
                                <div data-height="100" role="progressbar" data-value="90" class="bar" style="width: 0px; height: 0px;">
 
−
                                    Link-level analysis
 
−
                                </div>
 
−
                            </div>
 
−
                        </li>
 
−
                        <li>
 
−
                            <span class="lable">80%</span>
 
−
                            <div class="progress_skill">
 
−
                                <div data-height="100" role="progressbar" data-value="80" class="bar" style="width: 0px; height: 0px;">
 
−
                                    Coverage modelling
 
−
                                </div>
 
−
                            </div>
 
−
                        </li>
 
−
                        <li>
 
−
                            <span class="lable">70%</span>
 
−
                            <div class="progress_skill">
 
−
                                <div data-height="100" role="progressbar" data-value="70" class="bar" style="width: 0px; height: 0px;">
 
−
                                    Strategy Solutions
 
−
                                </div>
 
−
                            </div>
 
−
                        </li>
 
−
                    </ul>
 
−
                </div><!-- TESTIMONIALS END -->
 
−
            </div>
 
−
        </div>
 
−
    </section>
 
−
 
−
    <section class="team">
 
−
        <div class="container">
 
−
            <div class="row  sub_content">
 
−
                <div class="col-lg-12 col-md-12 col-sm-12">
 
−
                    <div class="dividerHeading">
 
−
                        <h4><span>Meet the Team</span></h4>
 
−
                    </div>
 
−
                </div>
 
−
 
−
                <div class="col-lg-3 col-md-3 col-sm-6">
 
−
                    <div class="team-item-content">
 
−
                        <img src="images/teams/1.png" alt="profile img">
 
−
                        <div class="team-info centered">
 
−
                            <h5>kristiana</h5>
 
−
                            <small>
 
−
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat vehicula dolor. Sed in dictum justo. Ut arcu sem, cursus et nisl ac, euismod cursus erat. Curabitur ut orci porttitor ligula congue porttitor. Cras vitae justo vitae augue cursus bibendum.
 
−
                            </small>
 
−
                            <ul class="team-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>
 
−
                            </ul>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-lg-3 col-md-3 col-sm-6">
 
−
                    <div class="team-item-content">
 
−
                        <img src="images/teams/2.png" alt="profile img">
 
−
                        <div class="team-info centered">
 
−
                            <h5>williamson</h5>
 
−
                            <small>
 
−
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat vehicula dolor. Sed in dictum justo. Ut arcu sem, cursus et nisl ac, euismod cursus erat. Curabitur ut orci porttitor ligula congue porttitor. Cras vitae justo vitae augue cursus bibendum.
 
−
                            </small>
 
−
                            <ul class="team-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>
 
−
                            </ul>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-lg-3 col-md-3 col-sm-6">
 
−
                    <div class="team-item-content">
 
−
                        <img src="images/teams/3.png" alt="profile img">
 
−
                        <div class="team-info centered">
 
−
                            <h5>miranda joy</h5>
 
−
                            <small>
 
−
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat vehicula dolor. Sed in dictum justo. Ut arcu sem, cursus et nisl ac, euismod cursus erat. Curabitur ut orci porttitor ligula congue porttitor. Cras vitae justo vitae augue cursus bibendum.
 
−
                            </small>
 
−
                            <ul class="team-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>
 
−
                            </ul>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-lg-3 col-md-3 col-sm-6">
 
−
                    <div class="team-item-content">
 
−
                        <img src="images/teams/4.png" alt="profile img">
 
−
                        <div class="team-info centered">
 
−
                            <h5>steve thomas</h5>
 
−
                            <small>
 
−
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas placerat vehicula dolor. Sed in dictum justo. Ut arcu sem, cursus et nisl ac, euismod cursus erat. Curabitur ut orci porttitor ligula congue porttitor. Cras vitae justo vitae augue cursus bibendum.
 
−
                            </small>
 
−
                            <ul class="team-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>
 
−
                            </ul>
 
−
                        </div>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </section>
 
−
 
−
    <section class="clients">
 
−
        <div class="container">
 
−
            <div class="row sub_content">
 
−
                <div class="col-lg-12 col-md-12 col-sm-12">
 
−
                    <div class="dividerHeading">
 
−
                        <h4><span>Our Clients</span></h4>
 
−
 
−
                    </div>
 
−
 
−
                    <div class="our_clients">
 
−
                        <ul class="client_items clearfix">
 
−
                            <li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html"  data-placement="bottom" data-toggle="tooltip" title="Client 1" ><img src="images/clients/1.png" alt="" /></a></li>
 
−
                            <li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 2" ><img src="images/clients/2.png" alt="" /></a></li>
 
−
                            <li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 3" ><img src="images/clients/3.png" alt="" /></a></li>
 
−
                            <li class="col-sm-3 col-md-3 col-lg-3"><a href="services.html" data-placement="bottom" data-toggle="tooltip" title="Client 4" ><img src="images/clients/4.png" alt="" /></a></li>
 
−
                        </ul><!--/ .client_items-->
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </section>
 
−
    <section class="promo_box reverse wow bounceInUp" data-wow-offset="50">
 
−
        <div class="container">
 
−
            <div class="row">
 
−
                <div class="col-sm-9 col-md-9 col-lg-9">
 
−
                    <div class="promo_content">
 
−
                        <h3>we are shanghaitech-igem!</h3>
 
−
                        <p>Lorem ipsum dolor sit amet, cons adipiscing elit. Aenean commodo ligula eget dolor. </p>
 
−
                    </div>
 
−
                </div>
 
−
                <div class="col-sm-3 col-md-3 col-lg-3">
 
−
                    <div class="pb_action">
 
−
                        <a class="btn btn-lg btn-default" href="#fakelink">
 
−
                            <i class="fa fa-shopping-cart"></i>
 
−
                            Now
 
−
                        </a>
 
−
                    </div>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </section>
 
−
</section><!--end wrapper-->
 
−
 
−
 
−
 
−
<section class="footer_bottom">
 
−
    <div class="container">
 
−
        <div class="row">
 
−
            <div class="col-sm-6">
 
−
                <p class="copyright">&copy; Copyright igem-shanghaitech | Thanks to  <a href="http://www.jqueryrain.com/">jQuery Rain</a> | Made by YanPeng Hu</p>
 
−
            </div>
 
−
 
−
            <div class="col-sm-6 ">
 
−
                <div class="footer_social">
 
−
                    <ul class="footbot_social">
 
−
                        <li><a class="fb" href="#." data-placement="top" data-toggle="tooltip" title="Facebook"><i class="fa fa-facebook"></i></a></li>
 
−
                        <li><a class="twtr" href="#." data-placement="top" data-toggle="tooltip" title="Twitter"><i class="fa fa-twitter"></i></a></li>
 
−
                        <li><a class="dribbble" href="#." data-placement="top" data-toggle="tooltip" title="Dribbble"><i class="fa fa-dribbble"></i></a></li>
 
−
                        <li><a class="skype" href="#." data-placement="top" data-toggle="tooltip" title="Skype"><i class="fa fa-skype"></i></a></li>
 
−
                        <li><a class="rss" href="#." data-placement="top" data-toggle="tooltip" title="RSS"><i class="fa fa-rss"></i></a></li>
 
−
                    </ul>
 
−
                </div>
 
−
            </div>
 
−
        </div>
 
−
    </div>
 
−
</section>
 
−
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery-1.10.2.min.js"></script>
 
−
<script src="https://igemshare.github.io/js/bootstrap.min.js"></script>
 
−
<script src="https://igemshare.github.io/js/jquery.easing.1.3.js"></script>
 
−
<script src="https://igemshare.github.io/js/retina-1.1.0.min.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery.cookie.js"></script> <!-- jQuery cookie -->
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/styleswitch.js"></script> <!-- Style Colors Switcher -->
 
−
<!--
 
−
<script src="js/jquery.fractionslider.js" type="text/javascript" charset="utf-8"></script>
 
−
-->
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery.smartmenus.min.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery.smartmenus.bootstrap.min.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/owl.carousel.min.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jflickrfeed.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery.magnific-popup.min.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery.isotope.min.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/swipe.js"></script>
 
−
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery.flexslider-min.js"></script>
 
−
<script type="text/javascript" src="https://igemshare.github.io/js/jquery.sticky.js"></script>
 
−
 
−
<script src="https://igemshare.github.io/js/main.js"></script>
 
−
 
−
<!-- Start Style Switcher -->
 
−
<div class="switcher"></div>
 
−
<!-- End Style Switcher -->
 
−
 
−
 
−
 
−
    <script>
 
−
        $('.flexslider.top_slider').flexslider({
 
−
            animation: "fade",
 
−
            controlNav: false,
 
−
            directionNav: true,
 
−
            prevText: "&larr;",
 
−
            nextText: "&rarr;"
 
−
        });
 
−
    </script>
 
−
 
−
    <!-- WARNING: Wow.js doesn't work in IE 9 or less -->
 
−
    <!--[if gte IE 9 | !IE ]><!-->
 
−
        <script type="text/javascript" src="https://igemshare.github.io/js/wow.min.js"></script>
 
−
        <script>
 
−
            // WOW Animation
 
−
            new WOW().init();
 
−
        </script>
 
−
    <![endif]-->
 
−
 
−
</body>
 
 
</html>
 
</html>

Latest revision as of 07:34, 6 December 2017

奖项及致谢(Click me to see our awards and our special thanks)
homepage-story