(144 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
− | {{:Team:Mingdao/ | + | {{:Team:Mingdao/test9}} |
<html> | <html> | ||
<html lang="en"> | <html lang="en"> | ||
Line 6: | Line 6: | ||
<link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'> | <link href='https://fonts.googleapis.com/css?family=Arizonia' rel='stylesheet'> | ||
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'> | <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'> | ||
− | <title> | + | <title>Notebook</title> |
+ | |||
</head> | </head> | ||
Line 25: | Line 26: | ||
margin: 0 auto; } | margin: 0 auto; } | ||
+ | |||
+ | img.right { | ||
+ | float: right; | ||
+ | } | ||
.bg-container { | .bg-container { | ||
+ | background-attachment: fixed; | ||
+ | |||
overflow: hidden; | overflow: hidden; | ||
position: relative; | position: relative; | ||
− | background-image: url(https://static.igem.org/mediawiki/ | + | background-image: url(https://static.igem.org/mediawiki/2018/4/4b/T--Mingdao--NotebookBackground.jpg); |
− | background-repeat: repeat | + | background-repeat: no-repeat; |
background-size: 100%; | background-size: 100%; | ||
+ | background-position: center; | ||
} | } | ||
.my-main-container { | .my-main-container { | ||
width: 100%; | width: 100%; | ||
− | padding: | + | padding: 600px 7%; |
} | } | ||
.main-content { | .main-content { | ||
− | background-color: | + | background-color: rgba(255, 255, 255, .4); |
− | width: | + | width: 90%; |
− | margin-left: | + | margin-left: 5%; |
padding: 50px; | padding: 50px; | ||
min-height: 180vh; | min-height: 180vh; | ||
Line 47: | Line 55: | ||
.m-text-area h1 { | .m-text-area h1 { | ||
− | font-size: | + | font-size: 50px; |
font-weight: 700; | font-weight: 700; | ||
font-family: 'Arizonia' !important; | font-family: 'Arizonia' !important; | ||
text-align: center; | text-align: center; | ||
− | margin-bottom: 1rem; } | + | margin-bottom: 1rem; |
+ | color: #385e66; } | ||
.m-text-area p { | .m-text-area p { | ||
font-size: 22px !important; | font-size: 22px !important; | ||
Line 71: | Line 80: | ||
position: absolute; | position: absolute; | ||
background-color: #fff; | background-color: #fff; | ||
− | top: | + | top: 10px; |
left: 27px; | left: 27px; | ||
border: 5px solid #385e66; | border: 5px solid #385e66; | ||
Line 125: | Line 134: | ||
.path-tags{ | .path-tags{ | ||
position: fixed; | position: fixed; | ||
− | left: | + | left: 11%; |
top: 200px; | top: 200px; | ||
} | } | ||
Line 140: | Line 149: | ||
.path-tags span{ | .path-tags span{ | ||
− | color: # | + | color: #385e66; |
position: relative; | position: relative; | ||
top: -8px; | top: -8px; | ||
left: 10px; | left: 10px; | ||
z-index: 1; | z-index: 1; | ||
− | font-size: | + | |
+ | font-size: 15px; | ||
} | } | ||
.top { | .top { | ||
Line 160: | Line 170: | ||
text-align: left; | text-align: left; | ||
font-weight:700; | font-weight:700; | ||
− | margin-bottom: | + | margin-bottom: 3rem !important; |
margin-top: 1rem; | margin-top: 1rem; | ||
− | color: #385e66 !important; } | + | color: #385e66 !important; } |
.m-text-area p2 { | .m-text-area p2 { | ||
font-size: 15px; | font-size: 15px; | ||
} | } | ||
− | . | + | |
− | + | ||
− | + | .img-container { | |
− | } | + | width: 100%; |
+ | text-align: center; | ||
+ | display: none; } | ||
+ | .img-container img { | ||
+ | width: 100%; } | ||
+ | |||
+ | |||
+ | .pdfbtn { | ||
+ | width: 100%; | ||
+ | margin: 20px 0 10px 0; | ||
+ | padding: 10px 20px; | ||
+ | border-radius: 5px; | ||
+ | background-color: #385e66; | ||
+ | color: white; | ||
+ | display: block; | ||
+ | position: relative; } | ||
+ | .pdfbtn i { | ||
+ | position: absolute; | ||
+ | right: 50px; | ||
+ | top: 50%; | ||
+ | transform: translateY(-50%); } | ||
.tag{ | .tag{ | ||
Line 175: | Line 205: | ||
font-weight:bold; | font-weight:bold; | ||
color:#385e66 !important; | color:#385e66 !important; | ||
− | |||
font-family: 'Ubuntu' !important; | font-family: 'Ubuntu' !important; | ||
} | } | ||
+ | .top-picture{ | ||
+ | position:absolute; | ||
+ | z-index:1 | ||
+ | } | ||
+ | |||
</style> | </style> | ||
<body> | <body> | ||
− | + | <div class="bg-container" style="max-height:none;"> | |
− | + | <img class="top-picture" src="https://static.igem.org/mediawiki/2018/8/85/T--Mingdao--Phil13-7.png" style="width:100%"> | |
+ | |||
<div class="my-main-container"> | <div class="my-main-container"> | ||
<div class="main-content"> | <div class="main-content"> | ||
<div class="m-text-area"> | <div class="m-text-area"> | ||
− | + | ||
− | <div id=" | + | <div id="notebook-timeline" class="m-block" > |
− | + | <h1>Timeline</h1> | |
− | + | <!-- <h3>Timeline</h3> --> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/e/e5/T--Mingdao--notebook_timeline_hp.jpg"> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/4/42/T--Mingdao--notebook_timeline_hp2.jpg"> | |
− | + | <br /> | |
− | + | <br /> | |
− | + | <br /> | |
− | + | <br /> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/6/61/T--Mingdao--notebook_timeline1.jpg"> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/b/bc/T--Mingdao--notebook_timeline4.jpg"> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2018/4/42/T--Mingdao--notebook_timeline_hp2.jpg"> |
− | + | <br /> | |
− | + | <br /> | |
− | + | <br /> | |
− | + | <br /> | |
− | + | <div id="notebook-assay" class="m-block" > | |
− | + | <h1>Mosquito Assay</h1> | |
− | + | <!-- <h3>Mosquito Assay</h3> --> | |
− | < | + | <img src="https://static.igem.org/mediawiki/2018/3/35/T--Mingdao--notebook_flow_chart1.jpg"> |
− | + | ||
− | + | </div> | |
− | + | <br /> | |
− | + | <br /> | |
+ | <br /> | ||
+ | <br /> | ||
+ | <div id="notebook-functional" class="m-block" > | ||
+ | <h1>Functional Assay</h1> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/f/fb/T--Mingdao--notebook_flaw_chart2.jpg"> | ||
+ | |||
+ | |||
+ | </div> | ||
+ | <br /> | ||
+ | <br /> | ||
+ | <br /> | ||
+ | <br /> | ||
+ | <div id="notebook-plasmid" class="m-block" > | ||
+ | <br /> | ||
+ | <h1>Plasmid Extraction</h1> | ||
+ | |||
+ | |||
+ | <img src="https://static.igem.org/mediawiki/2018/3/39/T--Mingdao--notebook1.jpg"> | ||
+ | <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Mingdao--notebook2.jpg"> | ||
</div> | </div> | ||
− | <div id=" | + | <br /> |
− | < | + | <br /> |
− | <img src="https://static.igem.org/mediawiki/ | + | <br /> |
− | < | + | <br /> |
− | + | <div id="notebook-PCR" class="m-block" > | |
− | + | <br /> | |
− | + | <h1>PCR & Conoly PCR</h1> | |
− | + | ||
− | + | <img src="https://static.igem.org/mediawiki/2018/2/2d/T--Mingdao--notebook3.jpg"> | |
− | + | <img src="https://static.igem.org/mediawiki/2018/a/aa/T--Mingdao--notebook4.jpg"> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <br /> | ||
+ | <br /> | ||
+ | <br /> | ||
+ | <br /> | ||
</div> | </div> | ||
− | <div id=" | + | |
− | + | <div id="notebook-gel" class="m-block" > | |
− | < | + | <br /> |
− | + | <h1>Gel Elution & PCR Cleanup</h1> | |
− | + | ||
− | + | ||
− | <img src="https://static.igem.org/mediawiki/ | + | <img src="https://static.igem.org/mediawiki/2018/b/be/T--Mingdao--notebook5.jpg"> |
− | + | <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Mingdao--notebook6.jpg"> | |
− | + | </div> | |
− | + | <br /> | |
− | + | <br /> | |
− | + | <br /> | |
− | <img src="https://static.igem.org/mediawiki/ | + | <br /> |
− | + | <div id="notebook-restriction" class="m-block" > | |
− | + | <br /> | |
− | + | <h1>Restriction Enzyme</h1> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
+ | <img src="https://static.igem.org/mediawiki/2018/5/5b/T--Mingdao--notebook7.jpg"> | ||
+ | |||
</div> | </div> | ||
− | <div id=" | + | <br /> |
− | < | + | <br /> |
− | <img src="https://static.igem.org/mediawiki/ | + | <br /> |
− | + | <br /> | |
− | + | <div id="notebook-transformation" class="m-block" > | |
− | + | <br /> | |
− | + | <h1>Transformation</h1> | |
− | + | ||
+ | <img src="https://static.igem.org/mediawiki/2018/d/dc/T--Mingdao--notebook8.jpg"> | ||
</div> | </div> | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
</div> | </div> | ||
</div> | </div> | ||
+ | |||
<div class="path-tags"> | <div class="path-tags"> | ||
<ul> | <ul> | ||
− | < | + | <p class="tag">Notebook</p> |
− | < | + | <li id="timeline-btn" class="tag-btn">- Timeline</li> |
− | < | + | <li id="assay-btn" class="tag-btn">- Mosquito Assay </li> |
− | < | + | <li id="functional-btn" class="tag-btn">- Functional Assay</li> |
− | + | <li id="plasmid-btn" class="tag-btn">- Plasmid Extraction</li> | |
− | <li id=" | + | <li id="PCR-btn" class="tag-btn">- PCR & Colony PCR</li> |
− | <li id=" | + | <li id="gel-btn" class="tag-btn">- Gel Elution & PCR Cleanup</li> |
− | <li id=" | + | <li id="restriction-btn" class="tag-btn">- Restriction Enzyme</li> |
− | <li id=" | + | <li id="transformation-btn" class="tag-btn">- Transformation</li> |
− | + | ||
+ | |||
</ul> | </ul> | ||
</div> | </div> | ||
</div> | </div> | ||
<div class="top"> | <div class="top"> | ||
− | <img src="https://static.igem.org/mediawiki/ | + | <img src="https://static.igem.org/mediawiki/2018/5/58/T--Mingdao--go_to_top.jpg" alt=""> |
</div> | </div> | ||
</body> | </body> | ||
Line 347: | Line 349: | ||
$('html, body').animate({scrollTop: '0px'}, 500); | $('html, body').animate({scrollTop: '0px'}, 500); | ||
}); | }); | ||
− | + | ||
− | + | $("#timeline-btn").click(function() { | |
$('html, body').animate({ | $('html, body').animate({ | ||
− | scrollTop: $("# | + | scrollTop: $("#notebook-timeline").offset().top |
}, 500); | }, 500); | ||
}); | }); | ||
− | $("# | + | |
+ | $("#assay-btn").click(function() { | ||
$('html, body').animate({ | $('html, body').animate({ | ||
− | scrollTop: $("# | + | scrollTop: $("#notebook-assay").offset().top |
}, 500); | }, 500); | ||
}); | }); | ||
− | $("# | + | |
+ | $("#functional-btn").click(function() { | ||
$('html, body').animate({ | $('html, body').animate({ | ||
− | scrollTop: $("# | + | scrollTop: $("#notebook-functional").offset().top |
}, 500); | }, 500); | ||
}); | }); | ||
− | $("# | + | |
+ | $("ul>li#plasmid-btn").click(function() { | ||
$('html, body').animate({ | $('html, body').animate({ | ||
− | scrollTop: $("# | + | scrollTop: $("#notebook-plasmid").offset().top |
}, 500); | }, 500); | ||
}); | }); | ||
+ | $("#PCR-btn").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#notebook-PCR").offset().top | ||
+ | }, 500); | ||
+ | }); | ||
+ | $("#gel-btn").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#notebook-gel").offset().top | ||
+ | }, 500); | ||
+ | }); | ||
+ | $("#restriction-btn").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#notebook-restriction").offset().top | ||
+ | }, 500); | ||
+ | }); | ||
+ | $("#transformation-btn").click(function() { | ||
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#notebook-transformation").offset().top | ||
+ | }, 500); | ||
+ | }); | ||
+ | |||
+ | }); | ||
+ | $(document).ready(function(){ | ||
+ | for( var i = 1; i < 2; i++){ | ||
+ | $('#public-btn-' + i).click( toggleContainer(i) ); | ||
+ | } | ||
− | + | $('.top').on('click', function(){ | |
+ | $('html, body').animate({scrollTop: '0px'}, 500); | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | function toggleContainer(i){ | ||
+ | return function(){ | ||
+ | if($('#public-'+i).is(":visible")){ | ||
+ | $('#public-'+i).slideToggle(500); | ||
+ | } | ||
+ | else{ | ||
+ | $('.img-container:visible').slideToggle(500); | ||
+ | $('#public-'+i).slideToggle(500); | ||
+ | } | ||
+ | $('.hp-bg-container').css('max-height','none') | ||
+ | $('.main-content').css('min-height','200vh') | ||
+ | } | ||
+ | } | ||
</script> | </script> | ||
</html> | </html> | ||
+ | |||
+ | |||
+ | {{:Team:Mingdao/test6}} |
Latest revision as of 15:32, 15 October 2018
Timeline
Mosquito Assay
Functional Assay
Plasmid Extraction
PCR & Conoly PCR
Gel Elution & PCR Cleanup
Restriction Enzyme
Transformation