Line 2: | Line 2: | ||
<head> | <head> | ||
<style type="text/css"> | <style type="text/css"> | ||
− | *{ | + | * { |
− | + | font-family: "Calibri"; | |
+ | font-size: 16px; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
} | } | ||
− | . | + | .cloud-img { |
− | + | width: 100%; | |
− | + | height: auto; | |
− | + | ||
− | + | ||
} | } | ||
− | . | + | .top-wrapper { |
− | + | width: 100%; | |
− | + | ||
} | } | ||
− | . | + | .bottom-wrapper { |
− | + | 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; | ||
+ | } | ||
+ | |||
+ | .summary-nav { | ||
+ | height: 120px; | ||
+ | margin: 60px -80px; | ||
+ | } | ||
+ | |||
+ | .img-block { | ||
+ | display: inline-block; | ||
+ | width: 90px; | ||
+ | height: 120px; | ||
+ | |||
+ | } | ||
+ | |||
+ | .img-block .img-title { | ||
+ | width: 100%; | ||
+ | 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 { | ||
+ | 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; | ||
+ | } | ||
+ | |||
+ | .bottom-link { | ||
+ | padding-top: 70px; | ||
+ | width: 100%; | ||
+ | height: 300px; | ||
+ | background-color: #333333; | ||
+ | } | ||
+ | |||
+ | .bottom-link a { | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | |||
+ | .row-img { | ||
+ | height: 50px; | ||
+ | margin: 20px auto; | ||
+ | } | ||
+ | |||
+ | .row-img img { | ||
+ | height: 50px; | ||
+ | margin: 0 10px; | ||
+ | display: inline-block | ||
+ | } | ||
+ | |||
+ | .row-img-1 { | ||
+ | width: 560px; | ||
+ | } | ||
+ | |||
+ | .row-img-2 { | ||
+ | width: 1070px | ||
+ | } | ||
+ | |||
+ | .row-img-3 { | ||
+ | width: 460px; | ||
+ | } | ||
+ | |||
+ | .bottom-link .copy-link { | ||
+ | width: 420px; | ||
+ | margin: 40px auto 0 auto; | ||
+ | } | ||
+ | |||
+ | .bottom-link .copy-link span { | ||
+ | color: #9a9898; | ||
+ | |||
+ | } | ||
+ | |||
+ | .bottom-link .copy-link i { | ||
+ | color: #9a9898; | ||
+ | width: 30px; | ||
+ | height: 30px; | ||
+ | margin: 0 5px; | ||
+ | font-size: 30px; | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
</html> | </html> |
Revision as of 15:06, 29 October 2017