Difference between revisions of "Template:Team:MIT navigation bar"

 
(38 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
    <style>
+
<style>
 
         body {
 
         body {
 
             margin: 0;
 
             margin: 0;
 +
            background-color: #f2f2f2!important;
 
         }
 
         }
 
          
 
          
Line 14: Line 15:
 
             margin-left: auto;
 
             margin-left: auto;
 
             align-self: center;
 
             align-self: center;
−
        }
 
−
        #bodyContent {
 
−
            padding-top: 40px;
 
 
         }
 
         }
  
Line 22: Line 20:
 
             height: 40px;
 
             height: 40px;
 
             background: rgb(82, 81, 81);
 
             background: rgb(82, 81, 81);
 +
        }
 +
 +
        .navdiv-cover {
 +
            height: 40px;
 +
            position: absolute;
 +
            background: rgb(82, 81, 81);
 +
            width: 200vw;
 +
            left: -100vw;
 +
 
         }
 
         }
 
          
 
          
−
         .navdiv {
+
         #content .navdiv {
 
             float: none;
 
             float: none;
 
             margin: 0 auto;
 
             margin: 0 auto;
−
            width: 100vw;
 
−
            position: fixed;
 
 
             left: 0;
 
             left: 0;
 
         }
 
         }
 
          
 
          
−
         .navdiv>a {
+
         #content .navdiv>a {
 
             position: relative;
 
             position: relative;
 
         }
 
         }
  
−
         .navdiv ul{
+
         #content .navdiv ul{
 
             width: 100%;
 
             width: 100%;
 
             height: 40px;
 
             height: 40px;
Line 43: Line 48:
 
             color: white;
 
             color: white;
 
             margin-right: 15px;
 
             margin-right: 15px;
−
             margin-top: 0px;
+
             margin-top: 40px;
 
             margin-left: 0px;
 
             margin-left: 0px;
 
             text-align: center;
 
             text-align: center;
Line 49: Line 54:
 
         }
 
         }
 
          
 
          
−
         .navdiv ul li a{
+
         #content .navdiv ul li a {
 
             text-decoration: none;
 
             text-decoration: none;
 
             color: white;
 
             color: white;
Line 55: Line 60:
 
         }
 
         }
 
          
 
          
−
         .navdiv ul li a:hover{
+
         #content .navdiv ul li a:hover{
 
             text-decoration: none;
 
             text-decoration: none;
 
             color: white;
 
             color: white;
 
             background: rgb(160, 158, 158);
 
             background: rgb(160, 158, 158);
−
            opacity: 0.7;
 
 
             -webkit-transition: all 0.4s ease;  
 
             -webkit-transition: all 0.4s ease;  
−
    -moz-transition: all 0.4s ease;  
+
            -moz-transition: all 0.4s ease;  
−
    -ms-transition: all 0.4s ease;  
+
            -ms-transition: all 0.4s ease;  
−
    -o-transition: all 0.4s ease;  
+
            -o-transition: all 0.4s ease;  
−
    transition: all 0.4s ease;  
+
            transition: all 0.4s ease;  
 
         }
 
         }
 
          
 
          
−
         .navdiv ul li{
+
         #content .navdiv ul li{
 
             list-style-type: none;
 
             list-style-type: none;
 
             display: inline-block;
 
             display: inline-block;
Line 79: Line 83:
 
         }
 
         }
 
          
 
          
−
         .navdiv ul li:hover{
+
         #content .navdiv ul li:hover{
 
             background: rgb(160, 158, 158);
 
             background: rgb(160, 158, 158);
 
             color: white;
 
             color: white;
−
            opacity: 0.7;
 
 
             -webkit-transition: all 0.4s ease;  
 
             -webkit-transition: all 0.4s ease;  
−
    -moz-transition: all 0.4s ease;  
+
            -moz-transition: all 0.4s ease;  
−
    -ms-transition: all 0.4s ease;  
+
            -ms-transition: all 0.4s ease;  
−
    -o-transition: all 0.4s ease;  
+
            -o-transition: all 0.4s ease;  
−
    transition: all 0.4s ease;  
+
            transition: all 0.4s ease;  
 
          
 
          
 
         }
 
         }
Line 104: Line 107:
 
             height: 40px;
 
             height: 40px;
 
             border: 10px solid rgb(82, 81, 81);;
 
             border: 10px solid rgb(82, 81, 81);;
−
             height: 80px;
+
             height: 100px;
−
             border-radius: 80px;
+
             border-radius: 100px;
 
         }
 
         }
 
          
 
          
 
         .navdiv .logo-wrapper img {
 
         .navdiv .logo-wrapper img {
−
             height: 60px;
+
             height: 100px;
−
             padding: 5px 5px 5px 5px;
+
            width: 100px;
 +
             padding: 0px 0px 0px 0px;
 +
        }
 +
 
 +
        .navdiv .logo-wrapper#team-logo {
 +
            left: -75px;
 
         }
 
         }
 
          
 
          
 
         .navdiv .logo-wrapper#main-logo {
 
         .navdiv .logo-wrapper#main-logo {
−
            height: 70px;
+
             left: 900px;
