@{
    ViewBag.Title = "Home Page";
}
<article>
    <h1>Jpg</h1>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Resized</h2>
                <img src="/images/Penguins.jpg?width=300" />
                <h3>Foreign language test.</h3>
                <img src="/images/udendørs.jpg?width=300" />
            </div>
            <div class="column-6">
                <h2>Cropped </h2>
                <img src="/images/Penguins.jpg?crop=0-0-300-225" />
            </div>
        </div>
    </section>
    <section>
        <h2>Filter</h2>
        <div class="row">
            <div class="column-6">
                <h3>blackwhite</h3>
                <img src="/images/Penguins.jpg?width=300&filter=blackwhite" />
            </div>
            <div class="column-6">
                <h3>comic</h3>
                <img src="/images/Penguins.jpg?width=300&filter=comic" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>lomograph</h3>
                <img src="/images/Penguins.jpg?width=300&filter=lomograph" />
            </div>
            <div class="column-6">
                <h3>greyscale</h3>
                <img src="/images/Penguins.jpg?width=300&filter=greyscale" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>polaroid</h3>
                <img src="/images/Penguins.jpg?width=300&filter=polaroid" />
            </div>
            <div class="column-6">
                <h3>sepia</h3>
                <img src="/images/Penguins.jpg?width=300&filter=sepia" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>gotham</h3>
                <img src="/images/Penguins.jpg?width=300&filter=gotham" />
            </div>
            <div class="column-6">
                <h3>hisatch</h3>
                <img src="/images/Penguins.jpg?width=300&filter=hisatch" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>losatch</h3>
                <img src="/images/Penguins.jpg?width=300&filter=losatch" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Watermark</h2>
                <img src="/images/Penguins.jpg?width=300&watermark=text-This+is+a+long+body+of+copy+that+should+wrap|color-fff|size-24|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
            </div>
            <div class="column-6">
                <h2>Format</h2>
                <img src="/images/Penguins.jpg?width=300&format=gif" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Rotate</h2>
                <img src="/images/Penguins.jpg?width=300&rotate=angle-54|bgcolor-fff" />
            </div>
            <div class="column-6">
                <h2>Quality</h2>
                <img src="/images/Penguins.jpg?width=300&quality=5" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Alpha</h2>
                <img src="/images/Penguins.jpg?width=300&format=png&alpha=50" />
            </div>
            <div class="column-6">
                <h2>Remote</h2>
                <img src="/remote.axd?http://images.mymovies.net/images/film/cin/500x377/fid11707.jpg?width=300" />
                @*<img src="/remote.axd?http://www.theworldeffect.com/images/6a00e54fa8abf78833011570697305970b-800wi.jpg?width=300" />*@
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Flip - horizontal</h2>
                <img src="/images/Penguins.jpg?width=300&flip=horizontal" />
            </div>
            <div class="column-6">
                <h2>Flip - vertical</h2>
                <img src="/images/Penguins.jpg?width=300&flip=vertical" />
            </div>
        </div>
    </section>
</article>
<article>
    <h1>Gif</h1>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Resized</h2>
                <img src="/images/Penguins.gif?width=300" />
            </div>
            <div class="column-6">
                <h2>Cropped </h2>
                <img src="/images/Penguins.gif?crop=0-0-300-225" />
            </div>
        </div>
    </section>
    <section>
        <h2>Filter</h2>
        <div class="row">
            <div class="column-6">
                <h3>blackwhite</h3>
                <img src="/images/Penguins.gif?width=300&filter=blackwhite" />
            </div>
            <div class="column-6">
                <h3>comic</h3>
                <img src="/images/Penguins.gif?width=300&filter=comic" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>lomograph</h3>
                <img src="/images/Penguins.gif?width=300&filter=lomograph" />
            </div>
            <div class="column-6">
                <h3>greyscale</h3>
                <img src="/images/Penguins.gif?width=300&filter=greyscale" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>polaroid</h3>
                <img src="/images/Penguins.gif?width=300&filter=polaroid" />
            </div>
            <div class="column-6">
                <h3>sepia</h3>
                <img src="/images/Penguins.gif?width=300&filter=sepia" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>gotham</h3>
                <img src="/images/Penguins.gif?width=300&filter=gotham" />
            </div>
            <div class="column-6">
                <h3>hisatch</h3>
                <img src="/images/Penguins.gif?width=300&filter=hisatch" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>losatch</h3>
                <img src="/images/Penguins.gif?width=300&filter=losatch" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Watermark</h2>
                <img src="/images/Penguins.gif?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
            </div>
            <div class="column-6">
                <h2>Format</h2>
                <img src="/images/Penguins.gif?width=300&format=png" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Rotate</h2>
                <img src="/images/Penguins.gif?width=300&rotate=angle-54|bgcolor-fff" />
            </div>
            <div class="column-6">
                <h2>Quality</h2>
                <img src="/images/Penguins.gif?width=300&quality=5" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Alpha</h2>
                <img src="/images/Penguins.gif?width=300&alpha=50" />
            </div>
        </div>
    </section>
