|
|
| 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>
| |
| − | /*--背景图片--*/
| |
| − | .Topbox{
| |
| − | width: 100%;
| |
| − | min-height: 600px;
| |
| − | display: -webkit-flex; /* Safari */
| |
| − | display: flex;
| |
| − | color:white;
| |
| − | background-image: url(https://static.igem.org/mediawiki/2019/a/a8/T--CSU_CHINA--TM_DHZ.jpg);
| |
| − | background-size: cover;
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: center;
| |
| − | justify-content: center;
| |
| − | align-items: center;
| |
| − | }
| |
| − | /*-- 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="container Topbox "> | | <div class="container Topbox "> |
