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

Line 5: Line 5:
 
<title>CSU_CHINA_TEAM</title>
 
<title>CSU_CHINA_TEAM</title>
 
<meta name="viewport" content="width=device-width, initial-scale=1">
 
<meta name="viewport" content="width=device-width, initial-scale=1">
−
<link rel="stylesheet" href="https://2019.igem.org/Template:CSU_CHINA/CSS/Team?action=raw&ctype=text/css" type="text/css">
+
</head>
−
</head>   
+
<style>
 +
/*-- 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;}
 +
}
 +
/* Preload images */
 +
body:after {
 +
  content: url('https://static.igem.org/mediawiki/2019/d/d6/T--CSU_CHINA--TM_close.png') url(../images/loading.gif) url('https://static.igem.org/mediawiki/2019/0/04/T--CSU_CHINA--TM_pre.png') url('https://static.igem.org/mediawiki/2019/b/be/T--CSU_CHINA--TM_next.png');
 +
  display: none;
 +
}
 +
 
 +
.lightboxOverlay {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  z-index: 9999;
 +
  background-color: black;
 +
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
 +
  opacity: 0.8;
 +
  display: none;
 +
}
 +
 
 +
.lightbox {
 +
  position: absolute;
 +
  left: 0;
 +
  width: 100%;
 +
  z-index: 10000;
 +
  text-align: center;
 +
  line-height: 0;
 +
  font-weight: normal;
 +
}
 +
 
 +
.lightbox .lb-image {
 +
  display: block;
 +
  height: auto;
 +
  max-width: inherit;
 +
  -webkit-border-radius: 3px;
 +
  -moz-border-radius: 3px;
 +
  -ms-border-radius: 3px;
 +
  -o-border-radius: 3px;
 +
  border-radius: 3px;
 +
}
 +
 
 +
.lightbox a img {
 +
  border: none;
 +
}
 +
 
 +
.lb-outerContainer {
 +
  position: relative;
 +
  background-color: white;
 +
  *zoom: 1;
 +
  width: 250px;
 +
  height: 250px;
 +
  margin: 0 auto;
 +
  -webkit-border-radius: 4px;
 +
  -moz-border-radius: 4px;
 +
  -ms-border-radius: 4px;
 +
  -o-border-radius: 4px;
 +
  border-radius: 4px;
 +
}
 +
 
 +
.lb-outerContainer:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
 
 +
.lb-container {
 +
  padding: 4px;
 +
}
 +
 
 +
.lb-loader {
 +
  position: absolute;
 +
  top: 43%;
 +
  left: 0;
 +
  height: 25%;
 +
  width: 100%;
 +
  text-align: center;
 +
  line-height: 0;
 +
}
 +
 
 +
.lb-cancel {
 +
  display: block;
 +
  width: 32px;
 +
  height: 32px;
 +
  margin: 0 auto;
 +
  background: url(../images/loading.gif) no-repeat;
 +
}
 +
 
 +
.lb-nav {
 +
  position: absolute;
 +
  top: 0;
 +
  left: 0;
 +
  height: 100%;
 +
  width: 100%;
 +
  z-index: 10;
 +
}
 +
 
 +
.lb-container > .nav {
 +
  left: 0;
 +
}
 +
 
 +