</article>
<article>
    <h1>Png</h1>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Resized</h2>
                <img src="/images/Penguins.png?width=300" />
            </div>
            <div class="column-6">
                <h2>Cropped </h2>
                <img src="/images/Penguins.png?crop=0-0-300-225" />
            </div>
        </div>
    </section>
    <section>
        <h2>Filter</h2>
        <div class="row">
            <div class="column-6">
                <h3>blackwhite</h3>
                <img src="/images/Penguins.png?width=300&filter=blackwhite" />
            </div>
            <div class="column-6">
                <h3>comic</h3>
                <img src="/images/Penguins.png?width=300&filter=comic" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>lomograph</h3>
                <img src="/images/Penguins.png?width=300&filter=lomograph" />
            </div>
            <div class="column-6">
                <h3>greyscale</h3>
                <img src="/images/Penguins.png?width=300&filter=greyscale" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>polaroid</h3>
                <img src="/images/Penguins.png?width=300&filter=polaroid" />
            </div>
            <div class="column-6">
                <h3>sepia</h3>
                <img src="/images/Penguins.png?width=300&filter=sepia" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>gotham</h3>
                <img src="/images/Penguins.png?width=300&filter=gotham" />
            </div>
            <div class="column-6">
                <h3>hisatch</h3>
                <img src="/images/Penguins.png?width=300&filter=hisatch" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>losatch</h3>
                <img src="/images/Penguins.png?width=300&filter=losatch" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Watermark</h2>
                <img src="/images/Penguins.png?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
            </div>
            <div class="column-6">
                <h2>Format</h2>
                <img src="/images/Penguins.png?width=300&format=bmp" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Rotate</h2>
                <img src="/images/Penguins.png?width=300&rotate=angle-54|bgcolor-fff" />
            </div>
            <div class="column-6">
                <h2>Quality</h2>
                <img src="/images/Penguins.png?width=300&quality=5" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Alpha</h2>
                <img src="/images/Penguins.png?width=300&alpha=50" />
            </div>
        </div>
    </section>
</article>
<article>
    <h1>Png8</h1>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Resized</h2>
                <img src="/images/Penguins-8.png?width=300" />
            </div>
            <div class="column-6">
                <h2>Cropped </h2>
                <img src="/images/Penguins-8.png?crop=0-0-300-225" />
            </div>
        </div>
    </section>
    <section>
        <h2>Filter</h2>
        <div class="row">
            <div class="column-6">
                <h3>blackwhite</h3>
                <img src="/images/Penguins-8.png?width=300&filter=blackwhite" />
            </div>
            <div class="column-6">
                <h3>comic</h3>
                <img src="/images/Penguins-8.png?width=300&filter=comic" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>lomograph</h3>
                <img src="/images/Penguins-8.png?width=300&filter=lomograph" />
            </div>
            <div class="column-6">
                <h3>greyscale</h3>
                <img src="/images/Penguins-8.png?width=300&filter=greyscale" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>polaroid</h3>
                <img src="/images/Penguins-8.png?width=300&filter=polaroid" />
            </div>
            <div class="column-6">
                <h3>sepia</h3>
                <img src="/images/Penguins-8.png?width=300&filter=sepia" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>gotham</h3>
                <img src="/images/Penguins-8.png?width=300&filter=gotham" />
            </div>
            <div class="column-6">
                <h3>hisatch</h3>
                <img src="/images/Penguins-8.png?width=300&filter=hisatch" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>losatch</h3>
                <img src="/images/Penguins-8.png?width=300&filter=losatch" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Watermark</h2>
                <img src="/images/Penguins-8.png?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
            </div>
            <div class="column-6">
                <h2>Format</h2>
                <img src="/images/Penguins-8.png?width=300&format=bmp" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Rotate</h2>
                <img src="/images/Penguins-8.png?width=300&rotate=angle-54|bgcolor-fff" />
            </div>
            <div class="column-6">
                <h2>Quality</h2>
                <img src="/images/Penguins-8.png?width=300&quality=5" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Alpha</h2>
                <img src="/images/Penguins-8.png?width=300&alpha=50" />
            </div>
        </div>
    </section>
