(23 intermediate revisions by 3 users not shown) | |||
Line 1: | Line 1: | ||
+ | {{BU17_template_global}} | ||
{{BU17_template_menubar}} | {{BU17_template_menubar}} | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> | ||
+ | <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet"> | ||
<style> | <style> | ||
− | . | + | #top_menu_inside ul li > a { /* RECOLORS IGEM MENU */ |
− | + | color: #a9a9a9 !important; | |
+ | } | ||
+ | .menu-type { | ||
+ | font-family: 'Roboto Condensed', sans-serif; | ||
+ | letter-spacing: 5 pt !important; | ||
+ | font-size: 14pt !important; | ||
+ | text-align: center; | ||
+ | text-decoration: none !important; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: 700; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .wide-heading-type { | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 24pt !important; | ||
+ | letter-spacing: 5pt !important; | ||
+ | text-align: center; | ||
+ | text-decoration: none !important; | ||
+ | text-transform: uppercase; | ||
+ | font-weight: bold; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .body-type { | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 12pt !important; | ||
+ | text-decoration: none !important; | ||
+ | line-height: 2; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .caption-type { | ||
+ | font-family: 'Roboto', sans-serif; | ||
+ | font-size: 18pt !important; | ||
+ | text-decoration: none !important; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .inline-heading-type { | ||
+ | font-family: 'Roboto', sans-serif !important; | ||
+ | font-size: 20pt !important; | ||
+ | font-weight: bold !important; | ||
+ | text-decoration: none !important; | ||
+ | line-height: 2 pt !important; | ||
+ | -webkit-font-smoothing: antialiased; | ||
+ | font-smoothing: antialiased; | ||
+ | } | ||
+ | .float-left { | ||
+ | float: left !important; | ||
+ | } | ||
+ | .float-right { | ||
+ | float: right !important; | ||
+ | } | ||
+ | .align-right { | ||
+ | text-align: right !important; | ||
+ | } | ||
+ | .align-center { | ||
+ | text-align: center !important; | ||
+ | } | ||
+ | .indented { | ||
+ | text-indent: 80px; | ||
+ | } | ||
+ | .mainwrap { | ||
+ | width: 90%; | ||
+ | max-width: 960px; | ||
+ | min-width: 360px; | ||
+ | margin: 0 auto; | ||
+ | top:0; | ||
+ | display: none; | ||
} | } | ||
body { | body { | ||
− | + | background-image: url("https://static.igem.org/mediawiki/2017/c/c7/T--BostonU--SaiPipetting2.jpg"); | |
+ | background-repeat: no-repeat; | ||
+ | background-attachment: fixed; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover !important; | ||
} | } | ||
− | # | + | #backgroundimage1 { |
− | + | margin-top: -85px; | |
− | + | background-image: url("#"); | |
− | + | background-repeat: no-repeat; | |
− | + | background-attachment: cover; | |
− | + | -webkit-background-size: cover; | |
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover !important; | ||
+ | height: 360px; | ||
+ | width: 100%; | ||
+ | align-content:center; | ||
+ | text-align:center; | ||
+ | vertical-align:middle; | ||
} | } | ||
− | + | #backgroundimage1 p { | |
− | + | top: 40%; | |
− | + | color: #FEFEFE; | |
− | + | position: relative; | |
} | } | ||
− | + | .background-gradient-down { | |
− | + | height: 360px; | |
− | + | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&0+0,1+100 */ | |
+ | background: -moz-linear-gradient(top, rgba(239,239,238,0) 0%, rgba(239,239,238,1) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */ | ||
} | } | ||
− | . | + | .background-gradient-up { |
− | font- | + | height: 360px; |
− | + | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&1+0,0+100 */ | |
+ | background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#00efefee',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | .background-gradient-both { | ||
+ | height: 360px; | ||
+ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+50,efefee+100&1+0,0+50,1+100 */ | ||
+ | background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 50%, rgba(239,239,238,1) 100%); /* FF3.6-15 */ | ||
+ | background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */ | ||
+ | background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ | ||
+ | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */ | ||
+ | } | ||
+ | #panel1 { | ||
+ | background: #EFEFEE; | ||
+ | width: 100%; | ||
+ | color: #1d1d1d; | ||
+ | z-index: 1; | ||
+ | } | ||
+ | #backgroundimage2 { | ||
+ | background-image: url("#"); | ||
+ | background-repeat: no-repeat; | ||
+ | background-attachment: cover; | ||
+ | -webkit-background-size: cover; | ||
+ | -moz-background-size: cover; | ||
+ | -o-background-size: cover; | ||
+ | background-size: cover !important; | ||
+ | height: 360px; | ||
+ | width: 100%; | ||
+ | position: relative; | ||
+ | } | ||
+ | #backgroundimage2 p { | ||
+ | top: 40%; | ||
+ | color: #8C181B; | ||
+ | } | ||
+ | #protocol-accordion .ui-accordion-content { | ||
+ | background: #FFFFFF; | ||
+ | color: #A9A9A9; | ||
+ | border-radius: 20px; | ||
+ | } | ||
+ | #protocol-accordion .ui-accordion-content > * { | ||
+ | margin: 0; | ||
+ | padding: 40px; | ||
+ | } | ||
+ | .link-slideup { | ||
+ | position: relative; | ||
+ | overflow: hidden; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | .link-slideup a { | ||
+ | position: relative; | ||
+ | display: inline-block; | ||
+ | outline: none; | ||
+ | color: #D45B5C; | ||
+ | vertical-align: bottom; | ||
+ | text-decoration: none; | ||
+ | white-space: nowrap; | ||
+ | } | ||
+ | .link-slideup a::before, .link-slideup a::after { | ||
+ | pointer-events: none; | ||
+ | -webkit-backface-visibility: hidden; | ||
+ | backface-visibility: hidden; | ||
+ | } | ||
+ | .link-slideup a { | ||
+ | overflow: hidden; | ||
+ | font-weight: 500; | ||
+ | } | ||
+ | .link-slideup a::before { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | left: 0; | ||
+ | z-index: -1; | ||
+ | width: 100%; | ||
+ | height: 100%; | ||
+ | background-color: #A9A9A9; | ||
+ | opacity: 1; | ||
+ | content: ''; | ||
+ | -webkit-transition: -webkit-transform 0.2s; | ||
+ | transition: transform 0.2s; | ||
+ | -webkit-transform: translateY(95%); | ||
+ | transform: translateY(95%); | ||
+ | opacity: 0.3; | ||
+ | } | ||
+ | .link-slideup a:hover::before, .link-slideup a:focus::before { | ||
+ | -webkit-transform: translateY(0); | ||
+ | transform: translateY(0); | ||
+ | } | ||
+ | #overview_description { | ||
+ | width: 720px; | ||
} | } | ||
</style> | </style> | ||
</head> | </head> | ||
<body> | <body> | ||
− | <div id=" | + | <div id="backgroundimage1"><div class="background-gradient-down"> |
− | < | + | <p class="wide-heading-type mainwrap align-center">PROJECT OVERVIEW</p> |
− | + | </div></div> | |
− | <p class=" | + | <div id="panel1" class="link-slideup"> |
− | < | + | <div id="overview_description"class="mainwrap"> |
− | < | + | <img class=""src="https://static.igem.org/mediawiki/2017/a/af/T--BostonU--overview_description.svg"></img> |
− | + | <p class="body-type mainwrap">[1] Pardee, Keith, et al. "Rapid, low-cost detection of Zika virus using programmable biomolecular components." Cell 165.5 (2016): 1255-1266.</p> | |
− | </ | + | <p class="body-type mainwrap">[2] Pardee, Keith, et al. "based synthetic gene networks." Cell 159.4 (2014): 940-954.</p> |
− | <p class=" | + | <p class="body-type mainwrap">[3] Burney, R.O. et al. MicroRNA Expression Profiling of Eutopic Secretory Endometrium in Women with versus without Endometriosis. Molecular Human Reproduction 15.10 (2009): 625631. PMC. Web. 1 Nov. 2017.</p> |
− | + | <p class="body-type mainwrap">[4] Green, Alexander A., et al. "Toehold switches: de-novo-designed regulators of gene expression." Cell 159.4 (2014): 925-939.</p> | |
− | </p> | + | <p class="body-type mainwrap">[5] Artavanis, Georgios, et al. "The role of single occupancy effects on integrase dynamics in a cell-free system." bioRxiv (2016): 059675. </p> |
− | <p class=" | + | </div> |
− | + | ||
− | </p> | + | |
− | <p class=" | + | |
− | + | ||
− | + | ||
− | </p> | + | |
− | <p class=" | + | |
− | + | ||
− | </p> | + | |
− | <p class=" | + | |
− | + | ||
− | </p> | + | |
− | </ | + | |
</div> | </div> | ||
+ | <div id="backgroundimage2"><div class="background-gradient-up"> | ||
+ | </div></div> | ||
+ | <script> /* THIS MAKES ANY WRAPPED ELEMENT ON THE PAGE FADE IN */ | ||
+ | $(document).ready(function () { | ||
+ | $('.mainwrap').fadeIn(1000); | ||
+ | }); | ||
+ | </script> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 22:59, 1 November 2017
PROJECT OVERVIEW