Difference between revisions of "Team:Duke/NewTemplate"

 
(26 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
{{Template_All_Teams}}
 
−
 
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<!-- Declare that you are going to use html code instead of wiki code -->
 
<html>
 
<html>
Line 6: Line 4:
 
<!-- Start of CSS-->
 
<!-- Start of CSS-->
 
<style type="text/css">
 
<style type="text/css">
 +
 +
/* WIKI SETTINGS*/
 +
 +
/* Hide first heading */
 +
.firstHeading {
 +
display: none;
 +
}
 +
 +
/*-- Remove borders, float content left and remove padding/margin */
 +
#globalWrapper, #content{
 +
width:100%;
 +
background-color: transparent;
 +
border: 0px;
 +
float: left;
 +
margin:0px;
 +
padding: 0px;
 +
}
 +
 +
/*left align Black Menu Bar */
 +
#top_menu_inside {
 +
margin-left: 20px;
 +
}
 +
  
 
/* PAGE LAYOUT */
 
/* PAGE LAYOUT */
Line 16: Line 37:
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
#mainContainer {   
 
#mainContainer {   
−
width: 978px;
+
width: 100%;
 +
height: 100%
 
overflow:hidden;
 
overflow:hidden;
 
float:left;
 
float:left;
−
margin-left:20px;
+
margin: 0px;
−
margin-bottom: 10px;
+
margin-top: -7px;
−
background-color: #fff;
+
background-color: transparent;  
−
border-bottom: 14px solid #565656;
+
 
border-right: 2px solid #565656;
 
border-right: 2px solid #565656;
 
border-left: 2px solid #565656;
 
border-left: 2px solid #565656;
−
border-top: 2px solid #565656;
 
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
}
 
}
Line 31: Line 51:
 
/* Creates the container for the menu */
 
/* Creates the container for the menu */
 
#menuContainer  {  
 
#menuContainer  {  
−
float:left;
+
float:top;
−
width: 134px;
+
position: fixed;
 +
z-index:100;
 +
width: 100%;
 +
height: 35px;
 
padding: 20px 0px;
 
padding: 20px 0px;
−
border-top: 14px solid #565656;
+
border-top: 6px solid #565656;
−
background-color: #E8E8E9;
+
border-bottom: 6px solid #565656;
 +
background-color: #235F9C;
 
}
 
}
  
Line 42: Line 66:
 
padding-top:20px;
 
padding-top:20px;
 
padding-right:10px;
 
padding-right:10px;
−
margin-bottom: 20px;
+
margin-bottom: 0px;
−
width: 814px;
+
width: 100%;
 
padding-left: 20px;
 
padding-left: 20px;
 +
padding-right: 20px;
 
float: left;
 
float: left;
 
background-color: #fff;  
 
background-color: #fff;  
−
border-top: 14px solid #565656;
+
border-top: 6px solid #565656;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
}
 
}
  
−
/*Set up height place holder for the banner*/
+
/*Spacer for menu*/
−
#bannerContainer {
+
#menuSpacer{
−
height:200px;
+
height:85px;
 +
width: 100%;
 
margin:auto;
 
margin:auto;
−
text-align:center;
 
−
color: #24B694;
 
 
}
 
}
 +
  
 
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
Line 79: Line 104:
 
#contentContainer a {  
 
#contentContainer a {  
 
font-weight: bold;
 
font-weight: bold;
−
color: #23b593;
+
color: #000000;
 
}
 
}
  
Line 122: Line 147:
 
/*Styling for the links in the menu */
 
/*Styling for the links in the menu */
 
#menuContainer a {
 
#menuContainer a {
−
color: #333333;
+
color: #FFFFFF;
 
text-decoration:none;
 
text-decoration:none;
 
font-weight: bold;
 
font-weight: bold;
 +
font-size: 1em;
 
}
 
}
  
Line 130: Line 156:
 
#menuContainer ul {  
 
#menuContainer ul {  
 
list-style: none;
 
list-style: none;
−
margin-left:0px;
+
margin-top:10px;
 
}
 
}
  
Line 137: Line 163:
 
text-align: center;
 
text-align: center;
 
display: block;
 
display: block;
−
width: 100%;
+
width: 10%;
−
height:30px;
+
height:40px;
−
padding-top:10px;
+
margin-top:-30px;
 +
padding-top: 25px;
 
}
 
}
  
Line 151: Line 178:
 
#menuContainer li ul {
 
#menuContainer li ul {
 
display: none;
 
display: none;
−
padding-top:15px;
+
padding-top:0px;
−
margin-left: -19px;
+
margin-left: 0px;
 
}
 
}
  
