|
|
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>
| |