Difference between revisions of "Template:MIT-Nav"

(Created page with "<html> <style> body { margin: 0; background-color: #f2f2f2!important; } .firstHeading, .logo_2016 { displa...")
 
(Blanked the page)
 
Line 1: Line 1:
<html>
 
<style>
 
        body {
 
            margin: 0;
 
            background-color: #f2f2f2!important;
 
        }
 
       
 
        .firstHeading, .logo_2016 {
 
            display: none;
 
        }
 
        #sideMenu{
 
            display: none;
 
        }
 
        #content {
 
            margin-left: auto;
 
            align-self: center;
 
        }
 
  
        .navdiv-wrapper {
 
            height: 40px;
 
            background: rgb(82, 81, 81);
 
        }
 
 
        .navdiv-cover {
 
            height: 40px;
 
            position: absolute;
 
            background: rgb(82, 81, 81);
 
            width: 200vw;
 
            left: -100vw;
 
 
        }
 
       
 
        #content .navdiv {
 
            float: none;
 
            margin: 0 auto;
 
            left: 0;
 
        }
 
       
 
        #content .navdiv>a {
 
            position: relative;
 
        }
 
 
        #content .navdiv ul{
 
            width: 100%;
 
            height: 40px;
 
            background: rgb(82, 81, 81);
 
            line-height: 20px;
 
            color: white;
 
            margin-right: 15px;
 
            margin-top: 40px;
 
            margin-left: 0px;
 
            text-align: center;
 
           
 
        }
 
       
 
        #content .navdiv ul li a {
 
            text-decoration: none;
 
            color: white;
 
            cursor: pointer;
 
        }
 
       
 
        #content .navdiv ul li a:hover{
 
            text-decoration: none;
 
            color: white;
 
            background: rgb(255, 128, 167);
 
            -webkit-transition: all 0.3s ease;
 
            -moz-transition: all 0.3s ease;
 
            -ms-transition: all 0.3s ease;
 
            -o-transition: all 0.3s ease;
 
            transition: all 0.3s ease;
 
        }
 
       
 
        #content .navdiv ul li{
 
            list-style-type: none;
 
            display: inline-block;
 
            position: relative;
 
            color: white;
 
            padding-bottom: 10px;
 
            padding-top: 10px;
 
            padding-left: 20px;
 
            padding-right: 20px;
 
            cursor: pointer;
 
        }
 
       
 
        #content .navdiv ul li:hover{
 
            background: rgb(255, 128, 167);
 
            color: white;
 
            -webkit-transition: all 0.3s ease;
 
            -moz-transition: all 0.3s ease;
 
            -ms-transition: all 0.3s ease;
 
            -o-transition: all 0.3s ease;
 
            transition: all 0.3s ease;
 
       
 
        }
 
       
 
        .navdiv h1{
 
            width: 300px;
 
            float: left;
 
            cursor: pointer;
 
            margin-left: 15px;
 
        }
 
       
 
        .navdiv .logo-wrapper {
 
            position: absolute;
 
            top: -30px;
 
            background: white;
 
            height: 40px;
 
            border: 10px solid rgb(82, 81, 81);;
 
            height: 100px;
 
            border-radius: 100px;
 
        }
 
       
 
        .navdiv .logo-wrapper img {
 
            height: 100px;
 
            width: 100px;
 
            padding: 0px 0px 0px 0px;
 
        }
 
 
        .navdiv .logo-wrapper#team-logo {
 
            left: -95px;
 
        }
 
       
 
        .navdiv .logo-wrapper#main-logo {
 
            left: 920px;
 
        }
 
 
        /*.navdiv .logo-wrapper#main-logo {
 
            height: 66px;
 
            left: -134px;
 
            border-width: 7px;
 
            top: -22px;
 
        }*/
 
       
 
        /*.navdiv .logo-wrapper#main-logo img {
 
            height: 56px;
 
        }*/
 
       
 
        #content .submenu {
 
            display: none;
 
            position: absolute;
 
            left: 0;
 
            top: 40px;
 
        }
 
       
 
        #content .submenu a {
 
            color: black;
 
            background: rgb(82, 81, 81);
 
            text-decoration: none;
 
            text-align: left;
 
            display: block;
 
            padding: 10px;
 
        }
 
       
 
        #content .submenu a:hover{
 
            color: white;
 
            background: rgb(160, 158, 158);
 
            border: none;
 
        }
 
       
 
        #content .navdiv ul li:hover .submenu {
 
            display: block;
 
        }
 
       
 
        /********************************* 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%
 
}
 
 
ul.header a {
 
  color: white;
 
}
 
 
ul.header a:hover {
 
  color: black;
 
}
 
 
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 */
 