−
             left: -90px;
+
−
            border-width: 7px;
+
−
            top: -22px
+
 
         }
 
         }
 +
 +
        /*.navdiv .logo-wrapper#main-logo {
 +
            height: 66px;
 +
            left: -134px;
 +
            border-width: 7px;
 +
            top: -22px;
 +
        }*/
 
          
 
          
−
         .navdiv .logo-wrapper#main-logo img {
+
         /*.navdiv .logo-wrapper#main-logo img {
 
             height: 56px;
 
             height: 56px;
−
         }
+
         }*/
 
          
 
          
−
         .submenu {
+
         #content .submenu {
 
             display: none;
 
             display: none;
 
             position: absolute;
 
             position: absolute;
Line 131: Line 143:
 
         }
 
         }
 
          
 
          
−
         .submenu a {
+
         #content .submenu a {
 
             color: black;
 
             color: black;
 
             background: rgb(82, 81, 81);
 
             background: rgb(82, 81, 81);
Line 140: Line 152:
 
         }
 
         }
 
          
 
          
−
         .submenu a:hover{
+
         #content .submenu a:hover{
 
             color: white;
 
             color: white;
 
             background: rgb(160, 158, 158);
 
             background: rgb(160, 158, 158);
−
            opacity: 0.7;
 
 
             border: none;
 
             border: none;
 
         }
 
         }
 
          
 
          
−
         .navdiv ul li:hover .submenu {
+
         #content .navdiv ul li:hover .submenu {
 
             display: block;
 
             display: block;
 
         }
 
         }
 
          
 
          
 
         /********************************* CONTENT OF THE PAGE ********************************/
 
         /********************************* CONTENT OF THE PAGE ********************************/
 +
ul.img-list {
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-align: center;
 +
     
 +
}
 +
 +
ul.img-list li {
 +
  display: inline-block;
 +
  height: 150px;
 +
  margin: 0 0 5px 0;
 +
  border: solid 2px;
 +
  position: relative;
 +
  width: 150px;
 +
  width: calc(33% - 6px);
 +
}
 +
 +
ul.img-list img {
 +
  width: 100%;
 +
  height: 100%
 +
}
 +
 +
ul.img-home {
 +
  list-style-type: none;
 +
  margin: 0;
 +
  padding: 0;
 +
  text-align: center;
 +
  width: 950px
 +
     
 +
}
 +
 +
ul.img-home li {
 +
  display: inline-block;
 +
  margin: 5px 0 0 0;
 +
  border: 0px;
 +
  position: relative
 +
}
 +
 +
ul.img-home img {
 +
  width: 100%;
 +
  height: 100%
 +
}
 +
 +
span.text-content {
 +
  background: rgba(255,255,255,0.7);
 +
  color: black;
 +
  font-size: 16px;
 +
  cursor: pointer;
 +
  display: table;
 +
  height: 100%;
 +
  left: 0;
 +
  position: absolute;
 +
  vertical-align: middle;
 +
  top: 0;
 +
  width: 100%;
 +
  opacity: 0;
 +
  -webkit-transition: opacity 500ms;
 +
  -moz-transition: opacity 500ms;
 +
  -o-transition: opacity 500ms;
 +
  transition: opacity 500ms;
 +
}   
 +
span.text-content span {
 +
  display: table-cell;
 +
  text-align: center;
 +
  vertical-align: middle;
 +
}
 +
ul.img-list li:hover span.text-content {
 +
  opacity: 1;
 +
}
 +
ul.img-home li:hover span.text-content {
 +
  opacity: 1;
 +
}
 +
 +
/*STYLING */
 +
 +
/* styling for the titles */
 +
.content_wrapper h1, .content_wrapper h2 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color:#f20253;
 +
                font family: georgia;
 +
 +
}
 +
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
 +
padding:5px 15px;
 +
border-bottom:0px;
 +
color: #000000; 
 +
}
 +
 +
 +
/* font and text */
 +
.content_wrapper p {
 +
padding:0px 15px;
 +
font-size: 13px;
 +
font-family: 'Raleway', sans-serif;
 +
}
 +
 +
/* Links */
 +
.content_wrapper a {
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color:#72c9b6;
 +
color: #72c9b6;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 +
/* hover for the links */
 +
.content_wrapper a:hover {
 +
text-decoration:none;
 +
color:#000000;
 +
}
 +
 +
/* non numbered lists */
 +
.content_wrapper ul {
 +
padding:0px 20px;
 +
font-size: 13px;
 +
font-family: 'Raleway', sans-serif;
 +
}
 +
 +
/* numbered lists */
 +
.content_wrapper ol {
 +
padding:0px;
 +
font-size: 13px;
 +
font-family: 'Raleway', sans-serif;
 +
}
 +
 +
/* Table */
 +
.content_wrapper table {
 +
width: 97%;
 +
margin:15px 10px;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 +
/* table cells */
 +
.content_wrapper  td {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
}
 +
 +
/* table headers */
 +
.content_wrapper th {
 +
padding: 10px;
 +
vertical-align: text-top;
 +
border: 1px solid #d3d3d3;
 +
border-collapse: collapse;
 +
background-color:#f2f2f2;
 +
}
 +
 +
/* Button class */
 +
.button_click {
 +
margin: 10px auto;
 +
padding: 15px; width:12%; 
 +
text-align:center;
 +
font-weight:bold;
 +
background-color: #72c9b6;
 +
cursor:pointer; 
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
transition: all 0.4s ease;
 +
}
 +
 +
/* button class on hover */
 +
.button_click:hover { 
 +
background-color:#000000;
 +
color:#72c9b6;
 +
}
  
 
/* Wrapper for the content */
 
/* Wrapper for the content */
Line 205: Line 392:
 
font-weight:bold;
 
font-weight:bold;
 
}
 
}
−
       
