Difference between revisions of "Team:Mingdao/Notebook"
| (152 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
| − | {{:Team:Mingdao/ | + | {{:Team:Mingdao/test9}} |
| + | <html> | ||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
| Line 5: | 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 20: | Line 22: | ||
padding: 0; | padding: 0; | ||
font-family: 'Ubuntu' !important; } | font-family: 'Ubuntu' !important; } | ||
| + | img.center { | ||
| + | display: block; | ||
| + | margin: 0 auto; } | ||
| + | |||
| + | |||
img.right { | img.right { | ||
float: right; | float: right; | ||
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
.bg-container { | .bg-container { | ||
| + | background-attachment: fixed; | ||
| + | |||
| + | overflow: hidden; | ||
position: relative; | position: relative; | ||
| − | + | background-image: url(https://static.igem.org/mediawiki/2018/4/4b/T--Mingdao--NotebookBackground.jpg); | |
| − | + | background-repeat: no-repeat; | |
| − | + | background-size: 100%; | |
| − | + | background-position: center; | |
| + | } | ||
.my-main-container { | .my-main-container { | ||
| − | |||
| − | |||
| − | |||
width: 100%; | width: 100%; | ||
| − | + | padding: 600px 7%; | |
| − | padding: | + | } |
| − | + | ||
| − | } | + | |
.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 53: | 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; | + | font-size: 22px !important; |
| − | + | font-family: 'Ubuntu' !important; | |
font-weight: 500; } | font-weight: 500; } | ||
| Line 77: | 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 104: | Line 107: | ||
#HQ_page .path .pathWord p { | #HQ_page .path .pathWord p { | ||
font-weight: 700; | font-weight: 700; | ||
| − | text-align: left !important; | + | text-align: left !important; |
font-size: 16px; | font-size: 16px; | ||
} | } | ||
| − | #HQ_page . | + | #HQ_page .text-area p { |
font-size: 22px; | font-size: 22px; | ||
font-family: 'Ubuntu'; | font-family: 'Ubuntu'; | ||
| Line 115: | Line 118: | ||
margin: 0 auto; } | margin: 0 auto; } | ||
| − | . | + | .text-area h2 { |
text-align: center; | text-align: center; | ||
| − | |||
| − | |||
margin-bottom: 2rem !important; | margin-bottom: 2rem !important; | ||
margin-top: 2rem; | margin-top: 2rem; | ||
| − | color: | + | color: black !important; } |
| − | + | ||
| − | + | ||
| + | .m-text-area { | ||
| + | padding-left: 225px; } | ||
| + | .m-text-area h2 { | ||
| + | text-align: center; | ||
| + | margin-bottom: 2rem !important; | ||
| + | margin-top: 2rem; | ||
| + | color: black !important; | ||
| + | } | ||
.path-tags{ | .path-tags{ | ||
position: fixed; | position: fixed; | ||
| − | left: | + | left: 11%; |
| − | top: | + | top: 200px; |
} | } | ||
.path-tags ul{ | .path-tags ul{ | ||
| − | color: # | + | color: #385e66; |
list-style: none; | list-style: none; | ||
| − | font-size: | + | font-size: 18px; |
| + | font-family: 'Ubuntu' !important; | ||
} | } | ||
| Line 141: | 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: 15px; | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
.top { | .top { | ||
| Line 175: | Line 166: | ||
.top img { | .top img { | ||
width: 100%; } | width: 100%; } | ||
| − | . | + | .m-text-area h3 { |
| + | font-size: 28px; | ||
| + | text-align: left; | ||
| + | font-weight:700; | ||
| + | margin-bottom: 3rem !important; | ||
| + | margin-top: 1rem; | ||
| + | color: #385e66 !important; } | ||
| + | .m-text-area p2 { | ||
| + | font-size: 15px; | ||
| + | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | . | + | .img-container { |
| − | + | ||
| − | + | ||
| − | + | ||
width: 100%; | width: 100%; | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
text-align: center; | text-align: center; | ||
| − | + | display: none; } | |
| − | + | .img-container img { | |
| − | + | width: 100%; } | |
| − | + | ||
| − | } | + | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
.pdfbtn { | .pdfbtn { | ||
| Line 281: | Line 191: | ||
padding: 10px 20px; | padding: 10px 20px; | ||
border-radius: 5px; | border-radius: 5px; | ||
| − | background-color: # | + | background-color: #385e66; |
color: white; | color: white; | ||
| − | |||
| − | |||
| − | |||
display: block; | display: block; | ||
position: relative; } | position: relative; } | ||
| − | + | .pdfbtn i { | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | . | + | |
position: absolute; | position: absolute; | ||
right: 50px; | right: 50px; | ||
top: 50%; | top: 50%; | ||
transform: translateY(-50%); } | transform: translateY(-50%); } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| + | .tag{ | ||
| + | font-size:26px !important; | ||
| + | font-weight:bold; | ||
| + | color:#385e66 !important; | ||
| + | font-family: 'Ubuntu' !important; | ||
} | } | ||
| − | . | + | .top-picture{ |
| − | + | position:absolute; | |
| − | + | z-index:1 | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| Line 329: | Line 215: | ||
<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=" | + | |
| − | < | + | <div class="my-main-container"> |
| − | + | <div class="main-content"> | |
| − | + | <div class="m-text-area"> | |
| − | < | + | |
| − | + | <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></div> | + | <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> | ||
| + | <br /> | ||
| + | <br /> | ||
| + | <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 id="notebook-gel" class="m-block" > | ||
| + | <br /> | ||
| + | <h1>Gel Elution & PCR Cleanup</h1> | ||
| + | |||
| + | |||
| + | <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 /> | ||
| + | <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> | ||
| + | <br /> | ||
| + | <br /> | ||
| + | <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 class="path-tags"> | ||
| + | <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="PCR-btn" class="tag-btn">- PCR & Colony PCR</li> | ||
| + | <li id="gel-btn" class="tag-btn">- Gel Elution & PCR Cleanup</li> | ||
| + | <li id="restriction-btn" class="tag-btn">- Restriction Enzyme</li> | ||
| + | <li id="transformation-btn" class="tag-btn">- Transformation</li> | ||
| + | |||
| + | |||
| + | </ul> | ||
| + | </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 357: | Line 349: | ||
$('html, body').animate({scrollTop: '0px'}, 500); | $('html, body').animate({scrollTop: '0px'}, 500); | ||
}); | }); | ||
| + | |||
| + | $("#timeline-btn").click(function() { | ||
| + | $('html, body').animate({ | ||
| + | scrollTop: $("#notebook-timeline").offset().top | ||
| + | }, 500); | ||
| + | }); | ||
| + | |||
| + | $("#assay-btn").click(function() { | ||
| + | $('html, body').animate({ | ||
| + | scrollTop: $("#notebook-assay").offset().top | ||
| + | }, 500); | ||
| + | }); | ||
| + | |||
| + | $("#functional-btn").click(function() { | ||
| + | $('html, body').animate({ | ||
| + | scrollTop: $("#notebook-functional").offset().top | ||
| + | }, 500); | ||
| + | }); | ||
| + | |||
| + | |||
| + | $("ul>li#plasmid-btn").click(function() { | ||
| + | $('html, body').animate({ | ||
| + | scrollTop: $("#notebook-plasmid").offset().top | ||
| + | }, 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 < | + | for( var i = 1; i < 2; i++){ |
| − | $('# | + | $('#public-btn-' + i).click( toggleContainer(i) ); |
| − | + | ||
| − | + | ||
| − | + | ||
} | } | ||
| Line 372: | Line 407: | ||
}); | }); | ||
| − | |||
function toggleContainer(i){ | function toggleContainer(i){ | ||
return function(){ | return function(){ | ||
| − | if($('# | + | if($('#public-'+i).is(":visible")){ |
| − | $('# | + | $('#public-'+i).slideToggle(500); |
} | } | ||
| − | |||
else{ | else{ | ||
| − | + | $('.img-container:visible').slideToggle(500); | |
| − | $('# | + | $('#public-'+i).slideToggle(500); |
} | } | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
$('.hp-bg-container').css('max-height','none') | $('.hp-bg-container').css('max-height','none') | ||
$('.main-content').css('min-height','200vh') | $('.main-content').css('min-height','200vh') | ||
| Line 405: | Line 422: | ||
} | } | ||
</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
Quote
“”
Follow us on
Contact us
Phone: +886-4-23341797
EMAIL: biolab@ms.mingdao.edu.tw
No.497, Sec. 1, Zhongshan Rd., Wuri District, Taichung City 414, Taiwan (R.O.C.)