</article>
<article>
    <h1>Bmp</h1>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Resized</h2>
                <img src="/images/Penguins.bmp?width=300" />
            </div>
            <div class="column-6">
                <h2>Cropped </h2>
                <img src="/images/Penguins.bmp?crop=0-0-300-225" />
            </div>
        </div>
    </section>
    <section>
        <h2>Filter</h2>
        <div class="row">
            <div class="column-6">
                <h3>blackwhite</h3>
                <img src="/images/Penguins.bmp?width=300&filter=blackwhite" />
            </div>
            <div class="column-6">
                <h3>comic</h3>
                <img src="/images/Penguins.bmp?width=300&filter=comic" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>lomograph</h3>
                <img src="/images/Penguins.bmp?width=300&filter=lomograph" />
            </div>
            <div class="column-6">
                <h3>greyscale</h3>
                <img src="/images/Penguins.bmp?width=300&filter=greyscale" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>polaroid</h3>
                <img src="/images/Penguins.bmp?width=300&filter=polaroid" />
            </div>
            <div class="column-6">
                <h3>sepia</h3>
                <img src="/images/Penguins.bmp?width=300&filter=sepia" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>gotham</h3>
                <img src="/images/Penguins.bmp?width=300&filter=gotham" />
            </div>
            <div class="column-6">
                <h3>hisatch</h3>
                <img src="/images/Penguins.bmp?width=300&filter=hisatch" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>losatch</h3>
                <img src="/images/Penguins.bmp?width=300&filter=losatch" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Watermark</h2>
                <img src="/images/Penguins.bmp?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
            </div>
            <div class="column-6">
                <h2>Format</h2>
                <img src="/images/Penguins.bmp?width=300&format=jpg" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Rotate</h2>
                <img src="/images/Penguins.bmp?width=300&rotate=angle-54|bgcolor-fff" />
            </div>
            <div class="column-6">
                <h2>Quality</h2>
                <img src="/images/Penguins.bmp?width=300&quality=5" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Alpha</h2>
                <img src="/images/Penguins.bmp?width=300&alpha=50" />
            </div>
        </div>
    </section>
</article>
<article>
    <h1>Tiff</h1>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Resized</h2>
                <img src="/images/Penguins.tif?width=300" />
            </div>
            <div class="column-6">
                <h2>Cropped </h2>
                <img src="/images/Penguins.tif?crop=0-0-300-225" />
            </div>
        </div>
    </section>
    <section>
        <h2>Filter</h2>
        <div class="row">
            <div class="column-6">
                <h3>blackwhite</h3>
                <img src="/images/Penguins.tif?width=300&filter=blackwhite" />
            </div>
            <div class="column-6">
                <h3>comic</h3>
                <img src="/images/Penguins.tif?width=300&filter=comic" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>lomograph</h3>
                <img src="/images/Penguins.tif?width=300&filter=lomograph" />
            </div>
            <div class="column-6">
                <h3>greyscale</h3>
                <img src="/images/Penguins.tif?width=300&filter=greyscale" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>polaroid</h3>
                <img src="/images/Penguins.tif?width=300&filter=polaroid" />
            </div>
            <div class="column-6">
                <h3>sepia</h3>
                <img src="/images/Penguins.tif?width=300&filter=sepia" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>gotham</h3>
                <img src="/images/Penguins.tif?width=300&filter=gotham" />
            </div>
            <div class="column-6">
                <h3>hisatch</h3>
                <img src="/images/Penguins.tif?width=300&filter=hisatch" />
            </div>
        </div>
        <div class="row">
            <div class="column-6">
                <h3>losatch</h3>
                <img src="/images/Penguins.tif?width=300&filter=losatch" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Watermark</h2>
                <img src="/images/Penguins.tif?width=300&watermark=text-test|color-fff|size-48|style-italic|opacity-100|position-100-100|shadow-true|font-arial" />
            </div>
            <div class="column-6">
                <h2>Format</h2>
                <img src="/images/Penguins.tif?width=300&format=bmp" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Rotate</h2>
                <img src="/images/Penguins.tif?width=300&rotate=angle-54|bgcolor-fff" />
            </div>
            <div class="column-6">
                <h2>Quality</h2>
                <img src="/images/Penguins.tif?width=300&quality=5" />
            </div>
        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>Alpha</h2>
                <img src="/images/Penguins.tif?width=300&alpha=50" />
            </div>
        </div>
    </section>
</article>
<article>
    <h1>Color Profiles</h1>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>CMYK original jpg</h2>
                <img src="/images/cmyk.jpg?" width="400" />
            </div>
            <div class="column-6">
                <h2>sRGB original jpg</h2>
                <img src="/images/srgb.jpg?" width="400" />
            </div>

        </div>
    </section>
    <section>
        <div class="row">
            <div class="column-6">
                <h2>CMYK resized jpg</h2>
                <img src="/images/cmyk.jpg?width=400" />
            </div>

            <div class="column-6">
                <h2>sRGB resized jpg</h2>
                <img src="/images/srgb.jpg?width=400" />
            </div>
        </div>
    </section>
</article>