Line 1: | Line 1: | ||
<html> | <html> | ||
+ | <head> | ||
+ | <style> | ||
+ | nav ul ul { | ||
+ | display: none; | ||
+ | } | ||
+ | |||
+ | nav ul li:hover > ul { | ||
+ | display: block; | ||
+ | } | ||
+ | nav ul { | ||
+ | background: #efefef; | ||
+ | background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); | ||
+ | background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); | ||
+ | box-shadow: 0px 0px 9px rgba(0,0,0,0.15); | ||
+ | padding: 0 20px; | ||
+ | border-radius: 10px; | ||
+ | list-style: none; | ||
+ | position: relative; | ||
+ | display: inline-table; | ||
+ | } | ||
+ | nav ul:after { | ||
+ | content: ""; clear: both; display: block; | ||
+ | } | ||
+ | nav ul li { | ||
+ | float: left; | ||
+ | } | ||
+ | nav ul li:hover { | ||
+ | background: #fff; | ||
+ | background: linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%); | ||
+ | background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%); | ||
+ | } | ||
+ | nav ul li:hover a { | ||
+ | color: #fff; | ||
+ | } | ||
+ | |||
+ | nav ul li a { | ||
+ | display: block; padding: 15px 20px; | ||
+ | color: #757575; text-decoration: none; | ||
+ | } | ||
+ | nav ul ul { | ||
+ | background: #5f6975; border-radius: 0px; padding: 0; | ||
+ | position: absolute; top: 100%; | ||
+ | } | ||
+ | nav ul ul li { | ||
+ | float: none; | ||
+ | border-top: 1px solid #6b727c; | ||
+ | border-bottom: 1px solid #575f6a; | ||
+ | position: relative; | ||
+ | z-index:1; | ||
+ | } | ||
+ | nav ul ul li a { | ||
+ | padding: 15px 30px; | ||
+ | color: #fff; | ||
+ | z-index:1; | ||
+ | } | ||
+ | nav ul ul li a { | ||
+ | background: #4b545f; | ||
+ | z-index:1; | ||
+ | } | ||
+ | |||
+ | </style> | ||
+ | <nav> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Home">HOME</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Team">TEAM</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Project">PROJECT</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Description">DESCRIPTION</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Design">DESIGN</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Proof">PROOF</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Schedule">SCHEDULE</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Wet Lab">WET LAB</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Experiments">EXPERIMENTS</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Results">RESULTS</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Model">MODELING</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Software">SOFTWARE</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Human_Practices">HUMAN PRACTICES</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Attributions">ATTRIBUTION</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Notebook">NOTEBOOK</a> | ||
+ | <ul> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/InterLab">InterLab</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/Safety">SAFETY</a></li> | ||
+ | <li><a href="https://2016.igem.org/Team:CGU_Taiwan/News">NEWS</a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </nav> | ||
+ | <style type="text/css"> | ||
+ | body{ | ||
+ | margin:0px; | ||
+ | background:#000; | ||
+ | } | ||
+ | .header-cont { | ||
+ | width:100%; | ||
+ | position:fixed; | ||
+ | top:0px; | ||
+ | } | ||
+ | .header { | ||
+ | height:50px; | ||
+ | background:#F0F0F0; | ||
+ | border:1px solid #CCC; | ||
+ | width:960px; | ||
+ | margin:0px auto; | ||
+ | } | ||
+ | .content { | ||
+ | width:960px; | ||
+ | background: #F0F0F0; | ||
+ | border: 1px solid #CCC; | ||
+ | height: 2000px; | ||
+ | margin: 70px auto; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | <div class="header-cont"> | ||
+ | <div></div> | ||
+ | </div> | ||
+ | |||
+ | <div></div> | ||
+ | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
+ | |||
+ | <style> | ||
+ | * {box-sizing:border-box} | ||
+ | body {font-family: Verdana,sans-serif;margin:0} | ||
+ | |||
+ | /* Slideshow container */ | ||
+ | .slideshow-container { | ||
+ | max-width: 1000px; | ||
+ | position: relative; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | /* Next & previous buttons */ | ||
+ | .prev, .next { | ||
+ | cursor: pointer; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | top: 50%; | ||
+ | width: auto; | ||
+ | padding: 16px; | ||
+ | margin-top: -22px; | ||
+ | color: white; | ||
+ | font-weight: bold; | ||
+ | font-size: 18px; | ||
+ | transition: 0.6s ease; | ||
+ | border-radius: 0 3px 3px 0; | ||
+ | } | ||
+ | |||
+ | /* Position the "next button" to the right */ | ||
+ | .next { | ||
+ | right: 0; | ||
+ | border-radius: 3px 0 0 3px; | ||
+ | } | ||
+ | |||
+ | /* On hover, add a black background color with a little bit see-through */ | ||
+ | .prev:hover, .next:hover { | ||
+ | background-color: rgba(0,0,0,0.8); | ||
+ | } | ||
+ | |||
+ | /* Caption text */ | ||
+ | .text { | ||
+ | color: #f2f2f2; | ||
+ | font-size: 15px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | bottom: 8px; | ||
+ | width: 100%; | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | /* Number text (1/3 etc) */ | ||
+ | .numbertext { | ||
+ | color: #f2f2f2; | ||
+ | font-size: 12px; | ||
+ | padding: 8px 12px; | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | /* The dots/bullets/indicators */ | ||
+ | .dot { | ||
+ | cursor:pointer; | ||
+ | height: 13px; | ||
+ | width: 13px; | ||
+ | margin: 0 2px; | ||
+ | background-color: #bbb; | ||
+ | border-radius: 50%; | ||
+ | display: inline-block; | ||
+ | transition: background-color 0.6s ease; | ||
+ | } | ||
+ | |||
+ | .active, .dot:hover { | ||
+ | background-color: #717171; | ||
+ | } | ||
+ | |||
+ | /* Fading animation */ | ||
+ | .fade { | ||
+ | -webkit-animation-name: fade; | ||
+ | -webkit-animation-duration: 1.5s; | ||
+ | animation-name: fade; | ||
+ | animation-duration: 1.5s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes fade { | ||
+ | from {opacity: .4} | ||
+ | to {opacity: 1} | ||
+ | } | ||
+ | |||
+ | @keyframes fade { | ||
+ | from {opacity: .4} | ||
+ | to {opacity: 1} | ||
+ | } | ||
+ | |||
+ | /* On smaller screens, decrease text size */ | ||
+ | @media only screen and (max-width: 300px) { | ||
+ | .slprev, .slnext,.text {font-size: 11px} | ||
+ | } | ||
+ | </style> | ||
+ | <body> | ||
+ | |||
+ | <div class="slideshow-container"> | ||
+ | |||
+ | <div class="mySlides fade"> | ||
+ | <div class="numbertext">1 / 3</div> | ||
+ | <img src="https://static.igem.org/mediawiki/2016/f/f7/CGU_Taiwan--Team.jpg" style="width:100%"> | ||
+ | <div class="text">Caption Text</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="mySlides fade"> | ||
+ | <div class="numbertext">2 / 3</div> | ||
+ | <img src="img_fjords_wide.jpg" style="width:100%"> | ||
+ | <div class="text">Caption Two</div> | ||
+ | </div> | ||
+ | |||
+ | <div class="mySlides fade"> | ||
+ | <div class="numbertext">3 / 3</div> | ||
+ | <img src="img_mountains_wide.jpg" style="width:100%"> | ||
+ | <div class="text">Caption Three</div> | ||
+ | </div> | ||
+ | |||
+ | <a class="prev" onclick="plusSlides(-1)">❮</a> | ||
+ | <a class="next" onclick="plusSlides(1)">❯</a> | ||
+ | |||
+ | </div> | ||
+ | <br> | ||
+ | |||
+ | <div style="text-align:center"> | ||
+ | <span class="dot" onclick="currentSlide(1)"></span> | ||
+ | <span class="dot" onclick="currentSlide(2)"></span> | ||
+ | <span class="dot" onclick="currentSlide(3)"></span> | ||
+ | </div> | ||
+ | |||
+ | <script> | ||
+ | var slideIndex = 1; | ||
+ | showSlides(slideIndex); | ||
+ | |||
+ | function plusSlides(n) { | ||
+ | showSlides(slideIndex += n); | ||
+ | } | ||
+ | |||
+ | function currentSlide(n) { | ||
+ | showSlides(slideIndex = n); | ||
+ | } | ||
+ | |||
+ | function showSlides(n) { | ||
+ | var i; | ||
+ | var slides = document.getElementsByClassName("mySlides"); | ||
+ | var dots = document.getElementsByClassName("dot"); | ||
+ | if (n > slides.length) {slideIndex = 1} | ||
+ | if (n < 1) {slideIndex = slides.length} | ||
+ | for (i = 0; i < slides.length; i++) { | ||
+ | slides[i].style.display = "none"; | ||
+ | } | ||
+ | for (i = 0; i < dots.length; i++) { | ||
+ | dots[i].className = dots[i].className.replace(" active", ""); | ||
+ | } | ||
+ | slides[slideIndex-1].style.display = "block"; | ||
+ | dots[slideIndex-1].className += " active"; | ||
+ | } | ||
+ | </script> | ||
+ | |||
+ | </body> | ||
+ | </head> | ||
+ | <style> | ||
+ | #myImg { | ||
+ | border-radius: 5px; | ||
+ | cursor: pointer; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | #myImg:hover {opacity: 0.7;} | ||
+ | |||
+ | /* The Modal (background) */ | ||
+ | .modal { | ||
+ | display: none; /* Hidden by default */ | ||
+ | position: fixed; /* Stay in place */ | ||
+ | z-index: 1; /* Sit on top */ | ||
+ | padding-top: 100px; /* Location of the box */ | ||
+ | left: 0; | ||
+ | top: 0; | ||
+ | width: 100%; /* Full width */ | ||
+ | height: 100%; /* Full height */ | ||
+ | overflow: auto; /* Enable scroll if needed */ | ||
+ | background-color: rgb(0,0,0); /* Fallback color */ | ||
+ | background-color: rgba(0,0,0,0.9); /* Black w/ opacity */ | ||
+ | } | ||
+ | |||
+ | /* Modal Content (image) */ | ||
+ | .modal-content { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | } | ||
+ | |||
+ | /* Caption of Modal Image */ | ||
+ | #caption { | ||
+ | margin: auto; | ||
+ | display: block; | ||
+ | width: 80%; | ||
+ | max-width: 700px; | ||
+ | text-align: center; | ||
+ | color: #ccc; | ||
+ | padding: 10px 0; | ||
+ | height: 150px; | ||
+ | } | ||
+ | |||
+ | /* Add Animation */ | ||
+ | .modal-content, #caption { | ||
+ | -webkit-animation-name: zoom; | ||
+ | -webkit-animation-duration: 0.6s; | ||
+ | animation-name: zoom; | ||
+ | animation-duration: 0.6s; | ||
+ | } | ||
+ | |||
+ | @-webkit-keyframes zoom { | ||
+ | from {-webkit-transform: scale(0)} | ||
+ | to {-webkit-transform: scale(1)} | ||
+ | } | ||
+ | |||
+ | @keyframes zoom { | ||
+ | from {transform: scale(0.1)} | ||
+ | to {transform: scale(1)} | ||
+ | } | ||
+ | |||
+ | /* The Close Button */ | ||
+ | .close { | ||
+ | position: absolute; | ||
+ | top: 15px; | ||
+ | right: 35px; | ||
+ | color: #f1f1f1; | ||
+ | font-size: 40px; | ||
+ | font-weight: bold; | ||
+ | transition: 0.3s; | ||
+ | } | ||
+ | |||
+ | .close:hover, | ||
+ | .close:focus { | ||
+ | color: #bbb; | ||
+ | text-decoration: none; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | |||
+ | /* 100% Image Width on Smaller Screens */ | ||
+ | @media only screen and (max-width: 700px){ | ||
+ | .modal-content { | ||
+ | width: 100%; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
<style> | <style> | ||
.rad { | .rad { | ||
− | |||
border: 1px solid #ddd; | border: 1px solid #ddd; | ||
border-radius: 4px; | border-radius: 4px; | ||
padding: 5px; | padding: 5px; | ||
} | } | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</style> | </style> | ||
<body> | <body> | ||
− | < | + | <a href="https://2016.igem.org/Team:CGU_Taiwan/Project"> |
+ | <img src="" alt="PROJECT" width="300" height="300" class="rad"> | ||
+ | </a> | ||
+ | <a href="https://2016.igem.org/Team:CGU_Taiwan/Team"> | ||
+ | <img src="" alt="PROJECT" width="300" height="300" class="rad"> | ||
+ | </a> | ||
+ | <a href="https://2016.igem.org/Team:CGU_Taiwan/News"> | ||
+ | <img src="" alt="NEWS" width="300" height="300" class="rad"> | ||
+ | </a> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 07:23, 11 July 2016