Difference between revisions of "Team:CU Boulder/Outreach"
(147 intermediate revisions by the same user not shown) | |||
Line 3: | Line 3: | ||
<head> | <head> | ||
<style> | <style> | ||
+ | h1 { | ||
+ | line-height: 115%; | ||
+ | } | ||
#page { | #page { | ||
height: 150%; | height: 150%; | ||
+ | /* | ||
-webkit-background-size: cover; | -webkit-background-size: cover; | ||
-moz-background-size: cover; | -moz-background-size: cover; | ||
Line 10: | Line 14: | ||
background-size: cover; | background-size: cover; | ||
background-repeat:no-repeat; | background-repeat:no-repeat; | ||
+ | */ | ||
+ | |||
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#93d365+19,cce9af+40,93d365+66,c7eab3+98 */ | /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#93d365+19,cce9af+40,93d365+66,c7eab3+98 */ | ||
− | background: #93d365; /* Old browsers */ | + | /*background: #93d365; *//* Old browsers */ |
− | background: -moz-linear-gradient(top, #93d365 19%, #cce9af 40%, #93d365 66%, #c7eab3 98%); /* FF3.6+ */ | + | /*background: -moz-linear-gradient(top, #93d365 19%, #cce9af 40%, #93d365 66%, #c7eab3 98%); *//* FF3.6+ */ |
− | background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,#93d365), color-stop(40%,#cce9af), color-stop(66%,#93d365), color-stop(98%,#c7eab3)); /* Chrome,Safari4+ */ | + | /*background: -webkit-gradient(linear, left top, left bottom, color-stop(19%,#93d365), color-stop(40%,#cce9af), color-stop(66%,#93d365), color-stop(98%,#c7eab3)); *//* Chrome,Safari4+ */ |
− | background: -webkit-linear-gradient(top, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%); /* Chrome10+,Safari5.1+ */ | + | /*background: -webkit-linear-gradient(top, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%); *//* Chrome10+,Safari5.1+ */ |
− | background: -o-linear-gradient(top, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%); /* Opera 11.10+ */ | + | /*background: -o-linear-gradient(top, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%); *//* Opera 11.10+ */ |
− | background: -ms-linear-gradient(top, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%); /* IE10+ */ | + | /*background: -ms-linear-gradient(top, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%); *//* IE10+ */ |
− | background: linear-gradient(to bottom, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%); /* W3C */ | + | /*background: linear-gradient(to bottom, #93d365 19%,#cce9af 40%,#93d365 66%,#c7eab3 98%);*/ /* W3C */ |
− | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93d365', endColorstr='#c7eab3',GradientType=0 ); /* IE6-9 */ | + | /*filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#93d365', endColorstr='#c7eab3',GradientType=0 ); *//* IE6-9 */ |
padding-bottom: 0px; | padding-bottom: 0px; | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
+ | |||
+ | -webkit-box-shadow: -1px 1px 5px 5px rgba(50, 50, 50, 0.5); | ||
+ | -moz-box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
} | } | ||
Line 30: | Line 40: | ||
margin: auto; | margin: auto; | ||
padding-bottom: 50px; | padding-bottom: 50px; | ||
+ | padding-top: 50px; | ||
+ | } | ||
+ | |||
+ | #banner { | ||
+ | width: 84%; | ||
+ | min-width: 800px; | ||
+ | max-width: 1020px; /* Vertical margins, and auto to center */ | ||
+ | margin: auto; | ||
+ | /*background-color: black;*/ | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | /*height: 240px;*/ | ||
+ | /*border: 3px solid red;*/ | ||
+ | padding-top: 20px; | ||
+ | padding-bottom: 0px; | ||
+ | vertical-align: middle; | ||
+ | margin-top: 50px; | ||
+ | } | ||
+ | #heading { | ||
+ | background-color: black; | ||
+ | color: white; | ||
+ | text-align: center; | ||
+ | /*height: 100px;*/ | ||
+ | /*width: 100%; | ||
+ | min-width: 780px; | ||
+ | max-width: 1000px;*/ | ||
+ | text-align: center; | ||
+ | |||
+ | /*padding: 0px;*/ | ||
+ | vertical-align: middle; | ||
+ | /*border: 3px solid purple;*/ | ||
+ | |||
+ | margin: auto; | ||
+ | border-radius: 20px 20px 0px 0px; | ||
+ | } | ||
+ | |||
+ | #heading h1 { | ||
+ | font-size: 30px; | ||
+ | font-family: "Times New Roman",Times,serif | ||
+ | font-weight: bold; | ||
+ | font-weight: normal; | ||
+ | color: white; | ||
+ | margin-top: 0px; | ||
+ | padding-top: 10px; | ||
+ | padding-bottom: 10px; | ||
+ | line-height: 60%; | ||
+ | width: 800px; | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
+ | } | ||
+ | #heading h2 { | ||
+ | padding-top:0px; | ||
+ | margin-top: 25px; | ||
+ | margin-left: 5px; | ||
+ | font-size: 26px; | ||
+ | font-family: "Times New Roman",Times,serif; | ||
+ | color: white; | ||
+ | text-align: left; | ||
+ | width: 800px; | ||
+ | display: inline-block; | ||
+ | vertical-align: middle; | ||
} | } | ||
Line 42: | Line 113: | ||
margin-bottom: 0px; | margin-bottom: 0px; | ||
margin-top: 50px; | margin-top: 50px; | ||
+ | |||
+ | -webkit-box-shadow: -1px 1px 5px 5px rgba(50, 50, 50, 0.5); | ||
+ | -moz-box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
} | } | ||
.black_box h1 { | .black_box h1 { | ||
Line 57: | Line 132: | ||
.black_box ul { | .black_box ul { | ||
list-style-type: none; | list-style-type: none; | ||
+ | list-style-position: inside; | ||
} | } | ||
.black_box ul li { | .black_box ul li { | ||
Line 67: | Line 143: | ||
footer { | footer { | ||
margin-top: 0px; | margin-top: 0px; | ||
+ | } | ||
+ | .caption { | ||
+ | font-size | ||
+ | } | ||
+ | |||
+ | |||
+ | .aside_left { | ||
+ | background-color: #78B7DF; | ||
+ | float: left; | ||
+ | text-align: center; | ||
+ | width: 245px; | ||
+ | padding: 18px; | ||
+ | margin-right: 38px; | ||
+ | margin-top: 32px; | ||
+ | margin-bottom: 20px; | ||
+ | border-radius: 5px; | ||
+ | |||
+ | -webkit-box-shadow: -1px 1px 5px 5px rgba(50, 50, 50, 0.5); | ||
+ | -moz-box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | } | ||
+ | .aside_left h1 { | ||
+ | font-size: 24px; | ||
+ | line-height: 135%; | ||
+ | margin-top: 0px; | ||
+ | padding-top: 15px; | ||
+ | } | ||
+ | .aside_left ul { | ||
+ | font-size: 18px; | ||
+ | list-style-position: inside; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | .aside_left li { | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 18px; | ||
+ | list-style-type: none; | ||
+ | } | ||
+ | |||
+ | .group { | ||
+ | margin-top: 20px; | ||
+ | margin-bottom: 20px; | ||
+ | float: none; | ||
+ | } | ||
+ | .shadow { | ||
+ | -webkit-box-shadow: -1px 1px 5px 5px rgba(50, 50, 50, 0.5); | ||
+ | -moz-box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | } | ||
+ | .triple { | ||
+ | -webkit-box-shadow: -1px 1px 5px 5px rgba(50, 50, 50, 0.5); | ||
+ | -moz-box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | box-shadow: -1px 1px 7px 5px rgba(50, 50, 50, 0.5); | ||
+ | |||
+ | float: left; | ||
+ | width: 240px; | ||
+ | height: 160px; | ||
+ | } | ||
+ | .caption { | ||
+ | margin-top: 12px; | ||
+ | margin-left: auto; | ||
+ | margin-right: auto; | ||
+ | font-size: 12px; | ||
+ | font-style: italic; | ||
+ | width: 70%; | ||
+ | text-align: center | ||
+ | } | ||
+ | #map_red{ | ||
+ | float: right; | ||
+ | width: 280px; | ||
+ | /*height: 200px;*/ | ||
+ | height: 300px; | ||
+ | background-repeat: no-repeat; | ||
+ | /*background-image: url(https://static.igem.org/mediawiki/2014/b/bf/CU_Boulder_map_red.jpg);*/ | ||
+ | background-size: 280px auto; | ||
+ | margin-top: 40px; | ||
+ | margin-left: 40px; | ||
+ | text-align: center; | ||
+ | } | ||
+ | #triple_images { | ||
+ | margin-top: 20px | ||
+ | margin-bottom: 20px; | ||
+ | padding-top: 15px; | ||
+ | padding-bottom: 15px; | ||
+ | |||
+ | border-top: 2px solid #EEE; | ||
+ | border-bottom: 2px solid #EEE; | ||
+ | |||
+ | width: 100%; | ||
} | } | ||
Line 74: | Line 238: | ||
<body> | <body> | ||
<div id="page"> | <div id="page"> | ||
+ | <br><br> | ||
+ | |||
+ | <div id="banner"> | ||
+ | <br> | ||
+ | <div id="heading"> | ||
+ | <h2>Case Study:</h2> | ||
+ | <h1>MONITORING NAPHTHALENE CONTAMINATION</h1> | ||
+ | <h1>IN JEFFERSON COUNTY, COLORADO</h1> | ||
+ | </div> | ||
+ | </div> | ||
+ | <!--</div>--> | ||
<!-- Content goes between the article tags --> | <!-- Content goes between the article tags --> | ||
<div id="content_box"> | <div id="content_box"> | ||
+ | |||
+ | <div id="map_red"> | ||
+ | <img class="shadow" src="https://static.igem.org/mediawiki/2014/b/bf/CU_Boulder_map_red.jpg" width="280px"> | ||
+ | <br> | ||
+ | <div class="caption">Colorado map highlighting the location of Jefferson County</div> | ||
+ | </div> | ||
+ | |||
+ | |||
+ | |||
<h1>Call to Action</h1> | <h1>Call to Action</h1> | ||
+ | |||
<p>In June 2015, a conflict began in Littleton, Colorado between a credit card | <p>In June 2015, a conflict began in Littleton, Colorado between a credit card | ||
manufacturing center and residents of the surrounding areas. Allegations | manufacturing center and residents of the surrounding areas. Allegations | ||
Line 95: | Line 280: | ||
manage naphthalene management, insists that their pollution levels are well within environmental regulation. | manage naphthalene management, insists that their pollution levels are well within environmental regulation. | ||
</p> | </p> | ||
+ | |||
+ | <div class="group"> | ||
+ | <div class="aside_left"> | ||
+ | <h1>CPI Card Group Visions & Values</h1> | ||
+ | <ul> | ||
+ | <li>“To be a responsible corporate citizen and active environmental steward while adhering to the highest standards of ethics”</li> | ||
+ | <li>“Act with uncompromising intergrity in all that we do”</li> | ||
+ | <li>“Demand excellence in performance; we will be relentless in our pursuit of continuous improvement”</li> | ||
+ | </ul> | ||
+ | </div> | ||
<h1>...vs. the Community</h1> | <h1>...vs. the Community</h1> | ||
Line 105: | Line 300: | ||
extremely safe and healthy environment, however some residents tend to | extremely safe and healthy environment, however some residents tend to | ||
disagree.</p> | disagree.</p> | ||
+ | </div> | ||
+ | |||
<p>CU Boulder iGEM interviewed two families, who wish to remain | <p>CU Boulder iGEM interviewed two families, who wish to remain | ||
anonymous, that have claimed to smell naphthalene in the air sourced | anonymous, that have claimed to smell naphthalene in the air sourced | ||
Line 114: | Line 311: | ||
<!---------- images -----------> | <!---------- images -----------> | ||
+ | <div id="triple_images"> | ||
+ | <img class="triple" src="https://static.igem.org/mediawiki/2014/0/05/CU_Boulder_creek.JPG"> | ||
+ | <img class="triple" src="https://2014.igem.org/File:CU_Boulder_school.JPG"> | ||
+ | <img class="triple" src="https://static.igem.org/mediawiki/2014/b/b1/CU_Boulder_playground.JPG"> | ||
+ | <br> | ||
+ | |||
+ | <div class="caption">Colorado map highlighting the location of Jefferson County</div> | ||
+ | </div> | ||
<h1>Questions Unanswered at a Public Forum</h1> | <h1>Questions Unanswered at a Public Forum</h1> |
Latest revision as of 07:39, 14 August 2015
<!DOCTYPE html>