<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Python Comic</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
    <main class="comic">
        <header class="title">
            <h1>This is a comic</h1>
            <h2>by Author</h2>
        </header>

        <article class="strip">
            <section class="left-python-yellow right-python-blue">
                <img src="http://lorempixel.com/240/240/?v=1" />
                <div class="bubble-top">
                    <p>Some text here</p>
                </div>
                <div class="bubble-bottom right">
                    <p>Some text here</p>
                </div>
            </section>
            <section class="">
                <header>Meanwhile, back at the ranch...</header>
                <img src="http://lorempixel.com/240/240/?v=2" />
            </section>
            <section class="right-python-blue">
                <div class="bubble-bottom right">
                    <p>Some text here, this one is a multi-line test to see how wrapping works...</p>
                </div>
                <img src="http://lorempixel.com/240/240/?v=3" />
            </section>
        </article>
        <footer class="smallprint">
            <p>Generated by Python. http://bit.ly/test</p>
        </footer>
    </main>
    </body>
</html>

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Python Comic</title>
        <link rel="stylesheet" href="style.css"/>
    </head>
    <body>
    <main class="comic">
        <header class="title">
            <h1 contenteditable>This is a comic</h1>
            <h2 contenteditable>by Author</h2>
        </header>

        <article class="strip">
            <section class="left-python-yellow right-python-blue">
                <img src="http://lorempixel.com/240/240/?v=1" />
                <div class="bubble-top">
                    <p contenteditable>Some text here</p>
                </div>
                <div class="bubble-bottom right">
                    <p contenteditable>Some text here</p>
                </div>
            </section>
            <section class="">
                <header contenteditable>Meanwhile, back at the ranch...</header>
                <img src="http://lorempixel.com/240/240/?v=2" />
            </section>
            <section class="right-python-blue">
                <div class="bubble-bottom right">
                    <p contenteditable>Some text here, this one is a multi-line test to see how wrapping works...</p>
                </div>
                <img src="http://lorempixel.com/240/240/?v=3" />
            </section>
        </article>
        <footer class="smallprint">
            <p>Generated by Python.
            <a href="http://bit.ly/test">Direct Link</a>.</p>
        </footer>
    </main>
    </body>
</html>

Make text in the comic editable.
Make text in the comic editable.
