Team:Lethbridge Canada/tests

From 2014hs.igem.org

(Difference between revisions)
Line 2: Line 2:
     <head>
     <head>
         <title>Lethbridge High School iGEM Team</title>
         <title>Lethbridge High School iGEM Team</title>
-
         <link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/6bwqnuofb75i3rl/main.css">
+
         <link rel="stylesheet" type="text/css" href="css/jquery.bxslider.css">
-
        <link rel="stylesheet" type="text/css" href="css/flexslider.css">
+
         <meta charset="utf-8">
         <meta charset="utf-8">
          
          
         <style>
         <style>
-
body {
+
/********************Code for removing top banner is taken from 2013 iGEM Team********************/
-
-webkit-font-smoothing: antialiased;
+
content h1.firstHeading{
-
      font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
+
    visibility: hidden;
-
      color: #232525;
+
}
-
      padding-top:70px;
+
#p-logo{
-
}
+
    display:none;
 +
}
 +
#searchform{
 +
    display:none;
 +
}
 +
div#top-section{
 +
    height: 20px;
 +
    margin-bottom: -63px !important;
 +
    margin: 0px 0px 0px -10px;
 +
    width: 1222px;
 +
    border: none;
 +
}
-
    #slides .slidesjs-navigation {
+
/********************Basic CSS For Every Page********************/
-
      margin-top:5px;
+
*{
-
     }
+
    margin:0;
 +
     padding: 0; 
 +
}
-
    a.slidesjs-next,
+
header, main, nav, aside, footer, article, aside, section{
-
    a.slidesjs-previous,
+
     display: block;
-
    a.slidesjs-play,
+
}
-
     a.slidesjs-stop {
+
h1, h2, h3, h4, h5, h6, p, a, ul, ol, li, small {
-
      background-image: url(images/btns-next-prev.png);
+
margin: 0;
-
      background-repeat: no-repeat;
+
padding:0;
-
      display:block;
+
border: 0;
-
      width:12px;
+
outline: 0;
-
      height:18px;
+
}
-
      overflow: hidden;
+
-
      text-indent: -9999px;
+
-
      float: left;
+
-
      margin-right:5px;
+
-
    }
+
-
     a.slidesjs-next {
+
.banner{
-
      margin-right:10px;
+
     background-color:black;
-
      background-position: -12px 0;
+
    color: white;
-
    }
+
width: 1230px;
 +
}
 +
.banner hgroup{
 +
padding: 40px;
 +
}
 +
.banner hgroup h1{
 +
font-size: 40px;
 +
}
 +
.banner hgroup h2{
 +
font-size: 30px;
 +
}
 +
body{
 +
    width: 1230px;;
 +
    margin-left:auto;
 +
    margin-right:auto;
 +
border: 1px solid black;
 +
background: white;
 +
}
 +
main{
 +
padding: 5px;
 +
background: white;
 +
}
 +
nav {
 +
  background: #ABCE39;
 +
  width: 100%;
 +
}
 +
footer{
 +
background: white;
 +
}
 +
nav ul {
 +
  list-style: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  display: block;
 +
}
 +
nav ul li {
 +
  display: inline-block;
 +
  padding: 0;
-
    a:hover.slidesjs-next {
+
}
-
      background-position: -12px -18px;
+
nav ul li a {
-
    }
+
  color: black;
 +
  text-decoration: none;
 +
  display: block;
 +
  padding: 0;
 +
    padding: 0 6px;
 +
  font-family: 'Open Sans', sans-serif;
 +
  font-weight: 700;
 +
  text-transform: uppercase;
 +
  font-size: 16px;
 +
  position: relative;
 +
}
 +
nav ul li a:hover {
 +
  color: green;
 +
}
-
    a.slidesjs-previous {
 
-
      background-position: 0 0;
 
-
    }
 
-
    a:hover.slidesjs-previous {
+
/********************Team Portfolio********************/
-
      background-position: 0 -18px;
+
/***still need to add html5 tweaks such as moz and webkit to make it work****/
-
    }
