Difference between revisions of "Team:NAIT Edmonton/Trial11"

 
(180 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{NAIT_Edmonton/CSS2}}
 
{{NAIT_Edmonton/CSS2}}
−
 
 
<html>
 
<html>
  
 
<head>
 
<head>
  
 +
 +
<title>Team NAIT 2015</title>
  
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 +
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/jquery.flexslider-min?action=raw&amp;ctype=text/javascript"></script>
  
 +
<!-----------https://static.igem.org/mediawiki/2015/d/d8/El_Capitan_.ttf------------------->
 +
 +
<script type="text/javascript" charset="utf-8">
 +
 +
var $ = jQuery.noConflict();
 +
  $(window).load(function() {
 +
    $('.flexslider').flexslider({
 +
          animation: "fade"
 +
    });
 +
  });
 +
</script>
  
 
</head>
 
</head>
Line 14: Line 27:
 
<body>
 
<body>
  
−
<style type="text/css">
 
−
 
−
.popbox {
 
−
    display: none;
 
−
    position: absolute;
 
−
    z-index: 99999;
 
−
    width: 400px;
 
−
    padding: 10px;
 
−
    background: #EEEFEB;
 
−
    color: #000000;
 
−
    border: 1px solid #4D4F53;
 
−
    margin: 0px;
 
−
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
 
−
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
 
−
}
 
−
.popbox h2
 
−
{
 
−
    background-color: #4D4F53;
 
−
    color:  #E3E5DD;
 
−
    font-size: 14px;
 
−
    display: block;
 
−
    width: 100%;
 
−
    margin: -10px 0px 8px -10px;
 
−
    padding: 5px 10px;
 
−
}
 
−
 
−
</style>
 
  
  
Line 46: Line 32:
 
<div class="header">
 
<div class="header">
  
−
    <div class="logo"><a href="https://2015.igem.org/Team:NAIT_Edmonton">
+
  <!--  <div class="logo">
−
            <img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px"></a>
+
 
−
    </div>
+
<a href="https://2015.igem.org/Team:NAIT_Edmonton">
 +
<img style="padding-left:6px" src="https://static.igem.org/mediawiki/2015/c/c7/NAIT_IGEM_Separated.png" height="185px">
 +
</a>
 +
</div> --->
 +
 
 +
 
 
     <div class="header_left">
 
     <div class="header_left">
 
         <ul>
 
         <ul>
Line 82: Line 73:
 
                 <ul>
 
                 <ul>
 
                     <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Safety">lab safety</a></li>
 
                     <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Safety">lab safety</a></li>
−
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Measurement">measurement</a></li>
+
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements">achievements</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Logbook">log book</a></li>
 
                       <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Logbook">log book</a></li>
 
                 </ul>
 
                 </ul>
Line 89: Line 80:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
−
<div id="wrap">
 
  
 
<style type="text/css">
 
<style type="text/css">
  
