Difference between revisions of "Team:SCU-WestChina/main.css"

 
(15 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
<html>
 
<html>
 +
  <head>
 
     <style  type="text/css">
 
     <style  type="text/css">
−
body{
+
.cloud-img {
−
  background-image: url("https://static.igem.org/mediawiki/2017/f/ff/T--SCU-WestChina--Wiki-bottom.png");
+
    width: 100%;
−
  background-size: contain;
+
    height: auto;
−
  background-repeat: repeat-y;
+
 
}
 
}
  
−
.wrapper{
+
.top-wrapper {
−
  width: 100%;
+
    width: 100%;
−
  height: auto;
+
−
  font-size: 0;
+
−
  font-family: "Times New Roman";
+
 
}
 
}
  
−
.background-img{
+
.bottom-wrapper {
−
  width: inherit;
+
    font-family: "Calibri";
−
  height: auto;
+
    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;
 
}
 
}
  
−
.top-wrapper{
+
.row-img-2 {
−
  width: inherit;
+
    width: 1070px
 
}
 
}
  
−
.bottom-wrapper{
+
.row-img-3 {
−
  width: inherit;
+
    width: 460px;
−
  background-image: url("https://static.igem.org/mediawiki/2017/f/ff/T--SCU-WestChina--Wiki-bottom.png");
+
−
  background-size: contain;
+
−
  background-repeat: repeat-y;
+
 
}
 
}
  
−
.mytitle{
+
.bottom-link .copy-link {
−
  margin: 30px;
+
    width: 470px;
−
  text-align: center;
+
    margin: 40px auto 0 auto;
−
  color:#8b0000;
+
−
  font-size: 36px;
+
 
}
 
}
  
−
.mycontent{
+
.bottom-link .copy-link span {
−
  width: 80%;
+
    margin-right: 20px;
−
  margin: 0 auto;
+
−
  font-size: 24px;
+
−
  color: #000;
+
 
}
 
}
  
−
.logo{
+
.bottom-link .copy-link i {
−
  position: fixed;
+
    width: 30px;
−
  display: block;
+
    height: 30px;
−
  right: 25px;
+
    margin: 0 5px;
−
  bottom: 10px;
+
    font-size: 30px;
−
  width: 8%;
+
−
  height: auto;
+
 
}
 
}
 
     </style>
 
     </style>
 
   </head>
 
   </head>
 
</html>
 
</html>

Latest revision as of 16:49, 31 October 2017