Difference between revisions of "Template:CCU Taiwan"

Line 53: Line 53:
 
}
 
}
  
−
p {
+
    html {
−
       font-family:'CCUfontsBold', Arial, sans-serif!important;
+
       height: 100%;
−
}
+
    }
−
 
+
    body {
−
body{
+
      background: #E2E4E7;
−
padding:0;
+
      padding: 0;
−
margin:0;
+
      text-align: center;
−
        background:#000000;
+
      font-family: 'open sans';
−
        overflow: hidden;
+
      position: relative;
−
}
+
      margin: 0;
−
 
+
      height: 100%;
−
#top {
+
      -webkit-font-smoothing: antialiased;
−
      position: fixed;
+
    }
−
        top: 100px;
+
−
        z-index: 6;
+
−
}
+
−
 
+
−
header{
+
−
margin:0 auto;
+
−
}
+
−
.container {
+
−
position: fixed;
+
−
width: 100%;
+
−
margin-top: 0;
+
−
background: #000000;
+
−
height: 55px;
+
−
z-index:3;
+
−
}
+
−
nav {
+
−
        margin:0;
+
−
padding:0;
+
−
height: 55px;
+
−
}
+
−
nav ul {
+
−
  margin: 0;
+
−
  list-style: none;
+
−
  background:white;
+
−
}
+
−
nav ul li {
+
−
  float:left;
+
−
  display: inline-block;
+
−
  position: relative;
+
−
  padding-top:10px;
+
−
  width: 190px;
+
−
  height: 42px;
+
−
  text-align:center;
+
−
  line-height:42px
+
−
  margin-left:0vw;
+
−
  margin-right:0vw;
+
−
}
+
−
nav ul li ul{
+
−
position:absolute;
+
−
        top:46px;
+
−
        left:-29.5px;
+
−
        margin-left:0px;
+
−
background:black;
+
−
        width:190px;
+
−
}
+
−
nav ul li ul li{
+
−
margin-left: 0;
+
−
position: relative;
+
−
text-align: center;
+
−
        line-height:42px
+
−
float:none;
+
−
display: none;
+
−
border-radius:1px;
+
−
}
+
−
nav a {
+
−
  color:#F5F5F5!important;
+
−
  font-family: monospace;
+
−
  font-size: 23px;
+
−
  text-decoration:none;
+
−
}
+
−
/*nav a::before {
+
−
  content: '';
+
−
  display: block;
+
−
  height: 3px;
+
−
  background-color: blue;
+
−
  position: absolute;
+
−
  top: -7px;
+
−
  width: 0%;
+
−
  border-radius: 2px;
+
−
  transition: all ease-in-out 400ms;
+
−
}*/
+
−
nav ul li:hover {
+
−
background-color:#F5F5F5;
+
−
transition: 200ms;
+
−
}
+
−
nav a:hover{
+
−
color:black!important;
+
−
        text-decoration:none;
+
−
}
+
−
/*nav a:hover::before {
+
−
  width: 100%;
+
−
}*/
+
−
nav ul li:hover ul li{
+
−
display: block;
+
−
transition: 300ms;
+
−
}
+
−
.parallax {
+
−
    background-image: url("https://static.igem.org/mediawiki/2018/1/11/T--CCU_Taiwan--LGOG_3.gif");
+
−
    height: 100vh;
+
−
    background-attachment: fixed;
+
−
    background-position: center;
+
−
    background-repeat: no-repeat;
+
−
    background-size: cover;
+
−
    z-index: 2;
+
−
}
+
−
 
+
−
#homelogo {
+
−
width: 100%;
+
−
position: relative;
+
−
z-index: -2;
+
−
margin:0;
+
−
height:100vh;
+
−
}
+
−
 
+
−
.scroll-down {
+
−
  background: none;
+
−
  position:absolute;
+
−
  transition: all .5s ease-in 3s;
+
−
  top:70vh;
+
−
  left: 50%;
+
−
  margin-left: -24px;
+
−
  z-index: 3;
+
−
  -webkit-transition: all .5s ease-in 3s;
+
−
  -webkit-animation: bounce 2s infinite 2s;
+
−
  animation: bounce 2s infinite 2s;
+
−
  -webkit-transition: all .2s ease-in;
+
−
  transition: all .2s ease-in;
+
−
}
+
−
 
+
−
.scroll-down img:hover {
+
−
  opacity: .5;
+
−
}
+
−
 
+
−
/*.a {
+
−
  background: transparent;
+
−
}*/
+
−
 
