Widget:新样式
<html>
<head> <link href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;700&family=Galdeano&family=Limelight&display=swap" rel="stylesheet"> </head> <script>
/* This code is built from two sources: developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event and https://css-tricks.com/updating-a-css-variable-with-javascript/. Please see the CSS note below for the :root bit
- /
let root = document.documentElement;
var body = document.body, html = document.documentElement;
var scrollLimit = 1800; var adjustedScrollLimit = scrollLimit - 0;
window.addEventListener('scroll', e => { // console.log(scrollY);
/* This following block was for the 'sticky' background if(window.scrollY>scrollLimit){ document.getElementById("bodybackground").style.backgroundAttachment = "fixed"; document.getElementById("bodybackground").style.backgroundPosition = "0px " + scrollLimit + "px"; } else if(window.scrollY<scrollLimit){ if(document.getElementById("bodybackground").style.backgroundAttachment == "fixed"){ document.getElementById("bodybackground").style.backgroundAttachment = "local"; document.getElementById("bodybackground").style.backgroundPosition = "0px 0px"; } } */ });
/* When the user clicks on the button, toggle between hiding and showing the dropdown content */ function showMenu(elementName) {
var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } }
document.getElementById(elementName).classList.toggle("show");
}
// Close the dropdown menu if the user clicks outside of it window.onclick = function(event) {
if (!event.target.matches('.dropbtn')) { var dropdowns = document.getElementsByClassName("dropdown-content"); var i; for (i = 0; i < dropdowns.length; i++) { var openDropdown = dropdowns[i]; if (openDropdown.classList.contains('show')) { openDropdown.classList.remove('show'); } } }
}
</script>
<style>
- sideMenu, #top_title, .patrollink, #firstHeading, #home_logo, #sideMenu { display:none; }
- content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; border:none;}
body, html {background-color:white; width: 100%; height: 100%;}
- bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
- bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
/*2020 Colours:
Pink: #E5A1A9, rgb(229,161,169) teal: #6ADFCD, rgb(106,223,205) aqua: #5D8CDD, rgb(93,140,221) purple: #6D4C93, rgb(109,76,147) dark green: #1C4F3F, rgb(28,79,63) logo text: #484494, rgb(72,68,148)
margin: top right bottom left; margin: top right/left bottom; margin: top/bottom right/left; */
- root{
--navBarPos: -75px; }
/* This block of code is taken from 2018.igem.org/Team:CUNY_Kingsborough and then modified as necessary */ .dropbtn { border: none; background-color: #6c4c94; padding: 10px; font-family: 'Assistant', sans-serif !important; font-size:calc(12px + 0.8vw); color: white; text-decoration: none; width:100%; border-radius: 10px;
margin-left: 175px; /* I added this rotation, just because :) */
}
.dd1 { transform:rotate(-10deg); } .dd2 { transform:rotate(-10deg); } .dd3 { transform:rotate(-5deg); } .navbarFix { min-width:900px; }
.dropbtn:hover { border: none; background-color: #6D4C93; color: #6ADFCD; padding: 10px; font-size:calc(12px + 0.8vw); transition: all 0.5s; text-decoration: bold; cursor: pointer; }
.dropdown { margin-left: 2%; position: relative; display: inline-block; width: 12%; min-width:80px; margin-left: 75px; /* background-color: #6c4c94; */ }
.dropdown-content { display: none; position: absolute; min-width: 180px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 2; margin-left: 175px; transform:rotate(-10deg); }
.show { display: block; }
.dropdown-content a { border-bottom-style: solid; border-color: rgba(255, 255, 255, .7); border-width: 1px; color: black; background-color: #6ADFCD !important; font-family: 'Assistant', sans-serif !important; font-size: 16px; padding: 12px 16px; text-decoration: none; display: block; }
.dropdown-content a:hover { background-color: #5d8cdd !important; color: white !important; }
/* Code leftover from hover functionality
.dropdown:hover .dropdown-content { display: block; }
.dropdown:hover .dropbtn { background-color: #6c4c94; }
- /
.dropbtn:hover, .dropbtn:focus {
background-color: #6c4c94;
}
.dropdown-menu-center { left: 50% !important; right: auto !important; text-align: center !important; transform: translate(-50%, 0) !important; } .logo { /* The image used */ background-image: url("https://2020.igem.org/wiki/images/d/d6/T--Alma--navbar_no_boxes.png"); min-height: 650px; width: 100vw; /* Center and scale the image nicely */ background-position: left top; background-repeat: no-repeat; background-size: cover;
/* Needed to position the navbar */ position: relative; border-bottom: 10px solid #484494;
}
/* Leftover, might not be necessary .container {
overflow: hidden; position: absolute; top: 290px; width: 100%; min-width: 1100px;
} */
/* The navbar */ .topnav {
overflow: hidden; background-color: rgba(255, 0, 0, 0);
}
/* Navbar links */ .topnav a {
float: left; color: #484494; text-align: center; text-decoration: none; font-size:calc(18px + .5vw); width: 14.28%;
}
*/
.topnav a:hover {
color: black;
}
.bodybackground {
background-attachment: local; background-image: linear-gradient(rgba(255,255,255,0.3), rgba(255,255,255,0.3)), url("https://2020.igem.org/wiki/images/d/d0/T--Alma--Pine_River_Background_fullcolor.png") !important; width: 100%; height: 100%; background-size: cover; /*background-blend-mode: lighten;*/ border-top: 10px solid #484494;
}
.bodymargin {
margin: 0px; padding: 100px;
}
.textcontainer { background-color: rgba(0,0,0,0.5) !important; border-radius: 15px; padding: 50px; padding-top: 75px; margin-top: 30px; max-width: auto;
}
/* Clear floats after the columns */ .rowcontainer:after {
content: ""; display: table; clear: both;
}
.columnthirdleft {
float: left; width: 33.33%;
}
.columntwothirdsright {
float: right; width: 66.67%;
}
.columnthirdright {
float: right; width: 33.33%;
}
.columntwothirdsleft {
float: left; width: 66.67%;
}
.extraspace {
margin: 50px;
}
.pstyle {
line-height: 25px;
font-family: 'Assistant', sans-serif !important;
font-size: 20px; margin: 25px 0px; color: white; }
.pleft {
padding-right: 35px;
}
.pright {
padding-left: 35px;
}
.headline {
font-family: 'Limelight', arial, sans-serif !important; font-size: 75px; color: #6ADFCD; text-align: center; text-transform: uppercase;
} /* Subheadline */ .subheadline {
font-family: 'Galdeano', arial, sans-serif !important; line-height: 47px; font-size: 35px; color: #6ADFCD;
}
.centertext {
text-align: center;
}
.centerimg {
display: block; margin-right: auto; margin-left: auto;
}
.leftimg {
display: block; max-width: 100%; float: left; padding: 22px 0px 20px;
}
.rightimg {
display: block; max-width: 100%; float: right; padding: 22px 0px 20px;
}
- desc {
display: block; margin-right: auto; margin-left: auto; max-width: 75%; text-align: center; margin-top: 40px;
}
figcaption {
color: white; text-align: left;
}
.hyperlink {
color: #6ADFCD !important;
}
.hyperlink:hover {
text-shadow: #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px, #C0C0C0 0px 0px 1px; text-decoration: none;
}
.hyperlink:visited {
color: #E5A1A9 !important;
}
span { color: red !important; font-weight: 700 !important;
}
</style>
<body>
Watch our project promotion video!
<iframe class="centerimg" width="800" height="450" sandbox="allow-same-origin allow-scripts allow-popups" src="https://video.igem.org/videos/embed/5a8e20cd-a763-4fa2-ae07-3e1a1b4aab65" frameborder="0" allowfullscreen></iframe>
The Pine River runs through mid-Michigan in southwest Isabella, Montcalm, and Gratiot counties.
Its history is long and unfortunate: the once-beautiful river is now a polluted danger zone.
In 1853, Joseph Clapp founded St. Louis, MI, later building a sawmill and a dam along the Pine River. In May of 1856, Clapp sold his sawmill and surrounding forest to Richard G. Hillyer, Lewis M. Clark, and George W. Davis of Saginaw. They began to lumber their new property.
<img class="rightimg" src="https://2020.igem.org/wiki/images/1/12/T--Alma--St_Louis_water_tower.png" alt="St. Louis, MI">
<img class="leftimg"src="https://2020.igem.org/wiki/images/5/5a/T--Alma--pine_river_scenery.png" alt="The Pine River in autumn">
In the 1930s, the newly organized Michigan Chemical Corporation had acquired a 14-acre site of the sawmill, salt block, and bromine plant. On September 15, 1935, ground was broken for the construction of a chemical plant on the banks of the Pine River. Throughout this decade, the company manufactured products such as Crystal Flow salt, and eventually dedicated themselves to full chemical research. During World War II, the corporation began researching an effective new insecticide called DDT (Dichloro-diphenyl-trichloroethane). More research led to constructing a DDT plant in April 1944. The corporation then sent tons of the product to the Army and Navy to help them serve in insect-ridden areas. In the 1950s and 1960s, the Michigan Chemical Corporation grew into a complex array of buildings and storage tanks across the west side of St. Louis, pumping millions of dollars into the area's economy.
In the 1960s, DDT questions arose about its effectiveness due to more-resistant insects and its negative impact on other living organisms. A few years later, the Michigan Chemical Corporation was bought by the Velsicol Chemical Company and the production of DDT ceased in 1964, and DDT was eventually outlawed in 1973. During the 1970s Velsicol’s main products included Firemaster, a fire retardant with a chemical called PBB (Polybrominated Biphenyl), and Nutrimaster, a supplemental cattle feed. In 1973, there was a tragic mix up and Nutrimaster bags filled with PBB-laden Firemaster were sent to the Farm Bureau services, leading to the slaughter of hundreds of poisoned cattle. However, contaminated meat had already been sold throughout the state and nearly every person in the Lower Peninsula ingested PBB. The effects were unknown and there were an estimated $200 million in lawsuits.
<img class="rightimg" src="https://2020.igem.org/wiki/images/4/4b/T--Alma--superfund_site_2.png" alt="The location of the former Velsicol Chemical Plant">
<img class="leftimg" src="https://2020.igem.org/wiki/images/9/92/T--Alma--superfund_main_sign.png" alt="Velsicol Chemical Plant Superfund Site Sign">
Around this time the Michigan Department of Natural Resources (DNR) stepped in to investigate the effects of the Velsicol Chemical Company’s operations surrounding the Pine River. They found the waterway and the company’s buildings, and property were highly contaminated by years of chemical production. In 1982, the U.S Environmental Protection Agency (EPA) offered Velsicol a deal to pay $38 million in damages in exchange for legal freedom of responsibility for the contamination. The buildings on the property were dismantled and the area was covered by clay to seal in the contamination. The area was fenced off and became an expensive plot of dirt.
Throughout the years, the DNR continued to monitor the river and found that sixteen years after the plant ceased operations the fish of the river were also poisoned with DDT. Further into the investigation it was discovered that river sediment next to the plant site was 4% DDT/DDT derivatives. The pollution problem was far from solved and, in fact, getting worse. In 1997, the Pine River Superfund Citizens Task force was formed as a local advisory group to the EPA. They pushed the EPA for money to clean up the site. The EPA eventually fulfilled the request and a filtration process began that still occurs today.
<img class="rightimg"src="https://2020.igem.org/wiki/images/5/59/T--Alma--superfund_memorial_bench.png" alt="Bench at the site proclaiming mutual goals to restore the Pine River ecosystem to its former glory">
<img class="leftimg" src="https://2020.igem.org/wiki/images/a/a1/T--Alma--Lab_for_homepage.jpeg" alt="iGEMers in lab">
Our team's two-year project, Poisoned River, will focus on creating a DDT-detecting biosensor to aid researchers and cut down on costs. Several species of animals have estrogen receptors known to bind DDT, a known xenoestrogen. Linking this binding process to a reporting gene, such as RFP, within a microbe will allow for the detection of organochlorides, which can enhance broad spectrum screening of these contaminated areas both locally and globally. Ultimately, this biosensor has the potential to save thousands of dollars in the pollution cleanup effort as well as provide a basis for the development of future synthetic biology tools for the bioremediation of DDT.
</body>
</html>