|
|
Line 1: |
Line 1: |
- | <!--<html>
| |
- | <head>
| |
| | | |
- | <link rel="stylesheet" type="text/css" href="indexpage.css">
| |
- | <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
| |
- | <script>
| |
- | $(document).ready(function(){
| |
- | $(window).scroll(function(){
| |
- | var scrollTop = $(window).scrollTop();
| |
- | if (scrollTop > 49) {
| |
- | $('#menu').addClass('fixed');
| |
- | } else {
| |
- | $('#menu').removeClass('fixed');
| |
- | }
| |
- | });
| |
- | });
| |
- |
| |
- | </script>
| |
- |
| |
- | <script>
| |
- | var on = true;
| |
- | var myVar = setInterval(function(){ if(on) {slides()}on=true;},3000);
| |
- |
| |
- | function slides(i) {
| |
- | document.getElementsByClassName("slide_pic")[1].style.width="0px";
| |
- | document.getElementsByClassName("slide_pic")[2].style.width="100%";
| |
- | var slide = document.getElementsByClassName("slide_pic")[0];
| |
- | document.getElementById("slide").appendChild(slide);
| |
- | if(i) {
| |
- | on = false;
| |
- | }
| |
- | }
| |
- | function back_slide(i) {
| |
- | document.getElementsByClassName("slide_pic")[1].style.width="0px";
| |
- | document.getElementsByClassName("slide_pic")[0].style.width="100%";
| |
- | var slide = document.getElementsByClassName("slide_pic")[4];
| |
- | var slide2 = document.getElementsByClassName("slide_pic")[0];
| |
- | document.getElementById("slide").insertBefore(slide,slide2);
| |
- | if(i) {
| |
- | on = false;
| |
- | }
| |
- | }
| |
- | </script>
| |
- |
| |
- | <style type= "text/css">
| |
- | #contentSub, #footer-box, #catlinks, #search-controls, #p-logo, .printfooter, .firstHeading,.visualClear{
| |
- | display:none;
| |
- | } /*-- hides default wiki settings --*/
| |
- |
| |
- | #top-section{
| |
- | border: 0 none;
| |
- | height: 20px;
| |
- | z-index: 100;
| |
- | top: 0;
| |
- | position: fixed;
| |
- | width: 900px;
| |
- | left: 50%;
| |
- | margin-left: -487px;
| |
- | background-color:black;
| |
- | }
| |
- |
| |
- | #globalWrapper, #content {
| |
- | width: 100%;
| |
- | height: 100%;
| |
- | border: 0px;
| |
- | margin: 0px;
| |
- | padding: 0px;
| |
- | }
| |
- |
| |
- | html, body, .wrapper {
| |
- | background-color: #FFFFFF;
| |
- | }
| |
- |
| |
- | body {
| |
- | width: 100%;
| |
- | padding:0;
| |
- | margin:0;
| |
- | font: 14px Helvetica;
| |
- | }
| |
- | #content_container {
| |
- | width:950px;
| |
- | margin: 0 auto;
| |
- | -webkit-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64);
| |
- | -moz-box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64);
| |
- | box-shadow: 0px 6px 6px 0px rgba(50, 50, 50, 0.64);
| |
- | }
| |
- | a {
| |
- | color: #c0392b;
| |
- | text-decoration: none;
| |
- | }
| |
- | a:hover {
| |
- | color: #e74c3c;
| |
- | }
| |
- | nav a:visited{
| |
- | color: #FFF;
| |
- | }
| |
- | #menu {
| |
- | padding: 0;
| |
- | text-align: center;
| |
- | text-transform:uppercase;
| |
- | }
| |
- |
| |
- | h1 {
| |
- | font-family: HelveticaNeue-UltraLight;
| |
- | font-size: 100px;
| |
- | text-align: center;
| |
- | margin: 0 0 0 0;
| |
- | padding: 50px 0 0 0 ;
| |
- | background: #5E412F;
| |
- | color: #fff;
| |
- | font-weight:100;
| |
- | letter-spacing: 0.0625em;
| |
- | }
| |
- |
| |
- | /*----------------------------------drop down ---------------------------------*/
| |
- | h1 {
| |
- | font-size:60px;
| |
- | }
| |
- |
| |
- | p {
| |
- | font-size:20px;
| |
- | }
| |
- | nav {
| |
- | margin:0 auto;
| |
- | padding: 0 auto;
| |
- | background-color: orange;
| |
- | width:990px;
| |
- | display:block;
| |
- | }
| |
- |
| |
- | nav ul {
| |
- | padding:0;
| |
- | margin:0 auto;
| |
- | list-style: none;
| |
- | position: relative;
| |
- | display:block;
| |
- | text-align: center;
| |
- | }
| |
- |
| |
- | nav ul li {
| |
- | display: inline-block;
| |
- | float: left;
| |
- | display:list-item;
| |
- | list-style: none;
| |
- | background-color:#5E412F;
| |
- |
| |
- | }
| |
- |
| |
- | nav ul li a {
| |
- | display:block;
| |
- | padding:20px 10px 0px 10px;
| |
- |
| |
- | color:#FFF;
| |
- | font-size:16px;
| |
- | text-decoration:none;
| |
- | font-family: 'Bree Serif', 'serif';
| |
- | }
| |
- |
| |
- | li a:hover { background-color: #000000; }
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | /* The Dropdown Styles */
| |
- | /* =================== */
| |
- |
| |
- | /* Hide Dropdowns by Default */
| |
- | nav ul ul {
| |
- | display: none;
| |
- | position: absolute;
| |
- | top: 48px;
| |
- | }
| |
- |
| |
- | /* Display Dropdowns on Hover */
| |
- | nav ul li:hover > ul {
| |
- | display:list-item;
| |
- | }
| |
- |
| |
- | /* Fisrt Tier Dropdown */
| |
- | nav ul ul li {
| |
- | width:180px;
| |
- | position: relative;
| |
- | border-bottom:none;
| |
- | list-style-type: none;
| |
- | }
| |
- |
| |
- | /* Second, Third and more Tiers */
| |
- | nav ul ul ul li {
| |
- | position: absolute relative;
| |
- | top:-5px;
| |
- | }
| |
- | .fixed {
| |
- | position: fixed;
| |
- | z-index: 10;
| |
- | top: 0;
| |
- | width: 100%;
| |
- | }
| |
- | .fixed ul ul ul li a {
| |
- | color: #fff;
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
- | div#nav_container{
| |
- | text-align: center;
| |
- | width:1000px;
| |
- | padding:0 auto;
| |
- | margin:0 auto;
| |
- | max-width:700px;
| |
- | z-index:100000;
| |
- | }
| |
- |
| |
- | #slide{
| |
- | width: 100%;
| |
- | height: 600px;
| |
- | overflow:hidden;
| |
- | margin: 30px auto;
| |
- | box-shadow: 0 8px 6px -6px rgba(0,0,0,1);
| |
- | }
| |
- | #slide div{
| |
- | display:block;
| |
- | width:0;
| |
- | float: left;
| |
- | -webkit-transition: all 0.75s;
| |
- | -moz-transition: all 0.75s;
| |
- | -o-transition:all 0.75s;
| |
- | transition: all 0.75s;
| |
- | }
| |
- | img.picture {
| |
- | width:960px;
| |
- | }
| |
- | button.prev, button.next {
| |
- | position: absolute;
| |
- | z-index: 999;
| |
- | display: block;
| |
- | padding:0 10px;
| |
- | width: auto;
| |
- | height:350px;
| |
- | background: rgba(0,0,0,0);
| |
- | color: #ffffff;
| |
- | font-size:26px;
| |
- | cursor: pointer;
| |
- | border:none;
| |
- | outline:none;
| |
- | }
| |
- | button.prev:hover, button.next:hover {
| |
- | background: rgba(0,0,0,0.8);
| |
- | }
| |
- | button.next {
| |
- | margin-left:926px;
| |
- | }
| |
- |
| |
- |
| |
- | div.project_area{
| |
- | margin:0 auto;
| |
- | border: 1px solid black;
| |
- | background-color:black;
| |
- | }
| |
- | .project_area h4, .project_area p{
| |
- | color:white;
| |
- | }
| |
- | div.project_box{
| |
- | border: 1px solid gray;
| |
- | width: 450px;
| |
- | height: 150px;
| |
- | text-align: center;
| |
- | background-color:black;
| |
- |
| |
- | }
| |
- |
| |
- | div.quick_link_container{
| |
- | padding:50px;
| |
- | width: 200px;
| |
- | height:300px;
| |
- | -webkit-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69);
| |
- | -moz-box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69);
| |
- | box-shadow: 0px 5px 2px 0px rgba(50, 50, 50, 0.69);
| |
- |
| |
- | }
| |
- | table.site_map_table{
| |
- | background-color: black;
| |
- | width: 100%;
| |
- | }
| |
- | .site_map_table h4, .site_map_table p, .site_map_table ul{
| |
- | color: white;
| |
- | }
| |
- | div.banner_area{
| |
- | width:100%;
| |
- | margin:0 auto;
| |
- | padding:0 auto;
| |
- | }
| |
- | div.banner_area img{
| |
- | width:100%;
| |
- | height: 550px;
| |
- | }
| |
- | div.content_1{
| |
- | width:100%;
| |
- |
| |
- | }
| |
- | div.content_1 h3{
| |
- | font-size:30px;
| |
- | color:#5E412F;
| |
- | border-bottom: 2px solid black;
| |
- |
| |
- | }
| |
- | table.content_table td{
| |
- | width:50%;
| |
- | }
| |
- | table.content_table p {
| |
- | font-size: 18px;
| |
- | font-family: "helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
| |
- | line-height: 2em;
| |
- | }
| |
- | div.content_area{
| |
- | padding:0 20px 0 20px;
| |
- | background-color:#FCEBB6;
| |
- | border-radius: 2px;
| |
- | height:600px;
| |
- | }
| |
- | td.content_cell img{
| |
- | width:100%;
| |
- | display:inline;
| |
- | }
| |
- | td.content_cell h5{
| |
- | font-size: 19px;
| |
- | font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
| |
- | font-weight:bold;
| |
- | display:inline;
| |
- | }
| |
- | td.content_cell h6{
| |
- | font-size: 15px;
| |
- | font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
| |
- | font-weight:normal;
| |
- | display:inline;
| |
- | }
| |
- | div#description_area h2 {
| |
- | text-align:center;
| |
- | font-size: 30px;
| |
- | font-family:"helvetica" ,"Open Sans", "Vollkorn", "Fedra Sans";
| |
- | font-weight:900;
| |
- | display:block;
| |
- | text-decoration:underline;
| |
- | }
| |
- | div#description_area{
| |
- | padding: 20px;
| |
- | border-bottom: 2px dotted black;
| |
- | }
| |
- | #content-area {
| |
- | clear: both;
| |
- | padding-top: 20px;
| |
- | }
| |
- |
| |
- |
| |
- | #content-area-text {
| |
- | width: 450px;
| |
- | padding: 15px;
| |
- | float: left;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | #content-area-picture {
| |
- | float: left;
| |
- | width: 450px;
| |
- | height: 250px;
| |
- | padding: 15px;
| |
- | background: green;
| |
- | }
| |
- |
| |
- | </style>
| |
- | </head>
| |
- |
| |
- | <body>
| |
- | <div id='nav_container'>
| |
- | <nav>
| |
- |
| |
- | <ul id="menu">
| |
- | <li><a href="#">Home</a></li>
| |
- | <li><a href="https://2014.igem.org/Team:Hong_Kong_HKUST/team">Team</a>
| |
- | <!-- First Tier Drop Down -->
| |
- | <ul>
| |
- | <li><a href="#">Members</a></li>
| |
- | <li><a href="#">Advisers</a></li>
| |
- | <li><a href="#">Instructor</a></li>
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">Project</a>
| |
- | <!-- First Tier Drop Down -->
| |
- | <ul>
| |
- | <li><a href="#">Main Project</a>
| |
- | <ul>
| |
- | <li><a href="#">Overview</a></li>
| |
- | <li><a href="#">module one </a></li>
| |
- | <li><a href="#">module two</a></li>
| |
- | <li><a href="#">data</a></li>
| |
- | <li><a href="#">characterization</a></li>
| |
- | </ul></li>
| |
- | <li><a href="#">Side Project</a>
| |
- | <ul>
| |
- | <li><a href="#">overview</a></li>
| |
- | <li><a href="#">part</a></li>
| |
- | <li><a href="#">catalogue</a></li>
| |
- | <li><a href="#">feature pages</a></li>
| |
- | </ul></li>
| |
- |
| |
- | </ul>
| |
- | </li>
| |
- | <li><a href="#">Human Practice</a>
| |
- | <ul>
| |
- | <li><a href="#">overview</a></li>
| |
- | <li><a href="#">Start up kit</a>
| |
- | <ul>
| |
- | <li><a href="#">interview</a></li>
| |
- | <li><a href="#">Report</a></li>
| |
- | <li><a href="#">Database</a></li>
| |
- | </ul></li>
| |
- | <li><a href="#">Talks</a></li>
| |
- | <li><a href="#">Outreach</a></li>
| |
- | </ul></li>
| |
- | <li><a href="#">wetlab</a>
| |
- | <ul>
| |
- | <li><a href="#">Protocol</a></li>
| |
- | <li><a href="#">Notebook</a></li>
| |
- | <li><a href="#">safety</a></li>
| |
- | </ul></li>
| |
- | <li><a href="#">Achievement</a>
| |
- | <ul>
| |
- | <li><a href="#">Medal Requirement</a></li>
| |
- | <li><a href="#">deliverable</a></li>
| |
- | </ul></li>
| |
- | </ul>
| |
- |
| |
- | </nav>
| |
- | </div>
| |
- | <h1> </h1>
| |
- | <div id="content_container">
| |
- | <div class= "banner_area">
| |
- | <img src= 'banner_mod.png' />
| |
- |
| |
- | </div>
| |
- | <hr>
| |
- |
| |
- | </div>
| |
- |
| |
- | </section>
| |
- | <!-- Work of Juston Cheney -->
| |
- |
| |
- | <div id="content-area">
| |
- | <p>
| |
- | <h1> HKUST</h1>
| |
- | </p>
| |
- |
| |
- | <div id="content-area-text">
| |
- | The Hong Kong University of Science and Technology is an international research university. Founded in 1991, HKUST is an international research university with strong ties to global thought leaders, whilst having wide-ranging connections with Mainland China. It promotes interdisciplinary studies, dedicated to educating well-rounded students to acquire a strong entrepreneurial spirit and innovative thinking – the necessary foundation and skills for the changing world.
| |
- | The University is housed in a hillside and waterfront complex overlooking the Clear Water Bay peninsula, less than 30 minutes' driving time from Central Hong Kong.
| |
- | </div>
| |
- |
| |
- | <div id="content-area-picture">
| |
- | </div>
| |
- |
| |
- |
| |
- | </div>
| |
- |
| |
- | <hr>
| |
- |
| |
- |
| |
- |
| |
- | <hr>
| |
- |
| |
- | <hr>
| |
- |
| |
- |
| |
- |
| |
- |
| |
- | </body>
| |
- | </html>-->
| |