−
.top_slogan {text-align:center; font-family: 'Source Sans Pro', sans-serif; color:#0D4D8C; font-size:30px; padding: 40px 0px 40px 0px; font-style:strong; line-height:40px;}
+
.header_mobile {
 +
    display:none;
 +
    position: absolute;
 +
    background-color:transparent;
 +
    width:65px;
 +
    top: 90px;
 +
    left:50px;
 +
    height:65px;
 +
    z-index:999;
 +
    position:fixed;}
  
−
</style>
+
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
 +
.header_mobile ul * {margin:0; padding:0;}
 +
.header_mobile a {display:block;color:#159CD8;text-decoration:none;padding:15px 50px}
 +
.header_mobile li {position:relative;float:left; padding:5px 5px 5px 5px}
 +
.header_mobile li a {font-family:'Source Sans Pro', sans-serif;color:#ffffff;font-size:20px;}
 +
.header_mobile li.current-menu-item {background:#5AB3E3}
 +
.header_mobile ul ul{display:none; position:absolute; top:77%; left:30%; background:#0D4D8C; padding:0 0px 0 0}
 +
.header_mobile ul ul li:hover{background:#159CD8}
 +
.header_mobile ul ul li{float:none; width:120px}
 +
.header_mobile ul ul a {line-height:100%; padding:0 20px 0 0; font-size:15px }
 +
.header_mobile ul ul ul {top:0; left:200%}
 +
.header_mobile ul li.selected a{color:#8BC5EB}
 +
.header_mobile ul li:hover > ul{display:block;}
  
−
<center><div class="top_slogan">Attributions</div></center>
 
  
−
<div class="main_content">
+
@media screen and (max-width:1000px){
−
<center>
+
−
<h2> Our team's success was thanks to many generous individuals, groups, institutions and companies. We would like to thank each and every one of those who contributed to our success.</h2> <br>
+
  
−
<img src="https://static.igem.org/mediawiki/2015/6/61/NAIT_AttributionsGel.gif">
+
.header_left{display:none;}
−
</center>
+
.header_right{display:none;}
 +
.header_mobile{display:block;}
  
 +
}
  
−
<img src="https://static.igem.org/mediawiki/2015/5/5e/NAIT_Band_Marcelo.png" style="position:absolute;top:500px">
+
</style>
 +
 
 +
<div id="wrap2">
  
−
This is a popbox test.  <a class="popper" data-popbox="pop1">Hover here</a> to see how it works.  You can also hover <a href="#" class="popper" data-popbox="pop2">here</a> to see a different example.
+
  <div class="slider">
  
−
<div id="pop1" class="popbox">
+
<style type="text/css">
−
    <h2>Success!</h2>
+
.slider{width:100%; margin:0; clear:both; position:relative; top:-48px;}
−
    <p>This is an example popbox.</p>
+
.flex-container a:active,
−
</div>
+
.flexslider a:active {outline: none;}
−
<div id="pop2" class="popbox">
+
.slides,
−
    <h2>Danger!</h2>
+
.flex-control-nav,
−
    <p>Don't let this popbox go off the screen!</p>
+
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
−
</div>
+
.flexslider {width: 100%; margin: 0; padding: 0 0 0 0;}
 +
.flexslider .slides > li {display: none;}
 +
.flexslider .slides img {width:100%; height:auto; display: block;}
 +
.flex-pauseplay span {text-transform: capitalize;}
 +
.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
 +
html[xmlns] .slides {display: block;}
 +
* html .slides {height: 1%;}
 +
.no-js .slides > li:first-child {display: block;}
 +
.flexslider {position: relative; zoom: 1; overflow:hidden;} <!---height:500px--->
 +
.flexslider .slides {zoom: 1;}
 +
.flexslider .slides > li {position: relative;}
 +
.flex-container {zoom: 1; position: relative;}
 +
.flex-direction-nav li a {width:65px; height:37px; margin:0; display: block; position: absolute; top:0px; cursor: pointer; text-indent: -9999px;}
 +
.flex-direction-nav li a.next {background:url(https://static.igem.org/mediawiki/2015/a/a0/NAIT_Next.png) no-repeat center; right:0px;}
 +
.flex-direction-nav li a.prev {background:url(https://static.igem.org/mediawiki/2015/7/73/NAIT_Prev.png) no-repeat center;right:65px;}
 +
.flex-direction-nav li a.next:hover {background:url(https://static.igem.org/mediawiki/2015/b/ba/NAIT_Next_a.png) no-repeat center;}
 +
.flex-direction-nav li a.prev:hover {background:url(https://static.igem.org/mediawiki/2015/c/c4/NAIT_Prev_a.png) no-repeat center;}
 +
.flex-direction-nav li a.disabled {opacity: .3; filter:alpha(opacity=30); cursor: default;}
 +
.flex-control-nav {width: 100%; position: absolute; bottom: -30px; text-align: center;}
 +
.flex-control-nav li {margin: 0 0 0 5px; display: inline-block; zoom: 1; *display: inline;}
 +
.flex-control-nav li:first-child {margin: 0;}
 +
.flex-control-nav li a {width: 13px; height: 13px; display: block; cursor: pointer; text-indent: -9999px;}
 +
.flex-control-nav li a:hover {background-position: 0 -13px;}
 +
.flex-control-nav li a.active {background-position: 0 -26px; cursor: default;}
 +
.flex-caption{position: absolute;left:auto;right:auto; top:150px; width:100%;font-family: 'Source Sans Pro', sans-serif;text-align:center; font-size:14px; color:#FFFFFF; text-shadow:2px 2px 2px #000000}
 +
.flex-caption h0{font-size:30px; color:#FFFFFF}
 +
.flex-caption h2{ font-size:30px; color:#FFFFFF;text-shadow:2px 4px 2px #000000}
 +
.flex-caption p{ text-align:center; padding:0 200px;}
 +
a.slider_button{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;-khtml-border-radius:5px;background-color:#8BC5EB; color:#fff; font-size:14px; padding:8px 12px; margin:20px 0 0 0; display:inline-block;}
 +
</style>
  
−
  </div>
+
<div class="flexslider">
 +
    <ul class="slides">
 +
    <li><a href=""><img src="https://static.igem.org/mediawiki/2015/6/62/NAIT_Slide_Pedway.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p><strong><a href=""></a></strong></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Desc"><img src="https://static.igem.org/mediawiki/2015/5/56/NAIT_Slide_1_Project.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Practices"><img src="https://static.igem.org/mediawiki/2015/d/db/NAIT_Slide_2_Whiteboard.jpg" alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                   
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
            <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Modeling"><img src="https://static.igem.org/mediawiki/2015/5/57/NAIT_Slide_3_3D.jpg"alt="" title="" border="0"/></a>
 +
            <div class="flex-caption">
 +
                <h2></h2>
 +
                    <p></p>
 +
                </div>
 +
            </li>
 +
    </ul>
 +
  </div>
 
   </div>
 
   </div>
  
 +
<div id="wrap5">
  
 +
  <div class="section_one_three">
 +
        <h2 class="centered_title">Achievements</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" title=""><img src="https://static.igem.org/mediawiki/2015/5/50/NAIT_Medal_Icon.png" width="125px" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Despite the time constraints, our team achieved a lot this summer and we are proud of what we have accomplished.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/Achievements" class="more">read more</a>
 +
        </div>
 +
       
 +
  <div class="section_one_three">
 +
        <h2 class="centered_title">iGEM 2015</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org" title=""><img src="https://static.igem.org/mediawiki/2015/0/05/NAIT_Icon_services.png" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Learn about the exciting opportunities the iGEM foundation has to offer! The experience was incredible!
 +
        </p>
 +
        <a href="https://2015.igem.org" class="more">read more</a>
 +
        </div>
 +
 +
  <div class="section_one_three">
 +
        <h2 class="centered_title">Contact Us!</h2>
 +
        <div class="roundimg"><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" title=""><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" alt="" title="" /></a></div>
 +
        <p class="centered_text">
 +
Please contact our team if you want more information about our project or have any other questions or concerns.
 +
        </p>
 +
        <a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs" class="more">read more</a>
 +
        </div>
 +
 
 +
</div>
  
  
Line 132: Line 229:
 
</div>
 
</div>
  
−
         <div class="footer">
+
 
 +
 
 +
</div>
 +
 
 +
<div class="header_mobile">
 +
  <ul>
 +
         <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/MobileMenu">menu</a>
 +
          <ul>
 +
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Team">team</a>
 +
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Project">project</a>
 +
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Human">human practices</a>
 +
              <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/Notebook">notebook</a>
 +
          </ul>
 +
        </li>   
 +
           
 +
  </ul>
 +
</div>
 +
 
 +
  <div class="clear"></div>
 +
 
 +
 
 +
 
 +
<div class="footer">
 
         <div class="footer_content">
 
         <div class="footer_content">
 
             <div class="footer_left">
 
             <div class="footer_left">
Line 148: Line 267:
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.facebook.com/pages/IGEM-2015-NAIT-Edmonton/884025281659292"><img src="https://static.igem.org/mediawiki/2015/a/a3/NAIT_Icon_facebook.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 
                 <li><a href="http://www.twitter.com/TeamNAIT2015"><img src="https://static.igem.org/mediawiki/2015/6/64/NAIT_Icon_twitter.png" alt="" title="" /></a></li>
 +
                <li><a href="https://2015.igem.org/Team:NAIT_Edmonton/ContactUs"><img src="https://static.igem.org/mediawiki/2015/2/29/NAIT_Icon_contact.png" width="20px" alt="" title="" /></a></li>
 
                 </ul>
 
                 </ul>
 
             </div>
 
             </div>
Line 153: Line 273:
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
</div>
 
  
 
<style type="text/css">
 
<style type="text/css">
  
 
#footer {z-index:15;}
 
#footer {z-index:15;}
−
.footer {position: relative; padding:20px 0 40px 0; margin: -25px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
+
.footer {padding:20px 0 40px 0; margin: 0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C; height:25px;}
−
.footer_content {margin:auto;width:1000px;}
+
.footer_content {margin:auto;width:100%;}
−
.footer_left { float:left; padding:0 0 0 0px;}
+
.footer_left { float:left; padding:0 0 0 10%;}
−
.footer_right{ float:right; padding:0 0px 0 0;}
+
.footer_right{ float:right; padding:0 10% 0 0;}
 
ul.social_icons { margin:0px; padding:0px; list-style:none;}
 
ul.social_icons { margin:0px; padding:0px; list-style:none;}
 
ul.social_icons li{ float:left;}
 
ul.social_icons li{ float:left;}
Line 175: Line 294:
  
 
</style>
 
</style>
−
 
−
 
−
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
 
−
<script type="text/javascript">
 
−
$(function() {
 
−
    var moveLeft = 0;
 
−
    var moveDown = 0;
 
−
    $('a.popper').hover(function(e) {
 
−
 
 
−
        var target = '#' + ($(this).attr('data-popbox'));
 
−
       
 
−
        $(target).show();
 
−
        moveLeft = $(this).outerWidth();
 
−
        moveDown = ($(target).outerHeight() / 2);
 
−
    }, function() {
 
−
        var target = '#' + ($(this).attr('data-popbox'));
 
−
        $(target).hide();
 
−
    });
 
−
 
−
    $('a.popper').mousemove(function(e) {
 
−
        var target = '#' + ($(this).attr('data-popbox'));
 
−
       
 
−
        leftD = e.pageX + parseInt(moveLeft);
 
−
        maxRight = leftD + $(target).outerWidth();
 
−
        windowLeft = $(window).width() - 40;
 
−
        windowRight = 0;
 
−
        maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);
 
−
       
 
−
        if(maxRight > windowLeft && maxLeft > windowRight)
 
−
        {
 
−
            leftD = maxLeft;
 
−
        }
 
−
   
 
−
        topD = e.pageY - parseInt(moveDown);
 
−
        maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
 
−
        windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
 
−
        maxTop = topD;
 
−
        windowTop = parseInt($(document).scrollTop());
 
−
        if(maxBottom > windowBottom)
 
−
        {
 
−
            topD = windowBottom - $(target).outerHeight() - 20;
 
−
        } else if(maxTop < windowTop){
 
−
            topD = windowTop + 20;
 
−
        }
 
−
   
 
−
        $(target).css('top', topD).css('left', leftD);
 
−
   
 
−
   
 
−
    });
 
−
 
−
});
 
−
 
−
</script>
 
  
 
</body>
 
</body>
−
 
  
 
</html>
 
</html>

Latest revision as of 20:44, 6 August 2015

Team NAIT 2015