Difference between revisions of "Team:Tianjin/css/teampage"

(Created page with "#MY {background: url(https://static.igem.org/mediawiki/2016/a/aa/T--Tianjin--MY.jpg); background-size: 100%; background-position: center center;} #DHR {background: url(http://2016.i...")
 
Line 169: Line 169:
 
   font-size: 1.5vw;
 
   font-size: 1.5vw;
 
   text-align: right;
 
   text-align: right;
 +
  line-height: 1.7vw;
 
}
 
}
  

Revision as of 20:01, 13 October 2016

  1. MY {background: url(T--Tianjin--MY.jpg); background-size: 100%; background-position: center center;}
  2. DHR {background: url(T--Tianjin--DHR.jpg); background-size: 100%; background-position: center center;}
  3. SJ {background: url(T--Tianjin--SJ.jpg); background-size: 100%; background-position: center center;}
  4. HMZ {background: url(T--Tianjin--HMZ.jpg); background-size: 100%; background-position: center center;}
  5. YJ {background: url(T--Tianjin--YJ.jpg); background-size: 100%; background-position: center center;}
  6. XLY {background: url(T--Tianjin--XLY.jpg); background-size: 100%; background-position: center center;}
  7. YYJ {background: url(T--Tianjin--YYJ.jpg); background-size: 100%; background-position: center center;}
  8. LBZ {background: url(T--Tianjin--LBZ.jpg); background-size: 100%; background-position: center center;}
  9. XC {background: url(T--Tianjin--XC.jpg); background-size: 100%; background-position: center center;}
  10. ZY {background: url(T--Tianjin--ZY.jpg); background-size: 100%; background-position: center center;}
  11. HB {background: url(T--Tianjin--HB.jpg); background-size: 100%; background-position: center center;}
  12. YHP {background: url(T--Tianjin--YHP.jpg); background-size: 100%; background-position: center center;}
  13. XZM {background: url(T--Tianjin--XZM.jpg); background-size: 100%; background-position: center center;}
  14. ZSY {background: url(T--Tianjin--ZSY.jpg); background-size: 100%; background-position: center center;}
  15. HL {background: url(T--Tianjin--HL.jpg); background-size: 100%; background-position: center center;}
  16. MPZ {background: url(T--Tianjin--MPZ.jpg); background-size: 100%; background-position: center center;}
  17. DMY {background: url(T--Tianjin--DMY.jpg); background-size: 100%; background-position: center center;}
  18. QLY {background: url(T--Tianjin--QLY.jpg); background-size: 100%; background-position: center center;}
  19. CJW {background: url(T--Tianjin--CJW.jpg); background-size: 100%; background-position: center center;}
  20. WP {background: url(T--Tianjin--WP.jpg); background-size: 100%; background-position: center center;}
  21. CZX {background: url(T--Tianjin--CZX.jpg); background-size: 100%; background-position: center center;}
  22. ZHY {background: url(T--Tianjin--ZHY.jpg); background-size: 100%; background-position: center center;}
  23. XZA {background: url(T--Tianjin--XZA.jpg); background-size: 100%; background-position: center center;}
  24. ZMF {background: url(T--Tianjin--ZMF.jpg); background-size: 100%; background-position: center center;}

.memberBlock { 

 float: left;
 filter: brightness(0.6) grayscale(0.3);
 -webkit-filter: brightness(0.6) grayscale(0.3);

}

.centerBlock { 

 float: left;
 background: white;

}

.memberBlockActived { 

 background-size: 112%;
 -webkit-filter:grayscale(0);
 filter:grayscale(0);

}


.memberBlock:hover{ 

 animation: zoom 0.5s;
 animation-timing-function: ease;
 animation-fill-mode: forwards;
 cursor: pointer;

}