.lb-nav a {
 +
  outline: none;
 +
  background-image: url('data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
 +
}
 +
 
 +
.lb-prev, .lb-next {
 +
  height: 100%;
 +
  cursor: pointer;
 +
  display: block;
 +
}
 +
 
 +
.lb-nav a.lb-prev {
 +
  width: 34%;
 +
  left: 0;
 +
  float: left;
 +
  background: url('https://static.igem.org/mediawiki/2019/0/04/T--CSU_CHINA--TM_pre.png') 2% no-repeat;
 +
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.6s;
 +
  -moz-transition: opacity 0.6s;
 +
  -o-transition: opacity 0.6s;
 +
  transition: opacity 0.6s;
 +
}
 +
 
 +
.lb-nav a.lb-prev:hover {
 +
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
  opacity: 1;
 +
}
 +
 
 +
.lb-nav a.lb-next {
 +
  width: 50%;
 +
  right: 0;
 +
  float: right;
 +
  background: url('https://static.igem.org/mediawiki/2019/b/be/T--CSU_CHINA--TM_next.png') 100% no-repeat;
 +
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
 +
  opacity: 0;
 +
  -webkit-transition: opacity 0.6s;
 +
  -moz-transition: opacity 0.6s;
 +
  -o-transition: opacity 0.6s;
 +
  transition: opacity 0.6s;
 +
}
 +
 
 +
.lb-nav a.lb-next:hover {
 +
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
  opacity: 1;
 +
}
 +
 
 +
.lb-dataContainer {
 +
  margin: 0 auto;
 +
  padding-top: 5px;
 +
  *zoom: 1;
 +
  width: 100%;
 +
  -moz-border-radius-bottomleft: 4px;
 +
  -webkit-border-bottom-left-radius: 4px;
 +
  border-bottom-left-radius: 4px;
 +
  -moz-border-radius-bottomright: 4px;
 +
  -webkit-border-bottom-right-radius: 4px;
 +
  border-bottom-right-radius: 4px;
 +
}
 +
 
 +
.lb-dataContainer:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
 
 +
.lb-data {
 +
  padding: 0 4px;
 +
  color: #ccc;
 +
}
 +
 
 +
.lb-data .lb-details {
 +
    width: 90%;
 +
    float: left;
 +
    line-height: 1.1em;
 +
    margin-top: 2em;
 +
}
 +
 
 +
.lb-data .lb-caption {
 +
    font-size: 13px;
 +
    line-height: 1.8em;
 +
    color: #fff;
 +
text-align: center;
 +
    letter-spacing: 1px;
 +
}
 +
 
 +
.lb-data .lb-number {
 +
    display: block;
 +
    clear: left;
 +
    padding-top: 1em;
 +
    font-size: 1em;
 +
    color: #fff;
 +
text-align: left;
 +
    font-weight: 600;
 +
}
 +
 
 +
.lb-data .lb-close {
 +
  display: block;
 +
  float: right;
 +
  width: 30px;
 +
  height: 30px;
 +
  margin-top: 1.5em;
 +
  background: url('https://static.igem.org/mediawiki/2019/d/d6/T--CSU_CHINA--TM_close.png') top right no-repeat;
 +
  text-align: right;
 +
  outline: none;
 +
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
 +
  opacity: 0.7;
 +
  -webkit-transition: opacity 0.2s;
 +
  -moz-transition: opacity 0.2s;
 +
  -o-transition: opacity 0.2s;
 +
  transition: opacity 0.2s;
 +
}
 +
 
 +
.lb-data .lb-close:hover {
 +
  cursor: pointer;
 +
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
 +
  opacity: 1;
 +
}
 +
 
 +
@media screen and (max-width: 736px) {
 +
.lb-data .lb-details {
 +
width: 88%;
 +
margin-top: 1.5em;
 +
}
 +
}
 +
@media screen and (max-width: 667px) {
 +
.lb-data .lb-close {
 +
width: 29px;
 +
height: 29px;
 +
}
 +
.lb-data .lb-details {
 +
width: 85%;
 +
}
 +
}
 +
@media screen and (max-width: 568px) {
 +
.lb-data .lb-caption {
 +
letter-spacing: 0px;
 +
}
 +
.lb-data .lb-close {
 +
width: 25px;
 +
height: 25px;
 +
}
 +
}
 +
 
 +
</style>   
 
<body>
 
<body>
 +
 
<div class="container Topbox ">
 
<div class="container Topbox ">
 
</div>
 
</div>

Revision as of 01:24, 20 October 2019

loading……

CSU_CHINA_TEAM