|
|
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> |