+
−
.scroll-down: before {
+
 
      
 
      
−
position: absolute;
+
    .wrapper {
 +
    height: 100% !important;
 +
    height: 100%;
 +
    margin: 0 auto;
 +
    overflow: hidden;
 +
    }
 
      
 
      
−
top: calc(50% - 8px);
+
    a {
 +
      text-decoration: none;
 +
    }
 
      
 
      
−
left: calc(50% - 6px);
 
 
      
 
      
−
transform: rotate(-45deg);
+
    h1, h2 {
 +
      width: 100%;
 +
      float: left;
 +
    }
 +
    h1 {
 +
      margin-top: 100px;
 +
      color: #000;
 +
      margin-bottom: 5px;
 +
      font-size: 70px;
 +
      letter-spacing: -4px;
 +
      font-weight: 100;
 +
    }
 +
    h1 span {
 +
      font-size: 26px;
 +
      margin: 0 5px;
 +
      text-transform: capitalize;
 +
      background: rgba(0,0,0,0.85);
 +
      display: inline-block;
 +
      color: #6D461D;
 +
      border-radius: 5px 5px;
 +
      -webkit-border-radius: 5px 5px;
 +
      -moz-border-radius: 5px 5px;
 +
      text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75);
 +
      padding: 3px 10px;
 +
    }
 +
    h2 {
 +
      color: #6D461D;
 +
      font-weight: 100;
 +
      margin-top: 0;
 +
      margin-bottom: 10px;
 +
    }
 
      
 
      
−
display: block;
+
    .pointer {
 +
      color: #9b59b6;
 +
      font-family: 'Pacifico', cursive;
 +
      font-size: 30px;
 +
      margin-top: 15px;
 +
    }
 +
    code {
 +
      margin: 20px 1%;
 +
      float: left;
 +
      width: 48%;
 +
      height: 105px;
 +
      background: rgba(0,0,0,0.1);
 +
      border: rgba(0,0,0,0.05) 5px solid;
 +
      border-radius: 5px;
 +
      padding:5px;
 +
      color: white;
 +
      text-align: center;
 +
      font-size: 15px;
 +
      margin-top: 25px;
 +
      display: block;
 +
      box-sizing: border-box;
 +
      -webkit-box-sizing: border-box;
 +
      -moz-box-sizing: border-box;
 +
    }
 +
    code.html {
 +
      color: #7EC9E6;
 +
    }
 +
    code.js {
 +
      color: #FFAD00;
 +
    }
 +
    .main {
 +
      float: left;
 +
      width: 100%;
 +
      margin: 0 auto;
 +
    }
 
      
 
      
−
width: 12px;
+
    .main h1 {
 +
      padding:150px 50px;
 +
      float: left;
 +
      width: 100%;
 +
      font-size: 45px;
 +
      box-sizing: border-box;
 +
      -webkit-box-sizing: border-box;
 +
      -moz-box-sizing: border-box;
 +
      font-weight: 100;
 +
      color: white;
 +
      margin: 0;
 +
    }
 +
 
 +
    .main h1.demo1 {
 +
      background: #1ABC9C;
 +
    }
 
      
 
      
−
height: 12px;
+
    .reload.bell {
 +
      font-size: 12px;
 +
      padding: 20px;
 +
      width: 45px;
 +
      text-align: center;
 +
      height: 47px;
 +
      border-radius: 50px;
 +
      -webkit-border-radius: 50px;
 +
      -moz-border-radius: 50px;
 +
    }
 
      
 
      
−
content: "";
+
    .reload.bell #notification {
 +
      font-size: 25px;
 +
      line-height: 140%;
 +
    }
 
      
 
      
−
border: 2px solid white;
+
    .reload, .btn{
 +
      display: inline-block;
 +
      border: 4px solid #A2261E;
 +
      border-radius: 5px;
 +
      -moz-border-radius: 5px;
 +
      -webkit-border-radius: 5px;
 +
      background: #CC3126;
 +
      display: inline-block;
 +
      line-height: 100%;
 +
      padding: 0.7em;
 +
      text-decoration: none;
 +
      color: #fff;
 +
      width: 100px;
 +
      line-height: 140%;
 +
      font-size: 17px;
 +
      font-family: open sans;
 +
      font-weight: bold;
 +
    }
 +
    .reload:hover{
 +
      background: #444;
 +
    }
 +
    .btn {
 +
      width: 200px;
 +
      color: rgb(255, 255, 255);
 +
      border: 4px solid rgb(0, 0, 0);
 +
      background: rgba(3, 3, 3, 0.75);
 +
    }
 +
    .clear {
 +
      width: auto;
 +
    }
 +
    .btn:hover, .btn:hover {
 +
      background: #444;
 +
    }
 +
    .btns {
 +
      width: 410px;
 +
      margin: 50px auto;
 +
    }
 +
    .credit {
 +
      text-align: center;
 +
      color: rgba(0,0,0,0.5);
 +
      padding: 10px;
 +
      width: 410px;
 +
      clear: both;
 +
    }
 +
    .credit a {
 +
      color: rgba(0,0,0,0.85);
 +
      text-decoration: none;
 +
      font-weight: bold;
 +
      text-align: center;
 +
    }
 
      
 
      
