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

Line 7: Line 7:
  
 
<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/index.php?title=
 
−
Template:NAIT_Edmonton/js/jquery.flexslider"></script>
 
  
 +
<script type="text/javascript" src="https://2015.igem.org/Team:NAIT_Edmonton/Modernizer.js?action=raw&amp;ctype=text/javascript"></script>
  
 
</head>
 
</head>
Line 115: Line 113:
  
  
−
  <div id="wrap4">
+
  <div id="wrap">
  
 
<div class="top_slogan">Contact Us!</div>
 
<div class="top_slogan">Contact Us!</div>
  
 
  <div class="main_content">
 
  <div class="main_content">
 +
 +
 +
 +
<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"/>
 +
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/4/47/NAIT_CU_02.jpg" alt="image02" />
 +
<input type="radio" name="radio-set" />
 +
<figcaption><span>Dedication</span></figcaption>
 +
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/8/8f/NAIT_CU_03.jpg" alt="image03" />
 +
<input type="radio" name="radio-set" />
 +
<figcaption><span>Teamwork</span></figcaption>
 +
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/f/fc/NAIT_CU_04.jpg" alt="image04" />
 +
<input type="radio" name="radio-set" />
 +
<figcaption><span>Experience</span></figcaption>
 +
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/3/3e/NAIT_CU_05.jpg" alt="image05" />
 +
<input type="radio" name="radio-set" />
 +
<figcaption><span>Fun</span></figcaption>
 +
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/3/3c/NAIT_CU_06.jpg" alt="image06" />
 +
<input type="radio" name="radio-set" />
 +
<figcaption><span>Reliability</span></figcaption>
 +
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/9/9e/NAIT_CU_08.jpg" alt="image07" />
 +
<input type="radio" name="radio-set" />
 +
<figcaption><span>Excellence</span></figcaption>
 +
 +
<figure>
 +
<img src="https://static.igem.org/mediawiki/2015/3/32/NAIT_CU_07.jpg" alt="image08" />
 +
<input id="ia-selector-last" type="radio" name="radio-set" />
 +
<figcaption><span>Team NAIT 2015</span></figcaption>
 +
</figure>
 +
 +
</figure>
 +
 +
</figure>
 +
 +
</figure>
 +
 +
</figure>
 +
 +
</figure>
 +
 +
</figure>
 +
 +
</figure>
 +
</div><!-- ia-container -->
  
 
   <center>
 
   <center>
  
−
<img src="https://static.igem.org/mediawiki/2015/d/d9/NAIT_geekStarter.jpg">
 
 
<br><br>
 
<br><br>
 
<h1>Team NAIT 2015</h1>
 
<h1>Team NAIT 2015</h1>
Line 132: Line 188:
 
<h3>Room G205</h3>
 
<h3>Room G205</h3>
 
        
 
        
 +
 +
 +
<style type="text/css">
 +
 +
.ia-container {
 +
width: 100%;
 +
margin: 20px auto;
 +
overflow: hidden;
 +
        margin-left:auto;
 +
        margin-right:auto;
 +
}
 +
 +
.ia-container figure {
 +
    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 {
 +
    position: relative;
 +
left: 0 !important;
 +
}
 +
 +
.ia-container img {
 +
display: block;
 +
width: 100%;
 +
}
 +
 +
.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 {
 +
width: 100%;
 +
height: 100%;
 +
background: rgba(87, 73, 81, 0.1);
 +
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>
 
  
 
  
  

Revision as of 01:27, 31 July 2015