Team:UIUC Illinois
From 2014.igem.org
(Difference between revisions)
Line 5: | Line 5: | ||
<style> | <style> | ||
/*Coffee Art Banner*/ | /*Coffee Art Banner*/ | ||
- | |||
#topheader{ | #topheader{ | ||
display:block; | display:block; | ||
Line 13: | Line 12: | ||
position:relative; | position:relative; | ||
} | } | ||
- | |||
- | |||
- | + | /* Panels */ | |
- | + | .panel { | |
- | + | width:1100px; | |
- | - | + | height:528px; |
+ | margin:0; | ||
+ | margin-bottom:0px; | ||
+ | color: rgb(30,39,43); | ||
+ | font-family: 'Yanone Kaffeesatz', sans-serif; | ||
+ | } | ||
+ | .panel a { | ||
+ | color: rgb(46,43,52); | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | /* Subpanels */ | ||
+ | .narrowimg {/* Subpanels background*/ | ||
+ | z-index:2; | ||
+ | opacity:0.3; | ||
+ | filter: alpha(opacity=30); | ||
+ | } | ||
+ | .titlebox {/* Subpanels Title*/ | ||
+ | z-index:1; | ||
+ | position:relative; | ||
+ | bottom:480px; | ||
+ | background:transparent; | ||
+ | } | ||
+ | /* Project Panels*/ | ||
+ | .subpanel1 { /* Infographics */ | ||
+ | float:left; | ||
+ | width:535px; | ||
+ | height:200px; | ||
+ | font-size:22px; | ||
+ | text-align:center; | ||
+ | margin-top:0; | ||
+ | margin-right:11px; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | } | ||
+ | .subpanel1:hover{ | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .subpanel1:hover .narrowimg { | ||
+ | opacity:0.8; | ||
+ | filter: alpha(opacity=80); | ||
+ | } | ||
+ | .subpanel2 { /* Our Story Divider */ | ||
+ | /*float:left;*/ | ||
+ | width:1070px; | ||
+ | height:50px; | ||
+ | text-align:center; | ||
+ | line-height:50px; | ||
+ | background-color:#80776C; | ||
+ | color:#FFEDD7; | ||
+ | border-radius:7px; | ||
+ | position:relative; | ||
+ | bottom:50px; | ||
+ | font-family: /*'Great Vibes'*/, cursive; | ||
+ | font-size: 35px; | ||
+ | } | ||
+ | /* Highlights */ | ||
+ | .subpanel3 { /* divide page in 3 */ | ||
+ | float:left; | ||
+ | width:354px; | ||
+ | height:492px; | ||
+ | font-size:22px; | ||
+ | margin-top:0; | ||
+ | margin-right:18px; | ||
+ | } | ||
+ | .subpanel5 { /* Columns 1 and 2*/ | ||
+ | float:left; | ||
+ | width:354px; | ||
+ | height:450px; | ||
+ | font-size:22px; | ||
+ | background:rgb(255,255,255); | ||
+ | color:black; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .subpanel5:hover{ | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .subpanel5:hover .narrowimg { | ||
+ | opacity:0.8; | ||
+ | filter: alpha(opacity=80); | ||
+ | } | ||
+ | .subpanel4 { /* Column 3 */ | ||
+ | height:450px; | ||
+ | margin:0; | ||
+ | margin-bottom:11px; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | background:rgb(255,255,255); | ||
+ | color:Black; | ||
+ | text-align:center; | ||
+ | } | ||
+ | .subpanel4:hover{ | ||
+ | font-weight:bold; | ||
+ | } | ||
+ | .subpanel4:hover .narrowimg { | ||
+ | opacity:0.8; | ||
+ | filter: alpha(opacity=80); | ||
+ | } | ||
+ | |||
+ | /* Panels at the bottom */ | ||
+ | .subpanel6 { | ||
+ | float:left; | ||
+ | height:96px; | ||
+ | width:261.5px; | ||
+ | margin-right:18px; | ||
+ | border-radius:7px; | ||
+ | overflow:hidden; | ||
+ | background-color:#CCA36F; | ||
+ | color:white; | ||
+ | } | ||
+ | .subpanel6 img { | ||
+ | margin-top:16px; | ||
+ | background:white; | ||
+ | } | ||
+ | .subpanel6 img:hover { | ||
+ | background:rgb(252,250,229); | ||
+ | } | ||
+ | |||
+ | |||
+ | </style> | ||
+ | |||
+ | <!--Top Banner--> | ||
+ | <div id="topheader"> | ||
+ | <img style="margin-top:-1px" src="https://static.igem.org/mediawiki/2014/8/8c/Dummyimage.jpg" width="1100px" height="632"/> | ||
+ | </div> | ||
+ | <!--Space between banner and Our Story--> | ||
+ | <div style="clear: both;"></div> | ||
+ | <!--Importing jquery library--> | ||
+ | <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> | ||
+ | <div id="page"> | ||
+ | <div class="panel"> | ||
+ | |||
+ | <!--Infographics--> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Project/LactoBROcillus" title="Lactobrocillus"> | ||
+ | <div id="pspanel" class="subpanel1" onmouseover="chgtrans(this)"> | ||
+ | <img class="narrowimg" src="https://static.igem.org/mediawiki/2014/8/8c/Dummyimage.jpg"/> | ||
+ | <div class="titlebox"> | ||
+ | <center><img src="#" style="height:60px;margin-bottom:20px;"/></center> | ||
+ | <div style="width:60%;margin-left:20%;margin-bottom:20px;"><hr></div> | ||
+ | Dog Probiotic | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | <a href="https://2013.igem.org/Team:UIUC_Illinois/Project/Caffeine" title="Caffeine_Dehydrogenase"> | ||
+ | <div id="dspanel" class="subpanel1"> | ||
+ | <img class="narrowimg" src="https://static.igem.org/mediawiki/2014/8/8c/Dummyimage.jpg"/> | ||
+ | <div class="titlebox"> | ||
+ | <center><img src="#" style="height:60px;margin-bottom:20px;"/></center> | ||
+ | <div style="width:60%;margin-left:20%;margin-bottom:20px;"><hr></div> | ||
+ | Treating Caffeine Waste-Water | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | |||
+ | <!--Our Story Banner (Use book instead of hand--> | ||
+ | <1--Current anchor debatable and placeholder--> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Team" title="Our Story"> | ||
+ | <div class="subpanel2" > | ||
+ | <img width="70px" style="margin-left:80px;margin-right:15px;position:relative;bottom:1px" src="https://static.igem.org/mediawiki/2013/d/d5/PB_handresults.gif"/>Our Story | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <!--Separates Infographics from Image Banners--> | ||
+ | <div style="clear: both;"></div> | ||
+ | |||
+ | <div class="panel" style="background:white;"> | ||
+ | |||
+ | <!--Column 1--> | ||
+ | <div class="subpanel3"> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Software/Overview" title="sOverview"> | ||
+ | <div class="subpanel5"> | ||
+ | <img class="narrowimg" src="https://static.igem.org/mediawiki/2014/8/8c/Dummyimage.jpg" width="354px" height="156px"/> | ||
+ | <div style="position:relative;bottom:148px"> | ||
+ | <center><img src="#" style="height:50px;margin-top:10px;margin-bottom:20px;"/></center> | ||
+ | <div style="width:60%;margin-left:20%;margin-bottom:20px;"><hr></div> | ||
+ | Software | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <!--Column 2--> | ||
+ | <div class="subpanel3"> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Human_Practice/Overview" title="hOverview"> | ||
+ | <div class="subpanel5"> | ||
+ | <img class="narrowimg" src="https://static.igem.org/mediawiki/2014/8/8c/Dummyimage.jpg" width="354px" height="283px"/> | ||
+ | <div style="position:relative;bottom:258px"> | ||
+ | <center><img src="#" style="height:60px;margin-top:10px;margin-bottom:10px;"/></center> | ||
+ | <div style="width:60%;margin-left:20%;margin-bottom:20px;"><hr></div> | ||
+ | Human Practices | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | |||
+ | <!--Column 3--> | ||
+ | <div class="subpanel3" style="margin-right:0px"> | ||
+ | <div style="margin-right:0;width:356px"> | ||
+ | <a href="https://2013.igem.org/Team:Paris_Bettencourt/Results" title="Achievements"> | ||
+ | <div class="subpanel4"> | ||
+ | <img class="narrowimg" src="https://static.igem.org/mediawiki/2014/8/8c/Dummyimage.jpg" width="354px" height="283px"/> | ||
+ | <div style="position:relative;bottom:258px"> | ||
+ | <center><img src="#" style="height:50px;margin-top:15px;margin-bottom:15px;"/></center> | ||
+ | <div style="width:60%;margin-left:20%;margin-bottom:20px;"><hr></div> | ||
+ | Collaboration | ||
+ | </div> | ||
+ | </div> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <!--Space between Image Banners and Small Buttons--> | ||
+ | <div style="clear: both;"></div> | ||
+ | |||
+ | |||
+ | <!--Small Buttons--> | ||
+ | <div> | ||
+ | <div class="subpanel6"> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Team" title="Team"> | ||
+ | <center><img src="#" height="64px"/></center> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="subpanel6"> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Notes" title="Notebook"> | ||
+ | <center><img src="#" height="64px"/></center> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="subpanel6"> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Parts" title="Parts"> | ||
+ | <center><img src="#" height="64px"/></center> | ||
+ | </a> | ||
+ | </div> | ||
+ | <div class="subpanel6" style="margin-right:0"> | ||
+ | <a href="https://2014.igem.org/Team:UIUC_Illinois/Medal_Fulfillment" title="Medal Fulfillment"> | ||
+ | <center><img src="#" height="64px"/></center> | ||
+ | </a> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <!--Space between Small Buttons and Footer--> | ||
+ | <div style="clear: both;"></div> | ||
+ | |||
+ | <script> | ||
+ | $(document).ready(function(){$('div .igemlogo').mouseover(function(){div = $('.left-menu'); div.fadeIn(1);}).mouseout(function(){div.fadeOut(100);});}); | ||
+ | $(document).ready(function(){$('div #pspanel').mouseover(function(){div = $('#psdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});}); | ||
+ | $(document).ready(function(){$('div #dspanel').mouseover(function(){div = $('#dsdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});}); | ||
+ | $(document).ready(function(){$('div #thpanel').mouseover(function(){div = $('#thdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});}); | ||
+ | $(document).ready(function(){$('div #tcpanel').mouseover(function(){div = $('#tcdesc');div.fadeIn(1);}).mouseout(function(){div.fadeOut(1);});}); | ||
+ | </script> | ||
+ | </div> | ||
</html> | </html> | ||
{{:Team:UIUC_Illinois/Footer}} | {{:Team:UIUC_Illinois/Footer}} |
Revision as of 00:52, 1 September 2014
Our Story