HANSONGTSENG (Talk | contribs) |
HANSONGTSENG (Talk | contribs) |
||
(327 intermediate revisions by the same user not shown) | |||
Line 7: | Line 7: | ||
<link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Monoton" rel="stylesheet"> | ||
<link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet"> | <link href="https://fonts.googleapis.com/css?family=Dosis" rel="stylesheet"> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet"> | ||
<style> | <style> | ||
+ | |||
+ | body{ | ||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | font-size:120%; | ||
+ | |||
+ | } | ||
+ | |||
+ | body #content #HQ_page p, h1,h2,h3{ | ||
+ | font-family: 'Open Sans Condensed', sans-serif; | ||
+ | |||
+ | } | ||
+ | |||
+ | #home_logo, #sideMenu { display:none; } | ||
+ | #sideMenu, #top_title, .patrollink {display:none;} | ||
+ | #content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;} | ||
+ | body {background-color:white; } | ||
+ | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; } | ||
+ | |||
+ | .judges-will-not-evaluate { border: 4px solid #e4dede; padding: 2% !important; width: 92%!important;} | ||
#toc{ | #toc{ | ||
Line 21: | Line 41: | ||
#page-content{ | #page-content{ | ||
+ | position:relative; | ||
top:100px; | top:100px; | ||
+ | width:1040px; | ||
+ | left:200px; | ||
+ | margin:0px; | ||
+ | } | ||
+ | |||
+ | .coverimage{ | ||
+ | width:1200px; z-index:2; opacity:0.9; | ||
+ | } | ||
+ | |||
+ | .column{ | ||
+ | background-color:white; width:1180px; margin-left:0px; padding:10px; | ||
+ | box-shadow: 0px 2px 10px #B1C4C9; | ||
+ | |||
+ | } | ||
+ | |||
+ | .story{ | ||
+ | border-style:solid; | ||
+ | border-width:10px 0px 10px 0px; | ||
+ | border-color:#638695; | ||
+ | padding:20px; | ||
+ | margin:20px; | ||
+ | width:1000px; | ||
+ | } | ||
+ | |||
+ | .story img{ | ||
+ | width: 90%; | ||
+ | z-index:10; | ||
+ | margin:40px; | ||
+ | } | ||
+ | |||
+ | .paragraphs{ | ||
+ | |||
position:relative; | position:relative; | ||
− | width: | + | width:90%; |
− | left: | + | left:10%; |
+ | } | ||
+ | |||
+ | #page-content .paragraphs p{ | ||
+ | font-size:30px; | ||
+ | } | ||
+ | |||
+ | #page-content h1{ | ||
+ | font-size:90px; | ||
+ | text-align:left; | ||
+ | margin:none; | ||
+ | padding:none; | ||
+ | height:50px; | ||
+ | } | ||
+ | |||
+ | #page-content .column h1{ | ||
+ | color:#638695; font-size:70px; line-height:1em; | ||
+ | } | ||
+ | |||
+ | #page-content h2{ | ||
+ | font-size:50px; | ||
+ | line-height:2em; | ||
+ | } | ||
+ | #page-content h3{ | ||
+ | font-size:40px; | ||
} | } | ||
− | |||
− | |||
#container{ | #container{ | ||
− | background-color:# | + | background-color:#f1f1f1; |
} | } | ||
Line 37: | Line 112: | ||
a:hover{ | a:hover{ | ||
text-decoration:none; | text-decoration:none; | ||
+ | color:#638695; | ||
+ | |||
} | } | ||
Line 45: | Line 122: | ||
a{ | a{ | ||
text-decoration: none; | text-decoration: none; | ||
+ | color:#B1C4C9;; | ||
} | } | ||
+ | |||
+ | a:visited{ | ||
+ | text-decoration: none; | ||
+ | color:#B1C4C9;; | ||
+ | } | ||
+ | |||
#title{ | #title{ | ||
Line 57: | Line 141: | ||
top:18px; | top:18px; | ||
left:0px; | left:0px; | ||
− | z-index: | + | z-index: 3; |
− | height: | + | height: 90px; |
− | + | background-color:white; | |
− | + | opacity:0.98; | |
− | + | box-shadow: 0px 5px 100px; | |
− | + | ||
− | + | ||
} | } | ||
.dropdowns{ | .dropdowns{ | ||
− | width: | + | width:84%; |
− | min-width: | + | min-width:1200px; |
display:inline-block; | display:inline-block; | ||
position:relative; | position:relative; | ||
left:70px; | left:70px; | ||
− | top: | + | top: 15px; |
+ | } | ||
+ | |||
+ | .menu-part{ | ||
+ | display:inline; | ||
} | } | ||
Line 81: | Line 167: | ||
display: inline-block; | display: inline-block; | ||
min-width:140px; | min-width:140px; | ||
− | width: | + | width:12%; |
text-align:center; | text-align:center; | ||
− | color:# | + | color:#4B727B; |
− | font-size: | + | font-size: 17px; |
} | } | ||
Line 99: | Line 185: | ||
z-index: 5; | z-index: 5; | ||
text-align: left; | text-align: left; | ||
+ | width:100%; | ||
+ | box-shadow: 0px 2px 10px; | ||
} | } | ||
+ | a { | ||
+ | color:#B1C4C9; | ||
+ | } | ||
+ | a:hover{ | ||
+ | color:#638695; | ||
+ | } | ||
.dropdown .dropdown-content a div{ | .dropdown .dropdown-content a div{ | ||
color:#B1C4C9; | color:#B1C4C9; | ||
text-align:center; | text-align:center; | ||
− | padding: | + | padding:5px; |
} | } | ||
.dropdown .dropdown-content a :hover{ | .dropdown .dropdown-content a :hover{ | ||
− | background-color:# | + | background-color:#f1f1f1; |
− | color:# | + | color:#638695; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
.nymu_menu img{ | .nymu_menu img{ | ||
− | width: | + | min-width: 120px; |
+ | width:9%; | ||
position: relative; | position: relative; | ||
left: 30px; | left: 30px; | ||
Line 122: | Line 217: | ||
.dropdown:hover .dropdown-content { | .dropdown:hover .dropdown-content { | ||
display: block; | display: block; | ||
− | background-color: | + | background-color: white; |
− | border-style:solid; | + | /*border-style:solid; |
− | border-color:#B1C4C9; | + | border-color:#B1C4C9;*/ |
} | } | ||
Line 136: | Line 231: | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
Line 159: | Line 241: | ||
<div id="title">HAIR TO STAY</div> | <div id="title">HAIR TO STAY</div> | ||
− | + | <div class="menu-part"> | |
− | + | ||
− | <div class=" | + | |
− | + | ||
<a href="https://2018.igem.org/Team:NYMU-Taipei"> | <a href="https://2018.igem.org/Team:NYMU-Taipei"> | ||
− | + | <img src="https://static.igem.org/mediawiki/2018/c/cd/T--NYMU-Taipei--gear-logo-2.jpg" style="width:130px;"> | |
− | + | ||
− | + | ||
</a> | </a> | ||
+ | </div> | ||
+ | |||
+ | <div class="dropdowns menu-part"> | ||
<!-- Team --> | <!-- Team --> | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <div> | + | <div id="1r" onclick="closeintro(event),openintro(event)"> |
TEAM | TEAM | ||
</div> | </div> | ||
− | <div class="dropdown-content"> | + | <div class="dropdown-content" id="1c"> |
<a href="https://2018.igem.org/Team:NYMU-Taipei/Team"> | <a href="https://2018.igem.org/Team:NYMU-Taipei/Team"> | ||
Line 193: | Line 273: | ||
<div class="dropdown"> | <div class="dropdown"> | ||
<!-- Project --> | <!-- Project --> | ||
− | <div | + | <div id="2r" onclick="closeintro(event),openintro(event)"> |
− | + | ||
PROJECT | PROJECT | ||
</div> | </div> | ||
− | <div class="dropdown-content"> | + | <div class="dropdown-content" id="2c"> |
<a href="https://2018.igem.org/Team:NYMU-Taipei/Description"> | <a href="https://2018.igem.org/Team:NYMU-Taipei/Description"> | ||
Line 211: | Line 290: | ||
</a> | </a> | ||
− | <a href="https://2018.igem.org/Team:NYMU-Taipei/ | + | <a href="https://2018.igem.org/Team:NYMU-Taipei/experimentsandresults"> |
<div > | <div > | ||
− | Experiments | + | Experiments & Results |
</div> | </div> | ||
</a> | </a> | ||
Line 234: | Line 313: | ||
<div > | <div > | ||
Model | Model | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</a> | </a> | ||
Line 266: | Line 339: | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <div | + | <div id="3r" onclick="closeintro(event),openintro(event)"> |
− | + | ||
PARTS | PARTS | ||
</div> | </div> | ||
− | <div class="dropdown-content"> | + | <div class="dropdown-content" id="3c"> |
<a href="https://2018.igem.org/Team:NYMU-Taipei/Parts"> | <a href="https://2018.igem.org/Team:NYMU-Taipei/Parts"> | ||
Line 313: | Line 385: | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <div | + | <div id="4r" onclick="closeintro(event),openintro(event)"> |
− | + | ||
HUMAN PRACTICES | HUMAN PRACTICES | ||
</div> | </div> | ||
− | <div class="dropdown-content"> | + | <div class="dropdown-content"id="4c"> |
<a href="https://2018.igem.org/Team:NYMU-Taipei/Human_Practices"> | <a href="https://2018.igem.org/Team:NYMU-Taipei/Human_Practices"> | ||
Line 339: | Line 410: | ||
<div class="dropdown"> | <div class="dropdown"> | ||
− | <div | + | <div id="5r" onclick="closeintro(event),openintro(event)"> |
− | + | ||
AWARDS | AWARDS | ||
</div> | </div> | ||
− | <div class="dropdown-content"> | + | <div class="dropdown-content" id="5c"> |
<a href="https://2018.igem.org/Team:NYMU-Taipei/Applied_Design"> | <a href="https://2018.igem.org/Team:NYMU-Taipei/Applied_Design"> | ||
Line 355: | Line 425: | ||
<div > | <div > | ||
Entrepreneurship | Entrepreneurship | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</a> | </a> | ||
Line 373: | Line 431: | ||
<div > | <div > | ||
Model | Model | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</div> | </div> | ||
</a> | </a> | ||
Line 402: | Line 447: | ||
<!-- menuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu --> | <!-- menuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu --> | ||
+ | |||
+ | <div id="dot-side-bar"></div> | ||
+ | |||
+ | |||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | var dots = []; | ||
+ | var contents = document.getElementsByClassName("subtitle"); | ||
+ | for (var i = 0; i <= contents.length - 1; i++) { | ||
+ | dots.push('<div class="sidebar-item"><span class="sidebar-stuff sidebar-switch dot"></span><div class="sidebar-content sidebar-stuff"><a href=#'+(i+1)+">"+contents[i].innerHTML+'</a></div></div>'); | ||
+ | } | ||
+ | $("#dot-side-bar").html(dots.join().replace(/,/g,'')); | ||
+ | }); | ||
+ | |||
+ | |||
+ | |||
+ | function closeintro(x){ | ||
+ | var intros = $('.intro'); | ||
+ | var targetintro = x.target.id.replace('d','c'); | ||
+ | for (var i = intros.length - 1; i >= 0; i--) { | ||
+ | if (intros[i].id != targetintro) { | ||
+ | intros[i].hide(); | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | |||
+ | function openintro(x){ | ||
+ | var targetintro = x.target.id.replace('r','c'); | ||
+ | document.getElementById(targetintro).show();; | ||
+ | } | ||
+ | |||
+ | |||
+ | </script> | ||
+ | |||
+ | <style type="text/css"> | ||
+ | #dot-side-bar{ | ||
+ | position: fixed; | ||
+ | padding-top:200px; | ||
+ | font-size: 20px; | ||
+ | z-index:0px; | ||
+ | background-color:#f0f0f0; | ||
+ | height:100%; | ||
+ | padding-right:0px; | ||
+ | } | ||
+ | .sidebar-content{ | ||
+ | display: inline-block; | ||
+ | position:absolute; | ||
+ | height:40px; | ||
+ | width: 180px; | ||
+ | } | ||
+ | .sidebar-stuff{ | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .sidebar-item{ | ||
+ | border-radius: 0px 20px 20px 0px; | ||
+ | background-color:white; | ||
+ | box-shadow: 0px 2px 10px #B1C4C9; | ||
+ | height: 40px; | ||
+ | display: block; | ||
+ | min-width: 180px; | ||
+ | margin:10px; | ||
+ | margin-left:2px; | ||
+ | margin-right:10px; | ||
+ | padding-left:10px; | ||
+ | color:gray; | ||
+ | } | ||
+ | .dot { | ||
+ | height: 15px; | ||
+ | width: 15px; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: none; | ||
+ | } | ||
+ | .sidebar-item:hover .dot{ | ||
+ | background-color: #638695; | ||
+ | } | ||
+ | |||
+ | #dot-side-bar { | ||
+ | color:#bbb; | ||
+ | } | ||
+ | |||
+ | #dot-side-bar .sidebar-item a{ | ||
+ | display:inline; | ||
+ | } | ||
+ | |||
+ | #dot-side-bar .sidebar-item:hover a{ | ||
+ | color: #638695; | ||
+ | } | ||
+ | body{ | ||
+ | background-color: #F1F1F1; | ||
+ | } | ||
+ | |||
+ | </style> | ||
<!--the_above_is_to_be_copied-----------------------------------------------------------------------------------------------------------------------------------------------------> | <!--the_above_is_to_be_copied-----------------------------------------------------------------------------------------------------------------------------------------------------> |
Latest revision as of 19:37, 17 October 2018