Line 160: Line 187:
 
display: block;  
 
display: block;  
 
position: absolute;  
 
position: absolute;  
−
float:right;
+
float:none;
−
margin-left: 134px;
+
margin-left: -5px;
−
margin-top:-42px;
+
margin-top:25px;
 
  }
 
  }
  
Line 172: Line 199:
 
height:30px;
 
height:30px;
 
padding-top:10px;
 
padding-top:10px;
−
margin-top:-2px;
+
padding-bottom:10px;
 +
margin-top:-3px;
 
color: #565656;
 
color: #565656;
−
width: 150px;
+
width: 85px;
 
}
 
}
 +
ul {list-style: none;padding: 5px;margin: 10px;}
 +
  ul li {display: block;position: relative;float: left;}
  
 
/*CLASSES */
 
/*CLASSES */
Line 197: Line 227:
 
     }
 
     }
 
<!--Headers and Subheaders-->
 
<!--Headers and Subheaders-->
 +
 
.head{
 
.head{
 
background-color:#6AB3E1;
 
background-color:#6AB3E1;
Line 206: Line 237:
 
}
 
}
 
.subhead{
 
.subhead{
−
border-bottom: 2px solid #001A57;
+
background-color:#6AB3E1;
 +
border: 2px solid #001A57;
 +
border-radius:5px;
 
font-size:18px;
 
font-size:18px;
 
padding:5px;
 
padding:5px;
 
color:#001A57;
 
color:#001A57;
 
}
 
}
 +
 +
#test{
 +
border-radius:100%;
 +
width:100px;
 +
height:100px;
 +
transition: background 0.5s ease;
 +
background-color: red;
 +
}
 +
#test:hover{
 +
background-color: blue;
 +
}
 +
 +
#cf {
 +
  position:relative;
 +
  height:100px;
 +
  width:100px;
 +
  margin:0 auto;
 +
}
 +
 +
#cf img {
 +
  position:absolute;
 +
  float: right;
 +
  margin-top: -30px;
 +
  border-radius:1%;
 +
  width:125px;
 +
  max-height:75%;
 +
  margin-left:-63px;
 +
  -webkit-transition: opacity 0.5s ease-in-out;
 +
  -moz-transition: opacity 0.5s ease-in-out;
 +
  -o-transition: opacity 0.5s ease-in-out;
 +
  transition: opacity 0.5s ease-in-out;
 +
}
 +
 +
 +
#cf img.top:hover {
 +
  opacity:0;
 +
}
 +
 +
.grow img{
 +
transition: 1s ease;
 +
}
 +
 +
.grow img:hover{
 +
-webkit-transform: scale(1.5);
 +
-ms-transform: scale(1.5);
 +
transform: scale(1.5);
 +
transition: 1s ease;
 +
}
 +
 +
img.resize{
 +
  width:100%;
 +
  max-height: 20%;
 +
}
 +
 
<!-- End Header-->
 
<!-- End Header-->
  
Line 219: Line 306:
 
<!-- Start of the template html elements. -->
 
<!-- Start of the template html elements. -->
 
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
 
<div id ="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
−
 
−
 
−
<div id="bannerContainer">
 
−
<br><br>
 
−
<h2> Add a banner to your wiki! </h2>
 
−
 
−
<p>You can make the image 980px  by  200px</p>
 
−
<p> Remember to call the file: "<i>Team_Example_banner.jpg</i>" </p>
 
−
</div>
 
  
 
<!-- Start of menu -->
 
<!-- Start of menu -->
Line 234: Line 312:
 
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
<ul>
 
<ul>
−
<a href="https://2015.igem.org/Team:Example"><li>HOME</li></a>
+
<a href="https://2015.igem.org/Team:Duke"><li>HOME</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Team"><li>TEAM</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Team"><li>TEAM</li></a>
 +
<!--<li><div id="cf">
 +
  <img class="bottom" src="https://static.igem.org/mediawiki/2015/c/c5/Duke-team-test-hover4.png" />
 +
  <a href="https://2015.igem.org/Team:Duke/Team"><img class="top" src="https://static.igem.org/mediawiki/2015/1/1f/Duke-team-test-hover3.png" /></a>
 +
</div></li>-->
  
 
<a href="#"><li>PROJECT
 
<a href="#"><li>PROJECT
 
             <ul>
 
             <ul>