+
</style>
−
    </style>
+
<!-- HTML -->
−
   
+
 
    
 
    
 
     <div class="navdiv-wrapper">
 
     <div class="navdiv-wrapper">
−
          
+
         <div class="navdiv-cover"></div>
 
             <div class="navdiv">
 
             <div class="navdiv">
 
                 <a href="https://2016.igem.org">
 
                 <a href="https://2016.igem.org">
 
                     <div id="main-logo" class="logo-wrapper">
 
                     <div id="main-logo" class="logo-wrapper">
−
                         <img src="https://static.igem.org/mediawiki/2016/8/8b/HQ_page_logo.jpg" height="56px">
+
                         <img src="https://static.igem.org/mediawiki/2016/1/12/T--MIT--igemlogopink.svg">
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
                 <a href="https://2016.igem.org/Team:MIT">
 
                 <a href="https://2016.igem.org/Team:MIT">
 
                     <div id="team-logo" class="logo-wrapper">
 
                     <div id="team-logo" class="logo-wrapper">
−
                         <img src="https://static.igem.org/mediawiki/2016/1/18/T--MIT--2016logo_transparent.png" width="69px" height="60px">
+
                         <img src="https://static.igem.org/mediawiki/2016/9/94/T--MIT--teamlogo1.svg">
 
                     </div>
 
                     </div>
 
                 </a>
 
                 </a>
 
                 <ul>
 
                 <ul>
−
                     <li><a href="#">HOME</a></li>
+
                     <li><a href="https://2016.igem.org/Team:MIT/Description">BACKGROUND</a></li>
−
                    <li><a href="#">TEAM</a></li>
+
 
                      
 
                      
−
                     <li>PROJECT
+
                     <li>EXPERIMENTS
 
                         <div class="submenu">
 
                         <div class="submenu">
−
                             <a href="#">Experiemts Summary</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Experiments/Promoters ">Promoters</a>
−
                             <a href="#">Synthetic Promoters</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Experiments/miRNA">miRNA</a>
−
                             <a href="#">miRNA Profile</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Experiments/Recombinases  ">Recombinase</a>
−
                             <a href="#">Recombinase Latches</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Experiments/Promoters/Experiment-Details-for-Cascades">Combining parts</a>
 +
                            <a href="https://2016.igem.org/Team:MIT/Collaborations">Collaborations</a>
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
 
                      
 
                      
−
                     <li>COLLAPORATION
+
                     <li>FUTURE WORK & DESIGN
 
                         <div class="submenu">
 
                         <div class="submenu">
−
                             <a href="#">Microfluidics</a>
+
                             <a href="#">Circuit Design</a>
−
                             <a href="#">Others</a>
+
                             <a href="#">Clinical Application</a>
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
Line 244: Line 430:
 
                     <li>HUMAN PRACTICES
 
                     <li>HUMAN PRACTICES
 
                         <div class="submenu">
 
                         <div class="submenu">
−
                             <a href="#">Intergrated Practices</a>
+
                             <a href="https://2016.igem.org/Team:MIT/accessible_protocols">Accessibility</a>
−
                             <a href="#">Mammalian SynBio</a>
+
                             <a href="#">Integrated Human Practices</a>
−
                             <a href="#">Public Outreach</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Engagement">Public Outreach</a>
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>
 
                      
 
                      
 +
                    <li>TEAM
 +
                        <div class="submenu">
 +
                            <a href="https://2016.igem.org/Team:MIT/Team">Team</a>
 +
                            <a href="https://2016.igem.org/Team:MIT/Attributions">Acknowledgements</a>
 +
                        </div>
 +
                    </li>
 +
 
                     <li>NOTEBOOK
 
                     <li>NOTEBOOK
 
                         <div class="submenu">
 
                         <div class="submenu">
−
                             <a href="#">Promoters</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Notebook">Lab Notebook</a>
−
                             <a href="#">miRNA</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Basic_Part">Basic Parts</a>
−
                             <a href="#">Recombinase</a>
+
                             <a href="https://2016.igem.org/Team:MIT/Part_Collection">Parts collection</a>
 +
                            <a href="https://2016.igem.org/Team:MIT/Attributions">Attributions</a>
 +
                            <a href="https://2016.igem.org/Team:MIT/Safety">Safety</a>
 +
 
 +
 
 
                         </div>
 
                         </div>
 
                     </li>
 
                     </li>

Latest revision as of 22:34, 17 October 2016