JSFiddle - React, Tailwind, and code Playground

by erackson

HTML

<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!-- Consider adding an manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">

  <title>Priscila Ramos</title>
 
  <meta name="description" content="">
  <meta name="author" content="">

  <link rel="stylesheet" href="css/style.css">
 
  <script src="js/modernizr-2.0.6.min.js"></script>

</head>

<body>

    <div id="container">
        <div id="home" class="divisao">
            <div id="envolucro_home">
                <div id="envolucro_logo">
                    <h2>redatora</h2>
                    <h1 class="logo">Priscila Ramos</h1>
                </div>
                <hr/>
                <ul>
                    <li>
                        <a href="#">pasta</a>
                    </li>
                    <li>
                        <a href="#">eu</a>
                    </li>
                    <li>
                        <a href="#">contato</a>
                    </li>
                    <li>
                        <a href="#">+ textos</a>
                    </li>
                </ul>
            </div>
        </div>
        <div id="pasta" class="divisao">
            
            <div class="pasta-wrapper">
            
                <div class="thumb azul">                                        
                    <img class="thumb-img" src="img/thumbs/1.jpg" alt="" />                    
                    <div class="mask">                    
                        <h2 class="cliente">Livraria Cultura</h2>
                        <h3 class="projeto">Print</h3>                    
                        <a href="#" title="Conheça...

CSS

@font-face {
    font-family: 'SortsMillGoudyRegular';
    src: url('GoudyStM-webfont.eot');
    src: url('GoudyStM-webfont.eot?#iefix') format('embedded-opentype'),
         url('GoudyStM-webfont.woff') format('woff'),
         url('GoudyStM-webfont.ttf') format('truetype'),
         url('GoudyStM-webfont.svg#SortsMillGoudyRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'CandaraRegular';
    src: url('candara-webfont.eot');
    src: url('candara-webfont.eot?#iefix') format('embedded-opentype'),
         url('candara-webfont.woff') format('woff'),
         url('candara-webfont.ttf') format('truetype'),
         url('candara-webfont.svg#CandaraRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}

::-moz-selection { background: #221e1d; color: #fff; text-shadow: none; }
::selection { background: #221e1d; color: #fff; text-shadow: none; }

* {
    margin: 0;
    padding: 0;
    border: 0;
    resize: none;
}

/*Styles Autor: Alex William 
  Autor Portfolio: http://www.artinblog.com*/

body {
    background: #221e1d;
}

#container {
    width: 1000px;
    height: 600px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -300px 0 0 -502px;
    overflow: hidden;    
}

.divisao {
    width: inherit;
    height: inherit;
    position: absolute;
    background: url(../img/bg.jpg)  repeat;
}

#home {
    left: 0;
}

#envolucro_home {
    width: 1000px;
    height: 100px;
    position: absolute;
    top: 50%;
    margin: -50px 0 0 0;
}

#envolucro_logo {
    width: 508px;
    height: auto;
    margin: 0 auto;
}

#envolucro_logo h2 {
    font-family: 'SortsMillGoudyRegular', serif;
    font-size: 20px;
    font-stretch: normal;
    font-weight: 100;
    color: #221e1d;
    text-align: right;
    padding-right: 5px;
}

.logo {
    font-family: 'SortsMillGoudyRegular', serif;
    font-size: 60px;
    color: #221e1d;
    text-transform: uppercase;
    font-stretch: normal;
   ...

JavaScript

$('ul li a:eq(0)').click(function(e) {
        e.preventDefault();            
            $('#home').animate({"left" : "-1000px" },
                {duration: 1500, easing: 'easeInQuad'});
            $('#pasta').animate({"left" : "0" },
                {duration: 1500, easing: 'easeInQuad', complete: function() {
                    $('.footer').animate({"left" : "0px"},
                        {duration: 2000, easing: 'easeInQuad'});
                    $('.pasta-wrapper').animate({"margin-top" : "30px"},
                        {duration: 2000, easing: 'easeInQuad'});
                    }
                });
    });
    
     $('.thumb').hover(function() {
            $(this).find('.mask').stop(true,true).fadeIn(500);
    }, function() {
            $('.mask').stop(true,true).fadeOut(250);
    });
    
    $('.vermelho').hover(function() {
        $('.footer').removeClass('footer-blue').addClass('footer-vermelho');
    });
    
    $('.azul').hover(function() {
        $('.footer').removeClass('footer-vermelho').addClass('footer-azul');
    });
    
    $('.mask a').click(function(e) {
            e.preventDefault();
            $(this).closest('.thumb').addClass('proximo');
            $('.proximo').next('.big-wrapper').addClass('ativo');
            $(this).closest('.thumb').fadeOut(1000, function() {
                $('.ativo').fadeIn(1000, function() {
                    $('.ativo .big-img').animate({ "left" : "10px" },1000);
                });        
            });
        });
        
        $('.fechar').click(function(e) {
            e.preventDefault();
            $('.big-img').animate({"left" : "-333px" },1000, function() {
                $('.ativo').fadeOut(1000).removeClass('ativo');
                $(this).closest('.thumb').delay(1000).removeClass('proximo').fadeIn(1000);
                $('.mask').css({"display" : "none"});
            });
        });