|
|
Line 1: |
Line 1: |
− | <!DOCTYPE html> | + | <html> |
− | <html lang="en" dir="ltr" class="client-nojs"> | + | <head> |
− | <head> | + | <title>Theory by TEMPLATED</title> |
− | <meta charset="UTF-8" /> | + | <meta charset="utf-8" /> |
− | <title>Team:Warwick-2016.igem.org</title> | + | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| + | <link rel="stylesheet" href="https://dl.dropbox.com/s/35wa4mc39p6vytg/main.css" /> |
| + | </head> |
| + | <body> |
| + | <!-- Header --> |
| + | <header id="header"> |
| + | <div class="inner"> |
| + | <a href="https://2016.igem.org/Team:Warwick" class="logo" > |
| + | <img src="https://dl.dropbox.com/s/z381m7hq0no0qz2/Final%20logo.png" alt="IGEM WARWICK" class="logo"> |
| + | </a> |
| + | <nav id="nav"> |
| + | <a href="https://2016.igem.org/Team:Warwick">Home</a> |
| + | <a href="https://2016.igem.org/Team:Warwick/Team">Team</a> |
| + | <a href="https://2016.igem.org/Team:Warwick/Project">Project</a> |
| + | <a href="https://2016.igem.org/Team:Warwick/Parts">Parts</a> |
| + | <a href="https://2016.igem.org/Team:Warwick/Safety">Safety</a> |
| + | <a href="https://2016.igem.org/Team:Warwick/Attributions">Attributions</a> |
| + | <a href="https://2016.igem.org/Team:Warwick/Human_Practices">Human Practices</a> |
| + | <a href="https://2016.igem.org/Team:Warwick/Awards">Awards</a> |
| + | </nav> |
| + | <a href="#navPanel" class="navPanelToggle"><span class="fa fa-bars"></span></a> |
| + | </div> |
| + | </header> |
| | | |
− | <head> | + | <!-- Banner --> |
| + | <section id="banner"> |
| + | <h1>IGEM Warwick</h1> |
| + | <p>We do Science 'n Shit.</p> |
| + | </section> |
| | | |
− | <style type="text/css"> | + | <!-- One --> |
| + | <section id="one" class="wrapper"> |
| + | <div class="inner"> |
| + | <div class="flex flex-3"> |
| + | <article> |
| + | <header> |
| + | <h3>Magna tempus sed amet<br /> aliquam veroeros</h3> |
| + | </header> |
| + | <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p> |
| + | <footer> |
| + | <a href="#" class="button special">More</a> |
| + | </footer> |
| + | </article> |
| + | <article> |
| + | <header> |
| + | <h3>Interdum lorem pulvinar<br /> adipiscing vitae</h3> |
| + | </header> |
| + | <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p> |
| + | <footer> |
| + | <a href="#" class="button special">More</a> |
| + | </footer> |
| + | </article> |
| + | <article> |
| + | <header> |
| + | <h3>Libero purus magna sapien<br /> sed ullamcorper</h3> |
| + | </header> |
| + | <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu.</p> |
| + | <footer> |
| + | <a href="#" class="button special">More</a> |
| + | </footer> |
| + | </article> |
| + | </div> |
| + | </div> |
| + | </section> |
| | | |
− | #text {margin-top: 50px; z-index: 9999;}
| + | <!-- Two --> |
− | #text h2 {font-size: 25px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 15px; opacity: 0.5; }
| + | <section id="two" class="wrapper style1 special"> |
| + | <div class="inner"> |
| + | <header> |
| + | <h2>Ipsum Feugiat</h2> |
| + | <p>Semper suscipit posuere apede</p> |
| + | </header> |
| + | <div class="flex flex-4"> |
| + | <div class="box person"> |
| + | <div class="image round"> |
| + | <img src="images/pic03.jpg" alt="Person 1" /> |
| + | </div> |
| + | <h3>Magna</h3> |
| + | <p>Cipdum dolor</p> |
| + | </div> |
| + | <div class="box person"> |
| + | <div class="image round"> |
| + | <img src="images/pic04.jpg" alt="Person 2" /> |
| + | </div> |
| + | <h3>Ipsum</h3> |
| + | <p>Vestibulum comm</p> |
| + | </div> |
| + | <div class="box person"> |
| + | <div class="image round"> |
| + | <img src="images/pic05.jpg" alt="Person 3" /> |
| + | </div> |
| + | <h3>Tempus</h3> |
| + | <p>Fusce pellentes</p> |
| + | </div> |
| + | <div class="box person"> |
| + | <div class="image round"> |
| + | <img src="images/pic06.jpg" alt="Person 4" /> |
| + | </div> |
| + | <h3>Dolore</h3> |
| + | <p>Praesent placer</p> |
| + | </div> |
| + | </div> |
| + | </div> |
| + | </section> |
| | | |
− | .blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
| + | <!-- Three --> |
− | transition-duration: 1s;
| + | <section id="three" class="wrapper special"> |
− | transition-timing-function: ease; }
| + | <div class="inner"> |
| + | <header class="align-center"> |
| + | <h2>Nunc Dignissim</h2> |
| + | <p>Aliquam erat volutpat nam dui </p> |
| + | </header> |
| + | <div class="flex flex-2"> |
| + | <article> |
| + | <div class="image fit"> |
| + | <img src="images/pic01.jpg" alt="Pic 01" /> |
| + | </div> |
| + | <header> |
| + | <h3>Praesent placerat magna</h3> |
| + | </header> |
| + | <p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor lorem ipsum.</p> |
| + | <footer> |
| + | <a href="#" class="button special">More</a> |
| + | </footer> |
| + | </article> |
| + | <article> |
| + | <div class="image fit"> |
| + | <img src="images/pic02.jpg" alt="Pic 02" /> |
| + | </div> |
| + | <header> |
| + | <h3>Fusce pellentesque tempus</h3> |
| + | </header> |
| + | <p>Sed adipiscing ornare risus. Morbi est est, blandit sit amet, sagittis vel, euismod vel, velit. Pellentesque egestas sem. Suspendisse commodo ullamcorper magna non comodo sodales tempus.</p> |
| + | <footer> |
| + | <a href="#" class="button special">More</a> |
| + | </footer> |
| + | </article> |
| + | </div> |
| + | </div> |
| + | </section> |
| | | |
− | #text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block; padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
| + | <!-- Footer --> |
| + | <footer id="footer"> |
| + | <div class="inner"> |
| + | <div class="flex"> |
| + | <div class="copyright"> |
| + | © Untitled. Design: <a href="https://templated.co">TEMPLATED</a>. Images: <a href="https://unsplash.com">Unsplash</a>. |
| + | </div> |
| + | <ul class="icons"> |
| + | <li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li> |
| + | <li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li> |
| + | <li><a href="#" class="icon fa-linkedin"><span class="label">linkedIn</span></a></li> |
| + | <li><a href="#" class="icon fa-pinterest-p"><span class="label">Pinterest</span></a></li> |
| + | <li><a href="#" class="icon fa-vimeo"><span class="label">Vimeo</span></a></li> |
| + | </ul> |
| + | </div> |
| + | </div> |
| + | </footer> |
| | | |
− |
| + | <!-- Scripts --> |
− |
| + | <script src="assets/js/jquery.min.js"></script> |
− | | + | <script src="assets/js/skel.min.js"></script> |
− | /*references*/
| + | <script src="assets/js/util.js"></script> |
− | .content .tooltip {
| + | <script src="assets/js/main.js"></script> |
− | background-color: #fff;
| + | </body> |
− | border: 1px #22343C solid;
| + | </html> |
− | border-radius: 4px;
| + | |
− | padding: 3px;
| + | |
− | position: absolute;
| + | |
− | width: 300px;
| + | |
− | z-Index: 99999;
| + | |
− | display: none;
| + | |
− | letter-spacing: 1px;
| + | |
− | line-height: 1;
| + | |
− | font-size: 11px;
| + | |
− | }
| + | |
− | | + | |
− | .tooltip a {color: #22343C;}
| + | |
− | .tooltip {color: #22343C;}
| + | |
− | | + | |
− | .content {
| + | |
− | position: relative;
| + | |
− | }
| + | |
− | | + | |
− | .content {color: #d67166;}
| + | |
− | | + | |
− | /* end-of-references */
| + | |
− | | + | |
− | .bigtitle {width: 42%; margin-top: 100px; margin: 0 auto; font-size: 16px; background-image:none /*url('https://static.igem.org/mediawiki/2015/4/43/Warwick_headercircle.png')*/; text-align: center; line-height: 2;
| + | |
− | background-position: top center; background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;} | + | |
− | | + | |
− | .bigtitle a {color: #22343C; text-decoration: none;}
| + | |
− | | + | |
− | .title2 {font-family: Satisfy; font-size: 380%; text-align:center;}
| + | |
− | | + | |
− | .titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
| + | |
− | | + | |
− | .arrow {font-size: 50px;}
| + | |
− | | + | |
− | | + | |
− | #text h2 {
| + | |
− | font-size: 25px !important;
| + | |
− | text-decoration: none;
| + | |
− | border-bottom: 0px;
| + | |
− | display: block;
| + | |
− | background-color: #c97062;
| + | |
− | color: #fff;
| + | |
− | font-weight: bold;
| + | |
− | border-radius: 4px;
| + | |
− | padding: 10px;
| + | |
− | opacity: 0.5;
| + | |
− | line-height: 1.4;
| + | |
− | }
| + | |
− | | + | |
− | a {
| + | |
− | color:#473E4F;
| + | |
− | -webkit-transition: color ease-in-out 300ms;
| + | |
− | }
| + | |
− | | + | |
− | a:hover
| + | |
− | {color: #70C4BB;
| + | |
− | text-decoration:none;
| + | |
− | -webkit-transition: color ease-in-out 300ms;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | a:visited {
| + | |
− | color:#473E4F;
| + | |
− | text-decoration:none;
| + | |
− | -webkit-transition: color ease-in-out 300ms;
| + | |
− | }
| + | |
− | | + | |
− | #bodyContent {
| + | |
− | background-color:#F8FFFF;
| + | |
− | }
| + | |
− | | + | |
− | @media (max-width:400px){
| + | |
− | p {text-align:justify;};
| + | |
− | h3 {font-size:10px;};
| + | |
− | }
| + | |
− | | + | |
− | /* wiki width fixing */
| + | |
− | #contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
| + | |
− | display:none;}
| + | |
− | #top-section {
| + | |
− | border: none;
| + | |
− | height: 0px;}
| + | |
− | | + | |
− | #p-logo, h1.firstHeading,#search-controls,#catlinks {display:none;}
| + | |
− | #footer #f-list {margin-top:0;}
| + | |
− | #top-section,#footer-box{margin:0;padding:0;width:100%;height:0;}
| + | |
− | #contentSub {margin: 0;}
| + | |
− | | + | |
− | #globalWrapper, #content {
| + | |
− | width: 100% !important;
| + | |
− | height: 100%;
| + | |
− | border: 0;
| + | |
− | background-color: F8FFFF;
| + | |
− | margin: 0;
| + | |
− | padding: 0 !important;
| + | |
− | padding-bottom: 0 !important;
| + | |
− | top:0;
| + | |
− | line-height: 1;
| + | |
− | position: absolute;
| + | |
− | }
| + | |
− | | + | |
− | #bodyContent {top: 0px;
| + | |
− | position: absolute;
| + | |
− | height: auto;
| + | |
− | min-height: 100%;
| + | |
− | margin: 0 auto;
| + | |
− | padding: 0;
| + | |
− | overflow-y: scroll;
| + | |
− | overflow-x: hidden;
| + | |
− | margin-left:-500px ;}
| + | |
− | | + | |
− | html, body, #container {
| + | |
− | top: 0px;
| + | |
− | width:100%;
| + | |
− | height: auto;
| + | |
− | overflow-x: hidden;
| + | |
− | background: none !important;
| + | |
− | }
| + | |
− | | + | |
− | .buttonblack {
| + | |
− | | + | |
− | margin-bottom: 10px;
| + | |
− | margin-top: 10px;
| + | |
− |
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .intro-buttons {
| + | |
− | padding-top: 20px; color: #FFFFFF;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | .intro-buttons a { color: #FFFFFF; text-decoration: none;}
| + | |
− | | + | |
− | | + | |
− |
| + | |
− |
| + | |
− | #header2:before
| + | |
− | {
| + | |
− | content: "";
| + | |
− |
| + | |
− |
| + | |
− | position: fixed;
| + | |
− | top: 0;
| + | |
− | left: 0;
| + | |
− | bottom: 0;
| + | |
− | margin: 0;
| + | |
− | padding: 0;
| + | |
− | width: 100%;
| + | |
− | height: 100%;
| + | |
− | overflow: hidden;
| + | |
− | display: block;
| + | |
− | border: none;
| + | |
− | | + | |
− | }
| + | |
− |
| + | |
− |
| + | |
− |
| + | |
− | | + | |
− | | + | |
− | .back {text-align: center; top: 15%; position: relative;}
| + | |
− | .back img {padding-left: 10px; padding-right: 10px; padding-bottom: 7px;}
| + | |
− | .back a {color: #2a2133; font-size: 16px; font-family: Raleway; letter-spacing: 1.5px; }
| + | |
− | .back a:hover {color: #493c54; -webkit-transition: color ease-in-out 400ms;}
| + | |
− | | + | |
− |
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | @media screen and (max-width: 960px) {
| + | |
− | #abstracttext p { line-height: 2; font-size: 13px; text-indent: 50px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | #abstract h2 {font-size: 20px;}
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | .mailus {background: #F0F0F5; padding: 5px;}
| + | |
− | | + | |
− | /*menu*/
| + | |
− | | + | |
− | .mainmenu {
| + | |
− | position: fixed;
| + | |
− | top: 0;
| + | |
− | left: 0;
| + | |
− | z-index: 99999;
| + | |
− | width: 100%;
| + | |
− | height: 100px;
| + | |
− | font-size: 20px;
| + | |
− | background-color: #fff;
| + | |
− | box-shadow: 0px -6px 22px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | #hidden-menu {
| + | |
− | margin-left:85%;
| + | |
− | display: none;}
| + | |
− | | + | |
− | #hidden-menu:hover ul{
| + | |
− | height:auto;
| + | |
− | width:auto;
| + | |
− | z-index:99999999;
| + | |
− | display: block;
| + | |
− | }
| + | |
− | | + | |
− | #hidden-menu ul li {
| + | |
− | background-color: #70C4BB;
| + | |
− | text-align: center;
| + | |
− | display: block;
| + | |
− | margin:none;
| + | |
− | padding-left:20px;
| + | |
− | padding-right:20px;
| + | |
− | padding-top:8px;
| + | |
− | padding-bottom:8px;
| + | |
− | box-shadow:1.5px 1.5px lightgrey;
| + | |
− | border-radius:4px;
| + | |
− | opacity:0.9;
| + | |
− | z-index:99999999;
| + | |
− | }
| + | |
− | | + | |
− | #hidden-menu ul {
| + | |
− | position:fixed;
| + | |
− | padding-top:60px;
| + | |
− | right: 0px;
| + | |
− | padding-right: 50px;
| + | |
− | display: none;
| + | |
− | }
| + | |
− | | + | |
− | #hidden-menu ul li a {
| + | |
− | color: #fff; font-size: 23px;
| + | |
− | }
| + | |
− | | + | |
− | #hidden-menu ul li a:hover {
| + | |
− | color: #787172
| + | |
− | }
| + | |
− | | + | |
− | #hidden-menu a {
| + | |
− | color: #473E4F; text-decoration: none; font-family: Raleway;
| + | |
− | }
| + | |
− | | + | |
− | #hidden-menu a:hover {color: #70C4BB;
| + | |
− | -webkit-transition: color ease-in-out 150ms;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | #mobilebutton {
| + | |
− | height:50px;
| + | |
− | width:50px;
| + | |
− | top:0;
| + | |
− | right:0px;
| + | |
− | margin-top: 17px;
| + | |
− | position:fixed;
| + | |
− | opacity:0.9;
| + | |
− | z-index:999999999;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | #igemlogo {
| + | |
− | position:fixed;
| + | |
− | top:30px;
| + | |
− | left: 10px; float:left;
| + | |
− | z-index:99999;
| + | |
− | }
| + | |
− | | + | |
− | .menu-items {display: inline-block;
| + | |
− | width: 100%;
| + | |
− | text-align: right;
| + | |
− | position:fixed;
| + | |
− | top: 20px;
| + | |
− | z-index:99998;
| + | |
− | right: 0;
| + | |
− | padding-right: 53px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | .menu-items li {
| + | |
− | display: inline-block;
| + | |
− | margin-right: 20px;
| + | |
− | margin-left: 10px;
| + | |
− | margin-top: 0px;
| + | |
− | letter-spacing: 3px;
| + | |
− | height: 30px;
| + | |
− | text-transform: uppercase;
| + | |
− | font-size: 12px;
| + | |
− | font-weight: bold;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | .menu-items li:hover ul, .menu-items li.hover ul{
| + | |
− | padding-left: 0;
| + | |
− | visibility: visible;
| + | |
− | opacity: 1;
| + | |
− | transition: opacity 1s ease-in 0s, visibility 0s linear 0s;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | .menu-items li ul {
| + | |
− | visibility: hidden;
| + | |
− | opacity: 0;
| + | |
− | transition: opacity 0.5s ease-in 0s, visibility 0s linear 0.5s;
| + | |
− | position: absolute;
| + | |
− | top: 10px;
| + | |
− | margin-right: 0px;
| + | |
− | margin-left: 0px;
| + | |
− | padding: 0;
| + | |
− | text-align: left;
| + | |
− | }
| + | |
− | | + | |
− | .menu-items li ul a{list-style-type:none;}
| + | |
− | | + | |
− | | + | |
− | .menu-items li ul li{
| + | |
− | text-align: left;
| + | |
− | padding: 2px 0px;
| + | |
− | width: auto;
| + | |
− | display:block;
| + | |
− | height: 8px;
| + | |
− | margin: 0px;
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | .menu-items li ul li a {
| + | |
− | color: #22343C;
| + | |
− | font-size: 9px;
| + | |
− | }
| + | |
− | | + | |
− | .menu-items li ul li a:hover {
| + | |
− | color: #FE6C68;
| + | |
− | }
| + | |
− | | + | |
− | .menu-items a {
| + | |
− | color: #22343C;
| + | |
− | text-decoration: none;
| + | |
− | font-family: Raleway;
| + | |
− | }
| + | |
− | | + | |
− | .menu-items a:hover {color: #70C4BB;
| + | |
− | -webkit-transition: color ease-in-out 150ms;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | .buttonblack {
| + | |
− | margin-bottom: 10px;
| + | |
− | margin-top: 10px;
| + | |
− | text-transform: uppercase;
| + | |
− | font-size: 14px;
| + | |
− | font-weight: normal;
| + | |
− | line-height: 1.428571429;
| + | |
− | text-align: center;
| + | |
− | white-space: nowrap;
| + | |
− | vertical-align: middle;
| + | |
− | border-radius: 4px;
| + | |
− | transition-property: background-color, color, border-color;
| + | |
− | transition-duration: 1s;
| + | |
− | transition-timing-function: ease;
| + | |
− | color: #FFFFFF;
| + | |
− | border: solid 5px #336666;
| + | |
− | padding: 10px 16px;
| + | |
− | text-decoration: none;
| + | |
− | width:180px; background-color: #336666;
| + | |
− | font-family: Raleway;
| + | |
− | letter-spacing: 2px;
| + | |
− | font-weight: bold;}
| + | |
− | | + | |
− | | + | |
− | .buttonblack:hover {border-color: #fff; color: #fff; background: none;}
| + | |
− | .buttongreen:hover {border-color: #019966; color: #019966; background: none;}
| + | |
− | | + | |
− | .buttongreen { margin-bottom: 10px;
| + | |
− | margin-top: 20px;
| + | |
− | text-transform: uppercase;
| + | |
− | font-size: 14px;
| + | |
− | font-weight: normal;
| + | |
− | line-height: 1.428571429;
| + | |
− | text-align: center;
| + | |
− | white-space: nowrap;
| + | |
− | vertical-align: middle;
| + | |
− | border-radius: 4px;
| + | |
− | transition-property: background-color, color, border-color;
| + | |
− | transition-duration: 1s;
| + | |
− | transition-timing-function: ease;
| + | |
− | color: #FFFFFF;
| + | |
− | border: solid 5px #019966;
| + | |
− | padding: 10px 16px;
| + | |
− | text-decoration: none;
| + | |
− | width:180px; background-color: #019966;
| + | |
− | font-family: Raleway;
| + | |
− | letter-spacing: 2px;
| + | |
− | font-weight: bold;}
| + | |
− | | + | |
− | a.buttongreen {text-decoration: none; color: #fff;}
| + | |
− | | + | |
− | .igemlogoo {width: 65px;}
| + | |
− | | + | |
− | | + | |
− | /*media*/
| + | |
− | | + | |
− | @media(max-width:1280px){
| + | |
− | .menu-items {padding-right: 53px;}
| + | |
− | .menu-items li {margin-right: 12px; margin-left: 12px; letter-spacing: 3px;}
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width:1152px){
| + | |
− | .menu-items li {margin-right: 12px; margin-left: 9px; letter-spacing: 2.8px;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width:1024px){
| + | |
− | .menu-items li {
| + | |
− | margin-right: 9px;
| + | |
− | letter-spacing: 2.4px; }
| + | |
− | .menu-items ul li ul a {font-size: 10px; letter-spacing: 1.9px;}
| + | |
− | .igemlogoo {width: 50px;}
| + | |
− | #bodyContent {margin-left: -60px; width: calc(100% + 32px);}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | @media(max-width:960px){
| + | |
− | .menu-items li {
| + | |
− | margin-right: 9px;
| + | |
− | font-size: 10px;
| + | |
− | letter-spacing: 2.4px;
| + | |
− | }
| + | |
− | | + | |
− | .menu-items ul li ul a {font-size: 9px; letter-spacing: 1.9px;}
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width:900px){
| + | |
− | | + | |
− | | + | |
− | | + | |
− | .menu-items li {
| + | |
− | margin-right: 9px;
| + | |
− | margin-left: 0px;
| + | |
− | font-size: 10px;
| + | |
− | letter-spacing: 2.4px;
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | .menu-items ul li ul a {font-size: 9px; letter-spacing: 1.9px;}
| + | |
− | | + | |
− | .menu-items li ul li {height: 6px;}
| + | |
− | | + | |
− | .mainmenu {height: 90px; }
| + | |
− | | + | |
− | | + | |
− | .menu-items li ul {top: 20px;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | @media(max-width:830px){
| + | |
− | | + | |
− | .igemlogoo {width: 40px; opacity: 0.7;}
| + | |
− | | + | |
− | #igemlogo {top: 40px; z-index: -1;}
| + | |
− | #Warwickigemlogo {display: none;}
| + | |
− | | + | |
− | .menu-items ul li ul a {letter-spacing: 1.4px;}
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width: 768px){
| + | |
− | | + | |
− | | + | |
− | .menu-items li {
| + | |
− | letter-spacing: 2px;
| + | |
− | font-size: 10px;
| + | |
− | margin-right: 3px;
| + | |
− | margin-left: 3px;
| + | |
− | margin-top: 6px;
| + | |
− | text-align: center;
| + | |
− | }
| + | |
− | .menu-items ul {text-align: center; padding: 0; margin: 0 2px; list-style:none;}
| + | |
− | | + | |
− | .menu-items {text-align: center; padding-left: 0px; margin: 0 auto;}
| + | |
− | .menu-items li ul {position: absolute; left: 0; width: 100%; text-align: center; margin-top: 20px; }
| + | |
− | | + | |
− | .menu-items li ul li {display: inline-block; margin-left: 10px; margin-right: 10px; height: 34px; }
| + | |
− | .menu-items ul li ul a { font-size: 10px; letter-spacing: 2px;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | @media(max-width: 740px){
| + | |
− | | + | |
− | .menu-items li {
| + | |
− | letter-spacing: 1.6px;
| + | |
− | font-size: 10px;
| + | |
− | margin-right: 3px;
| + | |
− | margin-top: 6px;
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width: 680px){
| + | |
− | | + | |
− | .menu-items li {
| + | |
− | letter-spacing: 1.8px;
| + | |
− | font-size: 9px;
| + | |
− | margin-right: 3px;
| + | |
− | margin-left: 3px;
| + | |
− | margin-top: 8px;
| + | |
− | }
| + | |
− | | + | |
− | .menu-items li ul { margin-top: 20px;}
| + | |
− | | + | |
− | .menu-items li ul li {margin-right: 6px;
| + | |
− | margin-left: 6px;}
| + | |
− | | + | |
− | .menu-items ul li ul a { font-size: 9px; letter-spacing: 1.8px;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | @media(max-width: 640px){
| + | |
− | .mainmenu, .mainmenu ul, .mainmenu ul li {visibility: hidden;}
| + | |
− | #hidden-menu {display: block; z-index: 999999;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− |
| + | |
− | | + | |
− | @media(max-width:1280px){
| + | |
− | | + | |
− | .bigtitle {font-size: 15px;}
| + | |
− | .bigtitle {width: 50%;}
| + | |
− | .buttonblack {padding: 5px 11px;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width:1152px){
| + | |
− | | + | |
− | .bigtitle {font-size: 14px;}
| + | |
− | .bigtitle {width: 52%;}
| + | |
− | .titlecircle {width: 80%;}
| + | |
− | a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
| + | |
− | .buttonblack {padding: 5px 8px;}
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width:1024px){
| + | |
− | .bigtitle {width: 58%;}
| + | |
− | .titlecircle {padding-top: 15%; width: 75%;}
| + | |
− | #wrapper {top: 100px;}
| + | |
− | a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
| + | |
− | #header2:before {background-image: none;}
| + | |
− | #mobilebackground {display: block;}
| + | |
− | .constructs {font-size: 15px;}
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | @media(max-width:960px){
| + | |
− | | + | |
− | .bigtitle {font-size: 13px; width: 65%;}
| + | |
− | .arrow {font-size: 40px;}
| + | |
− | .buttonblack {padding: 5px 5px;}
| + | |
− | #submenu {width: 110%; margin-left: -5%;}
| + | |
− | .constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
| + | |
− | .constructs {text-align: center;}
| + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width:910px){
| + | |
− | }
| + | |
− | | + | |
− | @media(max-width:850px){
| + | |
− | a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
| + | |
− | .buttonblack {padding: 4px 3px;}
| + | |
− | #submenu {width: 112%; margin-left: -6%;}
| + | |
− | .constructs img {min-width: 80% !important;}
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | @media(max-width: 768px){
| + | |
− | .bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
| + | |
− | .bigtitle p { font-size: 13px; margin-top: 10px !important;}
| + | |
− | .titlecircle {width: 70%; padding-top: 8%;}
| + | |
− | a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
| + | |
− | #submenu {width: 80%; margin: 0 auto;}
| + | |
− | .buttonblack {line-height: 3.8;}
| + | |
− | a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
| + | |
− | .buttonblack {padding: 5px 8px;}
| + | |
− | .citecryan {margin-left: 50px;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | @media(max-width:680px){
| + | |
− | #wrapper {width: 100%;}
| + | |
− | #text {margin: 50px 25px 0 25px;}
| + | |
− | #text h4 {font-size: 13px;}
| + | |
− | .constructs {font-size: 13px;}
| + | |
− | .bigtitle p { font-size: 13px; }
| + | |
− | .titlecircle {width: 60%;}
| + | |
− | #submenu {width: 70%; margin: 0 auto;}
| + | |
− | .buttonblack {line-height: 3.8;}
| + | |
− | a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
| + | |
− | .buttonblack {padding: 5px 8px;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | @media(max-width:640px){
| + | |
− | .arrow {font-size: 30px;}
| + | |
− | .titlecircle {width: 60%;}
| + | |
− | #submenu {width: 80%; margin: 0 auto;}
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | | + | |
− | @media(max-width:530px){
| + | |
− | a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
| + | |
− | .bigtitle {background-image:none;}
| + | |
− | .titlecircle {width: 60%;}
| + | |
− | .title2 {font-size: 320%;}
| + | |
− | #text h4 {line-height: 1.7;}
| + | |
− | .citecryan {margin-left: 10px;}
| + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | @media(max-width: 480px) {
| + | |
− | .bigtitle p { font-size: 13px; text-align: center;}
| + | |
− | .titlecircle {width: 70%;}
| + | |
− | #submenu {width: 90%; margin: 0 auto;}
| + | |
− | | + | |
− | | + | |
− | | + | |
− | }
| + | |
− | | + | |
− | @media(max-width: 410px) {
| + | |
− | .titlecircle {width: 75%;}
| + | |
− | .title2 {font-size: 300%;}
| + | |
− | .bigtitle p {line-height: 1.5 !important;}
| + | |
− | }
| + | |
− | | + | |
− | @media(max-width: 380px) {
| + | |
− | .titlecircle {width: 75%; padding-top: 10%;}
| + | |
− | .bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
| + | |
− | .title2 {font-size: 260%;}
| + | |
− | | + | |
− | }
| + | |
− | | + | |
− | | + | |
− | @media(max-width: 360px) {
| + | |
− | .titlecircle {width: 80%;}
| + | |
− | .title2 {font-size: 240%;}
| + | |
− | .buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
| + | |
− | }
| + | |
− | </style>
| + | |
− | | + | |
− | | + | |
− | </head> | + | |
− | | + | |
− | <body>
| + | |
− | | + | |
− | <div style="clear: both;"></div>
| + | |
− | <nav class="mainmenu">
| + | |
− | <div id="menu" class="menu">
| + | |
− |
| + | |
− | <div class="menu-items">
| + | |
− | <div id="igemlogo">
| + | |
− | <a href="https://2016.igem.org"><img src="https://static.igem.org/mediawiki/2015/7/72/UPOSevillaIgemLogoGrey.png" class="igemlogoo"></a></div>
| + | |
− | | + | |
− | <div id="igemlogo2">
| + | |
− | <a href="https://2016.igem.org/Team:Warwick"><img src="https://static.igem.org/mediawiki/2016/2/26/T--Warwick--FinalLogo_and_.jpg " class="igemlogoo" style="float:left;position:fixed;left:90px;top:25px;"> </a>
| + | |
− | </div> | + | |
− | | + | |
− |
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Description">Project</a>
| + | |
− | | + | |
− |
| + | |
− | | + | |
− | | + | |
− |
| + | |
− | <li><a href="#">Lab work</a> | + | |
− | <ul>
| + | |
− | | + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Effectors"> ● Experiments & Protocols</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Sensors"> ● Lab book</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Safety"> ● Biosafety</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Design"> ● Problems Encountered</a></li> | + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Fermentation"> ● Trouble-shooting</a></li>
| + | |
− | | + | |
− | | + | |
− | </ul>
| + | |
− | </li>
| + | |
− |
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/HumanAspects">Human Aspects</a>
| + | |
− |
| + | |
− | </li>
| + | |
− |
| + | |
− |
| + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− | | + | |
− |
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Teamintroduction">Team Introduction</a></li>
| + | |
− | | + | |
− | | + | |
− | <li><a href="#">Process</a><ul>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Interlabstudy"> ● InterLab Study</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Collaborations"> ● Collaborations</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Notebook"> ● Notebook</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Modelling"> ● Modelling</a></li>
| + | |
− | | + | |
− | | + | |
− | </ul>
| + | |
− | </li>
| + | |
− | | + | |
− | <li><a href="#">Outcomes</a><ul>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Software">● Software</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Bactoman">● Public engagemnt</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Parts"> ● Parts</a></li>
| + | |
− | | + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Achievements"> ● Achievements</a></li>
| + | |
− | | + | |
− | </ul></li>
| + | |
− | | + | |
− | | + | |
− | <li><a href="#">People</a>
| + | |
− | <ul>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Education"> ● Education</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Sponsors">● Sponsors</a></li>
| + | |
− | <li><a href="https://2016.igem.org/Team:Warwick/Attributions">● Attributions</a></li>
| + | |
− | </ul>
| + | |
− | </li>
| + | |
− | | + | |
− | </ul>
| + | |