<!DOCTYPE html>
<html lang="nl">

<head>

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Uden in Beeld</title>

<style>

/* ==============================
   ALGEMEEN
   ============================== */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f4f4;
    color: #333;
    line-height: 1.7;
}


/* ==============================
   TERUG KNOP
   ============================== */

.terug {
    position: fixed;
    top: 20px;
    left: 20px;

    background: #003366;
    color: white;

    text-decoration: none;

    padding: 10px 18px;
    border-radius: 8px;

    font-size: 16px;
    font-weight: bold;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    transition: 0.3s;

    z-index: 999;
}

.terug:hover {
    background: #0055aa;
}


/* ==============================
   PRINT BUTTON
   ============================== */

.print-btn {
    position: fixed;
    top: 20px;
    right: 20px;

    background: #008000;
    color: white;

    border: none;

    padding: 10px 18px;
    border-radius: 8px;

    font-size: 16px;
    font-weight: bold;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(0,0,0,0.2);

    transition: 0.3s;

    z-index: 999;
}

.print-btn:hover {
    background: #00aa00;
}


/* ==============================
   HEADER
   ============================== */

header {
    background: #003366;
    color: white;

    height: 150px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;
}

header h1 {
    font-size: 2.5em;
    margin-bottom: 5px;
}

header h1 a {
    color: white;
    text-decoration: none;
}

header p {
    font-size: 1.1em;
}


/* ==============================
   CONTAINER
   ============================== */

.container {
    width: 90%;
    max-width: 1100px;

    margin: 40px auto;

    background: white;

    padding: 50px;

    border-radius: 14px;

    box-shadow: 0 0 15px rgba(0,0,0,0.08);
}


/* ==============================
   TITELS
   ============================== */

h2 {
    color: #003366;

    margin-bottom: 25px;

    font-size: 2em;
}


/* ==============================
   TEKST
   ============================== */

.tekst {
    font-size: 1.15em;
}

.tekst p {
    margin-bottom: 22px;
}


/* ==============================
   HIGHLIGHT
   ============================== */

.highlight {
    background: #eef5ff;

    border-left: 5px solid #003366;

    padding: 22px;

    margin: 35px 0;

    border-radius: 6px;
}


/* ==============================
   BUTTONS
   ============================== */

.button {
    display: inline-block;

    background: #003366;
    color: white;

    text-decoration: none;

    padding: 14px 28px;

    border-radius: 6px;

    margin-right: 10px;
    margin-bottom: 10px;

    transition: 0.3s;
}

.button:hover {
    background: #0055aa;
}


/* ==============================
   FOTO AUTEUR
   ============================== */

.foto-onder {
    margin-top: 40px;

    display: flex;

    align-items: center;

    gap: 20px;
}

.foto-onder img {
    width: 110px;
    height: auto;

    border-radius: 10px;

    border: 4px solid #dbeafe;

    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.foto-tekst h3 {
    color: #003366;

    margin-bottom: 5px;

    font-size: 1.4em;
}

.foto-tekst p {
    color: #666;

    margin: 0;
}


/* ==============================
   FOOTER
   ============================== */

footer {
    background: #222;

    color: #ccc;

    text-align: center;

    padding: 20px;

    margin-top: 40px;

    font-size: 0.9em;
}


/* ==============================
   PRINT INSTELLINGEN
   ============================== */

@media print {

    .terug,
    .print-btn,
    .button {
        display: none;
    }

    body {
        background: white;
    }

    .container {
        box-shadow: none;

        margin: 0;

        width: 100%;
        max-width: 100%;
    }

    footer {
        color: black;
        background: white;
    }
}


/* ==============================
   RESPONSIVE
   ============================== */

@media(max-width: 768px) {

    header h1 {
        font-size: 2.2em;
    }

    header {
        height: 150px;
    }

    .container {
        padding: 30px;
    }

    .foto-onder {
        flex-direction: column;
        align-items: flex-start;
    }

    .terug {
        top: 10px;
        left: 10px;

        font-size: 14px;

        padding: 8px 14px;
    }

    .print-btn {
        top: 10px;
        right: 10px;

        font-size: 14px;

        padding: 8px 14px;
    }

}

</style>

</head>


<body>


<!-- ==============================
     TERUG KNOP
     ============================== -->

<a href="../presentatie-a.html" class="terug">
    Terug
</a>


<!-- ==============================
     PRINT KNOP
     ============================== -->

<button class="print-btn" onclick="window.print()">
    Print
</button>


<!-- ==============================
     HEADER
     ============================== -->

<header>

    <h1>
        <a href="../../index.html">
            Uden in Beeld
        </a>
    </h1>

    <p>
        Het gezicht van Uden online
    </p>

</header>


<!-- ==============================
     INHOUD
     ============================== -->

<div class="container">

    <h2>
        Voorwoord van de auteur
    </h2>


    <div class="tekst">


        <p>
            Mijn naam is Herman. Ik ben gepensioneerd,
            afgestudeerd en afkomstig uit een boerenfamilie
            uit Gelderland.
        </p>


        <p>
            Inmiddels woon ik al meer dan veertig jaar met veel
            plezier in Uden, een plaats waar ik mij volledig thuis voel.
        </p>


        <p>
            Computers en techniek zijn altijd een grote hobby van mij geweest.
            Vanuit die interesse is deze website ontstaan.
        </p>


        <p>
            Daarnaast ben ik betrokken als vriend en ondersteuner
            van meerdere non-profit instellingen en maatschappelijke
            organisaties in Uden.
            Met deze website wil ik op een positieve manier iets
            bijdragen aan de Udense gemeenschap.
        </p>


        <p>
            Op deze website probeer ik personen, verenigingen,
            organisaties en bijzondere plekken in Uden op een
            overzichtelijke en toegankelijke manier in beeld te brengen.
        </p>


        <!-- PRIVACY -->

        <div class="highlight">

            <strong>Privacy:</strong>

            <br><br>

            Op deze website wordt geen gebruik gemaakt van cookies.
            Alle foto's en informatie zijn met zorg samengesteld.

        </div>


        <p>
            Ik wens u veel kijkplezier op
            <strong>Uden in Beeld</strong>.
        </p>


        <!-- REACTIE -->

        <! a
            href="mailto:udeninbeeld@gmail.com"
            class="button">

            Mijn email adres is: <u><font color=blue> udeninbeeld at gmail.com </font></u>

        </a>


        <!-- VISITEKAARTJE -->

  
        </a>


        <!-- ==============================
             FOTO AUTEUR
             ============================== -->

        <div class="foto-onder">

            <img
                src="auteur.jpg"
                alt="Herman, auteur van Uden in Beeld">


            <div class="foto-tekst">

                <h3>
                    Herman
                </h3>

                <p>
                    Auteur van deze website
                </p>

            </div>

        </div>


    </div>

</div>


<!-- ==============================
     FOOTER
     ============================== -->

<footer>

    © 2026 Uden in Beeld - Alle rechten voorbehouden

</footer>


</body>

</html>