Difference between revisions of "Template:Team:Harvard BioDesign/skin2015.css"

Line 16: Line 16:
 
     <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
 
     <!--[if lte IE 9]><link rel="stylesheet" href="assets/css/ie9.css" /><![endif]-->
  
<script>
 
$(document).ready(function () {
 
    $(document).on("scroll", onScroll);
 
   
 
    //smoothscroll
 
    $('a[href^="#"]').on('click', function (e) {
 
        e.preventDefault();
 
        $(document).off("scroll");
 
       
 
        $('a').each(function () {
 
            $(this).removeClass('active');
 
        })
 
        $(this).addClass('active');
 
     
 
        var target = this.hash,
 
            menu = target;
 
        $target = $(target);
 
        $('html, body').stop().animate({
 
            'scrollTop': $target.offset().top+2
 
        }, 500, 'swing', function () {
 
            window.location.hash = target;
 
            $(document).on("scroll", onScroll);
 
        });
 
    });
 
});
 
  
function onScroll(event){
 
    var scrollPos = $(document).scrollTop();
 
    $('#menu-center a').each(function () {
 
        var currLink = $(this);
 
        var refElement = $(currLink.attr("href"));
 
        if (refElement.position().top <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
 
            $('#menu-center ul li a').removeClass("active");
 
            currLink.addClass("active");
 
        }
 
        else{
 
            currLink.removeClass("active");
 
        }
 
    });
 
}
 
</script>
 
 
<style>
 
<style>
  
Line 96: Line 56:
 
}
 
}
  
body, html {
 
    margin: 0;
 
    padding: 0;
 
    height: 100%;
 
    width: 100%;
 
}
 
.menu {
 
    width: 100%;
 
    height: 75px;
 
    background-color: rgba(0, 0, 0, 1);
 
    position: fixed;
 
    background-color:rgba(4, 180, 49, 0.6);
 
    -webkit-transition: all 0.3s ease;
 
    -moz-transition: all 0.3s ease;
 
    -o-transition: all 0.3s ease;
 
    transition: all 0.3s ease;
 
}
 
.light-menu {
 
    width: 100%;
 
    height: 75px;
 
    background-color: rgba(255, 255, 255, 1);
 
    position: fixed;
 
    background-color:rgba(4, 180, 49, 0.6);
 
    -webkit-transition: all 0.3s ease;
 
    -moz-transition: all 0.3s ease;
 
    -o-transition: all 0.3s ease;
 
    transition: all 0.3s ease;
 
}
 
#menu-center {
 
    width: 980px;
 
    height: 75px;
 
    margin: 0 auto;
 
}
 
#menu-center ul {
 
    margin: 15px 0 0 0;
 
}
 
#menu-center ul li {
 
    list-style: none;
 
    margin: 0 30px 0 0;
 
    display: inline;
 
}
 
.active {
 
    font-family:'Droid Sans', serif;
 
    font-size: 14px;
 
    color: #fff;
 
    text-decoration: none;
 
    line-height: 50px;
 
}
 
a {
 
    font-family:'Droid Sans', serif;
 
    font-size: 14px;
 
    color: black;
 
    text-decoration: none;
 
    line-height: 50px;
 
}
 
#home {
 
    background-color: grey;
 
    height: 100%;
 
    width: 100%;
 
    overflow: hidden;
 
    background-image: url(images/home-bg2.png);
 
}
 
#portfolio {
 
    background-image: url(images/portfolio-bg.png);
 
    height: 100%;
 
    width: 100%;
 
}
 
#about {
 
    background-color: blue;
 
    height: 100%;
 
    width: 100%;
 
}
 
#contact {
 
    background-color: red;
 
    height: 100%;
 
    width: 100%;
 
}
 
 
</style>
 
</style>
  
 
   </head>
 
   </head>
 
   <body>
 
   <body>
 
 
  
 
     <!-- header -->
 
     <!-- header -->
Line 213: Line 94:
 
             </ul>
 
             </ul>
 
</nav>
 
</nav>
</div><!--#top-->
+
</div>
 +
<!--#top-->
  
 
         <div class="bottom">
 
         <div class="bottom">
Line 250: Line 132:
  
 
     <!-- Main -->
 
     <!-- Main -->
 
 
       <div id="main">
 
       <div id="main">
<div class="m1 menu">
 
    <div id="menu-center">
 
        <ul>
 
            <li><a class="active" href="#home">Home</a>
 
            </li>
 
            <li><a href="#teampage">Portfolio</a>
 
            </li>
 
            <li><a href="#about">About</a>
 
  
            </li>
 
            <li><a href="#contact">Contact</a>
 
 
            </li>
 
        </ul>
 
    </div>
 
</div>
 
<div id="home"></div>
 
<div id="portfolio"></div>
 
<div id="about"></div>
 
<div id="contact"></div>
 
 
         <!-- Intro -->
 
         <!-- Intro -->
           <section id="home" class="one">
+
           <section id="top" class="one">
 
             <div class="container">
 
             <div class="container">
  
Line 309: Line 171:
 
   </section>
 
   </section>
  
<section id="teampage" class="four"><div class="container"></div>
+
<section id="teampage" class="four">
 +
<div class="container"></div>
 
<img src="https://static.igem.org/mediawiki/2015/e/e2/Harvard2015_Team.png" alt="Team Logo" style="width:200px;height:200px;"/></a>
 
<img src="https://static.igem.org/mediawiki/2015/e/e2/Harvard2015_Team.png" alt="Team Logo" style="width:200px;height:200px;"/></a>
 
<header><h3>See who participated on this year’s iGEM team.</h3></header>
 
<header><h3>See who participated on this year’s iGEM team.</h3></header>

Revision as of 02:08, 18 September 2015


Prologue by HTML5 UP

Welcome to the Harvard BioDesign 2015 wiki!


The "official" place where flocculation happens and llamas are appreciated.

Email Logo
Curious?

How to navigate our site

Here is an easy guide to finding information on our wiki site. On the top of every page you will see a flask. When you click on it, it will open up the main navigation menu. The top section includes links of the different sections on the current page. The lower links are to switch to a new page. You can see all the pages by looking at our site map listed below. You can also get a brief idea of what you'll find on each page by scrolling down.

Click Here to see our site map

Team Logo

See who participated on this year’s iGEM team.

Project Logo

Learn what we are all about. Here you can learn how we set up and conducted our research.

Results Logo

Find our major accomplishments here and where we plan to go with them.

Parts Logo

View the parts we created.

Notebook Logo

The story of our hard work.

Collabs Logo

Outreach to our fellow iGEMers.

Practices Logo

A guide to how to take research to the next level.

Safety Logo

Safety is what really matters.

Attributions Logo

A shoutout to those who made us possible.