Difference between revisions of "Team:CU Boulder/Outreach"
(72 intermediate revisions by the same user not shown) | |||
Line 4: | Line 4: | ||
<style> | <style> | ||
h1 { | h1 { | ||
− | line-height: | + | 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 13: | 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 33: | Line 40: | ||
margin: auto; | margin: auto; | ||
padding-bottom: 50px; | padding-bottom: 50px; | ||
+ | padding-top: 50px; | ||
} | } | ||
#banner { | #banner { | ||
− | background-color: black; | + | width: 84%; |
+ | min-width: 800px; | ||
+ | max-width: 1020px; /* Vertical margins, and auto to center */ | ||
+ | margin: auto; | ||
+ | /*background-color: black;*/ | ||
color: white; | color: white; | ||
text-align: center; | text-align: center; | ||
− | height: 240px; | + | /*height: 240px;*/ |
− | border: 3px solid red; | + | /*border: 3px solid red;*/ |
+ | padding-top: 20px; | ||
+ | padding-bottom: 0px; | ||
+ | vertical-align: middle; | ||
+ | margin-top: 50px; | ||
} | } | ||
#heading { | #heading { | ||
Line 46: | Line 62: | ||
color: white; | color: white; | ||
text-align: center; | text-align: center; | ||
− | height: | + | /*height: 100px;*/ |
− | + | /*width: 100%; | |
− | width: | + | min-width: 780px; |
− | min-width: | + | max-width: 1000px;*/ |
− | max-width: 1000px; | + | |
text-align: center; | text-align: center; | ||
− | |||
− | + | /*padding: 0px;*/ | |
− | + | ||
− | + | ||
− | + | ||
− | padding: 0px; | + | |
vertical-align: middle; | vertical-align: middle; | ||
− | border: 3px solid purple; | + | /*border: 3px solid purple;*/ |
+ | |||
+ | margin: auto; | ||
+ | border-radius: 20px 20px 0px 0px; | ||
} | } | ||
#heading h1 { | #heading h1 { | ||
− | font-size: | + | font-size: 30px; |
font-family: "Times New Roman",Times,serif | font-family: "Times New Roman",Times,serif | ||
font-weight: bold; | font-weight: bold; | ||
Line 70: | Line 83: | ||
color: white; | color: white; | ||
margin-top: 0px; | margin-top: 0px; | ||
− | padding-top: | + | padding-top: 10px; |
+ | padding-bottom: 10px; | ||
line-height: 60%; | line-height: 60%; | ||
width: 800px; | width: 800px; | ||
Line 77: | Line 91: | ||
} | } | ||
#heading h2 { | #heading h2 { | ||
− | padding-top: | + | padding-top:0px; |
− | margin-top: | + | margin-top: 25px; |
− | margin-left: | + | margin-left: 5px; |
− | font-size: | + | font-size: 26px; |
font-family: "Times New Roman",Times,serif; | font-family: "Times New Roman",Times,serif; | ||
color: white; | color: white; | ||
Line 171: | Line 185: | ||
margin-bottom: 20px; | margin-bottom: 20px; | ||
float: none; | 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 178: | Line 238: | ||
<body> | <body> | ||
<div id="page"> | <div id="page"> | ||
+ | <br><br> | ||
<div id="banner"> | <div id="banner"> | ||
+ | <br> | ||
<div id="heading"> | <div id="heading"> | ||
<h2>Case Study:</h2> | <h2>Case Study:</h2> | ||
Line 191: | Line 253: | ||
<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> | <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 242: | 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>