Difference between revisions of "Team:CSU CHINA/Team"
Lonely-boy (Talk | contribs) |
Lonely-boy (Talk | contribs) |
||
| Line 17: | Line 17: | ||
</head> | </head> | ||
<style> | <style> | ||
| − | + | body{ | |
| − | + | padding:0; | |
| − | + | margin:0; | |
| − | + | background:#fff; | |
| + | position:relative; | ||
| + | font-family: 'Raleway', sans-serif; | ||
| + | } | ||
| + | body a{ | ||
| + | transition:0.5s all; | ||
| + | -webkit-transition:0.5s all; | ||
| + | -moz-transition:0.5s all; | ||
| + | -o-transition:0.5s all; | ||
| + | -ms-transition:0.5s all; | ||
| + | } | ||
| + | a:hover{ | ||
| + | text-decoration:none; | ||
| + | } | ||
| + | h1,h2,h3,h4,h5,h6{ | ||
| + | margin:0; | ||
| + | } | ||
| + | p{ | ||
| + | margin:0; | ||
| + | } | ||
| + | ul{ | ||
| + | margin:0; | ||
| + | padding:0; | ||
| + | } | ||
| + | label{ | ||
| + | margin:0; | ||
| + | } | ||
| + | img{ | ||
| + | width:100%; | ||
| + | } | ||
| + | /*--背景图片--*/ | ||
| + | .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; | ||
| + | } | ||
| + | .heading h3{ | ||
| + | text-align:center; | ||
| + | color:#000; | ||
| + | text-transform:cpatalize; | ||
| + | font-weight:600; | ||
| + | margin-top: 20px; | ||
| + | margin-bottom: 10px; | ||
| + | } | ||
| + | /*-- 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 id="portfolio" class="portfolio"> | |
| − | + | <div class="heading"> | |
| − | + | <h3>TEAM</h3> | |
| − | + | </div> | |
| − | + | <div class="container"> | |
| − | + | <div class="sap_tabs"> | |
| − | + | <div id="horizontalTab"> | |
| − | + | <ul class="resp-tabs-list"> | |
| − | + | <li class="resp-tab-item"><span>Student Members</span></li> | |
| − | + | <li class="resp-tab-item"><span>Team Leader</span></li> | |
| − | + | <li class="resp-tab-item"><span>Instructors</span></li> | |
| − | + | <li class="resp-tab-item"><span> Advisors </span></li> | |
| − | + | </ul> | |
| − | + | <div class="clearfix"> </div> | |
| − | + | <div class="resp-tabs-container"> | |
| − | + | <div class="tab-1 resp-tab-content row"> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1"> | |
| − | + | <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="images/Shi Qingxin.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h2>Shi Qingxin</h2> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid2"> | |
| − | + | <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 "> | |
| − | + | <img src="images/T--CSU_CHINA--TM_YSC.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Yu Shangcheng</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid3"> | |
| − | + | <a href="images/T--CSU_CHINA--TM_DYF.jpg" data-lightbox="example-set" data-title="Dong Yufan, the junior undergraduate majored in biological sciences, acts as a member of the CSU_CHINA in 2018 iGEM. St.Dong is dedicated in studying the molecular mechanism of special gene related to certain genetic diseases during these two years, as well as participating in several kinds of social activities like the student union, communication in the institution of neurobiology, summer school in HKU, and so forth. | |
| − | + | Besides, st.Dong has a great passion on music esp piano, and all kinds of sports. "> | |
| − | + | <img src="images/T--CSU_CHINA--TM_DYF.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Dong Yufan</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | |
| − | + | <a href="images/T--CSU_CHINA--TM_YKY.jpg" data-lightbox="example-set" data-title="My name is Yao Keyu. I am 20 years old now ，but in my heart,forever 18. I am currently a junior student of Central South University. My major is Detection, guidance and control technology.I'm honored to participate in this competition. In the CSU-CHINA team ,I am an art designer.I spend most of my time on designing the poster 、website design and so on. I have lots of interest, such as singing, dancing, drawing and so on.On vacation,I usually like to have the Volunteer Travel. "> | |
| − | + | <img src="images/T--CSU_CHINA--TM_YKY.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Yao Keyu</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid5"> | |
| − | + | <a href="images/T--CSU_CHINA--TM_LJY.jpg" data-lightbox="example-set" data-title="I am a Year 3 Biological Science student. I love sightseeing , dancing and eating mooncake, especially lava egg custard mooncake! The reason why I joined iGEM not only I wanted to try something new but also I can learn more about synthetic biology. During these months, I have learned how to be a scientific researcher, how to draw a beautiful chart, how to teach people learn a dance in a few days and how to cooperate well with others. "> | |
| − | + | <img src="images/T--CSU_CHINA--TM_LJY.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Li Jiayi</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid6"> | |
| − | + | <a href="images/T--CSU_CHINA--TM_PXD.jpg data-lightbox="example-set" data-title="Nice to meet you. I am Xiandong Peng. I come from Hunan Province , which is in the middle south of our country, China.I am a college student studying life sciences and have a special passion for liver cancer and lung cancer research. I hope that my research career will have no regrets. "> | |
| − | + | <img src="images/T--CSU_CHINA--TM_PXD.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Peng Xiandong </h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid6"> | |
| − | + | <a href="images/T--CSU_CHINA--TM_LJM.jpg" data-lightbox="example-set" data-title="Hello! I am a junior student(20 year-old) of clinical medicine from CSU-China. I have extensive hobbies, eg. watching drama, singing songs and reading novels. Moreover, I am very good at basketball. | |
| − | + | Major contribution to the project：organiser of Human Practice, collaborator-in-chief, video editor and assistant designer. | |
| − | + | "> | |
| − | + | <img src="images/T--CSU_CHINA--TM_LJM.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Liu Jiamiao</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="clearfix"> </div> | |
| − | + | </div> | |
| − | + | <div class="tab-1 resp-tab-content"> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1"> | |
| − | + | <a href="images/ship1.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/ship1.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Ship Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class=" col-md-4 col-sm-4 portfolio-grids portfolio-grid2"> | |
| − | + | <a href="images/ship2.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/ship2.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Ship Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid3"> | |
| − | + | <a href="images/ship3.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/ship3.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Ship Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | |
| − | + | <a href="images/ship4.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/ship4.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Ship Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid5"> | |
| − | + | <a href="images/ship5.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/ship5.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Ship Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="clearfix"> </div> | |
| − | + | </div> | |
| − | + | <div class="tab-1 resp-tab-content"> | |
| − | + | ||
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1"> | |
| − | + | <a href="images/800px-T--CSU_CHINA--TM_LXY.jpg" data-lightbox="example-set" data-title="Hey guys,My name is Li Xiangyu,the student leader of CSU_CHINA.This is our first year to take part in the competition.I hope we will have a good trip to America. "> | |
| − | + | <img src="images/800px-T--CSU_CHINA--TM_LXY.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Xiangyu LI</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="clearfix"> </div> | |
| − | + | </div> | |
| − | + | <div class="tab-1 resp-tab-content"> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid1"> | |
| − | + | <a href="images/flight1.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/flight1.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Flight Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | ||
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid2"> | |
| − | + | <a href="images/flight2.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/flight2.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Flight Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid3"> | |
| − | + | <a href="images/flight3.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/flight3.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Flight Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | |
| − | + | <a href="images/flight4.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/flight4.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Flight Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | |
| − | + | <a href="images/flight5.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/flight5.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Flight Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | |
| − | + | <a href="images/flight6.jpg" data-lightbox="example-set" data-title="Lorem Ipsum is simply dummy the when an unknown galley of type and scrambled it to make a type specimen."> | |
| − | + | <img src="images/flight6.jpg" class="img-responsive zoom-img" alt=""/> | |
| − | + | <div class="b-wrapper"> | |
| − | + | <h5>Flight Transport</h5> | |
| − | + | </div> | |
| − | + | </a> | |
| − | + | </div> | |
| − | + | <div class="clearfix"> </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| − | + | </div> | |
| + | <!--script for portfolio--> | ||
| + | <script src="js/lightbox-plus-jquery.min.js"> </script> | ||
| + | <script src="js/easyResponsiveTabs.js" type="text/javascript"></script> | ||
| + | <script type="text/javascript"> | ||
| + | $(document).ready(function () { | ||
| + | $('#horizontalTab').easyResponsiveTabs({ | ||
| + | type: 'default', //Types: default, vertical, accordion | ||
| + | width: 'auto', //auto or any width like 600px | ||
| + | fit: true // 100% fit in a container | ||
| + | }); | ||
| + | }); | ||
| + | </script> | ||
| + | <!--//script for portfolio--> | ||
<script src="https://https://2019.igem.org/Template:CSU_CHINA/JS/lightbox-plus-jquery.min.js?action=raw&ctype=text/javascript"></script> | <script src="https://https://2019.igem.org/Template:CSU_CHINA/JS/lightbox-plus-jquery.min.js?action=raw&ctype=text/javascript"></script> | ||
<script src="https://2019.igem.org/Template:CSU_CHINA/JS/easyResponsiveTabs.js?action=raw&ctype=text/javascript"></script> | <script src="https://2019.igem.org/Template:CSU_CHINA/JS/easyResponsiveTabs.js?action=raw&ctype=text/javascript"></script> | ||
</body> | </body> | ||
</html> | </html> | ||
Revision as of 20:40, 18 October 2019
loading……
TEAM
- Student Members
- Team Leader
- Instructors
- Advisors
