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

Line 7: Line 7:
 
<link rel="stylesheet" href="https://2019.igem.org/Template:CSU_CHINA/CSS/Team?action=raw&ctype=text/css" type="text/css">  
 
<link rel="stylesheet" href="https://2019.igem.org/Template:CSU_CHINA/CSS/Team?action=raw&ctype=text/css" type="text/css">  
 
</head>   
 
</head>   
 +
<style>
 +
    /*--背景图片--*/
 +
    .background {
 +
        background: url(images/bg.jpg) no-repeat;
 +
        background-size: cover;
 +
        -webkit-background-size: cover;
 +
        -moz-background-size: cover;
 +
        -o-background-size: cover;
 +
        -moz-background-size: cover;
 +
        min-height: 300px;
 +
    }
 +
    /*-- portfolio-inner-page --*/
 +
    .portfolio h4 {
 +
        color: #000;
 +
        font-size: 18px;
 +
    }
 +
    label.portfolio-line {
 +
        display: block;
 +
        background-color: #000;
 +
        width: 10%;
 +
        margin: 15px auto;
 +
        height: 2px;
 +
    }
 +
    .portfolio h6 {
 +
        width: 50%;
 +
        margin: 0 auto 20px auto;
 +
        font-size: 14px;
 +
        line-height: 30px;
 +
    }
 +
    .portfolio-grid1,
 +
    .portfolio-grid2,
 +
    .portfolio-grid3,
 +
    .portfolio-grid6,
 +
    .portfolio-grid4,
 +
    .portfolio-grid5 {
 +
        margin-bottom: 20px;
 +
    }
 +
    /*--SAP--*/
 +
    .sap_tabs {
 +
        clear: both;
 +
        padding: 0;
 +
    }
 +
    .tab_box {
 +
        background: #fd926d;
 +
        padding: 2em;
 +
    }
 +
    .top1 {
 +
        margin-top: 2%;
 +
    }
 +
    .resp-tabs-list {
 +
        list-style: none;
 +
        padding: 0 0 3em;
 +
        margin: 0 auto;
 +
        text-align: center;
 +
    }
 +
    .resp-tab-item {
 +
        color: #333;
 +
        font-size: 1.1em;
 +
        font-weight: 500;
 +
        cursor: pointer;
 +
        display: inline-block;
 +
        margin: 0;
 +
        text-align: center;
 +
        list-style: none;
 +
        outline: none;
 +
        -webkit-transition: all 0.3s;
 +
        -moz-transition: all 0.3s;
 +
        -ms-transition: all 0.3s;
 +
        -o-transition: all 0.3s;
 +
        transition: all 0.3s;
 +
        text-transform: uppercase;
 +
        margin: 0 0.3em 0;
 +
        border-bottom: 2px solid #fff;
 +
        color: #000;
 +
        padding: 10px 15px;
 +
        border: 2px solid #23b684;
 +
    }
 +
    .resp-tab-active {
 +
        background-color: #23b684;
 +
        color: #fff;
 +
    }
 +
    .resp-tabs-container {
 +
        padding: 0px;
 +
        clear: left;
 +
    }
 +
    h2.resp-accordion {
 +
        cursor: pointer;
 +
        padding: 5px;
 +
        display: none;
 +
    }
 +
    .resp-tab-content {
 +
        display: none;
 +
    }
 +
    .resp-content-active,
 +
    .resp-accordion-active {
 +
        display: block;
 +
    }
 +
    .tab_img {
 +
        padding: 2em 0 0;
 +
        display: inline-block;
 +
    }
 +
    .portfolio-grids {
 +
        float: left;
 +
    }
 +
    .portfolio-grids a {
 +
        display: block;
 +
        overflow: hidden;
 +
        position: relative;
 +
    }
 +
    .portfolio-grids img.img-responsive {
 +
        width: 100%;
 +
    }
 +
    .b-wrapper {
 +
        background: rgba(0, 0, 0, 0.7);
 +
        position: absolute;
 +
        width: 100%;
 +
        height: 100%;
 +
        bottom: 0%;
 +
        left: 0;
 +
        -webkit-transition: .5s all;
 +
        -moz-transition: .5s all;
 +
        transition: .5s all;
 +
        -webkit-transform: scale(0);
 +
        -moz-transform: scale(0);
 +
        transform: scale(0);
 +
        -o-transform: scale(0);
 +
        -ms-transform: scale(0);
 +
    }
 +
    .portfolio-grids a:hover .b-wrapper {
 +
        -webkit-transform: scale(1);
 +
        -moz-transform: scale(1);
 +
        transform: scale(1);
 +
        -o-transform: scale(1);
 +
        -ms-transform: scale(1);
 +
    }
 +
    .b-wrapper h5,
 +
    .b-wrapper h2 {
 +
        font-size: 2.5em;
 +
        color: #fff;
 +
        text-align: center;
 +
        padding: 30% 0;
 +
        font-weight: 300;
 +
    }
 +
    img.zoom-img {
 +
        -webkit-transform: scale(1, 1);
 +
        transform: scale(1, 1);
 +
        -moz-transform: scale(1, 1);
 +
        -ms-transform: scale(1, 1);
 +
        -o-transform: scale(1, 1);
 +
        transition-timing-function: ease-out;
 +
        -webkit-transition-timing-function: ease-out;
 +
        -moz-transition-timing-function: ease-out;
 +
        -ms-transition-timing-function: ease-out;
 +
        -o-transition-timing-function: ease-out;
 +
        -webkit-transition-duration: 2s !important;
 +
        -moz-transition-duration: 2s !important;
 +
        transition-duration: 2s !important;
 +
    }
 +
    img.zoom-img:hover,
 +
    .portfolio-grids:hover img.zoom-img {
 +
        -webkit-transform: scale(1.2);
 +
        transform: scale(1.2);
 +
        -moz-transform: scale(1.2);
 +
        -ms-transform: scale(1.2);
 +
        -o-transform: scale(1.2);
 +
        overflow: hidden;
 +
    }
 +
    /*-- //portfolio-inner-page --*/
 +
    @media(max-width: 991px) {
 +
        button.navbar-toggler {
 +
            background: #fff;
 +
            border-radius: 0px;
 +
        }
 +
        .resp-tab-item {
 +
            padding: 10px 38px;
 +
            margin-bottom: 0.5em;
 +
        }
 +
    }
 +