−
<a href="https://2015.igem.org/Team:Example/Description"><li>Description</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Description"><li>Description</li></a>
−
<a href="https://2015.igem.org/Team:Example/Experiments"><li>Experiments &amp; Protocols</li></a>   
+
<a href="https://2015.igem.org/Team:Duke/Experiments"><li>Experiments &amp; Protocols</li></a>   
−
<a href="https://2015.igem.org/Team:Example/Results"><li>Results</li></a>   
+
<a href="https://2015.igem.org/Team:Duke/Results"><li>Results</li></a>   
−
<a href="https://2015.igem.org/Team:Example/Design"><li>Design</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Design"><li>Design</li></a>
 +
<a href="https://2015.igem.org/Team:Duke/Notebook"><li>Notebook</li></a>
 +
 
 
</ul>
 
</ul>
 
</li></a>
 
</li></a>
Line 249: Line 333:
 
<a href="#"><li>PARTS
 
<a href="#"><li>PARTS
 
             <ul>
 
             <ul>
−
<a href="https://2015.igem.org/Team:Example/Parts"><li>Team Parts</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Parts"><li>Team Parts</li></a>
−
<a href="https://2015.igem.org/Team:Example/Basic_Part"><li>Basic Parts</li></a>   
+
<a href="https://2015.igem.org/Team:Duke/Basic_Part"><li>Basic Parts</li></a>   
−
<a href="https://2015.igem.org/Team:Example/Composite_Part"><li>Composite Parts</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Composite_Part"><li>Composite Parts</li></a>
−
<a href="https://2015.igem.org/Team:Example/Part_Collection"><li>Part Collection</li></a>   
+
<a href="https://2015.igem.org/Team:Duke/Part_Collection"><li>Part Collection</li></a>   
 
</ul>
 
</ul>
 
</li></a>
 
</li></a>
−
 
−
<a href="https://2015.igem.org/Team:Example/Notebook"><li>NOTEBOOK</li></a>
 
 
        
 
        
−
<a href="https://2015.igem.org/Team:Example/Attributions"><li>ATTRIBUTIONS</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Attributions"><li>ATTRIBUTIONS</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Collaborations"><li>COLLABORATIONS</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Collaborations"><li>COLLABORATIONS</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Practices"><li>HUMAN PRACTICES</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Practices"><li>HUMAN PRACTICES</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Safety"><li>SAFETY</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Safety"><li>SAFETY</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Modeling"><li>MODELING</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Modeling"><li>MODELING</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Measurement"><li>MEASUREMENT</li></a>
+
<a href="#"><li>MEASUREMENT
 +
            <ul>
 +
<a href="https://2015.igem.org/Team:Duke/Measurement"><li>Measurement</li></a>
 +
<a href="https://2015.igem.org/Team:Duke/Interlabstudy"><li>Interlab Study</li></a> 
 +
</ul>
 +
</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Software"><li>SOFTWARE</li></a>
+
<!--<a href="https://2015.igem.org/Team:Duke/Software"><li>SOFTWARE</li></a>
  
−
<a href="https://2015.igem.org/Team:Example/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
+
<a href="https://2015.igem.org/Team:Duke/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>-->
  
 
</ul>
 
</ul>
 
</div>
 
</div>
 
<!-- End of menu  -->
 
<!-- End of menu  -->
 +
 +
<div id="menuSpacer">
 +
</div>
 +
 +
<div id="globalWrapper">
 +
<img class="resize" src="https://static.igem.org/mediawiki/2009/6/64/Header_revised.jpg">
 +
<!--<br><br>
 +
<h2> Add a banner to your wiki! </h2>
 +
 +
<p>You can make the image 980px  by  200px</p>
 +
<p> Remember to call the file: "<i>Team_Duke_banner.jpg</i>" </p>-->
 +
</div>
  
 
<!-- Start of content -->
 
<!-- Start of content -->
 
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 +
 +
<div>
 +
<a href="https://2015.igem.org/Team:Duke"><img src="http://qph.is.quoracdn.net/main-qimg-826a2483ab9104e55abf64f8ddaf2251?convert_to_webp=true"/></a>
 +
</div>
 +
 +
<!--<div id="cf">
 +
  <img class="bottom" src="https://static.igem.org/mediawiki/2015/6/6e/Duke-team-hover-test1.jpg" />
 +
  <a href="http://youtube.com"><img class="top" src="https://static.igem.org/mediawiki/2015/d/de/Duke-team-hover-test2.jpg" /></a>
 +
</div>-->
 +
 +
<div class="grow">
 +
<a href="http://www.gmail.com"><img src="http://siberianhuskycentral.com/wp-content/uploads/2011/06/Alaskan-Husky-Puppies-2471.jpg"/></a>
 +
</div>
 +
 
</html>
 
</html>

Latest revision as of 17:07, 19 June 2015