GeekPlease 16 Junior Poster

Good day folks,

I'm currently doing a project which needs to be something like this http://wandaprint.com/home

This is what I've done so far. Can you give me some tips on how to do this one.

HMTL:

<html>
<head>

    <title>My Site</title>
    <link rel="stylesheet" type="text/css" href="reset.css" />
    <link rel="stylesheet" type="text/css" href="style.css" />


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
    </script>
    <script> 
        $(document).ready(function(){
          $("#left").click(function(){
            $("#left").animate({bottom:'100%'});
          });
        });
    </script> 

    <script> 
        $(document).ready(function(){
          $("#right").click(function(){
            $("#right").animate({bottom:'100%'});
          });
        });
    </script> 

</head>

<body>

<div id="container">
<div id="left">
    <div id="left1"></div>
    <div id="left2"></div>
</div>

<div id="right">
    <div id="right1"></div>
    <div id="right2"></div>
</div>
<div>


</body>
</html>

CSS

#left {
    height: 100%;
    width: 50%; 
    float: left;
    position: absolute;
}

#left1 {
    height: 100%;
    background: blue;   
}

#left2 {
    height: 100%;
    background: green;
}

#right {
    height: 100%;
    width: 50%;
    background: brown;
    float: right;   
}

#right1 {
    height: 100%;
    background: green;  
}

#right2 {
    height: 100%;
    background: blue;
}

#container {
    height: 100%;
}

body {
    height: 500%;
    overflow: hidden;
}

The animation is on the click event of the left div. Thanks in advance.