Book Flip info

by laustdeleuran

HTML

<script src="http://dev.ljd.dk/resources/modernizr-2.0.6.js"></script>
<header>
    <h1>Available books</h1>
</header>
<article class="item">
    <figure>
        <img src="http://lorempixel.com/350/500/fashion/1" alt="" />
        <figcaption>
            <strong>The joys of Fashion</strong>
            <cite>by John Doe</cite>
        </figcaption>
    </figure>
    <div class="description">
        <h1>The joys of Fashion</h1>
        <cite>by John Doe</cite>
        <div class="entry">
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
            <p><em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
        </div>
        <ul class="tags">
            <li><a href="#">Drama</a></li>
            <li><a href="#">Fashion</a></li>
        </ul>
    </div>
</article>
<article class="item opened">
    <figure>
        <img src="http://lorempixel.com/350/500/fashion/2" alt="" />
        <figcaption>
            <strong>The joys of Fashion</strong>
            <cite>by John Doe</cite>
        </figcaption>
    </figure>
    <div class="description">
        <h1>The joys of Fashion</h1>
        <cite>by John Doe</cite>
        <div class="entry">
            <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. </p>
            <p><em>Aenean ultricies mi vitae est.</em>...

CSS

/*=RESET*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td, figure, figcaption, menu { margin:0; padding:0;}table { border-collapse:collapse; border-spacing:0;}fieldset,img { border:0;}address,caption,cite,code,dfn,em,strong,th,var { font-style:normal; font-weight:normal;}ol,ul { list-style:none;}caption,th { text-align:left;}h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal;}q:before,q:after { content:'';}abbr,acronym { border:0;}section, article, header, footer, nav, aside, hgroup, video, figure, figcaption, menu { display:block; }
/*=GENERIC*/
html {
  overflow-y:scroll;
}
.group:after {
  content:"."; 
  display:block; 
  height:0; 
  clear:both; 
  visibility:hidden;
}
b, strong {
  font-weight:bold;
}
i, em {
  font-style:italic;
}
a {
  color:#00b7e5;
  text-decoration:none;
}
mark a {
  color:#fff;
  background:#00b7e5;
}
a:hover {
  text-decoration:underline;
}
a:active {
  color:#000;
}
h1, h2, h3, h4, h5, h6 {
  font-weight:bold;
}
abbr {
  border-bottom:1px dotted #333;
  cursor:help;
}
img, embed, object, video {
  max-width: 100%;
}
::-moz-selection { background: #00b7e5; color: #fff; text-shadow: none; }
::selection { background: #00b7e5; color: #fff; text-shadow: none; }
/*=LAYOUT*/
body {
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:62.5%;
  background:#333;
}
/*=HEADER*/
header {
  padding:5px 10px;
  border-top:2px solid #888;
  box-shadow:0 0 5px #2f2f2f;
  color:#fff;
  font-size:1.4em;
  text-shadow:0 0 1px #000;
  margin:0 0 5px;
  background-color: #707070;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#707070), to(#555555)); /* Saf4+, Chrome */
  background-image: -webkit-linear-gradient(top, #707070, #555555); /* Chrome 10+, Saf5.1+, iOS 5+ */
  background-image:    -moz-linear-gradient(top, #707070, #555555); /* FF3.6 */
  background-image:     -ms-linear-gradient(top, #707070, #555555); /* IE10 */
  background-image:     ...

JavaScript

// Create object
var flipBook = function() {
    
};

// Dom ready
$(document).ready(function(){
    $('.item').each(function(){ new flipBook(this); });
});