|
|
Line 6: |
Line 6: |
| | | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> | | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> |
− | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet">
| |
− |
| |
− |
| |
− | <style type="text/css">
| |
− | #sideMenu, #top_title {display:none;}
| |
− | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px;}
| |
− | body {background-color:white; }
| |
− | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
− | #top_menu_inside {margin-left: 20px; margin-bottom: 0px;}
| |
− |
| |
− |
| |
− | html, body, div, span, applet, object, iframe,
| |
− | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
| |
− | a, abbr, acronym, address, big, cite, code,
| |
− | del, dfn, em, font, img, ins, kbd, q, s, samp,
| |
− | small, strike, strong, sub, tt, var,
| |
− | b, u, i, center,
| |
− | dl, dt, dd, ol, ul, li,
| |
− | fieldset, form, label, legend,
| |
− | table, caption, tbody, tfoot, thead, tr, th, td {
| |
− | margin: 0;
| |
− | padding: 0;
| |
− | border: 0;
| |
− | outline: 0;
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | * {
| |
− | font-family: 'Open Sans', sans-serif;
| |
− | font-weight: 300;
| |
− | }
| |
− | body{
| |
− | background-color:rgb(51,51,51) !important;
| |
− | line-height:1;
| |
− | }
| |
− |
| |
− | h1{
| |
− | background-image:url('https://static.igem.org/mediawiki/2017/a/a9/Tcfshtaiwan_background.jpeg');
| |
− | }
| |
− |
| |
− | .bigphoto{
| |
− | margin: auto;
| |
− | display: block;
| |
− | }
| |
− |
| |
− |
| |
− | /*大圖*/
| |
− | @media screen and (min-width: 768px) {
| |
− | .img-container{
| |
− | height:auto ;
| |
− | overflow:hidden ;
| |
− | width:100%;
| |
− | }
| |
− | .main-img{
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | left: 0;
| |
− | right: 0;
| |
− | width: 100%;
| |
− | margin: auto;
| |
− | z-index:999;
| |
− | }
| |
− | }
| |
− | @media screen and (orientation: portrait) {
| |
− | .img-container{
| |
− | height:auto;
| |
− | overflow:none;
| |
− | width:100%;
| |
− | }
| |
− | .main-img{
| |
− | top: 0;
| |
− | bottom: 0;
| |
− | left: 0;
| |
− | right: 0;
| |
− | width: 100%;
| |
− | margin: auto;
| |
− | z-index:999;
| |
− | }
| |
− | }
| |
− | /*scroll navigaiton*/
| |
− | nav {
| |
− | padding: 18px;
| |
− | position: fixed;
| |
− | height: auto;
| |
− | left:0.5vw;
| |
− | width: auto;
| |
− | z-index: 9999;
| |
− | top:25%;
| |
− | margin: auto;
| |
− | }
| |
− |
| |
− | nav .wrapper {
| |
− | padding: 0;
| |
− | width:100%;
| |
− | height: 785px;
| |
− | }
| |
− |
| |
− | nav .nodes {
| |
− | position: relative;
| |
− | margin-top: 1px;
| |
− | margin-left: 1px;
| |
− |
| |
− | }
| |
− |
| |
− | .line {
| |
− | position: absolute;
| |
− | width:1px;
| |
− | height:705px;
| |
− | top: 13px;
| |
− | }
| |
− | .line .red {
| |
− | width:1px; /*調line長度*/
| |
− | height:47%; /*line寬度*/
| |
− | position:relative;
| |
− |
| |
− | }
| |
− |
| |
− | .line .blue {
| |
− | width: 1px; /*line寬度*/
| |
− | height: 15%; /*調line長度*/
| |
− | position:relative;
| |
− | left:51px;
| |
− |
| |
− | }
| |
− | .line .red-container {
| |
− | position:relative;
| |
− | width: 4px;
| |
− | }
| |
− | .line .red {
| |
− | background-color:#00D6FF;/*cover line color*/
| |
− | *zoom: 1;
| |
− | background-size: 100%;
| |
− | }
| |
− | .line .blue {
| |
− | background-color: white;/*line color*/
| |
− | *zoom: 1;
| |
− | background-size: 100%;
| |
− |
| |
− | }
| |
− |
| |
− | .node {
| |
− | margin-left: 40px;/*調node間距*/
| |
− | width: 20px;
| |
− | height: 20px;
| |
− | margin-top: 30px;
| |
− | position: relative;
| |
− | }
| |
− | .node .splash {
| |
− | box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
| |
− | transform: translateZ(0px) scale(1);
| |
− | position: absolute;
| |
− | width: 20px;
| |
− | height: 20px;
| |
− | border-radius: 100%;
| |
− | pointer-events: none;
| |
− | opacity: 1;
| |
− | }
| |
− | .node.active .active-circle {
| |
− | transform: scale(1);
| |
− | opacity: 1;
| |
− | background:white;/*active circle color*/
| |
− | left:1.6px;
| |
− | }
| |
− | .node.active .splash {
| |
− | transition: transform 1200ms, opacity 1500ms;
| |
− | transform: translateZ(0px) scale(2.5);
| |
− | opacity: 0 !important;
| |
− |
| |
− | }
| |
− | .node.active .inactive-circle {
| |
− | transition: opacity 200ms;
| |
− | opacity: 0;
| |
− | }
| |
− | .node .active-circle {
| |
− | transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
− | transform: scale(0.7);
| |
− | position: absolute;
| |
− | opacity: 0;
| |
− | width: 20px;
| |
− | height: 20px;
| |
− | border-radius: 100%;
| |
− | background-color: #4b1202;
| |
− | *zoom: 1;
| |
− | background-size: 100%;
| |
− |
| |
− | }
| |
− | .node .active-circle .cover {
| |
− | transform: translateZ(0px);
| |
− | width: 16px;
| |
− | height: 16px;
| |
− | background:red;/*active circle color */
| |
− | border-radius: 100%;
| |
− | position: absolute;
| |
− | top: 2px;
| |
− | left: 2px;
| |
− | }
| |
− |
| |
− | .node .inactive-circle {
| |
− | transition: all 300ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
− | width: 14px;
| |
− | height: 14px;
| |
− | display: block;
| |
− | background: #000;
| |
− | position: absolute;
| |
− | border-radius: 100%;
| |
− | border: 2px solid white;
| |
− | top: 3px;
| |
− | left: 3px;
| |
− | }
| |
− | .node:hover {
| |
− | cursor: pointer;
| |
− | }
| |
− | .node:hover .active-circle {
| |
− | transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
− | transform: scale(0.84);
| |
− | }
| |
− |
| |
− | .node:hover .inactive-circle {
| |
− | transition: all 200ms cubic-bezier(0.63, 0.62, 0.48, 1.84);
| |
− | transform: scale(0.85);
| |
− | }
| |
− |
| |
− | /*left-topic*/
| |
− |
| |
− | .topic{
| |
− | position:relative;
| |
− | margin-top:0vh !important;
| |
− | width:200px;
| |
− | height:auto;
| |
− | left:210px;
| |
− | float:right;
| |
− | color:#F3F7F7;
| |
− | }
| |
− | .text_color{
| |
− | color:#F3F7F7;
| |
− | font-size:12pt !important;
| |
− | }
| |
− | /*content*/
| |
− | .content_container{
| |
− | position:relative;
| |
− | left:6.5vw;
| |
− | right:6.5vw;
| |
− | margin:0 auto;
| |
− | width:60vw;
| |
− | height:auto;
| |
− | }
| |
− | .title{
| |
− | font-size:25pt !important;
| |
− | color:#ffd11a;
| |
− | text-shadow:1px 1px 10px rgb(153, 153, 255);
| |
− | border-left:3px solid rgb(153, 153, 255);
| |
− | padding-left:10px !important;
| |
− | margin-top:20px;
| |
− | margin-bottom:10px;
| |
− | font-weight:bold;
| |
− | }
| |
− | .content{
| |
− | font-size:15pt !important;
| |
− | text-align:justify;
| |
− | text-indent:2em;
| |
− | color:#F3F7F7;
| |
− | padding-left:40px;
| |
− | padding-top:15px;
| |
− | padding-bottom:15px;
| |
− | }
| |
− | /*second title*/
| |
− | .content-1{
| |
− | font-size:19pt !important;
| |
− | text-align:justify;
| |
− | color:#F3F7F7;
| |
− | font-weight: bold !important;
| |
− | padding-top:30px;
| |
− | padding-bottom:10px
| |
− | }
| |
− |
| |
− | .content-image{
| |
− | color:#F3F7F7 !important;
| |
− | font-size:11pt !important;
| |
− | padding-top:10px;
| |
− | padding-bottom:50px;
| |
− | width:50vw;
| |
− | margin:auto;
| |
− | padding-left:60px;
| |
− | }
| |
− |
| |
− | .appear{
| |
− | display:none;
| |
− |
| |
− | }
| |
− | .list{
| |
− | font-size:15pt !important;
| |
− | text-align:justify;
| |
− | color:#F3F7F7;
| |
− | }
| |
− | .quote{
| |
− | font-size:17pt !important;
| |
− | text-align:justify;
| |
− | color:#F3F7F7;
| |
− | text-indent:2em !important;
| |
− |
| |
− | }
| |
− |
| |
− |
| |
− | /*image*/
| |
− | .web{
| |
− | position:fixed !important;
| |
− | left:0%;
| |
− | bottom:0%;
| |
− | display:block;
| |
− | margin: auto;
| |
− | }
| |
− | .right{
| |
− | position:fixed !important;
| |
− | bottom:-15px;
| |
− | right:0vw;
| |
− | margin: auto;
| |
− | }
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | .img-position{
| |
− | position:absolute;
| |
− | z-index:-1;
| |
− | }
| |
− | .box{
| |
− | width:auto;
| |
− | padding-top:20px;
| |
− | padding-bottom:20px;
| |
− | }
| |
− | .picture{
| |
− | position:relative;
| |
− | left:8vw;
| |
− | width:80%;
| |
− | padding-bottom:10px;
| |
− | }
| |
− |
| |
− | .picture-1{
| |
− | position:relative;
| |
− | left:17vw;
| |
− | width:50%;
| |
− | padding-bottom:10px;
| |
− | }
| |
− |
| |
− | </style>
| |
− | </head>
| |
− | <body>
| |
− | <nav id="scroll">
| |
− | <div class="wrapper">
| |
− |
| |
− | <div class="nodes">
| |
− | <div class="line">
| |
− | <div class="blue">
| |
− | <div class="red-container">
| |
− | <div class="red"></div>
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="node">
| |
− | <div class="topic"><p class="text_color">Visiting Professor</p></div>
| |
− | <div class="active-circle">
| |
− | <div class="splash"></div>
| |
− | <div class="cover">
| |
− | </div>
| |
− | </div>
| |
− | <div class="inactive-circle">
| |
− | <div class="small-cover">
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | <div class="node">
| |
− | <div class="topic"><p class="text_color">Precious Suggestions</p></div>
| |
− | <div class="active-circle">
| |
− | <div class="splash"></div>
| |
− | <div class="cover">
| |
− | </div>
| |
− | </div>
| |
− | <div class="inactive-circle">
| |
− | <div class="small-cover">
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− |
| |
− | <div class="node">
| |
− | <div class="topic"><p class="text_color">Further Concept</p></div>
| |
− | <div class="active-circle">
| |
− | <div class="splash"></div>
| |
− | <div class="cover">
| |
− | </div>
| |
− | </div>
| |
− | <div class="inactive-circle">
| |
− | <div class="small-cover">
| |
− | </div>
| |
− | </div>
| |
− | </div>
| |
− |
| |
− | </nav>
| |
− |
| |
− |
| |
− | <h1>
| |
− | <!--圖片-->
| |
− | <div class="img-container">
| |
− | <img src="https://static.igem.org/mediawiki/2017/6/60/Silverjptcfsh.jpeg" class="main-img" width="100%">
| |
− | </div>
| |
− |
| |
− |
| |
− | <!--wiki content-->
| |
− | <section class="content_container">
| |
− | <div>
| |
− | <p class="title">Attributions<p>
| |
− | <p class="content">We've interviewed professor Chang Cheng Ming on 10/14. Professor Chang is an expert in the transportation process for frozen food.
| |
− | </p>
| |
− |
| |
− | {{TCFSH_Taiwan}}
| |
− | {{TCFSH_Taiwan/Navigation}}
| |
− | <html>
| |
− | <head>
| |
− | <meta charset="UTF-8">
| |
− |
| |
− | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
| |
− |
| |
| <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> | | <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet"> |
| | | |
Line 807: |
Line 382: |
| | | |
| <div class="node"> | | <div class="node"> |
− | <div class="topic"><p class="text_color">Study</p></div> | + | <div class="topic"><p class="text_color">PI</p></div> |
| <div class="active-circle"> | | <div class="active-circle"> |
| <div class="splash"></div> | | <div class="splash"></div> |
Line 820: |
Line 395: |
| | | |
| <div class="node"> | | <div class="node"> |
− | <div class="topic"><p class="text_color">Comnvenient Store</p></div> | + | <div class="topic"><p class="text_color">Professors</p></div> |
| <div class="active-circle"> | | <div class="active-circle"> |
| <div class="splash"></div> | | <div class="splash"></div> |
Line 835: |
Line 410: |
| | | |
| <div class="node"> | | <div class="node"> |
− | <div class="topic"><p class="text_color">VEDAN</p></div> | + | <div class="topic"><p class="text_color">Others</p></div> |
| <div class="active-circle"> | | <div class="active-circle"> |
| <div class="splash"></div> | | <div class="splash"></div> |