(Created page with "<html> <head> <link rel="stylesheet" href="styles.css"> <style> .footer-distributed{ background-color: #595775; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: bo...") |
|||
(4 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | |||
<html> | <html> | ||
<head> <link rel="stylesheet" href="styles.css"> | <head> <link rel="stylesheet" href="styles.css"> | ||
Line 16: | Line 17: | ||
.footer-distributed .footer-left p{ | .footer-distributed .footer-left p{ | ||
color: #595775; | color: #595775; | ||
− | font-size: | + | font-size: 14px; |
+ | margin: 0; | ||
+ | } | ||
+ | |||
+ | /* Footer links */ | ||
+ | |||
+ | .footer-distributed p.footer-links{ | ||
+ | font-size:18px; | ||
+ | font-weight: bold; | ||
+ | color: #f1e0d6; | ||
+ | margin: 0 0 10px; | ||
+ | padding: 0; | ||
+ | } | ||
+ | |||
+ | .footer-distributed p.footer-links a{ | ||
+ | display:inline-block; | ||
+ | line-height: 1.8; | ||
+ | text-decoration: none; | ||
+ | color: inherit; | ||
+ | } | ||
+ | |||
+ | .footer-distributed .footer-right{ | ||
+ | float: right; | ||
+ | margin-top: 6px; | ||
+ | max-width: 180px; | ||
+ | } | ||
+ | |||
+ | .footer-distributed .footer-right a{ | ||
+ | display: inline-block; | ||
+ | width: 35px; | ||
+ | height: 35px; | ||
+ | background-color: #595775; | ||
+ | border-radius: 2px; | ||
+ | |||
+ | font-size: 20px; | ||
+ | color: #ffffff; | ||
+ | text-align: center; | ||
+ | line-height: 35px; | ||
+ | |||
+ | margin-left: 3px; | ||
+ | } | ||
+ | |||
+ | /* If you don't want the footer to be responsive, remove these media queries */ | ||
+ | |||
+ | @media (max-width: 600px) { | ||
+ | |||
+ | .footer-distributed .footer-left, | ||
+ | .footer-distributed .footer-right{ | ||
+ | text-align: center; | ||
+ | } | ||
+ | |||
+ | .footer-distributed .footer-right{ | ||
+ | float: none; | ||
+ | margin: 0 auto 20px; | ||
+ | } | ||
+ | |||
+ | .footer-distributed .footer-left p.footer-links{ | ||
+ | line-height: 1.8; | ||
+ | } | ||
+ | } | ||
+ | </style> | ||
+ | <style> | ||
+ | h1.abs { white-space : 100px;} | ||
+ | </style> | ||
+ | <script> | ||
+ | var parent = document.getElementById("top_title"); | ||
+ | var child = document.getElementById("firstHeading"); | ||
+ | |||
+ | parent.removeChild(child); | ||
+ | </script> | ||
+ | <style> | ||
+ | div.logo_2018 { | ||
+ | display:none; | ||
+ | } | ||
+ | </style> | ||
+ | </head> | ||
+ | <body> | ||
+ | |||
+ | |||
+ | <style> html, body { | ||
+ | height: 100%; | ||
+ | } | ||
+ | |||
+ | html { | ||
+ | display: table; | ||
+ | margin: auto; | ||
+ | } | ||
+ | |||
+ | body { | ||
+ | display: table-cell; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | </style> | ||
+ | <div class="navcont" align= "middle"> | ||
+ | <div class="nav" align= "middle"> | ||
+ | <a href="#"><img class ="logo" src="https://image.ibb.co/iNOCPy/Slide1.jpg" alt="Slide1" border="0" height="62px" hspace="20px"></a> | ||
+ | <ul> | ||
+ | <li><a href="https://2018.igem.org/Team:LACAS_BioBots">HOME</a></li> | ||
+ | <li class="drop"> | ||
+ | <a href="https://2018.igem.org/Team:LACAS_BioBots/about">ABOUT</a> | ||
+ | |||
+ | <div class="dropdownContain"> | ||
+ | <div class="dropOut"> | ||
+ | |||
+ | <ul> | ||
+ | <li>Team</li> | ||
+ | <li>Project</li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | </li> | ||
+ | <li><a href="https://2018.igem.org/Team:LACAS_BioBots/InterLab">INTERLAB</a></li> | ||
+ | |||
+ | <li class="drop"> | ||
+ | <a href="https://2018.igem.org/Team:LACAS_BioBots/Attributions">ATTRIBUTIONS</a> | ||
+ | |||
+ | |||
+ | </li> | ||
+ | <li><a href="https://2018.igem.org/Team:LACAS_BioBots/Human_Practices">HUMAN PRACTICES</a></li> | ||
+ | <li><a href="https://2018.igem.org/Team:LACAS_BioBots/Project">PROJECT</a></li> | ||
+ | |||
+ | </ul> | ||
+ | </div> | ||
+ | </div> | ||
+ | <style> /*Basic style*/ | ||
+ | body { | ||
+ | font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif; | ||
+ | background-color: #583e2e; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | color: #000; | ||
+ | } | ||
+ | |||
+ | img.logo { float:left;} | ||
+ | ul, ol, dl { | ||
+ | padding: 0; | ||
+ | margin: 0; | ||
+ | } | ||
+ | h1, h2, h3, h4, h5, h6, p { | ||
+ | margin-top: 0; | ||
+ | padding-right: 15px; | ||
+ | padding-left: 15px; | ||
+ | } | ||
+ | a img { | ||
+ | border: none; | ||
+ | } | ||
+ | a:link { | ||
+ | color: #000; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a:visited { | ||
+ | color: #000; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | a:hover, a:active, a:focus { | ||
+ | text-decoration: none; | ||
+ | color:#09F; | ||
+ | } | ||
+ | |||
+ | .container { | ||
+ | width: 960px; | ||
+ | background-color: #FFF; | ||
+ | margin: 0 auto; | ||
+ | } | ||
+ | |||
+ | |||
+ | .content { | ||
+ | |||
+ | padding: 10px 0; | ||
+ | } | ||
+ | |||
+ | .fltrt { | ||
+ | float: right; | ||
+ | margin-left: 8px; | ||
+ | } | ||
+ | .fltlft { | ||
+ | float: left; | ||
+ | margin-right: 8px; | ||
+ | } | ||
+ | .clearfloat { | ||
+ | clear:both; | ||
+ | height:0; | ||
+ | font-size: 1px; | ||
+ | line-height: 0px; | ||
+ | } | ||
+ | /*Basic style*/ | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | /*menu style*/ | ||
+ | .navcont{ | ||
+ | width:955px; | ||
+ | margin: 50 auto; | ||
+ | background:#fff; | ||
+ | height:65px; | ||
+ | } | ||
+ | |||
+ | .nav { | ||
+ | height: 65px; | ||
+ | background: #595775 url(http://i50.tinypic.com/bj0nm.png) center bottom no-repeat; | ||
+ | padding-bottom: 5px; | ||
+ | margin-bottom: 23px; | ||
+ | } | ||
+ | |||
+ | .nav ul { | ||
+ | margin:0; | ||
+ | box-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.4); | ||
+ | -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.2); | ||
+ | |||
+ | } | ||
+ | |||
+ | .nav ul li { | ||
+ | font: 13px Verdana, 'Lucida Grande'; | ||
+ | cursor: pointer; | ||
+ | -webkit-transition: padding .05s linear; | ||
+ | -moz-transition: padding .05s linear; | ||
+ | -ms-transition: padding .05s linear; | ||
+ | -o-transition: padding .05s linear; | ||
+ | transition: padding .05s linear; | ||
+ | background: transparent url(http://i46.tinypic.com/21c5h93.png) left center no-repeat; | ||
+ | } | ||
+ | .nav li:first-child | ||
+ | { | ||
+ | background:none; | ||
+ | } | ||
+ | .nav ul li.drop { | ||
+ | position: relative; | ||
+ | } | ||
+ | .nav ul > li { | ||
+ | display: inline-block; | ||
+ | } | ||
+ | .nav ul li a { | ||
+ | line-height: 65px; | ||
+ | padding: 0 20px; | ||
+ | height: 65px; | ||
+ | color: #bf988f; | ||
+ | } | ||
+ | .nav ul li a:hover { | ||
+ | color:#09F; | ||
+ | } | ||
+ | |||
+ | .dropOut .triangle { | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | position: absolute; | ||
+ | border-left: 8px solid transparent; | ||
+ | border-right: 8px solid transparent; | ||
+ | border-bottom: 8px solid white; | ||
+ | top: -8px; | ||
+ | left: 50%; | ||
+ | margin-left: -8px; | ||
+ | } | ||
+ | .dropdownContain { | ||
+ | width: 200px; | ||
+ | position: absolute; | ||
+ | z-index: 2; | ||
+ | left: 60%; | ||
+ | margin-left: -100px; /* half of width */ | ||
+ | top: -400px; | ||
+ | } | ||
+ | .dropOut { | ||
+ | width: 200px; | ||
+ | background: white; | ||
+ | float: left; | ||
+ | position: relative; | ||
+ | margin-top: 0px; | ||
+ | opacity: 0; | ||
+ | -webkit-box-shadow: 0 1px 6px rgba(0,0,0,.15); | ||
+ | -moz-box-shadow: 0 1px 6px rgba(0,0,0,.15); | ||
+ | box-shadow: 0 1px 6px rgba(0,0,0,.15); | ||
+ | -webkit-transition: all .2s ease-out; | ||
+ | -moz-transition: all .2s ease-out; | ||
+ | -ms-transition: all .2s ease-out; | ||
+ | -o-transition: all .2s ease-out; | ||
+ | transition: all .2s ease-out; | ||
+ | } | ||
+ | |||
+ | .dropOut ul { | ||
+ | float: left; | ||
+ | padding: 0 0; | ||
+ | } | ||
+ | .dropOut ul li { | ||
+ | text-align: left; | ||
+ | background: transparent url(http://i50.tinypic.com/303efm1.png) center top repeat-x; | ||
+ | float: left; | ||
+ | width: 155px; | ||
+ | padding: 12px 0 10px 15px; | ||
+ | margin: 0px 15px; | ||
+ | color: #777; | ||
+ | } | ||
+ | .dropOut li:first-child | ||
+ | { | ||
+ | background:none; | ||
+ | } | ||
+ | |||
+ | .dropOut ul li:hover { | ||
+ | color:#09F; | ||
+ | -webkit-transition: all 200ms ease-in; | ||
+ | -o-transition: all 200ms ease-in; | ||
+ | -moz-transition: all 200ms ease-in; | ||
+ | } | ||
+ | |||
+ | ul li:hover a { color:#09F; | ||
+ | -webkit-transition: all 200ms ease-in; | ||
+ | -o-transition: all 200ms ease-in; | ||
+ | -moz-transition: all 200ms ease-in; | ||
+ | } | ||
+ | ul li:hover .dropdownContain { top: 65px; } | ||
+ | |||
+ | ul li:hover .dropOut { opacity: 1; margin-top: 8px; } | ||
+ | /*menu style*/</style> | ||
+ | |||
+ | <br> | ||
+ | <h2>IDEA </h2> | ||
+ | <p>Nacre, or the mother of pearl is a substance that has many potential applications in the coating industry, due to its tensile properties, and the medical industry, as bone grafts due to osteogenic ability. Nacre is formed in Molluscs and is commonly known to us as pearls. Our project isolated 3 major proteins out of the more than 20 proteins actually involved in nacre formation. Our idea was to use E.coli to produce these proteins, and incorporate them into a synthetic nacre-like substance. </p> | ||
+ | <br> <br> | ||
+ | <h3> Main Proteins </3> | ||
+ | <li> dermatopontin </li> | ||
+ | <li> nacrein </li> | ||
+ | <li> mrnp49 </li> | ||
+ | <br> | ||
+ | <h3> Approaches </h3> | ||
+ | <li> Ureolytic bacteria induced Calcium Carbonate precipitation, incorporated with nacre proteins. </li> | ||
+ | <li> pressure induced calcium carbonate nanocrystals formation and incorporated with nacre </li> | ||
+ | <li> simple crystallization of calcium carbonate with proteins in solution </li> | ||
+ | <br> <br> <br> | ||
+ | |||
+ | <footer class="footer-distributed"> | ||
+ | |||
+ | <div class="footer-right"> | ||
+ | |||
+ | <a href="#"><i class="fa fa-facebook"></i></a> | ||
+ | <a href="#"><i class="fa fa-twitter"></i></a> | ||
+ | |||
+ | </div> | ||
+ | |||
+ | <div class="footer-left"> | ||
+ | |||
+ | <p class="footer-links"> | ||
+ | <a href="#">Home</a> | ||
+ | · | ||
+ | <a href="#">About</a> | ||
+ | · | ||
+ | <a href="#">Safety</a> | ||
+ | · | ||
+ | <a href="#">Projects</a> | ||
+ | · | ||
+ | <a href="https://2018.igem.org/Team:LACAS_BioBots/Attributions">Attributions</a> | ||
+ | · | ||
+ | <a href="#">Human Practices</a> | ||
+ | </p> | ||
+ | |||
+ | <p> iGEM LAHORE | LACAS Biobots © 2018</p> | ||
+ | </div> | ||
+ | |||
+ | </footer> | ||
+ | |||
+ | </body> | ||
+ | |||
+ | </html> |
Latest revision as of 15:43, 17 October 2018
IDEA
Nacre, or the mother of pearl is a substance that has many potential applications in the coating industry, due to its tensile properties, and the medical industry, as bone grafts due to osteogenic ability. Nacre is formed in Molluscs and is commonly known to us as pearls. Our project isolated 3 major proteins out of the more than 20 proteins actually involved in nacre formation. Our idea was to use E.coli to produce these proteins, and incorporate them into a synthetic nacre-like substance.