Difference between revisions of "Template:CCU Taiwan"

Line 53: Line 53:
 
}
 
}
  
−
    html {
+
p {
−
       height: 100%;
+
       font-family:'CCUfontsBold', Arial, sans-serif!important;
−
    }
+
}
−
    body {
+
 
−
      background: #E2E4E7;
+
body{
−
      padding: 0;
+
padding:0;
−
      text-align: center;
+
margin:0;
−
      font-family: 'open sans';
+
        background:#000000;
−
      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 {
 
      
 
      
−
    .wrapper {
+
position: absolute;
−
    height: 100% !important;
+
−
    height: 100%;
+
−
    margin: 0 auto;
+
−
    overflow: hidden;
+
−
    }
+
 
      
 
      
−
    a {
+
top: calc(50% - 8px);
−
      text-decoration: none;
+
−
    }
+
 
      
 
      
 +
left: calc(50% - 6px);
 
      
 
      
−
    h1, h2 {
+
transform: rotate(-45deg);
−
      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;
+
−
    }
+
 
      
 
      
−
    .pointer {
+
display: block;
−
      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;
+
−
    }
+
 
      
 
      
−
    .main h1 {
+
width: 12px;
−
      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;
+
−
    }
+
 
      
 
      
−
    .reload.bell {
+
height: 12px;
−
      font-size: 12px;
+
−
      padding: 20px;
+
−
      width: 45px;
+
−
      text-align: center;
+
−
      height: 47px;
+
−
      border-radius: 50px;
+
−
      -webkit-border-radius: 50px;
+
−
      -moz-border-radius: 50px;
+
−
    }
+
 
      
 
      
−
    .reload.bell #notification {
+
content: "";
−
      font-size: 25px;
+
−
      line-height: 140%;
+
−
    }
+
 
      
 
      
−
    .reload, .btn{
+
border: 2px solid white;
−
      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;
+
−
    }
+
 
      
 
      
−
    .back {
+
border-width: 0px 0 2px 2px;
−
      position: absolute;
+
 
−
      top: 0;
+
}
−
      left: 0;
+
 
−
      text-align: center;
+
@keyframes bounce {
−
      display: block;
+
 
−
      padding: 7px;
+
0%,
−
      width: 100%;
+
 
−
      box-sizing: border-box;
+
100%,
−
      -moz-box-sizing: border-box;
+
 
−
      -webkit-box-sizing: border-box;
+
20%,
−
      background: rgba(255, 255, 255, 0.25);
+
 
−
      font-weight: bold;
+
50%,
−
      font-size: 13px;
+
 
−
      color: #000;
+
80% {
−
      -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);
+
−
    }
+
 
      
 
      
−
    header {
+
  -webkit-transform: translateY(0);
−
      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;
+
−
    }
+
 
      
 
      
−
    .main section > img {
+
  -ms-transform: translateY(0);
−
      position: absolute;
+
−
      max-width: 100%;
+
−
      z-index: 1;
+
−
    }
+
 
      
 
      
−
    .main section.page1 {
+
  transform: translateY(0);
−
      background:rgb(230, 217, 200);
+
−
    }
+
}
−
    .main section.page1 h1 {
+
−
      text-align: left;
+
−
      padding: 0;
+
40% {
−
      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;
+
−
    }
+
 
      
 
      
−
    body.disabled-onepage-scroll .onepage-wrapper  section {
+
-webkit-transform: translateY(-10px);
−
      min-height: 100%;
+
−
      height: auto;
+
−
    }
+
 
      
 
      
−
    body.disabled-onepage-scroll .main section .page_container, body.disabled-onepage-scroll .main section.page3 .page_container  {
+
-ms-transform: translateY(-10px);
−
      padding: 20px;
+
−
      margin-top: 150px;
+
−
      -webkit-box-sizing: border-box;
+
−
      -moz-box-sizing: border-box;
+
−
      box-sizing: border-box;
+
−
    }
+
 
      
 
      
−
    body.disabled-onepage-scroll  section .page_container h1{
+
transform: translateY(-10px);
−
      text-align: center;
+
 
−
      font-size: 50px;
+
}
−
    }
+
 
−
    body.disabled-onepage-scroll section .page_container h2, body.disabled-onepage-scroll section .page_container .credit, body.disabled-onepage-scroll section .page_container .btns{
+
60% {
−
      text-align: center;
+
−
      width: 100%;
+
−
    }
+
 
      
 
      
−
    body.disabled-onepage-scroll .main section.page1 > img {
+
-webkit-transform: translateY(-5px);
−
      position: absolute;
+
−
      width: 80%;
+
−
      left: 10%;
+
−
    }
+
 
      
 
      
−
    body.disabled-onepage-scroll .main section > img {
+
-ms-transform: translateY(-5px);
−
      position: relative;
+
−
      max-width: 80%;
+
−
      bottom: 0;
+
−
    }
+
−
    body.disabled-onepage-scroll code {
+
−
      width: 95%;
+
−
      margin: 0 auto 25px;
+
−
      float: none;
+
−
      overflow: hidden;
+
−
    }
+
 
      
 
      
−
    body.disabled-onepage-scroll .main section.page3 .page_container {
+
transform: translateY(-5px);
−
      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 08:00, 27 July 2018