(125 intermediate revisions by 4 users not shown) | |||
Line 1: | Line 1: | ||
− | {{:Team:Mingdao/ | + | {{:Team:Mingdao/test9}} |
<html> | <html> | ||
− | |||
<html lang="en"> | <html lang="en"> | ||
<head> | <head> | ||
Line 7: | 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 32: | Line 31: | ||
} | } | ||
.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: rgba(255, 255, 255, . | + | 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 !important; | font-size: 22px !important; | ||
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 131: | Line 134: | ||
.path-tags{ | .path-tags{ | ||
position: fixed; | position: fixed; | ||
− | left: | + | left: 11%; |
top: 200px; | top: 200px; | ||
} | } | ||
Line 146: | Line 149: | ||
.path-tags span{ | .path-tags span{ | ||
− | color: # | + | color: #385e66; |
position: relative; | position: relative; | ||
top: -8px; | top: -8px; | ||
Line 167: | 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; | ||
Line 203: | Line 206: | ||
color:#385e66 !important; | color:#385e66 !important; | ||
font-family: 'Ubuntu' !important; | font-family: 'Ubuntu' !important; | ||
+ | } | ||
+ | .top-picture{ | ||
+ | position:absolute; | ||
+ | z-index:1 | ||
} | } | ||
Line 208: | 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="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"> | ||
− | <h1> | + | |
− | <div id=" | + | <div id="notebook-timeline" class="m-block" > |
− | < | + | <h1>Timeline</h1> |
− | <img src="https://static.igem.org/mediawiki/ | + | <!-- <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/3/39/T--Mingdao--notebook1.jpg"> | ||
<img src="https://static.igem.org/mediawiki/2018/a/a0/T--Mingdao--notebook2.jpg"> | <img src="https://static.igem.org/mediawiki/2018/a/a0/T--Mingdao--notebook2.jpg"> | ||
</div> | </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/2/2d/T--Mingdao--notebook3.jpg"> | ||
<img src="https://static.igem.org/mediawiki/2018/a/aa/T--Mingdao--notebook4.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/2018/b/be/T--Mingdao--notebook5.jpg"> | <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"> | <img src="https://static.igem.org/mediawiki/2018/5/5e/T--Mingdao--notebook6.jpg"> | ||
</div> | </div> | ||
− | + | <br /> | |
− | <div id=" | + | <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"> | <img src="https://static.igem.org/mediawiki/2018/5/5b/T--Mingdao--notebook7.jpg"> | ||
</div> | </div> | ||
− | + | <br /> | |
− | <div id=" | + | <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"> | <img src="https://static.igem.org/mediawiki/2018/d/dc/T--Mingdao--notebook8.jpg"> | ||
</div> | </div> | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
Line 277: | Line 326: | ||
<ul> | <ul> | ||
<p class="tag">Notebook</p> | <p class="tag">Notebook</p> | ||
− | <li id=" | + | <li id="timeline-btn" class="tag-btn">- Timeline</li> |
− | <li id=" | + | <li id="assay-btn" class="tag-btn">- Mosquito Assay </li> |
− | <li id=" | + | <li id="functional-btn" class="tag-btn">- Functional Assay</li> |
− | <li id=" | + | <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> | <li id="transformation-btn" class="tag-btn">- Transformation</li> | ||
− | + | ||
− | + | ||
Line 290: | Line 341: | ||
</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 298: | 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# | + | $("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({ | $('html, body').animate({ | ||
− | scrollTop: $("# | + | scrollTop: $("#notebook-PCR").offset().top |
}, 500); | }, 500); | ||
}); | }); | ||
− | $("# | + | $("#gel-btn").click(function() { |
$('html, body').animate({ | $('html, body').animate({ | ||
− | scrollTop: $("# | + | scrollTop: $("#notebook-gel").offset().top |
}, 500); | }, 500); | ||
}); | }); | ||
− | $("# | + | $("#restriction-btn").click(function() { |
$('html, body').animate({ | $('html, body').animate({ | ||
− | scrollTop: $("# | + | scrollTop: $("#notebook-restriction").offset().top |
}, 500); | }, 500); | ||
}); | }); | ||
− | + | $("#transformation-btn").click(function() { | |
+ | $('html, body').animate({ | ||
+ | scrollTop: $("#notebook-transformation").offset().top | ||
+ | }, 500); | ||
+ | }); | ||
+ | |||
}); | }); | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
Line 350: | Line 425: | ||
</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