(13 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | + | .cloud-img { | |
− | + | width: 100%; | |
− | + | height: auto; | |
− | + | ||
} | } | ||
− | .wrapper{ | + | .top-wrapper { |
− | + | width: 100%; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | .background-img{ | + | .bottom-wrapper { |
− | + | font-family: "Calibri"; | |
− | + | font-size: 16px; | |
+ | background-image: url(https://static.igem.org/mediawiki/2017/4/4e/T--SCU-WestChina--Wiki-white.png); | ||
+ | background-repeat: repeat-y; | ||
+ | background-size: contain; | ||
+ | width: inherit; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .mytitle { | ||
+ | width: 100%; | ||
+ | font-family: "AGaramondPro"; | ||
+ | text-align: center; | ||
+ | color: #8b0000; | ||
+ | padding-top: 60px; | ||
+ | font-size: 36px; | ||
+ | } | ||
+ | |||
+ | .sub-title { | ||
+ | font-size: 18px; | ||
+ | font-family: "AGaramondPro"; | ||
+ | color: rgb(59, 59, 59); | ||
+ | line-height: 1.564; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .logo-mid { | ||
+ | width: 100%; | ||
+ | margin: 80px 0 250px 0; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .logo { | ||
+ | width: 70px; | ||
+ | height: auto; | ||
+ | } | ||
+ | |||
+ | .content-mid-wrapper { | ||
+ | width: 80%; | ||
+ | margin: 0 auto; | ||
+ | font-size: 16px; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | .content-title { | ||
+ | font-family: "AGaramondPro"; | ||
+ | color: #8b0000; | ||
+ | font-size: 36px; | ||
+ | } | ||
+ | |||
+ | .content-title-bottom { | ||
+ | width: 90px; | ||
+ | height: 15px; | ||
+ | background-color: #8b0000; | ||
+ | margin-bottom: 50px; | ||
+ | } | ||
+ | |||
+ | .content-abstract { | ||
+ | line-height: 32px; | ||
+ | } | ||
+ | |||
+ | .summary-nav { | ||
+ | height: 120px; | ||
+ | margin: 60px -80px; | ||
+ | } | ||
+ | |||
+ | .img-block { | ||
+ | display: inline-block; | ||
+ | width: 90px; | ||
+ | height: 120px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .img-block .img-title { | ||
+ | margin: 0 -30px; | ||
+ | |||
+ | height: 30px; | ||
+ | line-height: 30px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .img-btn { | ||
+ | width: 100%; | ||
+ | height: 90px; | ||
+ | position: relative; | ||
+ | } | ||
+ | |||
+ | .img-btn img { | ||
+ | display: block; | ||
+ | position: absolute; | ||
+ | top: 50%; | ||
+ | left: 50%; | ||
+ | transform: translate(-50%,-50%); | ||
+ | z-index: 3; | ||
+ | cursor: pointer; | ||
+ | |||
+ | -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; | ||
+ | transition: opacity 0.5s, transform 0.5s; | ||
+ | } | ||
+ | |||
+ | .img-btn img:hover { | ||
+ | opacity: 0.5; | ||
+ | } | ||
+ | |||
+ | .img-btn img.img-btn-info { | ||
+ | width: 75px; | ||
+ | height: 75px; | ||
+ | z-index: 2; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .border-line { | ||
+ | display: inline-block; | ||
+ | width: calc((100% - 100px*7) / 6); | ||
+ | margin-bottom: 60px; | ||
+ | height: 10px; | ||
+ | border-bottom: 2px dotted #000; | ||
+ | } | ||
+ | |||
+ | |||
+ | .summary-content-list { | ||
+ | width: 100%; | ||
+ | border-top: 2px dotted #000; | ||
+ | border-bottom: 2px dotted #000; | ||
+ | margin-bottom: 100px; | ||
+ | } | ||
+ | |||
+ | .summary-content { | ||
+ | line-height: 32px; | ||
+ | position: relative; | ||
+ | display: none; | ||
+ | height: 550px; | ||
+ | padding: 50px 0; | ||
+ | } | ||
+ | |||
+ | .summary-content:first-child { | ||
+ | display: block; | ||
+ | } | ||
+ | |||
+ | .summary-content img { | ||
+ | width: 700px; | ||
+ | height: auto; | ||
+ | display: block; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | .interlab-chart { | ||
+ | width: 700px; | ||
+ | height: 450px; | ||
+ | background-color: #8b0000; | ||
+ | margin: 30px auto 30px auto; | ||
+ | } | ||
+ | |||
+ | .link-more { | ||
+ | position: absolute; | ||
+ | right: 20px; | ||
+ | bottom: 10px; | ||
+ | color: #8b0000; | ||
+ | text-decoration: none; | ||
+ | -webkit-transition: color 0.5s; | ||
+ | transition: color 0.5s; | ||
+ | } | ||
+ | |||
+ | .link-more:visited { | ||
+ | color: #8b0000; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .link-more:hover { | ||
+ | color: #f44336; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .bottom-link { | ||
+ | padding-top: 70px; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | background-color: #333333; | ||
+ | |||
+ | } | ||
+ | |||
+ | .bottom-link a { | ||
+ | color: #9a9898; | ||
+ | text-decoration: none; | ||
+ | -webkit-transition: color 0.5s; | ||
+ | transition: color 0.5s; | ||
+ | } | ||
+ | |||
+ | .bottom-link a:hover { | ||
+ | color: #7c7a7a; | ||
+ | } | ||
+ | |||
+ | .row-img { | ||
+ | height: 50px; | ||
+ | margin: 20px auto; | ||
+ | } | ||
+ | |||
+ | .row-img img { | ||
+ | height: 50px; | ||
+ | margin: 0 10px; | ||
+ | display: inline-block; | ||
+ | -webkit-transition: opacity 0.5s; | ||
+ | transition: opacity 0.5s; | ||
+ | } | ||
+ | |||
+ | .row-img img:hover { | ||
+ | opacity: 0.7; | ||
+ | } | ||
+ | .row-img-1 { | ||
+ | width: 560px; | ||
} | } | ||
− | . | + | .row-img-2 { |
− | + | width: 1070px | |
} | } | ||
− | . | + | .row-img-3 { |
− | + | width: 460px; | |
} | } | ||
− | . | + | .bottom-link .copy-link { |
− | + | width: 470px; | |
− | + | margin: 40px auto 0 auto; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .bottom-link .copy-link span { |
− | + | margin-right: 20px; | |
− | + | ||
− | + | ||
− | + | ||
} | } | ||
− | . | + | .bottom-link .copy-link i { |
− | + | width: 30px; | |
− | + | height: 30px; | |
− | + | margin: 0 5px; | |
− | + | font-size: 30px; | |
− | + | ||
− | + | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Latest revision as of 16:49, 31 October 2017