−
border-width: 0px 0 2px 2px;
+
    .back {
−
 
+
      position: absolute;
−
}
+
      top: 0;
−
 
+
      left: 0;
−
@keyframes bounce {
+
      text-align: center;
−
 
+
      display: block;
−
0%,
+
      padding: 7px;
−
 
+
      width: 100%;
−
100%,
+
      box-sizing: border-box;
−
 
+
      -moz-box-sizing: border-box;
−
20%,
+
      -webkit-box-sizing: border-box;
−
 
+
      background: rgba(255, 255, 255, 0.25);
−
50%,
+
      font-weight: bold;
−
 
+
      font-size: 13px;
−
80% {
+
      color: #000;
 +
      -webkit-transition: all 500ms ease-in-out;
 +
      -moz-transition: all 500ms ease-in-out;
 +
      -o-transition: all 500ms ease-in-out;
 +
      transition: all 500ms ease-in-out;
 +
    }
 +
    .back:hover {
 +
      color: black;
 +
      background: rgba(255, 255, 255, 0.5);
 +
    }
 
      
 
      
−
  -webkit-transform: translateY(0);
+
    header {
 +
      position: relative;
 +
      z-index: 10;
 +
    }
 +
    .main section .page_container {
 +
      position: relative;
 +
      top: 25%;
 +
      margin: 0 auto 0;
 +
      max-width: 950px;
 +
      z-index: 3;
 +
    }
 +
    .main section  {
 +
      overflow: hidden;
 +
    }
 
      
 
      
−
  -ms-transform: translateY(0);
+
    .main section > img {
 +
      position: absolute;
 +
      max-width: 100%;
 +
      z-index: 1;
 +
    }
 
      
 
      
−
  transform: translateY(0);
+
    .main section.page1 {
−
+
      background:rgb(230, 217, 200);
−
}
+
    }
−
+
    .main section.page1 h1 {
−
+
      text-align: left;
−
40% {
+
      padding: 0;
 +
      margin-bottom: 15px;
 +
      font-size: 70px;
 +
      color: black;
 +
    }
 +
    .main section.page1 h2 {
 +
      color: rgba(0,0,0,0.85);
 +
      text-align: center;
 +
      width: 435px;
 +
      line-height: 160%;
 +
    }
 +
    .main section .page_container .btns {
 +
      clear: both;
 +
      float: left;
 +
      text-align: center;
 +
      width: 435px;
 +
    }
 +
    .main section .page_container .btns a{
 +
      text-align: center;
 +
    }
 +
    .main section.page2 {
 +
      background: #555557 url(back-phone.png) no-repeat center -150px ;
 +
    }
 +
    .main section.page2 > img {
 +
      position: absolute;
 +
      top: -300px;
 +
      left: 50%;
 +
      margin-left: -1095px;
 +
    }
 +
    .main section.page2 .page_container {
 +
      margin-top: 240px;
 +
      overflow: hidden;
 +
    }
 +
    .main section.page2 h1 {
 +
      text-align: center;
 +
      padding: 0;
 +
      margin-bottom: 15px;
 +
      font-size: 50px;
 +
      letter-spacing: -1px;
 +
      color: white;
 +
    }
 +
    .main section.page2 h2 {
 +
      color: rgba(255,255,255,0.85);
 +
      text-align: center;
 +
      line-height: 160%;
 +
      font-weight: 100;
 +
    }
 +
    .viewing-page-2 .back{
 +
      background: rgba(0, 0, 0, 0.25);
 +
      color: #FFF;
 +
      }
 +
    .main section.page3 {
 +
      background:url(tilted-phone.png) no-repeat 156px -150px ;
 +
    }
 +
    .main section.page3 .page_container {
 +
      overflow: hidden;
 +
      width: 500px;
 +
      right: -285px;
 +
    }
 +
    .main section.page3 h1 {
 +
      text-align: left;
 +
      padding: 0;
 +
      margin-bottom: 0;
 +
      font-size: 70px;
 +
      letter-spacing: -1px;
 +
      color: black;
 +
    }
 +
    .main section.page3 h2 {
 +
      color: rgba(0,0,0,0.85);
 +
      text-align: left;
 +
      line-height: 160%;
 +
      font-weight: 100;
 +
      font-size: 21px;
 +
    }
 
      
 
      
−
-webkit-transform: translateY(-10px);
+
    body.disabled-onepage-scroll .onepage-wrapper  section {
 +
      min-height: 100%;
 +
      height: auto;
 +
    }
 
      
 
      
−
-ms-transform: translateY(-10px);
+
    body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container  {
 +
      padding: 20px;
 +
      margin-top: 150px;
 +
      -webkit-box-sizing: border-box;
 +
      -moz-box-sizing: border-box;
 +
      box-sizing: border-box;
 +
    }
 
      
 
      
−
transform: translateY(-10px);
+
    body.disabled-onepage-scroll  section .page_container h1{
−
 
+
      text-align: center;
−
}
+
      font-size: 50px;
−
 
+
    }