.content_wrapper {
 
width: 85%;
 
margin-left:150px;
 
padding:10px 0px;
 
float:left;
 
background-color:white;
 
}
 
 
/*LAYOUT */
 
.column  {
 
padding: 10px 0px;
 
float:left;
 
background-color:white;
 
}
 
 
.full_size {
 
width:100%;
 
}
 
 
.full_size img {
 
padding: 10px 15px;
 
width:96.5%;
 
}
 
 
.half_size {
 
width: 50%;
 
}
 
.half_size img {
 
padding: 10px 15px;
 
width: 93%;
 
}
 
 
 
.clear {
 
clear:both;
 
}
 
 
.highlight {
 
width: 90%;
 
margin: auto;
 
padding: 15px 5px;
 
background-color: #f2f2f2;
 
}
 
 
.judges-will-not-evaluate {
 
border: 4px solid #72c9b6;
 
display: block;
 
margin: 5px 15px;
 
width: 95%;
 
font-weight:bold;
 
}
 
</style>
 
<!-- HTML -->
 
 
 
    <div class="navdiv-wrapper">
 
        <div class="navdiv-cover"></div>
 
            <div class="navdiv">
 
                <a href="https://2016.igem.org">
 
                    <div id="main-logo" class="logo-wrapper">
 
                        <img src="https://static.igem.org/mediawiki/2016/1/12/T--MIT--igemlogopink.svg">
 
                    </div>
 
                </a>
 
                <a href="https://2016.igem.org/Team:MIT">
 
                    <div id="team-logo" class="logo-wrapper">
 
                        <img src="https://static.igem.org/mediawiki/2016/9/94/T--MIT--teamlogo1.svg">
 
                    </div>
 
                </a>
 
                <ul>
 
                    <li><a href="https://2016.igem.org/Team:MIT/Description">BACKGROUND</a></li>
 
                   
 
                    <li><a href="https://2016.igem.org/Team:MIT/Experiments">EXPERIMENTS</a>
 
                        <div class="submenu">
 
                            <a href="https://2016.igem.org/Team:MIT/Experiments/Promoters ">Synthetic Promoters</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Experiments/miRNA">microRNA</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Experiments/Recombinases  ">Recombinase</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Proof">Proof of Concept</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Collaborations">Collaborations</a>
 
                        </div>
 
                    </li>
 
                   
 
                    <li><a href="https://2016.igem.org/Team:MIT/Diagnosis_and_Future_Implications">FUTURE WORK</a>
 
                        <div class="submenu">
 
                            <a href="https://2016.igem.org/Team:MIT/Genetic_Circuit">Circuit Design</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Clinical_Applications">Clinical Applications</a>
 
                        </div>
 
                    </li>
 
                   
 
                    <li><a href="https://2016.igem.org/Team:MIT/Human_Practices">HUMAN PRACTICES</a>
 
                        <div class="submenu">
 
                            <a href="https://2016.igem.org/Team:MIT/Mammalian_synthetic_biology_kit">Parts Toolbox</a>
 
                            <a href="https://2016.igem.org/Team:MIT/accessible_protocols">Accessible Protocols</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Integrated_Practices">Integrated Human Practices</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Engagement">Public Outreach</a>
 
                            <a href="https://2016.igem.org/Team:MIT/InterLab">Interlab Study</a>
 
                        </div>
 
                    </li>
 
                   
 
                 
 
 
                    <li><a href="https://2016.igem.org/Team:MIT/Notebook">NOTEBOOK</a>
 
                        <div class="submenu">
 
                            <a href="https://2016.igem.org/Team:MIT/Notebook">Lab Notebook</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Parts">Parts</a>
 
                            <a href="https://2016.igem.org/Team:MIT/Part_Collection">Mammalian 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>
 
                    </li>
 
                   
 
                    <li><a href="https://2016.igem.org/Team:MIT/Awards">AWARDS</a> 
 
                        <div class="submenu">
 
                          <a href="https://2016.igem.org/Team:MIT/HP/Silver">HP Silver</a>
 
                          <a href="https://2016.igem.org/Team:MIT/HP/Gold">HP Gold</a>
 
                          <a href="https://2016.igem.org/Team:MIT/Integrated_Practices">Integrated HP</a>
 
                          <a href="https://2016.igem.org/Team:MIT/Basic_Part">Basic Part</a>
 
                       
 
                       
 
                        </div></li>
 
                    <li><a href="https://2016.igem.org/Team:MIT/Team">TEAM</a>
 
                    </li>
 
                   
 
                   
 
                </ul>
 
            </div>
 
        </div>
 
</html>
 

Latest revision as of 13:05, 28 July 2017