|
|
(36 intermediate revisions not shown) |
Line 2: |
Line 2: |
| | | |
| <html> | | <html> |
- | <!=====================================================HTML====================================--> | + | <p>Here you have some of the pictures we've taken during this months, it's unpublished material! Enjoy it...</p> |
- | <div class="main_image">
| + | </br> |
- | <img src="banner1.jpg" alt="" />
| + | <p> <strong> THE TEAM <strong> </p> |
- | <div class="desc">
| + | <embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="400" height="267" style="margin-left:190px;" flashvars="host=picasaweb.google.com&hl=es&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F100571191190012676212%2Falbumid%2F5629529901700434145%3Falt%3Drss%26kind%3Dphoto%26hl%3Des" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> |
- | <a href="#" class="collapse">Close Me!</a>
| + | </br> |
- | <div class="block">
| + | </br> |
- | <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====================================--> | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
- | | + | |
| | | |
| + | <p><strong>WORK IN THE LAB<strong></p> |
| + | <embed type="application/x-shockwave-flash" src="https://picasaweb.google.com/s/c/bin/slideshow.swf" width="400" height="267" style="margin-left:190px;" flashvars="host=picasaweb.google.com&hl=es&feat=flashalbum&RGB=0x000000&feed=https%3A%2F%2Fpicasaweb.google.com%2Fdata%2Ffeed%2Fapi%2Fuser%2F100571191190012676212%2Falbumid%2F5629529014869326945%3Falt%3Drss%26kind%3Dphoto%26hl%3Des" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> |
| + | <br/> |
| + | </br> |
| | | |
| </html> | | </html> |
Here you have some of the pictures we've taken during this months, it's unpublished material! Enjoy it...