Difference between revisions of "Team:CSU CHINA/Team"

Line 1: Line 1:
 
{{CSU_CHINA}}
 
{{CSU_CHINA}}
 
<html lang="en">
 
<html lang="en">
−
    <head>
+
<html lang="en">
−
        <meta charset="utf-8">
+
<head>
−
        <title>CSU_CHINA_TEAM</title>
+
<meta charset="utf-8">
−
        <meta name="viewport" content="width=device-width, initial-scale=1">
+
<title>CSU_CHINA_TEAM</title>
−
        <!-- bootstrap -->
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
        <link rel="stylesheet" href="https://2019.igem.org/Template:CSU_CHINA/CSS/Bootstrap4?action=raw&ctype=text/css" type="text/css">
+
−
      <!-- Font-Awesome-Icons-CSS -->
+
<!-- bootstrap -->
−
      <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.10.2/css/all.css" type="text/css">
+
<link rel="stylesheet" href="https://2019.igem.org/Template:CSU_CHINA/CSS/Bootstrap4?action=raw&ctype=text/css" type="text/css">
−
      <!-- jquery.min.js -->
+
    <!-- jquery.min.js -->
−
      <script src="https://2019.igem.org/Template:CSU_CHINA/JS/jquery?action=raw&amp;ctype=text/javascript"></script>
+
    <script src="https://2019.igem.org/Template:CSU_CHINA/JS/jquery?action=raw&amp;ctype=text/javascript"></script>
−
      <!-- Bootstrap.min.js -->
+
    <!-- Bootstrap.min.js -->
−
      <script src="https://2019.igem.org/Template:CSU_CHINA/JS/bootstrap4minjs?action=raw&amp;ctype=text/javascript"></script>
+
    <script src="https://2019.igem.org/Template:CSU_CHINA/JS/bootstrap4minjs?action=raw&amp;ctype=text/javascript"></script>
−
      <!-- Bootstrap.bundle.js -->
+
    <!-- Bootstrap.bundle.js -->
−
      <script src="https://2019.igem.org/Template:CSU_CHINA/JS/bootstrapbundleminjs?action=raw&amp;ctype=text/javascript"></script>
+
    <script src="https://2019.igem.org/Template:CSU_CHINA/JS/bootstrapbundleminjs?action=raw&amp;ctype=text/javascript"></script>
−
    </head>
+
    <!-- Popper -->
−
    <style>
+
    <script src="https://2019.igem.org/Template:CSU_CHINA/JS/Popper?action=raw&amp;ctype=text/javascript"></script>
 +
<link rel="stylesheet" href="https://2019.igem.org/Template:CSU_CHINA/CSS/Team?action=raw&ctype=text/css" type="text/css">
 +
</head>
 +
<style>
 
body{
 
body{
 
padding:0;
 
padding:0;
Line 51: Line 54:
 
}
 
}
  
 +
 +
/*--/header --*/
 +
.header-top {
 +
    position: absolute;
 +
    width: 100%;
 +
    z-index: 9;
 +
    padding: .5em 0;
 +
}
 +
/*--/navbar--*/
 +
 +
.navbar {
 +
    padding: 0.5em 2em;
 +
}
 +
nav.navbar.shrink {
 +
    width: 100%;
 +
    background-color: rgba(17, 17, 17, 0.73) !important;
 +
    transition: all 0.3s ease;
 +
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 +
    -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 +
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
 +
}
 +
a.navbar-brand {
 +
    font-size: 1em;
 +
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.37);
 +
    color: #fff;
 +
}
 +
 +
.navbar-light .navbar-brand {
 +
    color: #fff;
 +
    font-weight: 600;
 +
    letter-spacing: 1px;
 +
}
 +
.navbar-light .navbar-brand:hover, .navbar-light .navbar-brand:focus {
 +
    color: #fff;
 +
}
 +
li.nav-item {
 +
    margin: 0 15px;
 +
}
 +
 +
.navbar-light .navbar-nav .nav-link {
 +
    padding: 0.3em 0em;
 +
    color: #fff;
 +
    background: transparent;
 +
    letter-spacing: 1px;
 +
}
 +
 +
.navbar-light .navbar-nav .show > .nav-link,
 +
