"
Team:CityU HK/HumanPractice
From 2014.igem.org
(Difference between revisions)
| Line 122: | Line 122: | ||
</style> | </style> | ||
| + | <style> | ||
| + | html,body { | ||
| + | font-family: 'Raleway', sans-serif; | ||
| + | padding: 0 2em; | ||
| + | font-size: 18px; | ||
| + | background: #222; | ||
| + | color: #aaa; | ||
| + | text-align:center; | ||
| + | } | ||
| + | h1 { | ||
| + | font-size: 3em; | ||
| + | font-weight: 200; | ||
| + | margin: 0.5em 0 0.2em 0; | ||
| + | } | ||
| + | |||
| + | p { | ||
| + | margin: 1.5em 0; | ||
| + | color: #888; | ||
| + | } | ||
| + | |||
| + | .italic { font-style: italic; } | ||
| + | .small { font-size: 0.8em; } | ||
| + | |||
| + | /** LIGHTBOX MARKUP **/ | ||
| + | |||
| + | .lightbox { | ||
| + | /** Default lightbox to hidden */ | ||
| + | display: none; | ||
| + | |||
| + | /** Position and style */ | ||
| + | position: fixed; | ||
| + | z-index: 999; | ||
| + | width: 100%; | ||
| + | height: 100%; | ||
| + | text-align: center; | ||
| + | top: 0; | ||
| + | left: 0; | ||
| + | background: rgba(0,0,0,0.8); | ||
| + | } | ||
| + | |||
| + | .lightbox img { | ||
| + | /** Pad the lightbox image */ | ||
| + | max-width: 90%; | ||
| + | max-height: 80%; | ||
| + | margin-top: 2%; | ||
| + | } | ||
| + | |||
| + | .lightbox:target { | ||
| + | /** Remove default browser outline */ | ||
| + | outline: none; | ||
| + | |||
| + | /** Unhide lightbox **/ | ||
| + | display: block; | ||
| + | } | ||
| + | </style> | ||
</head> | </head> | ||
| Line 145: | Line 200: | ||
</div> <!-- end of container--> | </div> <!-- end of container--> | ||
| + | <!-- Lightbox usage markup --> | ||
| + | <link href="http://fonts.googleapis.com/css?family=Raleway:200,100,400" rel="stylesheet" type="text/css" /> | ||
| + | <h1>Pure CSS Lightbox</h1> | ||
| + | <p>Click the thumbnail below to activate the lightbox</p> | ||
| + | |||
| + | <!-- thumbnail image wrapped in a link --> | ||
| + | <a href="#img1"> | ||
| + | <img src="https://s3.amazonaws.com/gschierBlog/images/pig-small.jpg"> | ||
| + | </a> | ||
| + | |||
| + | <!-- lightbox container hidden with CSS --> | ||
| + | <a href="#_" class="lightbox" id="img1"> | ||
| + | <img src="https://s3.amazonaws.com/gschierBlog/images/pig-big.jpg"> | ||
| + | </a> | ||
| + | <p class="italic small">Image credit: Me</p> | ||
<!--==================== footer ===========================--> | <!--==================== footer ===========================--> | ||
Revision as of 02:10, 20 September 2014
Human Practice
We educated secondary school kids about synthetic biology and the safety issues. We also conducted a survey on public understanding on synthetic biology.
What we have done
This part is under construction.
Survey
This part is under construction.
Pure CSS Lightbox
Click the thumbnail below to activate the lightbox
Image credit: Me
