Punto v.2

by alga noto

HTML

<script src="http://mixitup.io/js/jquery.mixitup.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="logo"></div>
<div id="container">
    <div id="left">Punto Architectes
        <ul class="menu">
            <li class="filter" data-filter="all">Projects</li>
            <ul class="projects_submenu">
                <li class="filter" data-filter="grey">Interior</li>
                <li class="filter" data-filter="yellow">Public</li>
                <li class="filter" data-filter="black">Commercial</li>
            </ul>
            <li><a href="#">Profile</a>

            </li>
            <li><a href="#">Contact</a>

            </li>
            <li id="publications"><a href="#">Publications</a>

            </li>
            <ul class="publications_submenu">
                <li><a href="#">Press</a>

                </li>
                <li><a href="#">Essays</a>

                </li>
            </ul>
            <ul id="lang">
                <li><a href="#">FR</a>

                </li>/
                <li><a href="#">EN</a>

                </li>
            </ul>
        </ul>
    </div>
    <div id="middle">
        <p></p>
    </div>
    <div id="Grid">
        <div class="mix thumbs yellow" id="one"><a href="#"></a>

        </div>
        <div class="mix thumbs long black" id="two"><a href="#"></a>
        </div>
        <div class="mix thumbs grey"></div>
        <div class="mix thumbs yellow"></div>
        <div class="mix thumbs black"></div>
        <div class="mix thumbs long grey"></div>
        <div class="mix thumbs yellow"></div>
        <div class="mix thumbs black"></div>
        <div class="mix thumbs yellow"></div>
        <div class="mix thumbs long black"></div>
        <div class="mix thumbs grey"></div>
        <div class="mix thumbs yellow"></div>
        <div class="mix thumbs black"></div>
        <div class="mix thumbs long grey"></div>
        <div class="mix...

CSS

body {
        padding:0;
        margin:0;
        width:100%;
        font-family:helvetica;
        color:black;
        font-size:12px;
        letter-spacing:0.2em;
    }
    p {
        margin:0;
        padding:0;
    }
    html {
        overflow-y: scroll;
    }
    #left {
        height:100%;
        position:fixed;
        top:0;
        left:0;
        width:170px;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        /* Firefox */
        border: 20px solid white;
    }
    #middle {
        padding-left:170px;
        position:fixed;
        width:50%;
        top:0;
        height:100%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        /* Firefox */
        border-right:20px solid white;
        border-top:20px solid white;
        border-bottom:20px solid white;
        z-index:-1;
    }
    #Grid {
        float:right;
        width:50%;
        box-sizing:border-box;
        -moz-box-sizing:border-box;
        /* Firefox */
        border-right:10px solid white;
        border-top:20px solid white;
        font-size:0;
    }
    .thumbs img {
        height:auto!important;
        max-width: 100%;
    }
    .thumbs {
        box-sizing:border-box;
        border-right:10px solid white;
        display:inline-block;
        width:25%;
        padding-bottom:15%;
        margin-bottom:10px;
        vertical-align:top;
    }
    .long {
        padding-bottom:30%;
    }
    .grey {
        background:grey!important;
    }
    .black {
        background:black;
    }
    .yellow {
        background:yellow;
    }
    ul#menu {
        list-style:none;
    }
    #Grid .mix {
        opacity: 0;
        display: none;
    }
    .menu {
        position:absolute;
        bottom:0;
        width:130px;
        padding:0;
        margin:0;
        text-align:left;
        line-height:1.5em;
        list-style:none;
    }
    .menu li a {
        color:black;
        text-decoration:none;
    }
    .menu li...

JavaScript

$('#Grid').mixitup({    
    effects: ['fade'],
    animateGridList: false,
    easing: 'smooth'
});

$("#container").delay(1000).animate({
    opacity: 1
}, 700);


      $(".thumbs#one").mouseenter(function () {
    $("#middle > p").text("Family Villa, Vincennes, Paris").fadeIn(600);

});

$(".thumbs#one").mouseleave(function () {
    $("#middle > p").text().remove();

});


      $(".thumbs#two").mouseenter(function () {
    $("#middle > p").text("Apartment renovation, Paris 12e").fadeIn(600);

});

$(".thumbs#two").mouseleave(function () {
    $("#middle > p").text().remove();

});


$(document).ready(function () {
    $('.projects_submenu').hide();
    $('.publications_submenu').hide();
});

$('ul.menu > li:first').click(function () {
    $(".projects_submenu").slideToggle();
    $('.publications_submenu').slideUp();
});

$('li#publications').click(function () {
    $(".publications_submenu").slideToggle();
    $('.projects_submenu').slideUp();

});


$( ".mix#one" ).click(function() {
$( "#Grid" ).load( "https://dl.dropboxusercontent.com/u/59895113/project_sample.html .project_thumb" );
});