</style>
 +
 
<body>
 
<body>
 
     <div class="background"></div>
 
     <div class="background"></div>
Line 22: Line 202:
 
                         </li>
 
                         </li>
 
                         <li class="resp-tab-item"><span>Instructors</span>
 
                         <li class="resp-tab-item"><span>Instructors</span>
−
                        </li>
 
−
                        <li class="resp-tab-item"><span>  Advisors  </span>
 
 
                         </li>
 
                         </li>
 
                     </ul>
 
                     </ul>
Line 30: Line 208:
 
                         <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/7/7f/T--CSU_CHINA--TM_DWX.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! ">
+
                                 <a href="" 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/7/7f/T--CSU_CHINA--TM_DWX.jpg" class="img-responsive zoom-img" alt="" />
+
                                     <img src="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt="" />
 
                                     <div class="b-wrapper">
 
                                     <div class="b-wrapper">
 
                                         <h2>Shi Qingxin</h2>
 
                                         <h2>Shi Qingxin</h2>
Line 70: Line 248:
 
                         </div>
 
                         </div>
 
                         <div class="tab-1 resp-tab-content">
 
                         <div class="tab-1 resp-tab-content">
−
                            <div class="clearfix"></div>
 
−
                        </div>
 
−
                        <div class="tab-1 resp-tab-content">
 
−
 
 
                             <div class="clearfix"></div>
 
                             <div class="clearfix"></div>
 
                         </div>
 
                         </div>

Revision as of 16:13, 19 October 2019

loading……

CSU_CHINA_TEAM

TEAM

  • Student Members
  • Team Leader
  • Instructors

Shi Qingxin
Yu Shangcheng
Dong Yufan
Yao Keyu