−
60% {
+
    body.disabled-onepage-scroll section .page_container h2, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
 +
      text-align: center;
 +
      width: 100%;
 +
    }
 
      
 
      
−
-webkit-transform: translateY(-5px);
+
    body.disabled-onepage-scroll .main section.page1 > img {
 +
      position: absolute;
 +
      width: 80%;
 +
      left: 10%;
 +
    }
 
      
 
      
−
-ms-transform: translateY(-5px);
+
    body.disabled-onepage-scroll .main section > img {
 +
      position: relative;
 +
      max-width: 80%;
 +
      bottom: 0;
 +
    }
 +
    body.disabled-onepage-scroll code {
 +
      width: 95%;
 +
      margin: 0 auto 25px;
 +
      float: none;
 +
      overflow: hidden;
 +
    }
 
      
 
      
−
transform: translateY(-5px);
+
    body.disabled-onepage-scroll .main section.page3 .page_container {
−
 
+
      width: 90%;
−
}
+
      margin-left: auto;
−
 
+
      margin-right: auto;
−
}
+
      right: 0;
−
 
+
    }
−
 
+
−
.content {
+
−
  margin-top: 50px;
+
−
  width: 80%;
+
−
  margin-left: 200px;
+
−
  z-index: 4;
+
−
  padding-bottom: 50px;
+
−
  position: absolute;
+
−
}
+
−
 
+
−
#fullPage {
+
−
margin:0;
+
−
        background: white;
+
−
}
+
−
 
+
−
 
+
−
.section{
+
−
margin:0;
+
−
padding:0;
+
−
}
+
−
 
+
−
 
+
−
.section2 {
+
−
        background: #EFB653;
+
−
        z-index: 3;
+
−
        height: 100%;
+
−
}
+
−
/*h3 {
+
−
  color:#e5e5e5;
+
−
}*/
+
−
.first {
+
−
  font-size: 60px!important;
+
−
  color: #F8F8FF;
+
−
  margin-left: 30px;
+
−
  margin-bottom: -30px!important;
+
−
  margin-top: -40px!important;
+
−
}
+
−
.second {
+
−
  font-size: 35px!important;
+
−
  color: #F8F8FF;
+
−
  margin-left: 30px;
+
−
}
+
−
.description {
+
−
  font-size: 18px!important;
+
−
  color: #F8F8FF;
+
−
  margin-left: 30px;
+
−
}
+
−
#logo{
+
−
width: 100%;
+
−
position: relative;
+
−
z-index: -2;
+
−
margin:0;
+
−
height:100vh;
+
−
}
+
−
.interlab {
+
−
  background: black;
+
−
  margin: 0 auto;
+
−
  padding-top:50px;
+
−
  padding-left:150px;
+
−
  padding-right:150px;
+
−
  padding-bottom: 150px;
+
−
  position: relative;
+
−
  list-style-type:decimal;
+
−
  font-color:#F8F8FF;
+
−
}
+
−
.title{
+
−
  font-size: 18px!important;
+
−
  color: #F8F8FF;
+
−
  line-height:25px;
+
−
}
+
−
 
+
−
 
+
−
.interlab li {
+
−
  color:white!important;
+
−
}
+
−
 
+
−
#partvideo {
+
−
    height: 680px;
+
−
}
+
−
</style>
+
−
</html>
+

Revision as of 07:48, 27 July 2018