index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./images/Frame.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link
        href="https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&family=Work+Sans:wght@100;400;500;600;700;800&display=swap"
        rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
        integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css">
    <title>B8A2-Gamer-Zone</title>
</head>

<body>
    <header>
        <section class="heading">
            <nav>
                <div class="logo">
                    <img src="./images/Frame.png" alt="">
                    <h1><span class="pink">G</span>amer</h1>
                </div>
                <div class="menu">
                    <ul class="menu-items">
                        <li><a href="">About Us</a></li>
                        <li><a href="">Developers</a></li>
                        <li class="icon-link">
                            <p class="menu-item">Follow Us On</p>
                            <a href=""><i class="fa-brands fa-2xl fa-youtube" style="color: #ed4436;"></i></a>
                            <a href=""><i class="fa-brands fa-2xl fa-tiktok"></i></a>
                        </li>
                    </ul>
                </div>
            </nav>
        </section>
        <!-- banner section -->
        <section class="banner">
            <div class="goat">
                <h3 class="goat-subtitle">Play Like The</h3>
                <h1 class="goat-title">G.O.A.T.</h1>
                <p class="goat-description"><i class="fa-regular fa-circle-play" style="color: #fd38a0;"></i> 1-Click
                    instant play</p>
                <p class="goat-description"><i class="fa-solid fa-arrow-down" style="color: #fd3aa2;"></i> No Download
                </p>
                <p class="goat-description"><i class="fa-solid fa-user-group" style="color: #000000;"></i> 1000s of
                    supported online games</p>
                <div class="button">
                    <button class="btn1">Sign In</button>
                    <button class="btn2">Go Rogue</button>
                </div>
            </div>
            <div class="images">
                <img src="./images/Group18.png" alt="">
            </div>
        </section>
        <section class="banner2">
            <img class="bnr2img" src="./images/pngwing4.png" alt="">
            <div class="gamer">
                <h4 class="gamer-title">
                    We are gamer
                </h4>
                <p class="gamer-description">An international digital games and entertainment company. We develop,
                    publish and distribute multiplayer mobile games. We reach over 400 million players each month and
                    our audience keeps growing.</p>
                <button class="btn3">know more</button>
                <div class="subheading">
                    <p class="our">Our purpose...</p>
                    <h2 class="unleashed">“unleash the gamer in everyone”</h2>
                </div>
            </div>
        </section>
    </header>
    <!-- main section -->
    <main>
        <section class="video">
            <h3 class="video-title">Online Games <span class="gamer-title">Funny Videos</span></h3>
            <p>A Collection of Hilarious Videos to Brighten Your Day</p>
            <div class="cards">
                <div class="card">
                    <div class="image-container">
                        <img src="./images/Rectangle4.png" alt="Image Description">
                        <div class="overlay"></div>
                        <div class="play-icon">
                            <i class="fa fa-play"></i>
                            <br><br>
                            <p style="color: #FF42A5;">Watch Now</p>
                        </div>
                    </div>
                    <article style="width: 290px; text-align: left; ">No Download. No Installs. Play games Instantly on
                        Gamer.</article>
                </div>
                <div class="card">
                    <div class="image-container">
                        <img src="./images/Rectangle5.png" alt="Image Description">
                        <div class="overlay"></div>
                        <div class="play-icon">
                            <i class="fa fa-play"></i>
                            <br><br>
                            <p style="color: #FF42A5;">Watch Now</p>
                        </div>
                    </div>
                    <article style="width: 290px; text-align: left; ">Did you score? #unblockedgames #school</article>
                </div>
                <div class="card">
                    <div class="image-container">
                        <img src="./images/Rectangle6.png" alt="Image Description">
                        <div class="overlay"></div>
                        <div class="play-icon">
                            <i class="fa fa-play"></i>
                            <br><br>
                            <p style="color: #FF42A5;">Watch Now</p>
                        </div>
                    </div>
                    <article style="width: 290px; text-align: left; ">Breaking game records like OG and Many More
                    </article>
                </div>
                <div class="card">
                    <div class="image-container">
                        <img src="./images/Rectangle7.png" alt="Image Description">
                        <div class="overlay"></div>
                        <div class="play-icon">
                            <i class="fa fa-play"></i>
                            <br><br>
                            <p style="color: #FF42A5;">Watch Now</p>
                        </div>
                    </div>
                    <article style="width: 290px; text-align: left; ">Busted gaming on school laptop, but you are still
                        lit.</article>
                </div>
            </div>
        </section>
        <!--card section end -->
        <section class="downloads">
            <div class="text">
                <h3 class="downlooad-title">
                    <span class="play">Play Instantly,</span> No Downloads No Installs.
                </h3>
                <p class="play-details">
                    Play games online for free without downloading. Just click the Play button and play instantly in
                    your
                    browser.
                </p>
            </div>
            <div class="download-images">
                <div class="big-img">
                    <img class="img6" src="./images/Rectangle55.png" alt="">
                </div>
                <div class="small-img">
                    <img src="./images/Rectangle66.png" alt="">
                </div>
            </div>


        </section>
        <section class="downloads2">
            <div class="text">
                <h3 class="downlooad-title" style="text-align: left;">
                    <span class="play">Play Games Online</span>Anywhere, Anytime!
                </h3>
                <p class="play-details" style="text-align: left;">
                    Play games online for free without downloading. Just click the Play button and play instantly in
                    your
                    browser.
                </p>
            </div>
            <div class="download-images">
                <div class="big-img2    ">
                    <img src="./images/Rectangle67.png" alt="">
                </div>
                <div class="small-img2">
                    <img src="./images/Rectangle78.png" alt="">
                </div>
            </div>


        </section>
        <!-- career section -->
        <section class="career">
            <div class="career-text">
                <h1 class="career-title">
                    Careers
                </h1>
                <p class="career-description">Gamer is driven to create the best and most fun games for our millions of
                    players all around the world, and we,re always on the lookout for more top talent to join our
                    growing team. If you,d like to help us make great games and be a part of Gamers bright future, we,d
                    love to hear from you.</p>

                <div class="positions">
                    <p class="positions-left">
                        Multimedia Artist +<br>
                        Data Engineer +<br>
                        Adroid Engineer +<br>
                        Server Developer +<br>
                        Group Financial Accountant +<br>
                        Senior User Acuisition Specialist +
                    </p>
                    <p class="positions-right">
                        Lisbon, Portugal
                        <br>Lisbon, Portugal
                        <br>Zoetermeer, Netherlands
                        <br>Lisbon, Portugal
                        <br>London, United Kingdom
                        <br>Lisbon, Portugal
                    </p>
                </div>
                <button class="all-positions">See all positions</button>
            </div>
            <div class="image-career">
                <img class="career-img" src="./images/Group65.png" alt="">
            </div>
        </section>
        <!-- games section  -->
        <section class="games">
            <div class="game"><img src="./images/Rectangle11.png" alt="">
                <p class="game-title">Action Games</p>
            </div>

            <div class="game"><img src="./images/Rectangle12.png" alt="">
                <p class="game-title">Adventure Games</p>
            </div>

            <div class="game"><img src="./images/Rectangle13.png" alt="">
                <p class="game-title">Arcade Games</p>
            </div>

            <div class="game"><img src="./images/Rectangle14.png" alt="">
                <p class="game-title">Educational Games</p>
            </div>

            <div class="game"><img src="./images/Rectangle15.png" alt="">
                <p class="game-title">Word Games</p>
            </div>
        </section>
        <section class="game2">
            <div class="game"><img src="./images/Rectangle16.png" alt="">
                <p class="game-title">Role Palying Games</p>
            </div>

            <div class="game"><img src="./images/Rectangle17.png" alt="">
                <p class="game-title">Music & Audio Games</p>
            </div>

            <div class="game"><img src="./images/Rectangle18.png" alt="">
                <p class="game-title">Puzzle Games</p>
            </div>
            <div class="game"><img src="./images/Rectangle19.png" alt="">
                <p class="game-title">Strategy Games</p>
            </div>
        </section>
        </section>

    </main>
    <!-- footer section -->
    <footer>
        <div class="footer-content">
            <div class="logo2">
                <img src="./images/Frame.png" alt="">
                <h1><span class="pink">G</span><span style="color: white;">amer</span></h1>
            </div>
                <div class="footer-menu">
                    <nav class="foot-menu">
                        
                            <li><a href="">Our Story</a></li>
                            <li><a href="">Games</a></li>
                            <li><a href="">Web Games</a></li>
                            <li><a href="">Careers</a></li>
                            <li><a href="">Support</a></li>
                            <li><a href="">My Account</a></li>
                         
                    </nav>
                </div>
            <div class="footer-icon">
                <li><a href=""><i class="fa-brands fa-2xl fa-twitter" style="color: #ededee;"></i></a></li>
                <li><a href=""><i class="fa-brands fa-2xl fa-facebook" style="color: #eceff3;"></i></a></li>
                <li><a href=""><i class="fa-brands fa-2xl fa-youtube" style="color: #fdfcfc;"></i></a></li>
                <li><a href=""><i class="fa-brands  fa-2xl fa-linkedin-in" style="color: #ffffff;"></i></a></li>
                <li><a href=""><i class="fa-brands fa-instagram fa-2xl" style="color: #ffffff;"></i></a></li>
                <li><a href=""><i class="fa-brands fa-2xl fa-apple" style="color: #fafcff;"></i></a></li>
            </div>
            <div class="policy">
                <li><a href="">Terms and Conditions</a></li>
                <li><a href="">Privacy Policy</a></li>
                <li><a href="">Cookie Policy</a></li>
                <li><a href="">Privacy Settings</a></li>
            </div>

            <div class="copyright">
                <p>Play Games @ Gamer @ 2000-2023 Gamer Bangladesh</p>
            </div>

        </div>

    </footer>
</body>

</html>