+
.card-container {
 +
 +
margin: 30px 0;
 +
-webkit-perspective: 1000;
 +
-moz-perspective: 1000;
 +
-ms-perspective: 1000;
 +
perspective: 1000;
 +
border: 2px solid black;
 +
 +
-ms-transform: perspective(1000px);
 +
-moz-transform: perspective(1000px);
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
}
-
    a.slidesjs-play {
+
.card-container:active .card-flip, .card-container.active .card-flip {
-
      width:15px;
+
-webkit-transform: rotateY(180deg);
-
      background-position: -25px 0;
+
-moz-transform: rotateY(180deg);
-
    }
+
-ms-transform: rotateY(180deg);
 +
transform: rotateY(180deg);
 +
}
 +
.card-container, .front, .back {
 +
width: 1220px;
 +
height: 150px;
 +
background: #CFFFCB;
 +
}
 +
.card-flip{
 +
-webkit-transition: 0.5s;
 +
-webkit-transform-style: preserve-3d;
 +
-ms-transition: 0.5s;
 +
-moz-transition: 0.5s;
 +
transition: 0.5s;
 +
 +
-moz-transform: perspective(1000px);
 +
-moz-transform-style: preserve-3d;
 +
-ms-transform-style: preserve-3d;
 +
transform-style: preserve-3d;
 +
 +
position: relative;
 +
}
 +
.front, .back {
 +
-webkit-backface-visibility: hidden;
 +
-moz-backface-visibility: hidden;
 +
-ms-backface-visibility: hidden;
 +
backface-visibility: hidden;
 +
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
}
 +
.front {
 +
z-index: 2;
 +
}
 +
.back{
 +
-webkit-transform: rotateY(-180deg);
 +
-moz-transform: rotateY(-180deg);
 +
-o-transform: rotateYY(-180deg);
 +
-ms-transform: rotateY(-180deg);
 +
transform: rotateY(180deg);
 +
}
 +
.bio_text {
 +
width: 1000px;
 +
margin-right: 80px;
 +
margin-top: 20px;
 +
position: relative;
 +
float: right;
 +
}
 +
.bio_image{
 +
width: 200px;
 +
border: 5px solid black;
 +
margin: 10px;
 +
float: left;
 +
position: relative;
-
    a:hover.slidesjs-play {
+
}
-
      background-position: -25px -18px;
+
.individual_name{
-
    }
+
font-size:30px;
 +
}
 +
.page_title{
 +
font-size: 40px;
 +
}
 +
 +
/**
 +
* BxSlider v4.1.2 - Fully loaded, responsive content slider
 +
* http://bxslider.com
 +
*
 +
* Written by: Steven Wanderski, 2014
 +
* http://stevenwanderski.com
 +
* (while drinking Belgian ales and listening to jazz)
 +
*
 +
* CEO and founder of bxCreative, LTD
 +
* http://bxcreative.com
 +
*/
-
    a.slidesjs-stop {
 
-
      width:18px;
 
-
      background-position: -41px 0;
 
-
    }
 
-
    a:hover.slidesjs-stop {
+
/** RESET AND LAYOUT
-
      background-position: -41px -18px;
+
===================================*/
-
    }
+
-
    .slidesjs-pagination {
+
.bx-wrapper {
-
      margin: 7px 0 0;
+
position: relative;
-
      float: right;
+
margin: 0 auto 60px;
-
      list-style: none;
+
padding: 0;
-
    }
+
*zoom: 1;
 +
 +
}
-
    .slidesjs-pagination li {
+
.bx-wrapper img {
-
      float: left;
+
max-width: 100%;
-
      margin: 0 1px;
+
display: block;
-
    }
+
top: 0;
 +
left: 0;
 +
right: 0;
 +
}
 +
#slider{
 +
width: 1220px;
 +
margin-right: 5px;
 +
margin-left: 5px;
 +
}
-
    .slidesjs-pagination li a {
+
/** THEME
-
      display: block;
+
===================================*/
-
      width: 13px;
+
-
      height: 0;
+
-
      padding-top: 13px;
+
-
      background-image: url(images/pagination.png);
+
-
      background-position: 0 0;
+
-
      float: left;
+
-
      overflow: hidden;
+
-
    }
