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

 
(9 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://2015.igem.org/Team:NAIT_Edmonton/jquery.flexslider-min?action=raw&amp;ctype=text/javascript"></script>
  
−
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/Modernizer.js?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">
 
  
−
.header_mobile {
 
−
    display:none;
 
−
    position: absolute;
 
−
    background-color:transparent;
 
−
    width:65px;
 
−
    top: 90px;
 
−
    left:50px;
 
−
    height:65px;
 
−
    z-index:999;
 
−
    position:fixed;}
 
  
−
.header_mobile ul {list-style:none; position:absolute;float:right;margin:0;padding-right:125px}
+
<div id="header">
−
.header_mobile ul * {margin:0; padding:0;}
+
<div class="header">
−
.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;}
+
  
 +
  <!--  <div class="logo">
  
−
@media screen and (max-width:1000px){
+
<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> --->
  
−
.header_left{display:none;}
 
−
.header_right{display:none;}
 
−
.header_mobile{display:block;}
 
  
−
}
 
−
 
−
</style>
 
−
 
−
<style type="text/css">
 
−
.footer{position:absolute;bottom:0px;}
 
−
</style>
 
−
 
−
 
−
<div id="header">
 
−
<div class="header">
 
−
 
−
    <div class="logo"><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 103: Line 80:
 
</div>
 
</div>
 
</div>
 
</div>
−
 
  
 
<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;}
  
  
 +
@media screen and (max-width:1000px){
  
−
<div id="wrap">
+
.header_left{display:none;}
 +
.header_right{display:none;}
 +
.header_mobile{display:block;}
  
−
<div class="top_slogan">Contact Us!</div>
+
}
  
−
<div class="main_content">
+
</style>
−
 
+
 
−
 
+
<div id="wrap2">
−
 
+
−
<div class="ia-container">
+
−
+
−
<figure>
+
−
<img src="https://static.igem.org/mediawiki/2015/6/6f/NAIT_CU_01.jpg" alt="image01" />
+
−
<input type="radio" name="radio-set" checked="checked"/>
+
−
<figcaption><span>Team NAIT 2015</span></figcaption>
+
−
+
−
<figure>
+
−
<img src="images/2.jpg" alt="image02" />
+
−
<input type="radio" name="radio-set" />
+
−
<figcaption><span>Honest Light</span></figcaption>
+
−
+
−
<figure>
+
−
<img src="images/3.jpg" alt="image03" />
+
−
<input type="radio" name="radio-set" />
+
−
<figcaption><span>Silent Serenity</span></figcaption>
+
−
+
−
<figure>
+
−
<img src="images/4.jpg" alt="image04" />
+
−
<input type="radio" name="radio-set" />
+
−
<figcaption><span>Warm Welcome</span></figcaption>
+
−
+
−
<figure>
+
−
<img src="images/5.jpg" alt="image05" />
+
−
<input type="radio" name="radio-set" />
+
−
<figcaption><span>Sensible Magic</span></figcaption>
+
−
+
−
<figure>
+
−
<img src="images/6.jpg" alt="image06" />
+
−
<input type="radio" name="radio-set" />
+
−
<figcaption><span>Lovely Midnight</span></figcaption>
+
−
+
−
<figure>
+
−
<img src="images/7.jpg" alt="image07" />
+
−
<input type="radio" name="radio-set" />
+
−
<figcaption><span>Illuminated Darkness</span></figcaption>
+
−
 
+
−
<figure>
+
−
<img src="images/8.jpg" alt="image08" />
+
−
<input id="ia-selector-last" type="radio" name="radio-set" />
+
−
<figcaption><span>Happy Child</span></figcaption>
+
−
</figure>
+
−
+
−
</figure>
+
−
+
−
</figure>
+
−
+
−
</figure>
+
−
+
−
</figure>
+
−
+
−
</figure>
+
−
+
−
</figure>
+
−
+
−
</figure>
+
−
</div><!-- ia-container -->
+
−
 
+
−
  <center>
+
−
 