.navbar-light .navbar-nav .active > .nav-link,
 +
.navbar-light .navbar-nav .nav-link.show,
 +
.navbar-light .navbar-nav .nav-link.active,
 +
.navbar-light .navbar-nav .nav-link:hover,
 +
.navbar-light .navbar-nav .nav-link:focus {
 +
    background: transparent;
 +
    color: #fff;
 +
}
 +
 +
.dropdown-item {
 +
    padding: 0.5em 1.5rem;
 +
    margin: 0;
 +
}
 +
 +
.dropdown-menu {
 +
    margin: -1px;
 +
    padding: 0;
 +
}
 +
 +
/*---*/
 +
.tlinks{text-indent:-9999px;height:0;line-height:0;font-size:0;overflow:hidden;}
 +
/*---*/
 +
 +
.dropdown-toggle::after {
 +
    width: 0;
 +
    height: 0;
 +
    margin-left: 0;
 +
    content: "";
 +
    border-top: 0.3em solid;
 +
    border-right: 0.3em solid transparent;
 +
    border: 0px;
 +
}
 +
 +
li.nav-item.active,li.nav-item:hover {
 +
    border-bottom: 2px solid #4c6ef5;
 +
}
 +
 +
.dropdown-item:hover,
 +
.dropdown-item:focus {
 +
    color: #4c6ef5;
 +
    text-decoration: none;
 +
    background-color: #f0f0f1;
 +
}
 +
 +
/*-- //header --*/
 
/*--背景图片--*/
 
/*--背景图片--*/
 
