<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/styles.css">
    <title>Document</title>
</head>
<body>
    <header>
        <div class="logo">
            <img src="img/Design/logo-round.png" alt="logo">
        </div>
        <nav>
            <!-- Checkbox til at lave "checkbox tricket" -->
            <input class="menu-btn" type="checkbox" id="menu-btn">
            <!-- Hamburger menu ikon -->
            <img src="img/bars-solid.svg" alt="hamburger menu icon" class="menuicon">
            <!-- Luk hamburger menu ikon -->
            <img src="img/times-solid.svg" alt="hamburger close icon" class="closeicon">
            <ul>
                <li>
                    <a href="#">HOME</a>
                </li>
                <li>
                    <h2>DRIVERS</h2>
                    <img src="img/caret-down-solid.svg">
                    <input class="submenu-btn" type="checkbox" id="submenu2-btn">
                    <ul>
                        <li>
                            <a href="#">Driver 1</a>
                        </li>
                        <li>
                            <a href="#">Driver 2</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <h2>TEAMS</h2>
                    <img src="img/caret-down-solid.svg">
                    <input class="submenu-btn" type="checkbox" id="submenu3-btn">
                    <ul>
                        <li>
                            <a href="#">Team 1</a>
                        </li>
                        <li>
                            <a href="#">Team 2</a>
                        </li>
                        <li>
                            <a href="#">Team 3</a>
                        </li>
                    </ul>
                </li>
                <li id="login">
                    <a href="#">LOGIN</a>
                </li>
            </ul>
        </nav>
    </header>

    <main>
        <section>
            <article>
                <h1>
                    2015 Drivers Championship
                </h1>
                <p>
                    Silverstone Fri 03 - Sun 05 Jul
                </p>
            </article>
        </section>
    </main>

    <footer>
        <div class="lines"></div>
        <div class="cardContainer">
            <div class="drivers">
                <h3>
                    top drivers
                </h3>
                <div class="card">
                    <div class="pic">
                        <img src="img/Drivers/lewis-hamilton-mercedes-thumb.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            1. Lewis Hamilton
                        </h4>
                        <h6>
                            Mercedes
                        </h6>
                    </div>
                </div>
                <div class="card">
                    <div class="pic">
                        <img src="img/Drivers/nico-rosberg-mercedes-thumb.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            2. nico rosberg
                        </h4>
                        <h6>
                            Mercedes
                        </h6>
                    </div>
                </div>
                <div class="card">
                    <div class="pic">
                        <img src="img/Drivers/sebastian-vettel-ferrari-thumb.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            3. sebastian vettel
                        </h4>
                        <h6>
                            Ferrari
                        </h6>
                    </div>
                </div>
                <div class="card">
                    <div class="pic">
                        <img src="img/Drivers/kimi-raikkonen-ferrari-thumb.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            4. kimi räikkönen
                        </h4>
                        <h6>
                            Ferrari
                        </h6>
                    </div>
                </div>
            </div>
            <div class="teams">
                <h3>
                    top teams
                </h3>
                <div class="card">
                    <div class="pic">
                        <img src="img/Teams/team-mercedes-germany.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            Mercedes
                        </h4>
                        <h6>
                            germany
                        </h6>
                    </div>
                </div>
                <div class="card">
                    <div class="pic">
                        <img src="img/Teams/team-ferrari-italy.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            Ferrari
                        </h4>
                        <h6>
                            italy
                        </h6>
                    </div>
                </div>
                <div class="card">
                    <div class="pic">
                        <img src="img/Teams/team-williams-great-britain.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            Williams
                        </h4>
                        <h6>
                            great britain
                        </h6>
                    </div>
                </div>
                <div class="card">
                    <div class="pic">
                        <img src="img/Teams/team-red-bull-switzerland.jpg" alt="">
                    </div>
                    <div class="text">
                        <h4>
                            Red Bull
                        </h4>
                        <h6>
                            switzerland
                        </h6>
                    </div>
                </div>
            </div>
            <div class="upcomingTrack">
                <h3>
                    upcoming track
                </h3>
                <div class="track">
                    <div class="trackPic">
                        <img src="img/Track/track-silverstone-britain.png" alt="">
                    </div>
                    <div class="trackText">
                        <h4>
                            Silverstone - Great Britain
                        </h4>
                        <div class="trackinfo">
                            <h6>Number of times held:</h6>
                            <h6>69</h6>
                        </div>
                        <div class="trackinfo">
                            <h6>First held:</h6>
                            <h6>1926</h6>
                        </div>
                        <div class="trackinfo">
                            <h6>Circuit length:</h6>
                            <h6>5.891 KM</h6>
                        </div>
                        <div class="trackinfo">
                            <h6>Race Length:</h6>
                            <h6>306.291 KM</h6>
                        </div>
                        <div class="trackinfo">
                            <h6>Laps:</h6>
                            <h6>52</h6>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </footer>
</body>
</html>