adriancelano/estela.html

## estela.html
<!DOCTYPE html>
<html>
<head>
    <title>Click effect</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
    <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
    <link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
<style type="text/css">

.container h1 {
    text-align: center;
}

.product a {
    background: #9d261d;
    text-align: center;
    color: white;
    height: 10em;
    padding-top: 5em;
    width: 20em;
    display: block;
    margin: 0 auto;
}

.product a:hover {
    background: rgb(204, 84, 75);
    -webkit-transition: all 125ms linear;
    -moz-transition: all 125ms linear;
    -ms-transition: all 125ms linear;
    -o-transition: all 125ms linear;
    transition: all 125ms linear;
}

.info {
    border: 1px solid #9d261d;
}

.info img {
    height: 100px;
    width: 100px
}

.info ul {
    list-style: none;
    margin: 0;
}

.info ul li.descripcion {
    font-style: italic;
    font-weight: bold;
    font-size: small;
}

.info li.photo {
    float: left;
    margin-right: 0.5em;
}

</style>
<script type="text/javascript">
var datosJSON = {
    "descripcion" : "Lorem ipsum aliqua adipisicing aute in esse id laboris id velit do laborum proident velit deserunt sint dolor enim dolore non tempor nostrud ut sint dolore in in.",
    "id" : 6,
    "idea" : "Lorem ipsum exercitation est incididunt dolore officia aute incididunt laborum in magna laborum nisi adipisicing occaecat quis esse amet dolore ad labore proident aute velit ad culpa laborum proident incididunt ullamco in in enim id anim aute amet sit. ",
    "imagen" : "diptico1_1.png",
    "titulo" : "Foo bar"
};

$(document).ready(function() {
    $('.product a').click(function (evt) {
        var parent = $(this).parent();
        $('.info').remove();
        evt.preventDefault();
        setTimeout(function() { //Simula un request de JSON.
            var divInfo = $('<div class="info well"></div>');
            var ul = $('<ul></ul>');
            divInfo.append('<h3>'+ datosJSON.titulo + '</h3>');
            ul.append('<li class="photo"><img src="img/' + datosJSON.imagen +'"/> </li>');
            ul.append('<li class="descripcion">'+ datosJSON.descripcion +'</li>');
            ul.append('<li class="idea">'+ datosJSON.idea +'</li>');
            divInfo.append(ul);
            parent.append(divInfo);
        })
    });
});
</script>
</head>
<body>
    <div class="container">
        <h1>Efectos lindos de cajitas</h1>
        <div class="row">
            <div class="span4 product">
                <a href="#">
                    <i class="icon-camera-retro icon-4x"></i>
                </a>
            </div>
            <div class="span4 product">
                <a href="#">
                    <i class="icon-camera-retro icon-4x"></i>
                </a>
            </div>
            <div class="span4 product">
                <a href="#">
                    <i class="icon-camera-retro icon-4x"></i>
                </a>
            </div>
        </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Click effect</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
	<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
	<link href="http://netdna.bootstrapcdn.com/font-awesome/3.0.2/css/font-awesome.css" rel="stylesheet">
	<script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
	<style type="text/css">

	.container h1 {
	text-align: center;
	}

	.product a {
	background: #9d261d;
	text-align: center;
	color: white;
	height: 10em;
	padding-top: 5em;
	width: 20em;
	display: block;
	margin: 0 auto;
	}

	.product a:hover {
	background: rgb(204, 84, 75);
	-webkit-transition: all 125ms linear;
	-moz-transition: all 125ms linear;
	-ms-transition: all 125ms linear;
	-o-transition: all 125ms linear;
	transition: all 125ms linear;
	}

	.info {
	border: 1px solid #9d261d;
	}

	.info img {
	height: 100px;
	width: 100px
	}

	.info ul {
	list-style: none;
	margin: 0;
	}

	.info ul li.descripcion {
	font-style: italic;
	font-weight: bold;
	font-size: small;
	}

	.info li.photo {
	float: left;
	margin-right: 0.5em;
	}

	</style>
	<script type="text/javascript">
	var datosJSON = {
	"descripcion" : "Lorem ipsum aliqua adipisicing aute in esse id laboris id velit do laborum proident velit deserunt sint dolor enim dolore non tempor nostrud ut sint dolore in in.",
	"id" : 6,
	"idea" : "Lorem ipsum exercitation est incididunt dolore officia aute incididunt laborum in magna laborum nisi adipisicing occaecat quis esse amet dolore ad labore proident aute velit ad culpa laborum proident incididunt ullamco in in enim id anim aute amet sit. ",
	"imagen" : "diptico1_1.png",
	"titulo" : "Foo bar"
	};

	$(document).ready(function() {
	$('.product a').click(function (evt) {
	var parent = $(this).parent();
	$('.info').remove();
	evt.preventDefault();
	setTimeout(function() { //Simula un request de JSON.
	var divInfo = $('<div class="info well"></div>');
	var ul = $('<ul></ul>');
	divInfo.append('<h3>'+ datosJSON.titulo + '</h3>');
	ul.append('<li class="photo"><img src="img/' + datosJSON.imagen +'"/> </li>');
	ul.append('<li class="descripcion">'+ datosJSON.descripcion +'</li>');
	ul.append('<li class="idea">'+ datosJSON.idea +'</li>');
	divInfo.append(ul);
	parent.append(divInfo);
	})
	});
	});
	</script>
	</head>
	<body>
	<div class="container">
	<h1>Efectos lindos de cajitas</h1>
	<div class="row">
	<div class="span4 product">
	<a href="#">
	<i class="icon-camera-retro icon-4x"></i>
	</a>
	</div>
	<div class="span4 product">
	<a href="#">
	<i class="icon-camera-retro icon-4x"></i>
	</a>
	</div>
	<div class="span4 product">
	<a href="#">
	<i class="icon-camera-retro icon-4x"></i>
	</a>
	</div>
	</div>
	</div>
	</body>
	</html>