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://2015.igem.org/Team:NAIT_Edmonton/Modernizer.js?action=raw&ctype=text/javascript"></script> | ||
</head> | </head> | ||
Line 115: | Line 113: | ||
− | <div id=" | + | <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> | ||
− | |||
<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
Contact Us!