.background{
 
.background{
Line 232: Line 327:
 
</style>
 
</style>
 
<body>
 
<body>
 +
<div class="header-top">
 +
<header>
 +
<nav class="navbar navbar-expand-lg navbar-light fixed-top shrink">
 +
<a class="navbar-brand" href="index.html">
 +
<img src="images/teamlogo.png" alt="logo" style="width:200px;">
 +
</a>
 +
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent">
 +
<span class="navbar-toggler-icon"></span>
 +
</button>
 +
<div class="collapse navbar-collapse" id="navbarSupportedContent">
 +
<ul class="navbar-nav ml-lg-auto text-center">
 +
<li class="nav-item active">
 +
<a class="nav-link" href="index.html">Home
 +
<span class="sr-only">(current)</span>
 +
</a>
 +
</li>
 +
<li class="nav-item dropdown">
 +
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
TEAM
 +
 +
</a>
 +
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
 +
<a class="dropdown-item" href="about.html" title="">TEAM1</a>
 +
<a class="dropdown-item" href="projects.html" title="">TEAM2</a>
 +
</div>
 +
</li>
 +
<li class="nav-item">
 +
<a class="nav-link" href="features.html">MODEL</a>
 +
</li>
 +
<li class="nav-item">
 +
<a class="nav-link" href="team.html">HP</a>
 +
</li>
 +
<li class="nav-item">
 +
<a class="nav-link" href="contact.html">LAB</a>
 +
</li>
 +
<li class="nav-item dropdown">
 +
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
PARTS
 +
 +
</a>
 +
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
 +
<a class="dropdown-item" href="pricing.html"> MODEL1</a>
 +
<a class="dropdown-item" href="pricing_light.html"> MODEL2</a>
 +
<a class="dropdown-item" href="pricing.html">MODEL3</a>
 +
</div>
 +
</li>
 +
<li class="nav-item">
 +
<a class="nav-link" href="contact.html">SAFETY</a>
 +
</li>
 +
<li class="nav-item dropdown">
 +
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
 +
PROJECT
 +
 +
</a>
 +
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
 +
<a class="dropdown-item" href="pricing.html"> DESCRIPTION</a>
 +
<a class="dropdown-item" href="pricing_light.html"> DESIGN</a>
 +
<a class="dropdown-item" href="pricing.html">RESULTS</a>
 +
</div>
 +
</li>
 +
<li class="nav-item">
 +
<a class="nav-link" href="contact.html">JUDGING</a>
 +
</li>
 +
</ul>
 +
</div>
 +
</nav>
 +
</header>
 +
</div>   
 
<div class="background"></div>
 
<div class="background"></div>
 
<div id="portfolio" class="portfolio">
 
<div id="portfolio" class="portfolio">
Line 250: Line 413:
 
<div class="tab-1 resp-tab-content row">
 
<div class="tab-1 resp-tab-content row">
 
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1">
 
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1">
−
<a href="https://static.igem.org/mediawiki/2019/4/41/T--CSU_CHINA--glove.png" data-lightbox="example-set" data-title="My name is Qingxin Shi, a 20-year-old boy from Central South University. My major is life science and now I’m a junior student. This year is my first time to enjoy myself in iGEM and I am in charge of the online submission of our team CSU_CHINA and doing experiments. I’m so glad to master many new skills to make me be better and make many outstanding new friends. iGEM makes my life more colorful and I want to meet more interesting friends. Let’s do our best here! ">
+
<a href="images/Shi Qingxin.jpg" data-lightbox="example-set" data-title="My name is Qingxin Shi, a 20-year-old boy from Central South University. My major is life science and now I’m a junior student. This year is my first time to enjoy myself in iGEM and I am in charge of the online submission of our team CSU_CHINA and doing experiments. I’m so glad to master many new skills to make me be better and make many outstanding new friends. iGEM makes my life more colorful and I want to meet more interesting friends. Let’s do our best here! ">
−
<img src="https://static.igem.org/mediawiki/2019/4/41/T--CSU_CHINA--glove.png" class="img-responsive zoom-img" alt=""/>
+
<img src="images/Shi Qingxin.jpg" class="img-responsive zoom-img" alt=""/>
 
<div class="b-wrapper">
 
<div class="b-wrapper">
 
<h2>Shi Qingxin</h2>
 
<h2>Shi Qingxin</h2>
Line 258: Line 421:
 
</div>
 
</div>
 
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid2">
 
<div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid2">
−
<a href="https://static.igem.org/mediawiki/2019/4/41/T--CSU_CHINA--glove.png" data-lightbox="example-set" data-title="My name is Shangcheng Yu, a 21-year-old boy, currently studying at Central South University majored in biological science. I’m mainly in charge of the experiment part of our whole IGEM project. In my spare time, I enjoy listening to music and watching cartoons. Discussing research progress and exchanging ideas about science especially in the field of immunology is also my favor. I’m outgoing and willing to make friends. For any related question, you can feel free to contact my e-mail below.  
+
<a href="images/T--CSU_CHINA--TM_YSC.jpg" data-lightbox="example-set" data-title="My name is Shangcheng Yu, a 21-year-old boy, currently studying at Central South University majored in biological science. I’m mainly in charge of the experiment part of our whole IGEM project. In my spare time, I enjoy listening to music and watching cartoons. Discussing research progress and exchanging ideas about science especially in the field of immunology is also my favor. I’m outgoing and willing to make friends. For any related question, you can feel free to contact my e-mail below.  
 
cell_ysc@foxmail.com  ">
 
cell_ysc@foxmail.com  ">
−
<img src="https://static.igem.org/mediawiki/2019/4/41/T--CSU_CHINA--glove.png" class="img-responsive zoom-img" alt=""/>
+
<img src="images/T--CSU_CHINA--TM_YSC.jpg" class="img-responsive zoom-img" alt=""/>
 
<div class="b-wrapper">
 
<div class="b-wrapper">
 
<h5>Yu Shangcheng</h5>
 
<h5>Yu Shangcheng</h5>
Line 423: Line 586:
 
</div>
 
</div>
 
</div>
 
</div>
 +
    <script>
 +
        $(document).ready(function() {
 +
            $(".dropdown").hover(
 +
                function() {
 +
                    $('.dropdown-menu', this).stop(true, true).slideDown("fast");
 +
                    $(this).toggleClass('open');
 +
                },
 +
                function() {
 +
                    $('.dropdown-menu', this).stop(true, true).slideUp("fast");
 +
                    $(this).toggleClass('open');
 +
                }
 +
            );
 +
        });
 +
    </script>
 +
<!-- //dropdown nav -->
 +
<!-- fixed nav -->
 +
<script>
 +
$(window).scroll(function () {
 +
if ($(document).scrollTop() > 50) {
 +
$('nav').addClass('shrink');
 +
} else {
 +
$('nav').removeClass('shrink');
 +
}
 +
});
 +
</script>
 +
<!-- //fixed nav -->
 
<!--script for portfolio-->
 
<!--script for portfolio-->
−
<script src="js/lightbox-plus-jquery.min.js"> </script>
+
<script src="https://2018.igem.org/Template:Valencia_UPV/lightboxminJS?action=raw&amp;ctype=text/javascript"> </script>
−
<script src="js/easyResponsiveTabs.js" type="text/javascript"></script>
+
<script>(function ($) {
 +
$.fn.extend({
 +
easyResponsiveTabs: function (options) {
 +
var defaults = {
 +
type: 'default',
 +
width: 'auto',
 +
fit: true
 +
}
 +
var options = $.extend(defaults, options);
 +
var opt = options,
 +
jtype = opt.type,
 +
jfit = opt.fit,
 +
jwidth = opt.width,
 +
vtabs = 'vertical',
 +
accord = 'accordion';
 +
this.each(function () {
 +
var $respTabs = $(this);
 +
$respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
 +
$respTabs.css({
 +
'display': 'block',
 +
'width': jwidth
 +
});
 +
$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
 +
jtab_options();
 +
 +
function jtab_options() {
 +
if (jtype == vtabs) {
 +
$respTabs.addClass('resp-vtabs');
 +
}
 +
if (jfit == true) {
 +
$respTabs.css({
 +
width: '100%',
 +
margin: '0px'
 +
});
 +
}
 +
if (jtype == accord) {
 +
$respTabs.addClass('resp-easy-accordion');
 +
$respTabs.find('.resp-tabs-list').css('display', 'none');
 +
}
 +
}
 +
var $tabItemh2;
 +
$respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
 +
var itemCount = 0;
 +
$respTabs.find('.resp-accordion').each(function () {
 +
$tabItemh2 = $(this);
 +
var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').text();
 +
$respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
 +
$tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
 +
itemCount++;
 +
});
 +
var count = 0,
 +
$tabContent;
 +
$respTabs.find('.resp-tab-item').each(function () {
 +
$tabItem = $(this);
 +
$tabItem.attr('aria-controls', 'tab_item-' + (count));
 +
$tabItem.attr('role', 'tab');
 +
$respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
 +
$respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
 +
$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
 +
var tabcount = 0;
 +
$respTabs.find('.resp-tab-content').each(function () {
 +
$tabContent = $(this);
 +
$tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
 +
tabcount++;
 +
});
 +
count++;
 +
});
 +
$respTabs.find("[role=tab]").each(function () {
 +
var $currentTab = $(this);
 +
$currentTab.click(function () {
 +
var $tabAria = $currentTab.attr('aria-controls');
 +
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
 +
$respTabs.find('.resp-tab-content-active').slideUp('', function () {
 +
$(this).addClass('resp-accordion-closed');
 +
});
 +
$currentTab.removeClass('resp-tab-active');
 +
return false;
 +
}
 +
if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
 +
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
 +
$respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
 +
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
 +
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
 +
} else {
 +
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
 +
$respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
 +
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
 +
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
 +
}
 +
});
 +
$(window).resize(function () {
 +
$respTabs.find('.resp-accordion-closed').removeAttr('style');
 +
});
 +
});
 +
});
 +
}
 +
});
 +
})(jQuery);</script>
 
<script type="text/javascript">
 
<script type="text/javascript">
 
$(document).ready(function () {
 
$(document).ready(function () {
Line 436: Line 722:
 
</script>
 
</script>
 
<!--//script for portfolio-->
 
<!--//script for portfolio-->
−
<script src="https://2019.igem.org/Template:CSU_CHINA/JS/lightbox-plus-jquery.min.js?action=raw&amp;ctype=text/javascript"></script>
+
 
−
<script src="https://2019.igem.org/Template:CSU_CHINA/JS/easyResponsiveTabs.js?action=raw&amp;ctype=text/javascript"></script>
+
</body>  
−
    </body>
+
 
−
    </html>
+
</html>

Revision as of 07:41, 19 October 2019

loading……

CSU_CHINA_TEAM