+
−
<br><br>
+
−
<h1>Team NAIT 2015</h1>
+
−
<h2>Email:<a href="mailto:johannes.coomansingh@gmail.com?subject=iGEM Questions/Comments">
+
−
Click Here</a> </h2>
+
−
<h3>Northern Alberta Institute of Technology</h3>
+
−
<h3>11762 106 St NW, Edmonton, AB T5G 3H6</h3>
+
−
<h3>Room G205</h3>
+
−
     
+
  
 +
  <div class="slider">
  
 
<style type="text/css">
 
<style type="text/css">
 +
.slider{width:100%; margin:0; clear:both; position:relative; top:-48px;}
 +
.flex-container a:active,
 +
.flexslider a:active {outline: none;}
 +
.slides,
 +
.flex-control-nav,
 +
.flex-direction-nav {margin: 0; padding: 0; list-style: none;}
 +
.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>
  
−
.ia-container {
+
<div class="flexslider">
−
width: 100%;
+
    <ul class="slides">
−
margin: 20px auto;
+
    <li><a href=""><img src="https://static.igem.org/mediawiki/2015/6/62/NAIT_Slide_Pedway.jpg" alt="" title="" border="0"/></a>
−
overflow: hidden;
+
            <div class="flex-caption">
−
        margin-left:auto;
+
                <h2></h2>
−
        margin-right:auto;
+
                    <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>
  
−
.ia-container figure {
+
<div id="wrap5">
−
    position: absolute;
+
−
top: 0;
+
−
left: 50px; /* width of visible piece */
+
−
width: 335px;
+
−
    box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
+
−
-webkit-transition: all 0.3s ease-in-out;
+
−
    -moz-transition: all 0.3s ease-in-out;
+
−
    -o-transition: all 0.3s ease-in-out;
+
−
    -ms-transition: all 0.3s ease-in-out;
+
−
    transition: all 0.3s ease-in-out;
+
−
}
+
  
−
.ia-container > figure {
+
  <div class="section_one_three">
−
    position: relative;
+
        <h2 class="centered_title">Achievements</h2>
−
left: 0 !important;
+
        <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>
  
−
.ia-container img {
+
  <div class="section_one_three">
−
display: block;
+
        <h2 class="centered_title">Contact Us!</h2>
−
height: 100%;
+
        <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>
  
−
.ia-container input {
 
−
position: absolute;
 
−
top: 0;
 
−
left: 0;
 
−
width: 50px; /* just cover visible part */
 
−
height: 100%;
 
−
cursor: pointer;
 
−
border: 0;
 
−
padding: 0;
 
−
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
−
    filter: alpha(opacity=0);
 
−
    opacity: 0;
 
−
z-index: 100;
 
−
-webkit-appearance: none;
 
−
-moz-appearance: none;
 
−
appearance: none;
 
−
}
 
−
.ia-container input:checked{
 
−
width: 5px;
 
−
left: auto;
 
−
right: 0px;
 
−
}
 
−
.ia-container input:checked ~ figure {
 
−
-webkit-transition: all 0.7s ease-in-out;
 
−
    -moz-transition: all 0.7s ease-in-out;
 
−
    -o-transition: all 0.7s ease-in-out;
 
−
    -ms-transition: all 0.7s ease-in-out;
 
−
    transition: all 0.7s ease-in-out;
 
−
left: 335px;
 
−
}
 
  
−
.ia-container figcaption {
+
  <div class="clear"></div>
−
width: 100%;
+
 
−
height: 100%;
+
 
−
background: rgba(87, 73, 81, 0.1);
+
</div>
−
position: absolute;
+
−
top: 0px;
+
−
-webkit-transition: all 0.2s linear;
+
−
    -moz-transition: all 0.2s linear;
+
−
    -o-transition: all 0.2s linear;
+
−
    -ms-transition: all 0.2s linear;
+
−
    transition: all 0.2s linear;
+
−
}
+
  
−
.ia-container figcaption span {
 
−
position: absolute;
 
−
top: 40%;
 
−
margin-top: -30px;
 
−
right: 20px;
 
−
left: 20px;
 
−
overflow: hidden;
 
−
text-align: center;
 
−
background: rgba(87, 73, 81, 0.3);
 
−
line-height: 20px;
 
−
font-size: 18px;
 
−
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
 
−
    filter: alpha(opacity=0);
 
−
    opacity: 0;
 
−
text-transform: uppercase;
 
−
letter-spacing: 4px;
 
−
font-weight: 700;
 
−
padding: 20px;
 
−
color: #fff;
 
−
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
 
−
}
 
  
−
.ia-container input:checked + figcaption,
 
−
.ia-container input:checked:hover + figcaption{
 
−
background: rgba(87, 73, 81, 0);
 
−
}
 
  
−
.ia-container input:checked + figcaption span {
 
−
-webkit-transition: all 0.4s ease-in-out 0.5s;
 
−
    -moz-transition: all 0.4s ease-in-out 0.5s;
 
−
    -o-transition: all 0.4s ease-in-out 0.5s;
 
−
    -ms-transition: all 0.4s ease-in-out 0.5s;
 
−
    transition: all 0.4s ease-in-out 0.5s;
 
−
 
−
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=99)";
 
−
    filter: alpha(opacity=99);
 
−
opacity: 1;
 
−
 
−
top: 50%;
 
−
}
 
−
 
−
.ia-container #ia-selector-last:checked + figcaption span {
 
−
-webkit-transition-delay: 0.3s;
 
−
-moz-transition-delay: 0.3s;
 
−
-o-transition-delay: 0.3s;
 
−
-ms-transition-delay: 0.3s;
 
−
transition-delay: 0.3s;
 
−
}
 
−
 
−
.ia-container input:hover + figcaption {
 
−
background: rgba(87, 73, 81, 0.03);
 
−
}
 
−
 
−
.ia-container input:checked ~ figure input{
 
−
    z-index: 1;
 
−
}
 
−
 
−
@media screen and (max-width: 720px) {
 
−
    .ia-container {
 
−
width: 540px;
 
−
}
 
−
 
−
.ia-container figure {
 
−
left: 40px;
 
−
width: 260px;
 
−
}
 
−
 
−
.ia-container input {
 
−
width: 40px;
 
−
}
 
−
 
−
.ia-container input:checked ~ figure {
 
−
left: 260px;
 
−
}
 
−
 
−
.ia-container figcaption span {
 
−
font-size: 16px;
 
−
}
 
−
}
 
−
 
−
@media screen and (max-width: 520px) {
 
−
    .ia-container {
 
−
width: 320px;
 
−
}
 
−
 
−
.ia-container figure {
 
−
left: 20px;
 
−
width: 180px;
 
−
}
 
−
 
−
.ia-container input {
 
−
width: 20px;
 
−
}
 
−
 
−
.ia-container input:checked ~ figure {
 
−
left: 180px;
 
−
}
 
−
 
−
.ia-container figcaption span {
 
−
font-size: 12px;
 
−
letter-spacing: 2px;
 
−
padding: 10px;
 
−
margin-top: -20px;
 
−
}
 
−
 
−
}
 
−
 
−
 
−
</style>
 
−
 
 
−
 
−
</center>
 
−
  </div>
 
 
</div>
 
</div>
  
Line 397: Line 247:
 
</div>
 
</div>
  
 +
  <div class="clear"></div>
 +
 
 +
 
  
−
  <div class="clear"></div>
+
<div class="footer">
−
 
+
−
        <div class="footer">
+
 
         <div class="footer_content">
 
         <div class="footer_content">
 
             <div class="footer_left">
 
             <div class="footer_left">
Line 416: 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 421: Line 273:
 
           </div>
 
           </div>
 
         </div>
 
         </div>
−
</div>
 
  
 
<style type="text/css">
 
<style type="text/css">
  
 
#footer {z-index:15;}
 
#footer {z-index:15;}
−
.footer {padding:20px 0 40px 0; margin:0px 0 0 0; clear:both; width:100%; background-color:#0D4D8C;margin-bottom:0;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:100%;}
 
.footer_content {margin:auto;width:100%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
 
.footer_left { float:left; padding:0 0 0 10%;}
Line 446: Line 297:
 
</body>
 
</body>
  
−
</body>
 
 
</html>
 
</html>

Latest revision as of 20:44, 6 August 2015

Team NAIT 2015