|
|
| Line 1: |
Line 1: |
| − | <!---- adapted from 2016 Sydney Australia iGEM------->
| + | {{Team:William_and_Mary/CSS_RESET}} |
| − | | + | {{Team:William_and_Mary/CSS_FIX}} |
| − | | + | |
| | | | |
| | <html> | | <html> |
| | + | <head> |
| | + | <style type = "text/css"> |
| | | | |
| − | <head>
| + | #nav { |
| | + | width: 100%; |
| | + | float: left; |
| | + | margin: 0 0 3em 0; |
| | + | padding: 0; |
| | + | list-style: none; |
| | + | background-color: #f2f2f2; |
| | + | border-bottom: 1px solid #ccc; |
| | + | border-top: 1px solid #ccc; } |
| | + | #nav li { |
| | + | float: left; } |
| | + | #nav li a { |
| | + | display: block; |
| | + | padding: 8px 15px; |
| | + | text-decoration: none; |
| | + | font-weight: bold; |
| | + | color: #069; |
| | + | border-right: 1px solid #ccc; } |
| | + | #nav li a:hover { |
| | + | color: #c00; |
| | + | background-color: #fff; } |
| | | | |
| − |
| + | </style> |
| | + | </head> |
| | | | |
| − | <!-- External scripts -->
| + | <ul id="nav"> |
| − | <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' | + | <li><a href="#">About Us</a></li> |
| − | rel='stylesheet' type='text/css'>
| + | <li><a href="#">Our Products</a></li> |
| − | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
| + | <li><a href="#">FAQs</a></li> |
| | + | <li><a href="#">Contact</a></li> |
| | + | <li><a href="#">Login</a></li> |
| | + | </ul> |
| | | | |
| − | <link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,300,700' rel='stylesheet' type='text/css'>
| + | </html> |
| − | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
| + | |
| − | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
| + | |
| − | | + | |
| − | <!-- Functionallity and behaviour JS -->
| + | |
| − | <script>
| + | |
| − | | + | |
| − | $(document).ready(function(){
| + | |
| − | | + | |
| − | //Loading screen functionallity
| + | |
| − | $('.loading').animate(
| + | |
| − | {opacity:0},
| + | |
| − | 500,
| + | |
| − | function(){
| + | |
| − | $('.loading').attr("style", "display:none");
| + | |
| − | }
| + | |
| − | );
| + | |
| − | //Height responsiveness
| + | |
| − | $(window).resize(function() {
| + | |
| − | wheight = $(window).height();
| + | |
| − | $('.container').attr("style","height:"+(wheight)+"px;background-size:cover;");
| + | |
| − | $('.team-member-container').attr("style","height:"+wheight/2.7+"px;");
| + | |
| − | });
| + | |
| − | | + | |
| − | $(window).trigger('resize');
| + | |
| − | //Menu moveto container on item click functionallity
| + | |
| − | $('.menu-item').on('click', function(){
| + | |
| − | $('.menu-item').removeClass('subselected');
| + | |
| − | $(this).addClass('subselected');
| + | |
| − | if($(this).attr("data")=="#top"){
| + | |
| − | $('html, body').animate({
| + | |
| − | scrollTop: 0
| + | |
| − | }, 1000);
| + | |
| − | }else{
| + | |
| − | $('html, body').animate({
| + | |
| − | scrollTop: $($(this).attr("data")).offset().top-70
| + | |
| − | }, 1000);
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | //Hover of team members
| + | |
| − | $('.team-member-container').on('mouseenter', function(){
| + | |
| − | $(this).children('.team-member-photo').attr("style", "background-image:url('"+$(this).attr("hover")+"');");
| + | |
| − | $(this).on('mouseleave', function(){
| + | |
| − | $(this).children('.team-member-photo').attr('style', "background-image:url('"+$(this).attr("data")+"');");
| + | |
| − | });
| + | |
| − | });
| + | |
| − | | + | |
| − | });
| + | |
| − |
| + | |
| − | </script>
| + | |
| − | <style>
| + | |
| − | | + | |
| − | | + | |
| − | #sideMenu, #top_title {display:none;}
| + | |
| − | #content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
| + | |
| − | body {background-color:white; }
| + | |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | |
| − | | + | |
| − | | + | |
| − | body,
| + | |
| − | html{
| + | |
| − | margin: 0;
| + | |
| − | padding:0;
| + | |
| − | font-family: font-family: 'Yanone Kaffeesatz', sans-serif;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* REMOVE UNWANTED ELEMENTS AND STYLE OTHERS */
| + | |
| − | .firstHeading{
| + | |
| − | display:none;
| + | |
| − | }
| + | |
| − | #top-section{
| + | |
| − | background:#fff;
| + | |
| − | margin-left:0 !important;
| + | |
| − | width:100%;
| + | |
| − | left:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* LOADING SCREEN */
| + | |
| − | .loading{
| + | |
| − | position:fixed;
| + | |
| − | width:100%;
| + | |
| − | height:100%;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | | + | |
| − | z-index:5;
| + | |
| − | | + | |
| − | background-color:#555;
| + | |
| − | color:#fff;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .loading p{
| + | |
| − | position: relative;
| + | |
| − | width:100%;
| + | |
| − | height:10%;
| + | |
| − | top:45%;
| + | |
| − | left:0;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* MENU STYLING */
| + | |
| − | .menu{
| + | |
| − | position:fixed;
| + | |
| − | width:100%;
| + | |
| − | height:56px;
| + | |
| − | top:14px;
| + | |
| − | background-color: #fff;
| + | |
| − | | + | |
| − | z-index:4;
| + | |
| − | | + | |
| − | border-collapse: collapse;
| + | |
| − | text-align:center;
| + | |
| − | }
| + | |
| − | .menu tr td{
| + | |
| − | text-align: center;
| + | |
| − | vertical-align: middle;
| + | |
| − | | + | |
| − | font-weight: 700;
| + | |
| − | font-size:16px;
| + | |
| − | color:#fff;
| + | |
| − | width:7%;
| + | |
| − | }
| + | |
| − | .menu tr td.menu-item:hover{
| + | |
| − | background-color:#fff;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | .subselected{
| + | |
| − | background-color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* CONTAINERS STYLING */
| + | |
| − | .container{
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | top:50px;
| + | |
| − | }
| + | |
| − | .container .subcontainer{
| + | |
| − | position:absolute;
| + | |
| − | width:95%;
| + | |
| − | height:90%;
| + | |
| − | top:5%;
| + | |
| − | left:2.5%;
| + | |
| − | }
| + | |
| − | #top{
| + | |
| − | background-size: cover;
| + | |
| − |
| + | |
| − | overflow:hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* TEAM MEMBERS CARDS STYLING */
| + | |
| − | .team-member-container{
| + | |
| − | position:relative;
| + | |
| − | width:14%;
| + | |
| − | margin-left:2.28%;
| + | |
| − | | + | |
| − | float:left;
| + | |
| − | }
| + | |
| − | .team-member-container:hover{
| + | |
| − | cursor:pointer;
| + | |
| − | }
| + | |
| − | .row2{
| + | |
| − | top:4%;
| + | |
| − | }
| + | |
| − | .team-member-container .team-member-photo{
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | height:85%;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .team-member-container .team-member-footer{
| + | |
| − | position:relative;
| + | |
| − | width:100%;
| + | |
| − | height:15%;
| + | |
| − | top:0;
| + | |
| − | left:0;
| + | |
| − | | + | |
| − | border:none;
| + | |
| − | border-collapse: collapse;
| + | |
| − | background-color: #fff;
| + | |
| − | color:#fff;
| + | |
| − | | + | |
| − | text-align: center;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − | | + | |
| − | body {
| + | |
| − | padding-top: px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .center-block {
| + | |
| − | display: block;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .navbar-fixed-top {
| + | |
| − | background: #fff;
| + | |
| − | filter: none !important;
| + | |
| − | box-shadow: 0 2px 15px rgba(0,0,0,0.25);
| + | |
| − | -moz-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
| + | |
| − | -webkit-box-shadow: 0 2px 15px rgba(0,0,0,0.25);
| + | |
| − | border-bottom: 1px solid rgba(0,0,0,0.2);
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | .dropdown-submenu {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown-submenu>.dropdown-menu {
| + | |
| − | top: 0;
| + | |
| − | left: 100%;
| + | |
| − | margin-top: -6px;
| + | |
| − | margin-left: -1px;
| + | |
| − | -webkit-border-radius: 0 6px 6px 6px;
| + | |
| − | -moz-border-radius: 0 6px 6px;
| + | |
| − | border-radius: 0 6px 6px 6px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown-submenu:hover>.dropdown-menu {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown-submenu>a:after {
| + | |
| − | display: block;
| + | |
| − | content: " ";
| + | |
| − | float: right;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | border-color: transparent;
| + | |
| − | border-style: solid;
| + | |
| − | border-width: 5px 0 5px 5px;
| + | |
| − | border-left-color: #ccc;
| + | |
| − | margin-top: 5px;
| + | |
| − | margin-right: -10px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown-submenu:hover>a:after {
| + | |
| − | border-left-color: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown-submenu.pull-left {
| + | |
| − | float: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .dropdown-submenu.pull-left>.dropdown-menu {
| + | |
| − | left: -100%;
| + | |
| − | margin-left: 10px;
| + | |
| − | -webkit-border-radius: 6px 0 6px 6px;
| + | |
| − | -moz-border-radius: 6px 0 6px 6px;
| + | |
| − | border-radius: 6px 0 6px 6px;
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .faceBot{
| + | |
| − | background: #202020;
| + | |
| − | }
| + | |
| − | | + | |
| − | @font-face {
| + | |
| − | font-family: 'Open Sans', Arial;;
| + | |
| − | }
| + | |
| − | | + | |
| − | body
| + | |
| − | {
| + | |
| − | font-family: 'Open Sans', Arial;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.nav a{
| + | |
| − | color: gray;
| + | |
| − | background-color: transparent;
| + | |
| − | height: 100%;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | ul.nav a:hover{
| + | |
| − | color: gray;
| + | |
| − | background-color: transparent;
| + | |
| − | height: 100%;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | | + | |
| − | h2 {
| + | |
| − | color:gray;
| + | |
| − | }
| + | |
| − | | + | |
| − | h4 {
| + | |
| − | font-weight: bold;
| + | |
| − | }
| + | |
| − | | + | |
| − | .menu-item{
| + | |
| − | height: 75px;
| + | |
| − | }
| + | |
| − | | + | |
| − | li.menu-item{
| + | |
| − | background: transparent !important;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | .green-effect{
| + | |
| − | display: none;
| + | |
| − | background-color: #000;
| + | |
| − | opacity: 1;
| + | |
| − | color: #FFF;
| + | |
| − | transition-property: all;
| + | |
| − | transition-duration: 0.3s;
| + | |
| − | transition-timing-function: ease-out;
| + | |
| − | transition-delay: 0s;
| + | |
| − | border-color: #fff;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 0px;
| + | |
| − | width: 100%;
| + | |
| − | height: 2px;
| + | |
| − | right: 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .logo {
| + | |
| − | margin-top: 100px;
| + | |
| − | | + | |
| − | }
| + | |
| − | | + | |
| − | a:hover .green-effect{
| + | |
| − | display: inherit;
| + | |
| − | }
| + | |
| − | | + | |
| − | .invertir:hover {
| + | |
| − | -webkit-filter: invert(100%);
| + | |
| − | }
| + | |
| − | | + | |
| − | dropdown-toggle {
| + | |
| − | width: 10%;
| + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | </style>
| + | |
| − | | + | |
| − | | + | |
| − | </head>
| + | |
| − | | + | |
| − | <body>
| + | |
| − | | + | |
| − | | + | |
| − | <body>
| + | |
| − | | + | |
| − | | + | |
| − | <div class="navbar navbar-fixed-top" style="margin-top:15px">
| + | |
| − | <nav class="navbar-inner">
| + | |
| − |
| + | |
| − | <div class="row-sm-height">
| + | |
| − |
| + | |
| − | <div class="col-sm-2" style='padding-top:10px;'><a href="https://2017.igem.org/Team:William_and_Mary"><img class="logo" src="https://static.igem.org/mediawiki/2017/f/f4/T--William_and_Mary--WMlogo.jpeg" height="60" width="auto" ></a></div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | | + | |
| − | <div class="col-md-10" >
| + | |
| − | <ul class="nav navbar-nav" style="margin-top:10px">
| + | |
| − | | + | |
| − | | + | |
| − | <li>
| + | |
| − | <a href="#" class="dropdown-toggle" data-toggle="dropdown">
| + | |
| − | | + | |
| − | Project<b class="caret"></b>
| + | |
| − | </a>
| + | |
| − | <ul class="dropdown-menu multi-level">
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/RealMainPage">Overview </a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Description">Description </a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Parts">Parts </a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Results">Results </a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Model">Model</a></li>
| + | |
| − |
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | | + | |
| − | <li>
| + | |
| − | <a href="https://2016.igem.org/Team:Sydney_Australia/Human_Practices" class="dropdown-toggle" data-toggle="dropdown">
| + | |
| − | | + | |
| − | Human Practices<b class="caret"></b>
| + | |
| − | </a>
| + | |
| − | <ul class="dropdown-menu multi-level">
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Engagement">Education & Public Engagement</a></li>
| + | |
| − | | + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Collaborations">Collaborations</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Interlab">Interlab</a></li>
| + | |
| − | | + | |
| − |
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | | + | |
| − | <li class="menu-item">
| + | |
| − | <a href="https://2017.igem.org/Team:William_and_Mary/Database">
| + | |
| − | <span>Database</span>
| + | |
| − | <span class="green-effect"></span>
| + | |
| − | </a>
| + | |
| − | </li>
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − |
| + | |
| − | | + | |
| − | <li>
| + | |
| − |
| + | |
| − | | + | |
| − | <a href="#" class="dropdown-toggle" data-toggle="dropdown">
| + | |
| − | | + | |
| − | Notebook <b class="caret"></b>
| + | |
| − | </a>
| + | |
| − | <ul class="dropdown-menu multi-level">
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Notebook">Notebook</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Safety">Safety</a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Medal_Requirements">Medal Requirements</a></li>
| + | |
| − | | + | |
| − |
| + | |
| − |
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | <li>
| + | |
| − | | + | |
| − | <li>
| + | |
| − |
| + | |
| − | | + | |
| − | <a href="#" class="dropdown-toggle" data-toggle="dropdown">
| + | |
| − | | + | |
| − | Team <b class="caret"></b>
| + | |
| − | </a>
| + | |
| − | <ul class="dropdown-menu multi-level">
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Team">About Us </a></li>
| + | |
| − | <li><a href="https://2017.igem.org/Team:William_and_Mary/Attributions">Attributions </a></li>
| + | |
| − |
| + | |
| − |
| + | |
| − |
| + | |
| − | </ul>
| + | |
| − | </li>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | </ul>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </nav>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | | + | |
| − | | + | |
| − | <html>
| + | |
