<html lang="nl">

<head>
    <meta charset="utf-8" />
    <meta name="application-name" content="a norm apart">
    <meta name="description" content="Bloemlezing nederlandstige dichters">
    <meta name="keywords" content="poëzie, poetry, dutch literature, dichters, poets, Nederlandse dichters ">
    <meta name="author" content="Jef Inghelbrecht">
    <link type="text/css" rel="stylesheet" href="css/app.css">
    <title>Bloemlezing</title>
</head>

<body>
    <header>
        <nav>
            <ol>
                <!-- Misschien moet je de href attributen aanpassen! -->
                <li><a href="#">Index</a></li>
                <li><a href="#">Marsman</a></li>
            </ol>
        </nav>
        <h1> Jef's website</h1>
    </header>
    <article>
              <header>
            <figure>
                <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/104082/marsman-letterkundigmusem.jpg" />
                <figcaption><a href="http://www.letterkundigmuseum.nl/Literair-centrum/Biografie%C3%ABn/BiographyID/44/BiographyName/HendrikMarsman/Mode/BiographyDetails">Foto: Letterkundig Museum</a></figcaption>
            </figure>
            <h1>Bloemlezing</h1>
            <h2>Hendrik Marsman</h2>
        </header>
        <aside>
            <nav>
                <ol>
                    <li><a href="#gedicht1">De hand van de dichter</a></li>
                    <li><a href="#gedicht2">Voor het inslapen</a></li>
                    <li><a href="#gedicht3">De liefde slaapt in haar hart</a></li>
                    <li><a href="#gedicht4">Jaloezie</a></li>
                    <li><a href="#gedicht5">De vreemdeling</a></li>
                    <li><a href="#gedicht6">Polderland</a></li>
                    <li><a href="#gedicht7">Twee vrienden</a></li>
                    <li><a href="#gedicht8">Aan de dood</a></li>
                </ol>
            </nav>
        </aside>

        <section id="gedicht1">
            <header>
                <h1>De hand van de dichter</h1>
            </header>
            <p>
                Glazen grijpen en legen;
                <br/> veel jagen en reizen;
                <br/> vrouwen omhelzen en strelen;
                <br/> strijden op felle paarden
                <br/> en blinkende wateren splijten;
                <br/> spelen met licht en donker;
                <br/> de dag en de nacht doorrijden
                <br/> onder fluweel en schaduw en
                <br/> flonkrende sterrenbeelden.
            </p>
            <p>
                het staat niet in mijn hand gegrift;
                <br/> en een hand is een leven, een lot;
                <br/> ik lees slechts in fijn scherp schrift
                <br/> - en dit geldt voor vroeger en later -
                <br/> weinig liefde en wijn, veel water,
                <br/> soms een racket, een zweep, maar
                <br/> stellig nimmer een zwaard.
                <br/>
                <p>
                    zo is mij enkel bewaard
                    <br/> langzaam maar vast te verwijven
                    <br/> in nijver monnikenwerk:
                    <br/> bidden en verzen schrijven
                    <br/> geel op geel perkament,
                    <br/> en mijn hand alleen te verstrengelen
                    <br/> met mijn eigen andere hand
                    <br/> en in een cel te versterven
                    <br/> oud op een houten bank.
                </p>
                <footer>
                    <p><cite>Tempel en kruis</cite> 1940</p>
                </footer>
        </section>
        <section id="gedicht2">
            <header>
                <h1>Voor het inslapen</h1>
            </header>
            <p>
                In deze kleine kamer vind ik soms nog vrede.
                <br/> al wat daarbuiten ligt heeft voor mij afgedaan;
                <br/> wat rest mij nog, dan ‘Krieg und Frieden’ lezend,
                <br/> tot mijn verwoeste dromen in te gaan?
            </p>
            <footer>
                <p><cite>Verzamelde gedichten</cite> 1941</p>
            </footer>
        </section>
        <section id="gedicht3">
            <header>
                <h1>De liefde slaapt in haar hart</h1>
            </header>
            <p>
                "De liefde slaapt in haar hart
                <br/> als de lente in de winterse grond
                <br/> die in koude en duisternis wacht
                <br/> als een vlinder in haar cocon.
                <br/> in het dorp waar ik nu overnacht
                <br/> schijnt morgen een schuimende zon
                <br/> in een hemel met palmen bevlagd!
            </p>
            <p>
                geen regen, geen schaduw, geen sneeuw,
                <br/> geen dooiende schemering
                <br/> die als een zwavelen zon
                <br/> in de rafels hangt van het weer,
                <br/> drijft mij terug naar het vuur
                <br/> van haar kamer, haar rode haard.
            </p>
            <p>
                sluimer, liefste, en slaap
                <br/> uw eenzame winterslaap,
                <br/> en ontwaak als de bevende zon
                <br/> door de lentlijke evening gaat,
                <br/> als een vlinder uit haar cocon,
                <br/> als het vuur in uw donkere haard."
            </p>
            <footer>
                <p><cite>Tempel en kruis</cite> 1940</p>
            </footer>
        </section>
        <section id="gedicht4">
            <header>
                <h1>Jaloezie</h1>
            </header>
            <p>
                Laat mij de angel van 't venijn,
                <br/> door argwaan in uw hart gedreven
                <br/> uittrekken, en een felle pijn
                <br/> de aanvang zijn van het genezen.
                <br/> en laat ons langs het steil ravijn
                <br/> opnieuw de oude weg betreden
                <br/> die ons terugvoert naar het huis,
                <br/> dat in de duisternis beneden
                <br/> nog aan de voet der heuvel ligt;
                <br/> waar gij zo eenzaam hebt gestreden,
                <br/> toen leed de liefde had ontwricht;
                <br/> laat uitgeroeid zijn het verleden
                <br/> en uw gelaat weer zacht verlicht
            </p>
            <footer>
                <p><cite>Verzamelde gedichten XI</cite> 1941</p>
            </footer>
        </section>
        <section id="gedicht5">
            <header>
                <h1>De vreemdeling</h1>
            </header>
            <p>
                Laat mij alleen.
                <br/> dit is de tweesprong onzer wegen.
                <br/> gij hebt mij tot de verste rand geleid.
            </p>
            <p>
                maar keer hier om, ween niet.
                <br/> gij kunt de laatste tocht naast mij niet schrijden,
                <br/> noch ik met u, gij gaat hem eens alleen.
            </p>
            <p>
                gij zijt mij nochtans onverdeeld verpand:
                <br/> ik heb uw bloed de donkre kus gegeven
                <br/> van hen, die boven dood en leven
                <br/> ontstegen zijn. ik ben hun afgezant.
            </p>
            <p>ik beid uw komst.</p>
            <p>
                wij zullen eens de zwarten wijn
                <br/> van dood en donker uit één beker drinken,
                <br/> wij zullen stromend in elkaar verzinken
                <br/> en eeuwig zijn.
            </p>
            <p>
                vaarwel.
                <br/> ik keer niet weer.
                <br/> maar gij komt zelve, later.
                <br/> vaarwel. het water
                <br/> roept voor de derde keer.
            </p>
            <footer>
                <p><cite>Verzamelde gedichten V</cite> 1941</p>
            </footer>
        </section>
        <section id="gedicht6">
            <header>
                <h1>Polderland</h1>
            </header>
            <p>
                Ik loop door ’t polderland
                <br/> onder de helle regen;
                <br/> oneindig is het land,
                <br/> oneindig zijn de wegen,
            </p>
            <p>
                die naar de kimmen gaan;
                <br/> in lage hemelstreken
                <br/> heerst tussen zwarte kreken
                <br/> het mistig licht der maan.
            </p>
            <p>
                o, dertigstroomenland,
                <br/> het volk dat u bewoont
                <br/> versombert in krakelen
                <br/> die geld en God verdelen,
                <br/> purper en doornenkroon.
            </p>
            <p>
                oneindig is het land,
                <br/> oneindig zijn de wegen
                <br/> die naar de kimmen gaan;
                <br/> ik loop de morgen tegen
                <br/> in ’t mistig licht der maan.
            </p>
            <footer>
                <p><cite>Verzamelde gedichten X</cite> 1941</p>
            </footer>
        </section>
        <section id="gedicht7">
            <header>
                <h1>Twee vrienden</h1>
            </header>
            <p>
                De maan maakt de nacht tot een sneeuwwit veld.
                <br/> een man heeft zijn vriend van zijn leven verteld:
            </p>
            <p>
                er is door dit spreken een wonder gebeurd:
                <br/> hun harten zijn zozeer eender gekleurd
            </p>
            <p>
                dat de een als hij soms naar de ander ziet
                <br/> bij zichzelve zegt: maar ben ìk dat niet?
            </p>
            <p>
                een vrouw; nog een vrouw; een verterend gemis.
                <br/> het is alsof alles ten einde is:
            </p>
            <p>
                want één hart blijft thuis en één hart gaat op reis
                <br/> maar geen van twee vindt het Paradijs.
            </p>
            <footer>
                <p><cite>Verzamelde gedicten VI</cite> 1941</p>
            </footer>
        </section>
        <section id="gedicht8">
            <header>
                <h1>Aan de dood</h1>
            </header>
            <p>Dood</p>
            <p>
                neem mij mee.
                <br/> ik heb hier afgedaan.
                <br/> ik wil op de rotsen te pletter slaan
                <br/> en versplintren in open zee...
                <br/> neem mij mee,
                <br/> dood.
            </p>
            <footer>
                <p><cite>Porta Nigra</cite> 1934</p>
            </footer>
        </section>
        <footer>
            <address>
            Samengesteld door Jef Inghelbrecht
        </address>
        </footer>
    </article>
    <footer>
        <p>concept & design - Modern Ways 2012-2016</p>
        <div>
            <h3>Contact</h3>
            <address>Modern Ways</address>
        </div>
    </footer>
