<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Editing images</title>
</head>

<body>
    <div class="container">
        <header>
            <h1>Editing Images</h1>
        </header>
        <h2>Ducks in Boots</h2>
        <img src="images/duck-in-boots.jpeg" alt="Duck in Boots">
        <img src="images/images-edited/duck-in-boots-gimp-rotate.jpeg" alt="Duck in Boots Flipped with Rotation">
        <p>
            Image rotated
        </p>
        <!-- Image rotated -->
        <h2>Pinball Ducks</h2>
        <img src="images/duck-pinball.jpeg" alt="Pinball Ducks">
        <img src="images/images-edited/duck-pinball-gimp-rotate-crop.jpeg" alt="Pinball Ducks Rotated with a Crop">
        <p>
            Image rotated and cropped, with canvas shrunk to fit
        </p>
        <!-- Image rotated and cropped, with canvas shrunk to fit (not a fan that it's two steps) -->
        <h2>Ducks in Vegas</h2>
        <img src="images/ducks-in-vegas.jpeg" alt="Ducks in Vegas">
        <img src="images/images-edited/ducks-in-vegas-gimp-flip.jpeg" alt="Ducks in Mirror World (flipped horizontally)">
        <p>
            Image flipped on horizontal axis
        </p>
        <!-- Image flipped on horizontal axis -->
        <h2>Grand Canyon Ducks</h2>
        <img src="images/grand-canyon-ducks.jpeg" alt="Ducks in the Grand Canyon">
        <img src="images/images-edited/grand-canyon-ducks-gimp-bw-scale.jpeg" alt="Ducks in a canyon sapped of their color (scaled with black and white)">
        <p>
            Image scaled with color space changed to black and white
        </p>
        <!-- Image scaled with color space changed to black and white -->
        <h2>Light Ducks... of the Dark</h2>
        <img src="images/light-ducks.jpeg" alt="Ducks before the sun">
        <img src="images/images-edited/light-ducks-gimp-of-the-dark.jpeg" alt="Light ducks of the inverted realities (inverted)">
        <p>
            Image shrunk, replicated, canvas scaled up, and each replication inverted with different inversions, the final being inverted with ALL the inversions
        </p>
        <!-- Image shrunk, replicated, canvas scaled up, and each replication inverted with different inversions, the final being inverted with ALL the inversions -->
    </div>

</body>

</html>