<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Aarhus Bridgeklub</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="icon" href="img/icon.png">
</head>
<body>
    <!-- HEADER START -->
    <header>
        <nav>
            <!-- Hambugrer menu icons-->
            <div class="hamburger">

                <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0h24v24H0z" fill="none"/>
                    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
                </svg>

                <svg fill="#FFFFFF" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
                    <path d="M0 0h24v24H0z" fill="none"/>
                    <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/>
                </svg>
            
            </div>
            <ul>
                <li class="currentPage">
                    <a href="#">Hjem</a>
                </li>
                <li>
                    <a href="#">Events</a>
                </li>
                <li>
                    <a href="#">Historie</a>
                </li>
                <li>
                    <a href="#">Medlemskab</a>
                </li>
                <li>
                    <a href="#">Kontakt os</a>
                </li>
            </ul>
            <!-- Navbar logo -->     
            <div class="logo">
                <img src="img/logo.jpg" alt="Aarhus bridgeklub">
            </div>
            <!-- Social media icons -->
            <div class="socials">
                <a href="#">
                    <img src="img/icon-facebook.png" alt="Facebook">
                </a>
                <a href="#">
                    <img src="img/icon-twitter.png" alt="Twitter">
                </a>
                <a href="#">
                    <img src="img/icon-gplus.png" alt="Google+">
                </a>
            </div>
        </nav>            
    </header>
    <!-- HEADER END -->
    <!-- MAIN START -->
    <main>
        <!-- Hero banner slider-->
        <div class="background">
            <div class="left"></div>
            <div class="hero1">
                <div class="logo">
                    <img src="img/logo.jpg" alt="Aarhus bridgeklub">
                </div>
            </div>
            <div class="hero2">
                <div class="text">
                    <p>Aarhus Bridgeklub søger nye medlemmer og inviterer derfor alle interesserede til en gratis prøveaften, hvor man kan komme og være med. Skriv til abk@mail.dk for at tilmelde dig.</p>
                </div>
            </div>                
            <div class="right"></div>
        </div>
        <section>
            <aside>
                <div class="event">
                    <h3 class="title">Eventkalender</h3>
                    <!-- Event List-->
                    <ul>
                        <li>
                            <time datetime="2018-05-29" class="time">29-05-18</time>
                            <div class="title">Klubmesterskab 2018</div>
                        </li>
                        <li>
                            <time datetime="2018-05-28" class="time">22-05-28</time>
                            <div class="title">DM kvalifikation</div>
                        </li>
                        <li>
                            <time datetime="2018-05-07" class="time">07-05-18</time>
                            <div class="title">Mandagsklubbens majturnering</div>
                        </li>
                        <li>
                            <time datetime="2018-05-02" class="time">02-05-18</time>
                            <div class="title">Majturnering 2018 Onsdag aften</div>
                        </li>
                        <li>
                            <time datetime="2018-05-02" class="time">02-05-18</time>
                            <div class="title">Majturnering 2018 Onsdag eftermiddag</div>
                        </li>
                        <li>
                            <time datetime="2018-04-29" class="time">29-04-18</time>
                            <div class="title">Åbent hus</div>
                        </li>
                    </ul>
                </div>
                <!-- News letter signup -->
                <div class="news">
                    <h3 class="title">Nyhedsbrev</h3>
                    <p>Tilmeld dig vores nyhedsbrev og modtag alle nyheder om klubben direkte i din indbakke.</p>
                    <form>
                        <input type="text" placeholder="Dit navn">
                        <input type="email" placeholder="Din email">
                        <button>Tilmeld</button>
                    </form>
                </div>
            </aside>  
            <!-- Info Cards-->              
            <article class="welcome">
                <h3 class="title">Velkommen til Aarhus Bridgeklub</h3>
                <div class="img">
                    <img src="img/bridge-tournament.jpg" alt="bridge tournament">
                </div>
                <p>Velkommen til Aarhus Bridgeklub, som blev oprette helt tilbage i 1934 og derfor er den ældste bridgeklub i Jylland.</p>
                <p>Klubben er for alle, som kan lide at spille bridge uanset alder og niveau. Hvis du er nybegynder eller bare nysgerrig kan du komme på en af vores klubaftener og få en demonstration.</p>
                <button>Læs mere</button>
            </article>
            <article class="nights">
                <h3 class="title">Klubaftener</h3>
                <div class="img">
                    <img src="img/bridge-01.jpg" alt="bridge night 1">
                </div>
                <p>To gange om ugen afholdes der klubaftener, hvor du kan komme og spille eller nyde det sociale samvær.</p>
                <button>Læs mere</button>
            </article>
            <article class="membership">
                <h3 class="title">Medlemskab</h3>
                <div class="img">
                    <img src="img/bridge-02.jpg" alt="bridge night 2">
                </div>
                <p>Kontingent for medlemskab kan betales månedligt eller årligt. Klik og se en oversigt over de aktuelle priser.</p>
                <button>Læs mere</button>
            </article>
        </section>
    </main>
    <!-- MAIN END -->
    <!-- FOOTER START -->
    <footer>
        <div class="container">
            <div>
                <h5>Kontakt os</h5>
                <div>Aarhus Bridgeklub</div>
                <div>Vanggaardcentret</div>
                <div>Paludan Müllersvej 26</div>
                <div>8200 Århus N</div>
                <div>www.aarhusbridgeklub.dk</div>
                <div>aabk@aarhusbridgeklub.dk</div>
            </div>
            <div>
                <h5>Historie</h5>
                <p>AaBK stiftedes i september 1934. Stifterne var ”en kreds af bridgeinteresserede medlemmer af Selskabet Polyhymnia og Handels- og Kontoristforeningen”. AaBK var således den første forening i Aarhus, der havde bridgespil som hovedformål.</p>
            </div>
            <div>
                <h5>Bliv medlem</h5>
                <p>Aarhus Bridgeklub er for alle, som kan lide at spille og samtidig nyde masser af socialt samvær. Alder, køn og race er derfor ingen hindring. Du skal være så hjertelig velkommen.</p>
            </div>
        </div>
    </footer>
    <!-- FOOTER END -->
    <script src="js/script.js">    
    </script>
</body>
</html>