</body>

</html>
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
}

body {
    width: 90%;
    height: 100%;
    padding: 0 5% 0 5%;
}

body > header {
    width: 100%;
    height: 12%;
    background-color: #faebd7;
    /* Antique white mocassin */
}

body > header nav {
    float: left;
    margin: 2% 0 0 2%;
}

body > header nav ol li {
    display: inline-block;
}

body > header > h1 {
    float: right;
    margin: 2% 2% 0 0;
}

article {
    width: 100%;
    height: 88%;
    background-color: #faf0e6;
    /* Linnen */
    overflow-y: scroll;
}

article > aside {
    height: 100%;
    width: 20%;
    margin-right: 2%;
    float: left;
}

article > header {
    width: 100%;
    float: right;
}

article > header figure {
    float: left;
    width: 20%;
}

article > header img {
    width: 100%;
}

article > header h1 {
    text-align: right;
    width: 80%;
}

article > header h2 {
    text-align: right;
    width: 80%;
}

article > section {
    width: 78%;
    float: right;
    margin-bottom: 1.5em;
}

article > section h1 {}

article > section p {
    margin-top: 1em;
}

article > footer {
    width: 78%;
    padding: 1em 0 1em 0;
    float: right;
    background-color: #fff8e7;
}

body > footer {
    width: 100%;
    height: 17%;
    background-color: #cecece;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.