Created
February 4, 2013 01:58
-
-
Save misaelnieto/4704630 to your computer and use it in GitHub Desktop.
Fun with HTML, bootstrap, CSS and some jQuery
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment