Team:Sevilla/Gallery
From 2011.igem.org
(Difference between revisions)
(Created page with "{{:Team:Sevilla/Templates/general}} <html> </html>") |
|||
Line 2: | Line 2: | ||
<html> | <html> | ||
+ | <!=====================================================HTML====================================--> | ||
+ | <div class="main_image"> | ||
+ | <img src="banner1.jpg" alt="" /> | ||
+ | <div class="desc"> | ||
+ | <a href="#" class="collapse">Close Me!</a> | ||
+ | <div class="block"> | ||
+ | <h2>Title</h2> | ||
+ | <small>Date</small> | ||
+ | <p>Copy</p> | ||
+ | </div> | ||
+ | </div> | ||
+ | </div> | ||
+ | |||
+ | <div class="image_thumb"> | ||
+ | <ul> | ||
+ | <li> | ||
+ | <a href="banner1.jpg"><img src="banner1_thumb.jpg" alt="Image Name" /></a> | ||
+ | <div class="block"> | ||
+ | <h2>Title</h2> | ||
+ | <small>Date</small> | ||
+ | <p>Copy</p> | ||
+ | </div> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </div> | ||
+ | <!=====================================================CSS====================================--> | ||
+ | <style> | ||
+ | .main_image { | ||
+ | width: 598px; | ||
+ | height: 456px; | ||
+ | float: left; | ||
+ | background: #333; | ||
+ | position: relative; | ||
+ | overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/ | ||
+ | color: #fff; | ||
+ | } | ||
+ | .main_image h2 { | ||
+ | font-size: 2em; | ||
+ | font-weight: normal; | ||
+ | margin: 0 0 5px; | ||
+ | padding: 10px; | ||
+ | } | ||
+ | .main_image p { | ||
+ | font-size: 1.2em; | ||
+ | line-height: 1.6em; | ||
+ | padding: 10px; | ||
+ | margin: 0; | ||
+ | } | ||
+ | .block small { /*--We'll be using this same style on our thumbnail list--*/ | ||
+ | font-size: 1em; | ||
+ | padding: 0 0 0 20px; | ||
+ | background: url(icon_calendar.gif) no-repeat 0 center; | ||
+ | } | ||
+ | .main_image .block small {margin-left: 10px;} | ||
+ | .main_image .desc{ | ||
+ | position: absolute; | ||
+ | bottom: 0; | ||
+ | left: 0; /*--Stick the desc class to the bottom of our main image container--*/ | ||
+ | width: 100%; | ||
+ | display: none; /*--Hide description by default, if js is enabled, we will show this--*/ | ||
+ | } | ||
+ | .main_image .block{ | ||
+ | width: 100%; | ||
+ | background: #111; | ||
+ | border-top: 1px solid #000; | ||
+ | } | ||
+ | .main_image a.collapse { /*--This is our hide/show tab--*/ | ||
+ | background: url(btn_collapse.gif) no-repeat left top; | ||
+ | height: 27px; | ||
+ | width: 93px; | ||
+ | text-indent: -99999px; | ||
+ | position: absolute; | ||
+ | top: -27px; | ||
+ | right: 20px; | ||
+ | } | ||
+ | .main_image a.show {background-position: left bottom;} | ||
+ | |||
+ | .image_thumb { | ||
+ | float: left; | ||
+ | width: 299px; | ||
+ | background: #f0f0f0; | ||
+ | border-right: 1px solid #fff; | ||
+ | border-top: 1px solid #ccc; | ||
+ | } | ||
+ | .image_thumb img { | ||
+ | border: 1px solid #ccc; | ||
+ | padding: 5px; | ||
+ | background: #fff; | ||
+ | float: left; | ||
+ | } | ||
+ | .image_thumb ul { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | list-style: none; | ||
+ | } | ||
+ | .image_thumb ul li{ | ||
+ | margin: 0; | ||
+ | padding: 12px 10px; | ||
+ | background: #f0f0f0 url(nav_a.gif) repeat-x; | ||
+ | width: 279px; | ||
+ | float: left; | ||
+ | border-bottom: 1px solid #ccc; | ||
+ | border-top: 1px solid #fff; | ||
+ | border-right: 1px solid #ccc; | ||
+ | } | ||
+ | .image_thumb ul li.hover { /*--Hover State--*/ | ||
+ | background: #ddd; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | .image_thumb ul li.active { /*--Active State--*/ | ||
+ | background: #fff; | ||
+ | cursor: default; | ||
+ | } | ||
+ | html .image_thumb ul li h2 { | ||
+ | font-size: 1.5em; | ||
+ | margin: 5px 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | .image_thumb ul li .block { | ||
+ | float: left; | ||
+ | margin-left: 10px; | ||
+ | padding: 0; | ||
+ | width: 170px; | ||
+ | } | ||
+ | .image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/ | ||
+ | </style> | ||
+ | |||
+ | <!=====================================================JS====================================--> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
+ | |||
</html> | </html> |
Revision as of 16:34, 23 July 2011
![](banner1.jpg)
Close Me!
Title
DateCopy