Punto

by alga noto

HTML

<script src="http://mixitup.io/js/jquery.mixitup.min.js"></script>
<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/59895113/punto_logo.png"></script>
<div id="logo"></div>
<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="green">Interior</li>
            <li class="filter" data-filter="yellow">Public</li>
            <li class="filter" data-filter="blue">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="#"><img src="https://dl.dropboxusercontent.com/u/59895113/placeholder_b.jpg" alt="one"></a>

    </div>
    <div class="mix thumbs long" id="two" >blue</div>
    <div class="mix thumbs green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
    <div class="mix thumbs long green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs long blue"></div>
    <div class="mix thumbs green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
    <div class="mix thumbs long green"></div>
    <div class="mix thumbs yellow"></div>
    <div class="mix thumbs blue"></div>
</div>

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 {
    display:none;
    height:100%;
    position:fixed;
    top:0;
    left:0;
    width:170px;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-right:20px solid green;
    border-top:20px solid red;
    border-bottom:20px solid red;
    background:blue;
}
#middle {
    display:none;
    padding-left:170px;
    position:fixed;
    width:50%;
    top:0;
    background:orange;
    height:100%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-right:20px solid red;
    border-top:20px solid red;
    border-bottom:20px solid red;
    z-index:-1;
}
#Grid {
    display:none;
    float:right;
    width:50%;
    box-sizing:border-box;
    -moz-box-sizing:border-box;
    /* Firefox */
    border-right:20px solid white;
    border-top:20px solid white;
    background:orange;
    font-size:0;
}
.thumbs img {
  
  height:auto!important;
  max-width: 100%;

}


.thumbs {
    box-sizing:border-box;
    border-right:10px solid red;
    display:inline-block;
    width:25%;
    padding-bottom:15%;
    margin-bottom:10px;
    vertical-align:top;
}
.long {
    padding-bottom:30%;
}
.green {
    background:green!important;
}
.blue {
    background:blue;
}
.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 a:hover {
    text-decoration:underline;
}
ul#lang {
    list-style:none;
    padding:0;
    margin-top:1em;
}
ul#lang > li {
    display:inline;
}
ul#lang > li > a {
    color:black;
   ...

JavaScript

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

$('#left, #middle, #Grid').not("#logo").fadeIn(2000);





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

});

$(".thumbs#one").mouseleave(function () {
    $("#middle > p").text("Family Villa, Vincennes, Paris").fadeOut(1000);

});


$(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();

});