<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <link rel="icon" type="image/png" href="/curling_logo.png"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Curling E-Portfolio</title>
</head>
<body class="bg-primary flex flex-col min-h-screen">

{{> nav homeActive=true }}

<div class="home grow">
    <h1 class="flex justify-center">Welcome to the world of Curling!</h1>

    <div class="h-40 bg-banner flex justify-between items-center px-40 mb-14">
        <a href="rules.html" class="flex flex-col align-middle">
            <img src="/rules.svg" alt="Regeln" class="w-20 h-20"/>
            <p class="text-center">Regeln</p>
        </a>
        <a href="spiritofcurling.html" class="flex flex-col align-middle">
            <img src="/spirit.svg" alt="Spirit of Curling" class="w-20 h-20"/>
            <p class="text-center">Spirit of Curling</p>
        </a>
        <a href="impressions.html" class="flex flex-col align-middle">
            <img src="/extension.svg" alt="Beispiele" class="w-20 h-20"/>
            <p class="text-center">Beispiele</p>
        </a>
    </div>
</div>

{{> footer }}
<script type="module" src="/main.js"></script>
</body>
</html>