@keyframes zoom { 

 0% {background-size: 100.65%; -webkit-filter:grayscale( 0.36 ) ; filter:grayscale( 0.36  ) ;}
 1% {background-size: 100.73%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 2% {background-size: 100.80%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 3% {background-size: 100.89%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 4% {background-size: 100.97%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 5% {background-size: 101.05%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 6% {background-size: 101.14%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 7% {background-size: 101.23%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 8% {background-size: 101.31%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 9% {background-size: 101.41%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 10% {background-size: 101.50%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 11% {background-size: 101.59%; -webkit-filter:grayscale( 0.33 ) ; filter:grayscale( 0.33  ) ;}
 12% {background-size: 101.69%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 13% {background-size: 101.79%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 14% {background-size: 101.88%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 15% {background-size: 101.98%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 16% {background-size: 102.09%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 17% {background-size: 102.19%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 18% {background-size: 102.29%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 19% {background-size: 102.40%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 20% {background-size: 102.50%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 21% {background-size: 102.61%; -webkit-filter:grayscale( 0.3 ) ; filter:grayscale( 0.30  ) ;}
 22% {background-size: 102.72%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 23% {background-size: 102.83%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 24% {background-size: 102.94%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 25% {background-size: 103.05%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 26% {background-size: 103.17%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 27% {background-size: 103.28%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 28% {background-size: 103.40%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 29% {background-size: 103.51%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 30% {background-size: 103.63%; -webkit-filter:grayscale( 0.27 ) ; filter:grayscale( 0.27  ) ;}
 31% {background-size: 103.75%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 32% {background-size: 103.86%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 33% {background-size: 103.98%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 34% {background-size: 104.10%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 35% {background-size: 104.22%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 36% {background-size: 104.34%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 37% {background-size: 104.46%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 38% {background-size: 104.59%; -webkit-filter:grayscale( 0.24 ) ; filter:grayscale( 0.24  ) ;}
 39% {background-size: 104.71%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 40% {background-size: 104.83%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 41% {background-size: 104.95%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 42% {background-size: 105.08%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 43% {background-size: 105.20%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 44% {background-size: 105.32%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 45% {background-size: 105.45%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 46% {background-size: 105.57%; -webkit-filter:grayscale( 0.21 ) ; filter:grayscale( 0.21  ) ;}
 47% {background-size: 105.70%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 48% {background-size: 105.82%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 49% {background-size: 105.94%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 50% {background-size: 106.07%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 51% {background-size: 106.19%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 52% {background-size: 106.32%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 53% {background-size: 106.44%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 54% {background-size: 106.57%; -webkit-filter:grayscale( 0.18 ) ; filter:grayscale( 0.18  ) ;}
 55% {background-size: 106.69%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 56% {background-size: 106.81%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 57% {background-size: 106.94%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 58% {background-size: 107.06%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 59% {background-size: 107.18%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 60% {background-size: 107.31%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 61% {background-size: 107.43%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 62% {background-size: 107.55%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 63% {background-size: 107.67%; -webkit-filter:grayscale( 0.15 ) ; filter:grayscale( 0.15  ) ;}
 64% {background-size: 107.79%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 65% {background-size: 107.91%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 66% {background-size: 108.03%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 67% {background-size: 108.15%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 68% {background-size: 108.27%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 69% {background-size: 108.39%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 70% {background-size: 108.51%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 71% {background-size: 108.62%; -webkit-filter:grayscale( 0.12 ) ; filter:grayscale( 0.12  ) ;}
 72% {background-size: 108.74%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 73% {background-size: 108.85%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 74% {background-size: 108.97%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 75% {background-size: 109.08%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 76% {background-size: 109.19%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 77% {background-size: 109.30%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 78% {background-size: 109.41%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 79% {background-size: 109.52%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 80% {background-size: 109.63%; -webkit-filter:grayscale( 0.09 ) ; filter:grayscale( 0.09  ) ;}
 81% {background-size: 109.74%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 82% {background-size: 109.84%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 83% {background-size: 109.95%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 84% {background-size: 110.05%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 85% {background-size: 110.15%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 86% {background-size: 110.25%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 87% {background-size: 110.35%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 88% {background-size: 110.45%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 89% {background-size: 110.54%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 90% {background-size: 110.64%; -webkit-filter:grayscale( 0.06 ) ; filter:grayscale( 0.06  ) ;}
 91% {background-size: 110.73%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 92% {background-size: 110.82%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 93% {background-size: 110.91%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 94% {background-size: 111.00%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 95% {background-size: 111.09%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 96% {background-size: 111.18%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 97% {background-size: 111.26%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 98% {background-size: 111.34%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 99% {background-size: 111.42%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}
 100% {background-size: 111.50%; -webkit-filter:grayscale( 0.03 ) ; filter:grayscale( 0.03  ) ;}

}

.memberName { 

 color: black;
 height: auto;
 margin: auto;
 padding: 3vw 3vw 0.5vw 0;
 font-size: 4vw;
 text-align: right;

}

.memberJob { 

 color: #03a9f4;
 height: auto;
 margin: 0 3vw 1vw 0;
 padding: 0.5vw;
 font-size: 1.5vw;
 text-align: right;
 line-height: 1.7vw;

}

.memberIntro { 

 color: black;
 height: auto;
 margin: auto;

}

.memberIntro p { 

 width: 90%;
 margin-top: 2vw;
 margin: auto;
 text-align: justify;
 text-justify: kashida;
 font-size: 1.2vw;
 letter-spacing: 0.05vw;
 line-height: 1.3vw;

}

.centerBackground { 

 background: url(T--Tianjin--TeamPageCenter.png);
 background-color: dimgray;
 background-size: 100%;
 background-position: center center;

}

.TJUlink { 

 color: #03a9f4;

}