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!

Or watch our project presentation video <a class="hyperlink" href="https://video.igem.org/videos/watch/e8dd4d59-79f2-4853-b1a0-fb847fec8554" target="_blank">here.</a>

 <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.

Foundations & Formulations

     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.

Chemicals, Cattle, & Contamination

     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">

Severance & Shutdown

     	  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.

Pollution, Problems, & Persistence

      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">

Research & Revival

         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>