<!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;
}


/* ==============================
   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;
}


/* ==============================
   LIJST
   ============================== */

ol {
    margin-top: 10px;

    margin-bottom: 30px;

    padding-left: 35px;
}

li {
    margin-bottom: 15px;

    padding-left: 5px;

    font-size: 1.15em;
}


/* ==============================
   LINKS
   ============================== */

li a {
    color: #003366;

    text-decoration: none;

    font-weight: bold;

    transition: 0.3s;
}

li a:hover {
    color: #0055aa;

    text-decoration: underline;
}


/* ==============================
   PRIVACY
   ============================== */

.highlight {
    background: #eef5ff;

    border-left: 5px solid #003366;

    padding: 22px;

    margin: 35px 0;

    border-radius: 6px;

    font-size: 1.05em;
}


/* ==============================
   FOOTER
   ============================== */

footer {
    background: #222;

    color: #ccc;

    text-align: center;

    padding: 20px;

    margin-top: 40px;

    font-size: 0.9em;
}


/* ==============================
   SMARTPHONE
   ============================== */

@media (max-width: 768px) {

    header {
        height: 150px;
    }

    header h1 {
        font-size: 2.2em;
    }

    header p {
        font-size: 1em;
    }

    .container {
        width: 90%;

        padding: 30px;
    }

    h2 {
        font-size: 1.7em;
    }

    li {
        font-size: 1.05em;
    }

    .terug {
        top: 10px;
        left: 10px;

        font-size: 14px;

        padding: 8px 14px;
    }

}


/* ==============================
   EXTRA KLEINE TELEFOONS
   ============================== */

@media (max-width: 380px) {

    header h1 {
        font-size: 1.9em;
    }

    header p {
        font-size: 0.9em;
    }

    .container {
        padding: 22px;
    }

    h2 {
        font-size: 1.5em;
    }

}

</style>

</head>


<body>


<!-- ==============================
     TERUG KNOP
     ============================== -->

<a
    href="../00-onderwerpen/onderwerpen-a.html"
    class="terug">

    Terug

</a>


<!-- ==============================
     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>

        Presentatie &amp; Aanbevelingen

    </h2>


    <ol>


        <li>

            <a href="01-woorden-van-auteur/voorwoord-auteur-a.html">

                Voorwoord auteur.

            </a>

        </li>


        <li>

            <a href="02-woord-van-zegen-pastoor/woord-van-zegen-pastoor-a.html">

                Woord van Zegen van de Pastoor.

            </a>

        </li>


        <li>

            <a href="03-aanbeveling-van-notaris-gulick/aanbeveling-notaris-gulick-a.html">

                Woord van aanbeveling Notaris.

            </a>

        </li>



        <li>

            <a href="04-gedicht-van-stadsdichter/gedicht-dichter-maarten-vd-elzen-a.html">

                Gedicht Maarten van den Elzen.

            </a>

        </li>


    </ol>


    <!-- ==============================
         PRIVACY
         ============================== -->

    <div class="highlight">

        <strong>Privacy:</strong>

        <br><br>

        Op deze website wordt geen gebruik gemaakt
        van zogenaamde cookies.

    </div>


</div>


<!-- ==============================
     FOOTER
     ============================== -->

<footer>

    © 2026 Uden in Beeld - Alle rechten voorbehouden

</footer>


</body>

</html>