Difference between revisions of "Team:CU Boulder/Outreach"
(45 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 */ | ||
Line 26: | Line 28: | ||
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 38: | Line 44: | ||
#banner { | #banner { | ||
+ | width: 84%; | ||
+ | min-width: 800px; | ||
+ | max-width: 1020px; /* Vertical margins, and auto to center */ | ||
+ | margin: auto; | ||
/*background-color: black;*/ | /*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: | + | padding-top: 20px; |
padding-bottom: 0px; | padding-bottom: 0px; | ||
− | vertical-align: middle | + | vertical-align: middle; |
+ | margin-top: 50px; | ||
} | } | ||
#heading { | #heading { | ||
Line 52: | Line 63: | ||
text-align: center; | text-align: center; | ||
/*height: 100px;*/ | /*height: 100px;*/ | ||
− | width: 100%; | + | /*width: 100%; |
min-width: 780px; | min-width: 780px; | ||
− | 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; | margin: auto; | ||
Line 72: | Line 77: | ||
#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 78: | 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 86: | Line 92: | ||
#heading h2 { | #heading h2 { | ||
padding-top:0px; | 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 179: | 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 186: | Line 238: | ||
<body> | <body> | ||
<div id="page"> | <div id="page"> | ||
+ | <br><br> | ||
<div id="banner"> | <div id="banner"> | ||
− | <br> | + | <br> |
<div id="heading"> | <div id="heading"> | ||
<h2>Case Study:</h2> | <h2>Case Study:</h2> | ||
Line 200: | 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 251: | 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>