Lonely-boy (Talk | contribs) |
Lonely-boy (Talk | contribs) |
||
Line 8: | Line 8: | ||
</head> | </head> | ||
<style> | <style> | ||
− | /*--背景图片--*/ | + | /*--背景图片--*/ |
− | .background{ | + | .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-inner-page --*/ |
− | .portfolio h4{ | + | .portfolio h4 { |
− | + | color: #000; | |
− | + | font-size: 18px; | |
− | } | + | } |
− | label.portfolio-line{ | + | label.portfolio-line { |
− | + | display: block; | |
− | + | background-color: #000; | |
− | + | width: 10%; | |
− | + | margin: 15px auto; | |
− | + | height: 2px; | |
− | } | + | } |
− | .portfolio h6{ | + | .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 { | + | .portfolio-grid1, |
− | + | .portfolio-grid2, | |
− | } | + | .portfolio-grid3, |
− | /*--SAP--*/ | + | .portfolio-grid6, |
− | .sap_tabs{ | + | .portfolio-grid4, |
− | + | .portfolio-grid5 { | |
− | + | margin-bottom: 20px; | |
− | } | + | } |
− | .tab_box{ | + | /*--SAP--*/ |
− | + | .sap_tabs { | |
− | + | clear: both; | |
− | } | + | padding: 0; |
− | .top1{ | + | } |
− | + | .tab_box { | |
− | } | + | background: #fd926d; |
− | .resp-tabs-list { | + | padding: 2em; |
− | + | } | |
− | + | .top1 { | |
− | + | margin-top: 2%; | |
− | + | } | |
− | } | + | .resp-tabs-list { |
− | .resp-tab-item { | + | 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> |
− | <div id="portfolio" class="portfolio"> | + | <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="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.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/2018/5/53/T--CSU_CHINA--TM_SQX.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="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.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/2018/5/53/T--CSU_CHINA--TM_SQX.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="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.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. "> | Besides, st.Dong has a great passion on music esp piano, and all kinds of sports. "> | ||
− | + | <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"> | |
− | + | <h5>Dong Yufan</h5> | |
− | + | </div> | |
− | + | </a> | |
− | + | </div> | |
− | + | <div class="col-md-4 col-sm-4 portfolio-grids portfolio-grid4"> | |
− | + | <a href="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.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="https://static.igem.org/mediawiki/2018/5/53/T--CSU_CHINA--TM_SQX.jpg" class="img-responsive zoom-img" alt="" /> | |
− | + | <div class="b-wrapper"> | |
− | + | <h5>Yao Keyu</h5> | |
− | + | </div> | |
− | + | </a> | |
− | + | </div> | |
− | + | <div class="clearfix"></div> | |
− | + | </div> | |
− | + | <div class="tab-1 resp-tab-content"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | <div class="clearfix"></div> | |
− | + | </div> | |
− | + | <div class="tab-1 resp-tab-content"> | |
− | + | <div class="clearfix"></div> | |
− | + | </div> | |
− | + | <div class="tab-1 resp-tab-content"> | |
− | + | ||
− | + | ||
− | + | <div class="clearfix"></div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | </div> | |
− | + | <!--script for portfolio--> | |
− | + | <script src="https://2018.igem.org/Template:Valencia_UPV/lightboxminJS?action=raw&ctype=text/javascript"></script> | |
− | + | <script src="https://2019.igem.org/Template:CSU_CHINA/JS/easyResponsiveTabsjs?action=raw&ctype=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--> | |
+ | </body> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Revision as of 08:42, 19 October 2019
loading……
TEAM
- Student Members
- Team Leader
- Instructors
- Advisors