Difference between revisions of "Template:UCAS-China"
| (38 intermediate revisions by 3 users not shown) | |||
| Line 1: | Line 1: | ||
<html> | <html> | ||
| − | <script | + | <script src="http://libs.baidu.com/jquery/1.11.1/jquery.min.js"></script> |
| + | <script> | ||
| + | function hide_show_menu() { | ||
| + | if (window.location.href.indexOf("submit") >= 0) { | ||
| + | $(".igem_2017_menu_wrapper").hide(); | ||
| + | } | ||
| + | if (document.getElementById('bars_item')) { | ||
| − | + | $("#bars_item").click(function() { | |
| − | # | + | $("#sideMenu").hide(); |
| − | + | ||
| − | </ | + | $(".igem_2017_menu_wrapper").fadeToggle("100"); |
| + | }); | ||
| + | } | ||
| + | else { | ||
| + | setTimeout(hide_show_menu, 15); | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
<head> | <head> | ||
| − | + | ||
| − | + | <!-- This tells the browser that your page is responsive --> | |
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| + | <!-- This is from CSS templates --> | ||
| + | <!--<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">--> | ||
| + | <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway"> | ||
| + | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> | ||
| + | <script type="text/javascript" async | ||
| + | src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.2/MathJax.js?config=TeX-MML-AM_CHTML"> | ||
| + | </script> | ||
| + | |||
| + | <!-- Latest compiled and minified CSS --> | ||
| + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> | ||
| + | <style type="text/css"> | ||
| + | /****************************** DEFAULT WIKI SETTINGS ****************************/ | ||
| + | |||
| + | |||
| + | body,h1,h2,h3,h4,h5,h6,p {font-family: "Raleway", sans-serif; line-height: 1.5} | ||
| + | |||
| + | body, html { | ||
| + | height: 100%; | ||
| + | line-height: 2; | ||
| + | } | ||
| + | |||
| + | #home_logo, #sideMenu { display:none; } | ||
| + | #sideMenu, #top_title, .patrollink {display:none;} | ||
| + | #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;} | ||
| + | body {background-color:#000000; } | ||
| + | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5, #bodyContent p { | ||
| + | font-family: "Raleway", sans-serif; | ||
| + | line-height: 1.5; | ||
| + | margin-bottom: 0px; | ||
| + | |||
| + | } | ||
| + | |||
| + | |||
| + | |||
| + | /**************************** NAVBAR *************************************/ | ||
| + | |||
| + | /* Add a dark background color with a little bit see-through */ | ||
| + | .navbar { | ||
| + | left: -20px !important; | ||
| + | right: -20px !important; | ||
| + | top: -20px !important; | ||
| + | padding-top: 25px; | ||
| + | padding-bottom: 5px; | ||
| + | padding-left: 25px; | ||
| + | padding-right: 25px; | ||
| + | background-color: rgb(25, 55, 89); | ||
| + | border-color: transparent; | ||
| + | border: 0; | ||
| + | font-size: 13px !important; | ||
| + | letter-spacing: 1px; | ||
| + | /*opacity:0.95;*/ | ||
| + | margin-top: 17px; | ||
| + | transition: background-color 0.5s ease-out; | ||
| + | } | ||
| + | |||
| + | .navbar-nav { | ||
| + | margin-top: 2.1em !important; | ||
| + | } | ||
| + | |||
| + | .navbar li { | ||
| + | margin: 0 2px; | ||
| + | border-radius: 5px; | ||
| + | } | ||
| + | |||
| + | /* Add a gray color to all navbar links */ | ||
| + | .navbar li a, .navbar .navbar-brand { | ||
| + | color: #fff; | ||
| + | border-radius: 5px; | ||
| + | } | ||
| + | |||
| + | /* the color of the single Link ('safety') on hover */ | ||
| + | .navbar-nav li a:hover { | ||
| + | color: #193759;//changed | ||
| + | } | ||
| + | |||
| + | /* The active link this seems to be useless at the moment*/ | ||
| + | .navbar-nav li.active a { | ||
| + | color: #fff; | ||
| + | background-color:#29292c; | ||
| + | } | ||
| + | |||
| + | /* Remove border color from the collapsible button */ | ||
| + | .navbar-default .navbar-toggle { | ||
| + | border-color: transparent; | ||
| + | } | ||
| + | |||
| + | .navbar-default { | ||
| + | border-color:transparent; | ||
| + | } | ||
| + | |||
| + | .navbar-collapse>ul:before { | ||
| + | content: ""; | ||
| + | margin-top: 40px; | ||
| + | } | ||
| + | |||
| + | @media (min-width: 768px){ | ||
| + | .navbar-collapse>ul:before { | ||
| + | content: ""; | ||
| + | margin-top: 0px; | ||
| + | } | ||
| + | |||
| + | .navbar-right { | ||
| + | margin-right: 2% !important; | ||
| + | } | ||
| + | |||
| + | .navbar-header { | ||
| + | margin-left: 2% !important; | ||
| + | } | ||
| + | |||
| + | .navbar>li>a { | ||
| + | padding: 10px 15px; | ||
| + | } | ||
| + | } | ||
| + | @media (max-width: 761px){ | ||
| + | .dropdown-menu li a { | ||
| + | color: #ffffff; | ||
| + | letter-spacing: 1px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | /* the color of the Dropdown on click */ | ||
| + | .open .dropdown-toggle { | ||
| + | color: #193759;//changed | ||
| + | background-color: #fff; | ||
| + | } | ||
| + | |||
| + | /* the color of the Dropdown links */ | ||
| + | .dropdown-menu li a { | ||
| + | color: #000; | ||
| + | letter-spacing: 1px; | ||
| + | } | ||
| + | |||
| + | /* the color of the dropdown links on hover */ | ||
| + | .dropdown-menu li a:hover { | ||
| + | background-color: #fff; | ||
| + | } | ||
| + | |||
| + | .navbar-toggle .icon-bar { | ||
| + | background: white; | ||
| + | } | ||
| + | |||
| + | .navbar-header img { | ||
| + | height: 80px; | ||
| + | } | ||
| + | |||
| + | #globalWrapper { | ||
| + | margin-bottom: 0px; | ||
| + | padding-bottom: 0px; | ||
| + | } | ||
| + | |||
| + | #top_menu_14 { | ||
| + | height: 18px; | ||
| + | } | ||
| + | |||
| + | #top_menu_14 #user_item { | ||
| + | margin-top: -3px; | ||
| + | padding-top: 0px; | ||
| + | } | ||
| + | |||
| + | #top_menu_14 #bars_item img { | ||
| + | vertical-align: top; | ||
| + | } | ||
| + | |||
| + | @media (max-width: 810px) { | ||
| + | #home-link { | ||
| + | display:none; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .nav .open>a, .nav>li>a:hover, .nav .open:hover>a, .nav .dropdown:hover>a{ | ||
| + | background-color: white; | ||
| + | border: none; | ||
| + | border-bottom-left-radius: 0px; | ||
| + | border-bottom-right-radius: 0px; | ||
| + | box-shadow: 0px 6px 12px rgba(0,0,0,.175); | ||
| + | color: #193759;//changed | ||
| + | } | ||
| + | |||
| + | .nav .open .dropdown-menu, .nav .dropdown-menu { | ||
| + | border: none; | ||
| + | border-top-left-radius: 4px !important; | ||
| + | } | ||
| + | |||
| + | .nav .open>a:hover, .nav a:focus { | ||
| + | background-color: white !important; | ||
| + | } | ||
| + | |||
| + | @media (min-width: 979px) { | ||
| + | ul.nav li.dropdown:hover > ul.dropdown-menu { | ||
| + | display: block; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | .navbar.scrolled { | ||
| + | background-color: rgba(0,33,71,0.9); | ||
| + | } | ||
| + | |||
| + | @media (min-width: 1200px) { | ||
| + | .container { | ||
| + | width: 1000px; | ||
| + | } | ||
| + | } | ||
| + | |||
| + | |||
| + | /**** PAGE CONTENT ****/ | ||
| + | |||
| + | #bodyContent { | ||
| + | background-color: #000000; | ||
| + | } | ||
| + | |||
| + | #bodyContent h1 { | ||
| + | text-align: center; | ||
| + | font-size: 48pt; | ||
| + | font-weight: lighter; | ||
| + | color: #fff; | ||
| + | |||
| + | } | ||
| + | |||
| + | #bodyContent h2 { | ||
| + | text-align: center; | ||
| + | font-size: 24pt; | ||
| + | font-weight: bold; | ||
| + | margin-top: calc(8vh); | ||
| + | margin-bottom: calc(5vh); | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | #bodyContent h3 { | ||
| + | text-align: left; | ||
| + | font-size: 14pt; | ||
| + | font-weight: bold; | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | #bodyContent h4 { | ||
| + | text-align: left; | ||
| + | font-size: 14pt; | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | #bodyContent h5 { | ||
| + | text-align: center; | ||
| + | font-size: 12pt; | ||
| + | color: #ccc; | ||
| + | } | ||
| + | |||
| + | #bodyContent p { | ||
| + | font-size: 14pt; | ||
| + | margin-top: 10px; | ||
| + | color: #fff; | ||
| + | } | ||
| + | |||
| + | #bodyContent .table { | ||
| + | font-size: 12pt; | ||
| + | |||
| + | } | ||
| + | .img-center { | ||
| + | margin: 6pt auto; | ||
| + | } | ||
| + | |||
| + | .img-reponsive { | ||
| + | margin-top: 6pt; | ||
| + | margin-bottom: 6pt; | ||
| + | |||
| + | } | ||
| + | #bodyContent .imager{ | ||
| + | float: right; | ||
| + | /*width: 200px;*/ | ||
| + | text-align: center; | ||
| + | font-size: 12px; | ||
| + | padding-left: 20px; | ||
| + | |||
| + | } | ||
| + | |||
| + | #bodyContent strong{ | ||
| + | text-align: justify; | ||
| + | padding: calc(4vh); | ||
| + | font-size: 25px; | ||
| + | line-height; 2.5; | ||
| + | color: white; | ||
| + | } | ||
| + | #bodyContent b{ | ||
| + | color: white; | ||
| + | text-align: justify; | ||
| + | padding-top: 10px; | ||
| + | padding-bottom: 10px; | ||
| + | } | ||
| + | |||
| + | #bodyContent .imagel{ | ||
| + | float: left; | ||
| + | /*width: 200px;*/ | ||
| + | text-align: center; | ||
| + | font-size: 12px; | ||
| + | padding-right: 20px; | ||
| + | |||
| + | } | ||
| + | |||
| + | #side { | ||
| + | float: left; | ||
| + | padding-right: 20px; | ||
| + | padding-top: 15px; | ||
| + | } | ||
| + | #sider { | ||
| + | float: right; | ||
| + | padding-left: 20px; | ||
| + | padding-top: 15px; | ||
| + | } | ||
| + | |||
| + | .container a{ | ||
| + | color: #71C671; | ||
| + | } | ||
| + | |||
| + | .container table, .container td, .contain .tr{ | ||
| + | border: 0; | ||
| + | border-color: transparent; | ||
| + | } | ||
| + | </style> | ||
| + | |||
| + | <!-- Latest compiled JavaScript --> | ||
| + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> | ||
| + | |||
| + | <!-- Google Analytics --> | ||
| + | <script> | ||
| + | (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | ||
| + | (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | ||
| + | m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | ||
| + | })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); | ||
| + | |||
| + | ga('create', 'UA-102136418-1', 'auto'); | ||
| + | ga('send', 'pageview'); | ||
| + | |||
| + | </script> | ||
| + | |||
| + | |||
</head> | </head> | ||
| − | <div class=" | + | |
| − | + | ||
| − | </div> | + | <!-- THIS IS WHERE THE HTML BEGINS --> |
| − | </div> | + | |
| + | <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="50"> | ||
| + | |||
| + | <nav class= "navbar-fixed-top navbar"> | ||
| + | <div class="container-fluid"> | ||
| + | <div class="navbar-header"> | ||
| + | <!-- This allows the navigation bar to be replaced by a button in the top right corner when screen is to small --> | ||
| + | <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar"> | ||
| + | <span class="icon-bar"></span> | ||
| + | <span class="icon-bar"></span> | ||
| + | <span class="icon-bar"></span> | ||
| + | </button> | ||
| + | |||
| + | <!-- This is the logo --> | ||
| + | <a href="https://2018.igem.org/Team:UCAS-China" class="navbar-left"><img src="https://static.igem.org/mediawiki/2018/c/cb/T--UCAS-China--_Logo_1_PNG.png"></a> | ||
| + | |||
| + | </div> | ||
| + | <div class="collapse navbar-collapse" id="myNavbar"> | ||
| + | <ul class="nav navbar-nav navbar-right"> | ||
| + | |||
| + | <li id="home-link"><a href="https://2018.igem.org/Team:UCAS-China">HOME</a></li> | ||
| + | |||
| + | <!-- This is the project dropdown --> | ||
| + | <li class="dropdown"> | ||
| + | <a class="dropdown-toggle" data-toggle="dropdown" href="#">PROJECT | ||
| + | <span class="caret"></span> | ||
| + | </a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Description">DESCRIPTION</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/LightToColor">LIGHT TO COLOR</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/LightToOdor">LIGHT TO ODOR</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/SoundToLight">SOUND TO LIGHT</a></li> | ||
| + | |||
| + | </ul> | ||
| + | </li> | ||
| + | |||
| + | <!-- This is the results button --> | ||
| + | <li class="dropdown"> | ||
| + | <a class="dropdown-toggle" data-toggle="dropdown" href="#">RESULTS | ||
| + | <span class="caret"></span> | ||
| + | </a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Validated_contribution">PROOF OF CONCEPT</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Demonstrate">DEMONSTRATE</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Software">SOFTWARE</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Hardware">HARDWARE</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Model">MODEL</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Improve">IMPROVE</a></li> | ||
| + | |||
| + | |||
| + | |||
| + | </ul> | ||
| + | </li> | ||
| + | <!-- This is the PARTS button --> | ||
| + | <li class="dropdown"> | ||
| + | <a class="dropdown-toggle" data-toggle="dropdown" href="#">PARTS | ||
| + | <span class="caret"></span> | ||
| + | </a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Composite_Part">BASIC & COMPOSITE PARTS</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Part_Collection">PART COLLECTION</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | |||
| + | |||
| + | |||
| + | <!-- This is the human practices dropdown --> | ||
| + | <li class="dropdown"> | ||
| + | <a class="dropdown-toggle" data-toggle="dropdown" href="#">HUMAN PRACTICE | ||
| + | <span class="caret"></span> | ||
| + | </a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices">OVERVIEW</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/Gold_overview">GOLD—OVERVIEW</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/Gold_art-and-science">GOLD—ART X SCIENCE</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/orpheus">GOLD—ORPHEUS</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/gifts_for_the_world">GOLD—GIFTS FOR THE WORLD!</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/silver_overview">SILVER—OVERVIEW</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Collaborations">SILVER—COLLABORATIONS</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/silver_education">SILVER—EDUCATION</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Human_Practices/silver_interview">SILVER—INTERVIEW</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Public_Engagement">SILVER—PUBLIC ENGAGEMENT</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/HP_safety">SILVER—SAFETY & SECURITY</a></li> | ||
| + | |||
| + | |||
| + | |||
| + | </ul> | ||
| + | </li> | ||
| + | |||
| + | |||
| + | |||
| + | <!-- This is the people dropdown --> | ||
| + | <li class="dropdown"> | ||
| + | <a class="dropdown-toggle" data-toggle="dropdown" href="#">PEOPLE | ||
| + | <span class="caret"></span> | ||
| + | </a> | ||
| + | <ul class="dropdown-menu"> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/People/Meet_the_Team">MEET THE TEAM!</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Attributions">ATTRIBUTIONS</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/People/Medal_Achievements">ACHIEVEMENTS</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/People/Notebook">NOTEBOOK</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/Contributions">CONTRIBUTIONS</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/People/safety">SAFETY & SECURITY</a></li> | ||
| + | <li><a href="https://2018.igem.org/Team:UCAS-China/People/acknowledgement">ACKNOWLEDGEMENT</a></li> | ||
| + | </ul> | ||
| + | </li> | ||
| + | |||
| + | <!-- This is the search button --> | ||
| + | </ul> | ||
| + | </div> | ||
| + | </div> | ||
| + | </nav> | ||
| + | <script> | ||
| + | // | ||
| + | function checkScroll(){ | ||
| + | var startY = 200; //The point where the navbar changes in px | ||
| + | |||
| + | if($(window).scrollTop() > startY){ | ||
| + | $('.navbar').addClass("scrolled"); | ||
| + | }else{ | ||
| + | $('.navbar').removeClass("scrolled"); | ||
| + | } | ||
| + | } | ||
| + | |||
| + | if($('.navbar').length > 0){ | ||
| + | $(window).on("scroll load resize", function(){ | ||
| + | checkScroll(); | ||
| + | }); | ||
| + | } | ||
| + | </script> | ||
Latest revision as of 06:48, 1 December 2018