|
|
| Line 1: |
Line 1: |
| | <html> | | <html> |
| | <head> | | <head> |
| − | <style> | + | <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> |
| − | #sideMenu, #top_title {display:none;}
| + | <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> |
| − | #content { padding:0px; width:90%; margin-top:-7px; margin-left:5%;, margin-right: 5%}
| + | <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script> |
| − | body {background-color:white; }
| + | <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet"> |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| + | |
| − | html, body, div, span, applet, object, iframe,
| + | |
| − | h1, h2, h3, h4, h5, h6, p, blockquote, pre,
| + | |
| − | a, abbr, acronym, address, big, cite, code,
| + | |
| − | del, dfn, em, img, ins, kbd, q, s, samp,
| + | |
| − | small, strike, strong, sub, sup, tt, var,
| + | |
| − | b, u, i, center,
| + | |
| − | dl, dt, dd, ol, ul, li,
| + | |
| − | fieldset, form, label, legend,
| + | |
| − | table, caption, tbody, tfoot, thead, tr, th, td,
| + | |
| − | article, aside, canvas, details, embed,
| + | |
| − | figure, figcaption, footer, header, hgroup,
| + | |
| − | menu, nav, output, ruby, section, summary,
| + | |
| − | time, mark, audio, video {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | font: inherit;
| + | |
| − | vertical-align: baseline;
| + | |
| − | }
| + | |
| − | /* HTML5 display-role reset for older browsers */ | + | |
| − | article, aside, details, figcaption, figure,
| + | |
| − | footer, header, hgroup, menu, nav, section {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | body {
| + | |
| − | line-height: 1;
| + | |
| − | }
| + | |
| − | ol, ul {
| + | |
| − | list-style: none;
| + | |
| − | }
| + | |
| − | blockquote, q {
| + | |
| − | quotes: none;
| + | |
| − | }
| + | |
| − | blockquote:before, blockquote:after,
| + | |
| − | q:before, q:after {
| + | |
| − | content: '';
| + | |
| − | content: none;
| + | |
| − | }
| + | |
| − | table {
| + | |
| − | border-collapse: collapse;
| + | |
| − | border-spacing: 0;
| + | |
| − | }
| + | |
| | | | |
| − | #lab {
| + | <script type="text/javascript" src="https://use.fontawesome.com/2967839f93.js"></script> |
| − | width: 1000px;
| + | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| − | overflow: hidden;
| + | |
| − | padding-bottom: 70px;
| + | |
| − | position: relative;
| + | |
| − | margin: 0 auto;
| + | |
| − | margin-bottom: 2.5em;
| + | |
| − | background: rgb(236, 236, 236);
| + | |
| | | | |
| − | -webkit-transition: all ease 500ms;
| |
| − | -moz-transition: all ease 500ms;
| |
| − | -o-transition: all ease 500ms;
| |
| − | -ms-transition: all ease 500ms;
| |
| − | transition: all ease 500ms;
| |
| − | }
| |
| | | | |
| − | h1 {
| + | <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> |
| − | font-family: bebas_neueregular ,sans-serif;
| + | |
| − | font-size: 1.75em;
| + | |
| − | padding: 0.2em 0 0.2em 0.2em;
| + | |
| − | color: white;
| + | |
| − | text-shadow: 0 0.06em 0 #424242;
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| | | | |
| − | #lab h1 {
| + | <style> |
| − | background: #B0DAD4;
| + | |
| − | }
| + | |
| | | | |
| − | .beaker {
| + | /* our special font */ |
| − | -webkit-filter: drop-shadow(#424242 0px 1px 0px);
| + | @font-face { |
| − | border-bottom: 2em solid #FFF;
| + | font-family: 'banaue'; |
| − | border-left: 1em solid transparent;
| + | src: url('https://static.igem.org/mediawiki/2017/b/b0/T--Sydney_Australia--Wiki_Font_Banaue-Regular.Media-File.ogg'); |
| − | border-right: 1em solid transparent;
| + | font-weight: normal; |
| − | border-radius: .5em;
| + | font-style: large; |
| − | height: 0;
| + | |
| − | width: 1em;
| + | |
| − | position: absolute;
| + | |
| − | right: 0.7em;
| + | |
| − | bottom: 22%;
| + | |
| − | font-size: 0.6em;
| + | |
| | } | | } |
| | | | |
| − | .beaker::before {
| |
| − | border-left: .25em solid #FFF;
| |
| − | border-radius: .25em;
| |
| − | border-right: .25em solid #FFF;
| |
| − | content: '';
| |
| − | height: .25em;
| |
| − | left: -.25em;
| |
| − | position: absolute;
| |
| − | top: -1em;
| |
| − | width: 1em;
| |
| − | }
| |
| | | | |
| − | .beaker::after { | + | .crispy { |
| − | border-left: .25em solid #FFF; | + | image-rendering: -moz-crisp-edges; |
| − | border-right: .25em solid #FFF; | + | image-rendering: -o-crisp-edges; |
| − | content: ''; | + | image-rendering: -webkit-optimize-contrast; |
| − | height: 1em; | + | -ms-interpolation-mode: nearest-neighbor; |
| − | left: 0;
| + | |
| − | position: absolute;
| + | |
| − | top: -1em;
| + | |
| − | width: .5em;
| + | |
| | } | | } |
| − | | + | .row {background:#e2e2e2;} |
| − | .sectionheader { | + | .panel-group { |
| − | position: relative; | + | margin-top:20px; |
| | } | | } |
| − | | + | .panel-heading { |
| − | .lab_item { | + | background:#fff; |
| − | width: 200px;
| + | background-image:none; |
| − | height: 230px;
| + | color:white; |
| − | position: relative;
| + | padding:20px 20px 20px 20px; |
| − | display: inline-block;
| + | font-family: 'Quicksand', sans-serif; |
| | } | | } |
| − | | + | .panel-body { |
| − | .hexagon2 { | + | font-family: 'Quicksand', sans-serif; |
| − | position: absolute; | + | height:60vh; |
| − | width: 200px;
| + | overflow:scroll; |
| − | height: 400px; | + | |
| − | top: -85px; | + | |
| | } | | } |
| | | | |
| − | .hexagon { | + | .writing { |
| − | overflow: hidden; | + | font-family: 'Quicksand', sans-serif; |
| − | visibility: hidden;
| + | |
| − | | + | |
| − | -webkit-transform: rotate(120deg);
| + | |
| − | -moz-transform: rotate(120deg);
| + | |
| − | -o-transform: rotate(120deg);
| + | |
| − | -ms-transform: rotate(120deg);
| + | |
| − | transform: rotate(120deg);
| + | |
| − | cursor: pointer;
| + | |
| | } | | } |
| | + | body, .page-heading {background:#e2e2e2} |
| | | | |
| − | .hexagon-in1 {
| |
| − | overflow: hidden;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − |
| |
| − | -webkit-transform: rotate(-60deg);
| |
| − | -moz-transform: rotate(-60deg);
| |
| − | -o-transform: rotate(-60deg);
| |
| − | -ms-transform: rotate(-60deg);
| |
| − | transform: rotate(-60deg);
| |
| − | }
| |
| − |
| |
| − | .hexagon-in2 {
| |
| − | -webkit-box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
| |
| − | box-shadow: inset 0 0 0 200px rgba(176, 218, 212, 0.48);
| |
| − | overflow: hidden;
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | background-repeat: no-repeat;
| |
| − | background-position: 50%;
| |
| − |
| |
| − | -webkit-background-size: 125%;
| |
| − | -moz-background-size: 125%;
| |
| − | background-size: 125%;
| |
| − | visibility: visible;
| |
| − |
| |
| − | -webkit-transform: rotate(-60deg);
| |
| − | -moz-transform: rotate(-60deg);
| |
| − | -o-transform: rotate(-60deg);
| |
| − | -ms-transform: rotate(-60deg);
| |
| − | transform: rotate(-60deg);
| |
| − |
| |
| − | -webkit-transition: all 0.5s ease;
| |
| − | -moz-transition: all 0.5s ease;
| |
| − | -o-transition: all 0.5s ease;
| |
| − | -ms-transition: all 0.5s ease;
| |
| − | transition: all 0.5s ease;
| |
| − | }
| |
| − |
| |
| − | .hexagon-in2:hover {
| |
| − | -webkit-box-shadow: inset 0 0 0 0px #B0DAD4;
| |
| − | box-shadow: inset 0 0 0 0px #B0DAD4;
| |
| − | }
| |
| − |
| |
| − | #lab article {
| |
| − | padding-top: 1em;
| |
| − | width: 820px;
| |
| − | margin: 0 auto;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(7n-2) {
| |
| − | margin-left: 101px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(n+5) {
| |
| − | margin-top: -55px;
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 1015px) {
| |
| − | #lab {
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 820px) {
| |
| − | .lab_item:nth-child(5n-1) {
| |
| − | margin-left: 102px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(n+4) {
| |
| − | margin-top: -62px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(7n-2) {
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(n+5) {
| |
| − | margin-top: -56px;
| |
| − | }
| |
| − |
| |
| − | #lab article {
| |
| − | width: 610px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 640px) {
| |
| − | #lab article {
| |
| − | width: 405px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(5n-1) {
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(3n) {
| |
| − | margin-left: 102px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(n+3) {
| |
| − | margin-top: -56px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| − |
| |
| − | @media (max-width: 450px) {
| |
| − | #lab article {
| |
| − | width: 300px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(3n) {
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(2n) {
| |
| − | margin-left: 102px;
| |
| − | }
| |
| − |
| |
| − | .lab_item:nth-child(n+2) {
| |
| − | margin-top: -56px;
| |
| − | }
| |
| − |
| |
| − | }
| |
| | | | |
| | + | .filler {padding:20px;} |
| | </style> | | </style> |
| | </head> | | </head> |
| | <body> | | <body> |
| − | <section id="lab">
| |
| − | <div class="sectionheader"> <h1>The lab</h1><div class="beaker"></div></div>
| |
| − | <article>
| |
| | | | |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url('http://placekitten.com/200/305');">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/320);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/310);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/200/300);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/300/300);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/300/400);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/500/500);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/600/600);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/700/700);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/250/300);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/230/300);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/280/300);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | <div class="lab_item">
| |
| − | <div class="hexagon hexagon2">
| |
| − | <div class="hexagon-in1">
| |
| − | <div class="hexagon-in2" style="background-image: url(http://placekitten.com/290/300);">
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| − | </div>
| |
| | | | |
| − |
| + | <div class="panel-group"> |
| − |
| + | <div class="panel panel-default"> |
| − | </article>
| + | <div class="panel-heading" style="background-color:#e8939c!important"> |
| − | </section> | + | <h4 class="panel-title"> |
| | + | <a data-toggle="collapse" href="#collapse2">Restriction Enzyme Digest</a> |
| | + | </h4> |
| | + | </div> |
| | + | <div id="collapse2" class="panel-collapse collapse"> |
| | + | <div class="panel-body">blabla |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | + | |
| | </body> | | </body> |
| | </html> | | </html> |
