solutions/css/positioning/exercise4.html

<!DOCTYPE html>
<html>
<head>
    <title>Exercise #4: Webshop</title>
    <style>
        @import url(http://fonts.googleapis.com/css?family=Montserrat);
        @import url(http://fonts.googleapis.com/css?family=Raleway);
        * {
            font-family: Raleway, sans-serif;
            color: #424242;
        }

        h1, h2, h3, h4, h5, h6 {
            font-family: Montserrat, sans-serif;
        }

        a {
            color: #3299BB;
        }
        article {
            width: 250px;
            height: 360px;
            border: 1px solid #BCBCBC;
            padding: 5px;
            margin: 10px 10px 0px 0px;
            position: relative;
            float: left;
        }

        article h3 {
            font-size: 1.1em;
        }

        article img {
            width: 250px;
        }

        article .price {
            position: absolute;
            right: 5px;
            bottom: 5px;
            font-size: 1em;
        }

        .sale {
            color: #FF9900;
            font-weight: bold;
        }

        article div.sale {
            position: absolute;
            right: 0px;
            top: 0px;
            width: 60px;
            height: 40px;
            line-height: 40px; /* we set the line-height to the same as height for vertical alignment of the text */
            background-color: white;
            border-left: 1px solid #BCBCBC;
            border-bottom: 1px solid #BCBCBC;
            z-index: 1;
            text-align: center;
            font-size: 1.2em;
        }

        .newline {
            clear: both;
        }
    </style>
</head>
<body>

    <article>
        <img src="images/ferrari_Tshirt.png" alt="Scuderia Ferrari Team T-Shirt Red"/>

        <h3>Scuderia Ferrari Team T-Shirt Red</h3>

        <div class="price"><s>$120.00</s> <span class="sale">$96.00</span></div>
        <div class="sale">-20%</div>
    </article>

    <article>
        <img src="images/mercedes_Tshirt.png" alt="Mercedes AMG Petronas Lewis Hamilton 2014 World Champion T-Shirt"/>

        <h3>Mercedes AMG Petronas Lewis Hamilton 2014 World Champion T-Shirt</h3>

        <div class="price">$48.00</div>
    </article>

    <article>
        <img src="images/lotus_jacket.png" alt="Lotus F1 Team Replica Rain Jacket"/>

        <h3>Lotus F1 Team Replica Rain Jacket</h3>

        <div class="price"><s>$194.00</s> <span class="sale">$136.00</span></div>
        <div class="sale">-30%</div>
    </article>

    <div class="newline"></div>

    <article>
        <img src="images/ferrari_cap.png" alt="Scuderia Ferrari Raikkonen Driver Cap"/>

        <h3>Scuderia Ferrari Raikkonen Driver Cap</h3>

        <div class="price"><s>$48.00</s> <span class="sale">$16.00</span></div>
        <div class="sale">-66%</div>
    </article>

    <article>
        <img src="images/ferrari_beanie.png" alt="Scuderia Ferrari Beanie"/>

        <h3>Scuderia Ferrari Beanie</h3>

        <div class="price"><s>$40.00</s> <span class="sale">$32.00</span></div>
        <div class="sale">-20%</div>
    </article>

    <article>
        <img src="images/mercedes_cap.png" alt="Mercedes AMG Petronas Rosberg Driver Cap"/>

        <h3>Mercedes AMG Petronas Rosberg Driver Cap</h3>

        <div class="price"><s>$48.00</s> <span class="sale">$24.00</span></div>
        <div class="sale">-50%</div>
    </article>

</body>
</html>