Lonely-boy (Talk | contribs) |
Lonely-boy (Talk | contribs) |
||
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> | ||
</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=" | + | <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/ | + | <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 class="clearfix"></div> | ||
</div> | </div> |
Revision as of 16:13, 19 October 2019
loading……
TEAM
- Student Members
- Team Leader
- Instructors