Bookmark

by mmarcon

HTML

<div id="container">
    <h1>Lorem ipsum</h1>
    <p> 
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum leo sit amet orci posuere porta. Etiam non arcu id diam accumsan suscipit sed rutrum magna. Nunc pretium pharetra augue, non sagittis justo faucibus eu. Phasellus porta libero sed mi porta eleifend condimentum orci tempus. Ut non lorem dolor. Mauris et condimentum metus. Vivamus commodo nibh nec eros sollicitudin quis varius lacus pharetra. Aenean hendrerit viverra orci et fringilla. Nulla suscipit porttitor lectus, ullamcorper lacinia eros venenatis sed. Phasellus accumsan commodo nisl a posuere. Donec suscipit adipiscing tincidunt. Fusce et viverra neque. In laoreet condimentum nisl, volutpat ultricies nunc rutrum quis. Aenean laoreet velit viverra odio consequat in posuere nunc rhoncus. Etiam tempus vehicula diam nec pharetra. Nulla ut leo sollicitudin ligula pellentesque ultrices. Curabitur dapibus orci id lectus pulvinar et laoreet metus aliquet. Vestibulum quam ligula, tempus quis pretium venenatis, rhoncus vel risus. Nullam posuere bibendum nulla eu volutpat.
    </p> 
    <p> 
        Donec eget est ut orci congue imperdiet. Morbi eget blandit nisi. Ut id semper sapien. Duis nec nunc mi. Vivamus laoreet erat ac ante accumsan id aliquet sem viverra. Fusce commodo accumsan leo a iaculis. Aenean pellentesque pharetra diam quis luctus. Sed ante risus, euismod in tempus a, gravida eu leo. Morbi ullamcorper bibendum malesuada. Cras eu ligula rutrum mi aliquam sagittis nec a tellus.
    </p> 
    <p> 
        Vestibulum tempor lacus id urna consequat commodo. Nunc urna risus, ultricies et interdum et, congue vitae tortor. Nunc commodo, est id hendrerit tincidunt, ipsum quam pellentesque magna, laoreet lacinia quam ante a risus. Duis ut orci nisl, hendrerit eleifend nunc. Suspendisse a cursus sapien. Ut imperdiet varius ullamcorper. Praesent nibh dolor, dapibus a tincidunt semper, auctor vel nunc. Etiam auctor rhoncus metus at...

CSS

@import url(http://fonts.googleapis.com/css?family=Cabin+Sketch:bold);
@import url(http://fonts.googleapis.com/css?family=Terminal+Dosis+Light);

#container {
    font-family: 'Terminal Dosis Light', arial, sans-serif;
    padding-bottom: 50px;
}

h1, h3 {
    font-family: 'Cabin Sketch', arial, serif;
}

h1 {
    font-size: 64px;
}

#box-shadow {
    width: 200px;
    height: 1px;
    box-shadow: 0 -1px 8px #000;
    margin-left: -100px;
    position: fixed;
    bottom: 0;
    left: 50%;
    z-index: 1000;
    background-color: #eee;
}

#main {
    width: 180px;
    margin: auto;
    position: relative;
    top: -52px;
    height: 52px;
    overflow: hidden;
    border-top: 1px solid #ddd;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 -2px 10px #ccc;
}

h3 {
    font-size: 20px;
    line-height: 1.5;
    background-color: #cc0000;
    color: #fff;
    padding: 3px;
    text-align: center;
    z-index: 800;
    margin: 5px 0 20px 0;
    position: relative;
    cursor: pointer;
}

h3 span {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #cc0000;
    position: absolute;
    top: 36px;
    left: 90px;
    margin-left: -10px;
    z-index: 1500;
    display: block;
}

p {
    padding: 3px;
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
}

p.link {
    text-align: center;
    padding-top: 10px;
}

p a:link, p a:visited {
    color: #fff;
    background-color: #cc0000;
    text-decoration: none;
    padding: 2px 3px;
}

JavaScript

$(function() {
    $('#hide').click(function() {
        $('#main').animate({
            height: '52px',
            top: '-52px'
        }, 1000, 'easeOutBounce');
        return false;
    });

    var show = function() {
        $('#main').animate({
            height: '400px',
            top: '-400px'
        }, 3000, 'easeOutBounce');
    };

    $('h3').click(show);

    window.setTimeout(show, 2000);
});