WebApps 2012 uge 37

Welcome to WebApps 2012.09

by secretgspot

HTML

<div class="library-card envelope">
    
    <div class="front">
        <p class="stamp">Welcome to <br> WebApps</p>
    </div>
    
    <div class="card">
        <h4 class="dewey-decimal">2012</h4>
        <h2 class="author">Trainer: Jalal Hejazi</h2>
        <h1 class="title">Working with WebApps using HTML5&nbsp;&amp;&nbsp;CSS3&nbsp;&amp;&nbsp;JavaScript</h1>
        
        <table>
            <tr>
                <th class="due-date">Date Due</th>
                <th class="issued-to">Issued To</th>
            </tr>
       
            
            <tr>
                <td class="due-date">
                    <time>12-09-10</time>
                </td>
                <td class="issued-to">
                    Brian Lund
                </td>
            </tr>
            <tr>
                <td class="due-date">
                    <time>12-09-10</time>
                </td>
                <td class="issued-to">
                   Christian Haugaard
                </td>
            </tr>
            <tr>
                <td class="due-date">
                    <time>12-09-10</time>
                </td>
                <td class="issued-to">
                    Conny Munk
                </td>
            </tr>
             <tr>
                <td class="due-date">
                    <time>12-09-10</time>
                </td>
                <td class="issued-to">
                    Dennis Helligsø
                </td>
            </tr>
               <tr>
                <td class="due-date">
                    <time>12-09-10</time>
                </td>
                <td class="issued-to">
                    Jannie Leonhardt
                </td>
            </tr>
             
            <tr>
                <td class="due-date">
                    <time>12-09-10</time>
                </td>
                <td class="issued-to">
                     Kim Skovgaard
                </td>
            </tr>
            
            
     ...

CSS

/* 
   Jalal Hejazi 2012 06 

   Look, man No images!
   ONLY use of hefty web fonts
*/

@import url(http://fonts.googleapis.com/css?family=Shadows+Into+Light);
@import url(http://fonts.googleapis.com/css?family=Handlee);
@import url(http://fonts.googleapis.com/css?family=Give+You+Glory);

html {
    -webkit-font-smoothing: antialiased;
}

body {
    padding: 50px;
}

.library-card {
    font-family: monospace;
}

.library-card.envelope {
    background-color: hsl( 50, 50%, 70% );
    border-radius: 3px;
    box-shadow: 0 0 1px hsla( 0, 0%, 0%, 0.5 );
    height: 300px;
    margin: 100px auto 0;
    padding-top: 50px;
    position: relative;
    width: 280px;
}

.library-card > .front {
    background-color: hsl( 50, 50%, 70% );
    background:
        -webkit-radial-gradient(
            hsl( 50, 50%, 90% ),
            hsl( 50, 50%, 70% )
        ) 50% -200px,
        hsl( 50, 50%, 70% );
    background-repeat: no-repeat;
    background-size: 150% 500px;
    border-radius: 2px 2px 3px 3px;
    box-shadow: 0 -2px 3px hsla( 0, 0%, 0%, 0.1 );
    cursor: pointer;
    height: 500px;
    margin-left: -10px;
    position: relative;
    width: 300px;
    z-index: 1;
}

.library-card > .card {
    
    background:
        -webkit-linear-gradient( -90deg, hsl( 40, 50%, 95% ) 0, hsl( 40, 50%, 95% ) 104px, hsl( 200, 0%, 70% ) 106px ),
        -webkit-linear-gradient( -90deg, transparent 0, transparent 141px, hsl( 200, 0%, 70% ) 142px ),
        -webkit-linear-gradient( -90deg, transparent 0, transparent 35px, hsl( 200, 0%, 70% ) 36px ),
        -webkit-linear-gradient( 0deg, transparent 0, transparent 64px, hsl( 200, 0%, 70% ) 65px ),
        hsl( 40, 50%, 95% );
    background-repeat:
        no-repeat,
        no-repeat,
        repeat,
        no-repeat;
    background-size:
        100% 106px,
        100% 142px,
        100% 36px,
        65px 100%;
    border-radius: 3px;
    box-shadow: 0 0 0.2em hsla( 0, 0%, 0%, 0.5 );
    height: 495px;
    margin-left: -5px;
   ...

JavaScript

var $envelope = $('.library-card.envelope'),
    $card = $envelope.find('.card'),
    $front = $envelope.find('.front');

$front.on('click', function(event) {
    $envelope.toggleClass('card-out');
});

$card.on('click', function(event) {
    $envelope.toggleClass('card-out');
});