+
-
    .slidesjs-pagination li a.active,
+
.bx-wrapper .bx-viewport {
-
    .slidesjs-pagination li a:hover.active {
+
-moz-box-shadow: 0 0 5px #ccc;
-
      background-position: 0 -13px
+
-webkit-box-shadow: 0 0 5px #ccc;
-
    }
+
box-shadow: 0 0 5px #ccc;
 +
border:  5px solid #fff;
 +
left: -5px;
 +
background: #fff;
 +
 +
/*fix other elements on the page moving (on Chrome)*/
 +
-webkit-transform: translatez(0);
 +
-moz-transform: translatez(0);
 +
    -ms-transform: translatez(0);
 +
    -o-transform: translatez(0);
 +
    transform: translatez(0);
 +
}
-
    .slidesjs-pagination li a:hover {
+
.bx-wrapper .bx-pager,
-
      background-position: 0 -26px
+
.bx-wrapper .bx-controls-auto {
-
    }
+
position: absolute;
 +
bottom: -30px;
 +
width: 100%;
 +
 +
}
-
    #slides a:link,
+
/* LOADER */
-
    #slides a:visited {
+
-
      color: #333
+
-
    }
+
-
    #slides a:hover,
+
.bx-wrapper .bx-loading {
-
    #slides a:active {
+
min-height: 50px;
-
      color: #9e2020
+
background: url(images/bx_loader.gif) center center no-repeat #fff;
-
    }
+
height: 100%;
 +
width: 100%;
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
z-index: 2000;
 +
background: white;
 +
}
 +
 
 +
/* PAGER */
 +
 
 +
.bx-wrapper .bx-pager {
 +
text-align: center;
 +
font-size: .85em;
 +
font-family: Arial;
 +
font-weight: bold;
 +
color: #666;
 +
padding-top: 20px;
 +
}
 +
 
 +
.bx-wrapper .bx-pager .bx-pager-item,
 +
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
 +
display: inline-block;
 +
*zoom: 1;
 +
*display: inline;
 +
}
 +
 
 +
.bx-wrapper .bx-pager.bx-default-pager a {
 +
background: #666;
 +
text-indent: -9999px;
 +
display: block;
 +
width: 10px;
 +
height: 10px;
 +
margin: 0 5px;
 +
outline: 0;
 +
-moz-border-radius: 5px;
 +
-webkit-border-radius: 5px;
 +
border-radius: 5px;
 +
}
 +
 
 +
.bx-wrapper .bx-pager.bx-default-pager a:hover,
 +
.bx-wrapper .bx-pager.bx-default-pager a.active {
 +
background: #000;
 +
}
 +
 
 +
/* DIRECTION CONTROLS (NEXT / PREV) */
 +
 
 +
.bx-wrapper .bx-prev {
 +
left: 10px;
 +
background: url(images/controls.png) no-repeat 0 -32px;
 +
}
 +
 
 +
.bx-wrapper .bx-next {
 +
right: 10px;
 +
background: url(images/controls.png) no-repeat -43px -32px;
 +
}
 +
 
 +
.bx-wrapper .bx-prev:hover {
 +
background-position: 0 0;
 +
}
 +
 
 +
.bx-wrapper .bx-next:hover {
 +
background-position: -43px 0;
 +
}
 +
 
 +
.bx-wrapper .bx-controls-direction a {
 +
position: absolute;
 +
top: 50%;
 +
margin-top: -16px;
 +
outline: 0;
 +
width: 32px;
 +
height: 32px;
 +
text-indent: -9999px;
 +
z-index: 9999;
 +
}
 +
 
 +
.bx-wrapper .bx-controls-direction a.disabled {
 +
display: none;
 +
}
 +
 
 +
/* AUTO CONTROLS (START / STOP) */
 +
 
 +
.bx-wrapper .bx-controls-auto {
 +
text-align: center;
 +
}
 +
 
 +
