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

Close Me!

Title

Date

Copy

  • Image Name

    Title

    Date

    Copy

Retrieved from "http://2011.igem.org/Team:Sevilla/Gallery"