<!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="UTF-8">

    <!-- Belangrijk voor smartphones -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Uden in Beeld</title>

    <style>

        /* ==============================
           BASIS
           ============================== */

        * {
            box-sizing: border-box;
        }

        html {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 20px;
            width: 100%;
            max-width: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            line-height: 1.6;
            color: #222;
            background: #ffffff;
        }


        /* ==============================
           HOOFD CONTAINER
           ============================== */

        .container {
            width: 100%;
            max-width: 900px;
            margin: 0 auto;
        }


        /* ==============================
           KOPPEN
           ============================== */

        h1 {
            font-size: 34px;
            line-height: 1.2;
            margin-top: 0;
            margin-bottom: 25px;
        }

        h2 {
            font-size: 28px;
            line-height: 1.3;
            margin-top: 30px;
            margin-bottom: 15px;
        }


        /* ==============================
           TEKST
           ============================== */

        p {
            margin-top: 0;
            margin-bottom: 20px;
            overflow-wrap: break-word;
        }


        /* ==============================
           LIJST
           ============================== */

        ol {
            margin-top: 10px;
            margin-bottom: 30px;
            padding-left: 35px;
        }

        li {
            margin-bottom: 15px;
            padding-left: 5px;
        }


        /* ==============================
           LINKS
           ============================== */

        a {
            color: #0066cc;
            text-decoration: underline;
            overflow-wrap: break-word;
        }

        a:hover {
            color: #003d7a;
        }


        /* ==============================
           PRIVACY
           ============================== */

        .highlight {
            margin-top: 30px;
            margin-bottom: 30px;
            padding: 18px;
            border-radius: 8px;
            background: #f1f5f9;
            border-left: 5px solid #38bdf8;
        }


        /* ==============================
           KNOPPEN
           ============================== */

        .cta {
            margin-top: 30px;
            text-align: center;
        }

        .button {
            display: inline-block;
            padding: 12px 22px;
            margin: 5px 0;
            border-radius: 6px;
            background: #38bdf8;
            color: #ffffff;
            text-decoration: none;
            font-weight: bold;
        }

        .button:hover {
            background: #0ea5e9;
            color: #ffffff;
        }


        /* ==============================
           FOTO AUTEUR
           ============================== */

        .auteur-foto {
            display: block;
            width: 100px;
            height: 100px;
            object-fit: cover;
            border-radius: 50%;
            margin: 25px auto 10px auto;
            border: 4px solid #38bdf8;
        }

        .auteur-naam {
            margin-bottom: 0;
            text-align: center;
        }

        .auteur-functie {
            text-align: center;
            margin-top: 0;
        }


        /* ==============================
           SMARTPHONE
           ============================== */

        @media (max-width: 600px) {

            body {
                padding: 15px;
                font-size: 17px;
                line-height: 1.55;
            }

            .container {
                width: 100%;
                max-width: 100%;
            }

            h1 {
                font-size: 28px;
            }

            h2 {
                font-size: 24px;
                margin-top: 25px;
            }

            ol {
                padding-left: 28px;
            }

            li {
                margin-bottom: 14px;
            }

            .highlight {
                padding: 15px;
            }

            .button {
                display: block;
                width: 100%;
                max-width: 320px;
                margin: 10px auto;
                padding: 13px 15px;
                text-align: center;
            }
        }


        /* ==============================
           EXTRA KLEINE TELEFOONS
           ============================== */

        @media (max-width: 380px) {

            body {
                padding: 12px;
                font-size: 16px;
            }

            h1 {
                font-size: 25px;
            }

            h2 {
                font-size: 22px;
            }

            ol {
                padding-left: 25px;
            }
        }

    </style>
</head>


<body>


<table class="kop">
    <tr>
        <td>
            <a href="index.html">Uden in Beeld</a>
            <div>Het gezicht van Uden online</div>
        </td>
    </tr>
</table>

<style>
    .kop {
        width: 100%;
        height: 150px;
        background-color: #003366;
    }

    .kop td {
        text-align: center;
        vertical-align: middle;
    }

    .kop a {
        color: white;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 40px;
        font-weight: bold;
        text-decoration: none;
    }

    .kop div {
        color: white;
        font-family: Helvetica, Arial, sans-serif;
        font-size: 16px;
        margin-top: 10px;
    }
</style>




<div class="container">


    <!-- ==============================
         WELKOM
         ============================== -->

    <h2>Welkom</h2>

    <p>
        Uden in Beeld zal personen, clubs, verenigingen,
        dienstverleners en bedrijven uit Uden razendsnel
        via internet in beeld brengen.
    </p>

    <p>
        Het aanwezige beeldmateriaal op deze website is
        door ons persoonlijk gemaakt en anders persoonlijk
        aan ons beschikbaar gesteld.
        Hierdoor ontstaat een duidelijk, herkenbaar en
        actueel beeld van Uden.
    </p>


    <!-- ==============================
         INLEIDING
         ============================== -->

    <h2 id="onderwerpen">Inleiding</h2>

    <ol>

        

        <li>
            <a href="onderwerpen/voorwoord-auteur/voorwoord-auteur-a.html">
                Voorwoord auteur.
            </a>
        </li>

        <li>
            <a href="onderwerpen/woord-van-zegen-pastoor-vd-laar/woord-van-zegen-pastoor-a.html">
                Woord van Zegen.
            </a>
        </li>

        <li>
            <a href="onderwerpen/woorden-van-notaris-gulick/aanbeveling-notaris-gulick-b.html">
                Woord van aanbeveling Notaris.
            </a>
        </li>

        <li>
            Woord van aanbeveling Burgemeester.
        </li>

        <li>
            Woord van aanbeveling Dominee.
        </li>

        <li>
            Woord van aanbeveling IMAM.
        </li>

        <li>
            <a href="onderwerpen/woorden-van-stadsdichter/gedicht-dichter-maarten-vd-elzen-a.html">
                Gedicht Maarten van den Elzen.
            </a>
        </li>

        <li>
            <a href="foto-map/!-foto-galerij.html">
                Foto Galerij.
            </a>
        </li>

        <li>
            <a href="foto-map/!-slide-show.html">
                Dia Presentatie Maashorst.
            </a>
        </li>

    </ol>


    <!-- ==============================
         PRIVACY
         ============================== -->

    <div class="highlight">

        <strong>Privacy:</strong><br>

        Op deze website wordt geen gebruik gemaakt
        van zogenaamde cookies.

    </div>


    <!-- ==============================
         KNOPPEN
         ============================== -->

    <div class="cta">

        <a
            href="mailto:udeninbeeld@gmail.com"
            class="button">
            Reactie sturen
        </a>


        <a
            href="onderwerpen/visite-kaartje/visite-kaartje.html"
            class="button">
            Visite kaartje
        </a>


        <!-- ==============================
             AUTEUR
             ============================== -->

        <img
            src="herman.jpg"
            alt="Auteur van de site"
            class="auteur-foto"
        >

        <p class="auteur-naam">
            <strong>Herman</strong>
        </p>

        <p class="auteur-functie">
            Auteur van deze site
        </p>

    </div>


</div>

</body>
</html>