.bx-wrapper .bx-controls-auto .bx-start {
 +
display: block;
 +
text-indent: -9999px;
 +
width: 10px;
 +
height: 11px;
 +
outline: 0;
 +
background: url(images/controls.png) -86px -11px no-repeat;
 +
margin: 0 3px;
 +
}
 +
 
 +
.bx-wrapper .bx-controls-auto .bx-start:hover,
 +
.bx-wrapper .bx-controls-auto .bx-start.active {
 +
background-position: -86px 0;
 +
}
 +
 
 +
.bx-wrapper .bx-controls-auto .bx-stop {
 +
display: block;
 +
text-indent: -9999px;
 +
width: 9px;
 +
height: 11px;
 +
outline: 0;
 +
background: url(images/controls.png) -86px -44px no-repeat;
 +
margin: 0 3px;
 +
}
 +
 
 +
.bx-wrapper .bx-controls-auto .bx-stop:hover,
 +
.bx-wrapper .bx-controls-auto .bx-stop.active {
 +
background-position: -86px -33px;
 +
}
 +
 
 +
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
 +
 
 +
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
 +
text-align: left;
 +
width: 80%;
 +
}
 +
 
 +
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
 +
right: 0;
 +
width: 35px;
 +
}
 +
 
 +
/* IMAGE CAPTIONS */
 +
 
 +
.bx-wrapper .bx-caption {
 +
position: absolute;
 +
bottom: 0;
 +
left: 0;
 +
background: #666\9;
 +
background: rgba(80, 80, 80, 0.75);
 +
width: 100%;
 +
}
 +
 
 +
.bx-wrapper .bx-caption span {
 +
color: #fff;
 +
font-family: Arial;
 +
display: block;
 +
font-size: .85em;
 +
padding: 10px;
 +
background: white;
 +
}
-
    .navbar {
 
-
      overflow: hidden
 
-
 
-
#slides {
 
-
display:none;
 
-
}
 
-
 
-
 
-
}
 
</style>
</style>
         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
-
   <script src="js/jquery.flexslider.js"></script>  
+
   <script src="js/jquery.bxslider.js"></script>  
         <script type="text/javascript" charset="utf-8">
         <script type="text/javascript" charset="utf-8">
   $(window).load(function() {
   $(window).load(function() {
-
     $('.flexslider').flexslider();
+
     $('.bxslider').bxSlider();
   });
   });
</script>
</script>
Line 133: Line 416:
                 <h2> Canada</h2>
                 <h2> Canada</h2>
             </hgroup>
             </hgroup>
-
            <nav> <ul>
+
          </header>
 +
         
 +
        <nav id="head_menu"> <ul>
               <li style="
               <li style="
     padding: 30px;"><a href="https://2014hs.igem.org/Team:Lethbridge_Canada"> Home </a></li>
     padding: 30px;"><a href="https://2014hs.igem.org/Team:Lethbridge_Canada"> Home </a></li>
Line 153: Line 438:
             </ul>
             </ul>
               </nav>
               </nav>
-
          </header>
+
 
 +
  <div id="slider">         
 +
    <ul class="bxslider">
 +
    <li>
 +
      <img src="images/slide1.jpeg" />
 +
    </li>
 +
    <li>
 +
      <img src="images/slide2.jpeg" />
 +
    </li>
 +
    <li>
 +
      <img src="images/slide1.jpeg" />
 +
    </li>
 +
  </ul>
 +
  </div>
          
          
         <main>
         <main>
Line 166: Line 464:
             </article>
             </article>
          
          
-
        <div class="flexslider">
+
 
-
  <ul class="slides">
+
-
    <li>
+
-
      <img src="images/slide1.jpeg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="images/slide2.jpeg" />
+
-
    </li>
+
-
    <li>
+
-
      <img src="images/slide1.jpeg" />
+
-
    </li>
+
-
  </ul>
+
-
</div>
+
              
              
         </main>
         </main>

Revision as of 17:14, 17 May 2014

Lethbridge High School iGEM Team

Stuff

goes here

Other text here

copyright stuff

Retrieved from "http://2014hs.igem.org/Team:Lethbridge_Canada/tests"