<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" integrity="sha512-NmLkDIU1C/C88wi324HBc+S2kLhi08PN5GDeUVVVC/BVt/9Izdsc9SVeVfA1UZbY3sHUlDSyRXhCzHfr6hmPPw==" crossorigin="anonymous" referrerpolicy="no-referrer"/>
    <link rel="stylesheet" href="css/style.css">
    <title>Game changer</title>
</head>
<body>
    <div class="page-wrapper">


        <!-- header -->

        <header class="header">
            <nav class="menu-wrapper">
                <input type="checkbox" id="menu-visibility" class="menu-visibility">
                <ul class="menu">
                    <li class="active"><a href="">Forside</a></li>
                    <li><a href="">Spil</a></li>
                    <li><a href="">Anmeldelser</a></li>
                    <li><a href="">Kontakt</a></li>
                </ul>
                <label for="menu-visibility" class="menu-btn"></label>
            </nav>
        </header>

        
        <!-- hero banner -->

        <div class="hero-banner">
            <div class="hero-banner-text-wrapper">
                <div class="hero-banner-text">
                    <h2>Assasins Creed</h2>
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Placeat dolorem veritatis saepe molestiae dolorum eveniet ex fugiat animi ea architecto.</p>
                </div>
            </div>
        </div>


        <!-- content -->

        <main>
            <div class="thumb">
                <figure>
                    <img src="img/thumb_splintercell.jpg" alt="">
                    <figcaption>Splinter Cell: Black List</figcaption>
                </figure>
                <figure>
                    <img src="img/thumb_gtav.jpg" alt="">
                    <figcaption>Grand Theft Auto V</figcaption>
                </figure>
                <figure>
                    <img src="img/thumb_call_of_duty.jpg" alt="">
                    <figcaption>Call of Duty: Ghosts</figcaption>
                </figure>
                <figure>
                    <img src="img/thumb_forza4.jpg" alt="">
                    <figcaption>Forza Motorsport 4</figcaption>
                </figure>
                <figure>
                    <img src="img/thumb_red_dead_redemption.jpg" alt="">
                    <figcaption>Red Dead Redemption</figcaption>
                </figure>
                <figure>
                    <img src="img/thumb_halo4.jpg" alt="">
                    <figcaption>Halo 4</figcaption>
                </figure>
            </div>

            <div class="idkwtci">
                <div class="trailer-card">
                    <div class="card-heading">Seneste trailer</div>
                    <iframe src="https://www.youtube.com/embed/4A05AnPSC6g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <h2>Call of Duty Trailer</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla eos illum nesciunt incidunt facilis, architecto fugiat dolore expedita possimus. Aspernatur accusantium nobis obcaecati culpa iure, magnam, dolor rem autem qui, animi enim aut similique. Quia nam, nisi non minus saepe eaque molestiae aliquid. Fugiat architecto, ab necessitatibus voluptatem animi fuga.</p>
                    <button class="read-more">Læs mere</button>
                </div>
                <div class="popular">
                    <div class="card-heading">Mest populære spil</div>
                    <div class="popular-card">
                        <img src="img/thumb_splintercell.jpg" alt="">
                        <div class="popular-card-text">
                            <h3>Splinter Cell: Black List</h3>
                            <div class="publisher">Udgiver: Ubisoft</div>
                            <div class="genre">Genre: Stealth</div>
                        </div>
                    </div>
                    <div class="popular-card">
                        <img src="img/thumb_gtav.jpg" alt="">
                        <div class="popular-card-text">
                            <h3>Grand Theft Auto V</h3>
                            <div class="publisher">Udgiver: Rockstar Games</div>
                            <div class="genre">Genre: First person Shooter</div>
                        </div>
                    </div>
                    <div class="popular-card">
                        <img src="img/thumb_call_of_duty.jpg" alt="">
                        <div class="popular-card-text">
                            <h3>Call of Duty</h3>
                            <div class="publisher">Udgiver: Rockstar Games</div>
                            <div class="genre">Genre: First person Shooter</div>
                        </div>
                    </div>
                    <div class="popular-card">
                        <img src="img/thumb_forza4.jpg" alt="">
                        <div class="popular-card-text">
                            <h3>Forza 4</h3>
                            <div class="publisher">Udgiver: Rockstar Games</div>
                            <div class="genre">Genre: Motorsport</div>
                        </div>
                    </div>
                    <div class="popular-card">
                        <img src="img/thumb_red_dead_redemption.jpg" alt="">
                        <div class="popular-card-text">
                            <h3>Red Dead Redemption</h3>
                            <div class="publisher">Udgiver: Rockstar Games</div>
                            <div class="genre">Genre: Firat person Shooter</div>
                        </div>
                    </div>
                    <div class="popular-card">
                        <img src="img/thumb_halo4.jpg" alt="">
                        <div class="popular-card-text">
                            <h3>Halo 4</h3>
                            <div class="publisher">Udgiver: Rockstar Games</div>
                            <div class="genre">Genre: First Person Shooter</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="iadkwtci">
                <div class="review-card">
                    <div class="card-heading">Seneste spilanmeldelse</div>
                    <img src="img/article_red_dead_redemption.jpg.png" alt="">
                    <h2>I en hørm af krudtslam og hestelort</h2>
                    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Placeat molestiae, repellat doloribus, quas harum autem incidunt deserunt laboriosam, fugit debitis expedita iure laudantium officiis. Fugiat!</p>
                    <button>Læs mere</button>
                </div>
                <div class="article-card">
                    <div class="card-heading">Seneste artikel</div>
                    <img src="img/article_gamer.jpg" alt="">
                    <h2>Sådan bliver du professionel gamer</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Rerum est fugit quos dolorum, debitis aperiam natus. Delectus perspiciatis ratione temporibus nam asperiores illo voluptates eum incidunt! Est quisquam voluptates obcaecati reiciendis. Aperiam, iusto? Ullam laudantium, fugiat quae quidem repellendus veniam?</p>
                    <button>Læs mere</button>
                </div>
                <div class="member-card">
                    <div class="card-heading">Bliv medlem</div>
                    <img src="img/article_membership.png" alt="">
                    <h2>Bliv medlem i dag og få 30% rabat</h2>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel eveniet perspiciatis velit eum maiores maxime omnis, officia, repudiandae deleniti delectus aliquid nostrum doloribus. Id, ipsa?</p>
                    <button>Læs mere</button>
                </div>
            </div>
        </main>

        <!-- footer -->

        <footer class="footer">
            <div>Gamechanger website | <a href="">kontakt@gamechanger.local</a> | <a href="">www.gamechanger.local</a></div>
        </footer>
    </div>
</body>
</html>