<!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">
    <title>Music Festival</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <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=Kanit:wght@500;600&display=swap" rel="stylesheet">
    <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=Open+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Bruno+Ace&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<style>
    .banner {
        background-image: url(images/pitcrew.jpg);
        background-position: center;
        min-height: 100%;
        display: block;
        flex: auto;
        text-align: center;
        justify-content: center;
    }
</style>
<body>
    <header>
        <h1><a href="/">DELTAFEST</a></h1>
        <input type="checkbox" id="menu-toggle">
        <label for="menu-toggle" id="menu-icon">&#9776;</label>
        <nav>
            <a href="#home">HOME</a>
            <a href="#lineup">LINEUP</a>
            <a href="#stages">STAGES</a>
            <a href="#about">ABOUT</a>
            <a href="#faq">FAQ</a>
            <a href="#contact">CONTACT</a>
        </nav>
    </header>

    <div class="banner" id="home">
        <h2>
            <span class="prefix">FEEL THE VIBE OF</span>
            <span class="top-text">THE DELTAFEST</span>
            <span class="bottom-text">MUSIC FESTIVAL</span>
            <span class="suffix">OCTOBER 06-08 - WARRI, DELTA</span>
        </h2>
    </div>

    <div class="row">
        <div class="lineup" id="lineup">
            <h1 class="lineup-topic">THE EVENT LINEUP</h1>
            <h2 class="lineup-text">AYRA STARR * BELLA SHMURDA * BLAQBONEZ * BLNDE * BRAZY * CRUEL SANTINO * DJ OBI * DJ PRIMEAU * KING PERRY * DRB * JAYO * KHAID * LOJAY * MINZ * MS DSF * NSG * ODUMODU BLVCK * ODUNSI (THE ENGINE) * OXLADE  POCO LEE * PSYCHO YP * QING MADI * RAEBEL * SEYI VIBES * SGAWD * SMADA * SOLIS * TARIQ * TITANIUM * UAX * VICTONY * WANNI X HANDI * YKB </h2>
        </div>
        
        <div class="stages-container" id="stages">
            <h1 class="stages-topic">THE EVENT STAGES</h1>
            <h2>Explore the prestigous stages</h2>
            <div class="stages-images">
                <img src="images/rightview.jpg" alt="stage one">
                <img src="images/backview.jpg" alt="stage two">
                <img src="images/backstage.jpg" alt="stage three">
                <img src="images/crowdview.jpg" alt="stage four">
            </div>
        </div>

        <div class="about" id="about">
            <h1 class="about-topic">ABOUT DELTAFEST</h1>
            <p class="about-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur fuga fugiat eum mollitia explicabo. Eos temporibus, ea soluta laboriosam perferendis est distinctio dolor mollitia? Magni dolores facere animi hic exercitationem.
            Eum mollitia corrupti illum quos magnam dolores, aut laudantium temporibus tempora hic distinctio ipsum ad maiores eligendi vel nisi possimus dolor reprehenderit repellendus rem! Saepe eligendi numquam illum ex eveniet.
            Perspiciatis dignissimos nostrum dolorem incidunt minima debitis. Officia beatae optio voluptate voluptas? Delectus molestiae exercitationem corporis ipsam reiciendis minus eos esse mollitia eligendi fugiat, impedit, inventore alias voluptates. Necessitatibus, tenetur.
            Voluptatibus facere ullam similique eos sequi at, earum veritatis quam maxime quisquam incidunt sint nihil, sed eum delectus minus corrupti non? Rem provident quaerat dolor autem quibusdam quod vel! Magnam.
            Necessitatibus similique ut esse, ab quia nisi, facilis eveniet rem eos quas non amet. Vitae ullam sapiente enim, placeat consequatur quibusdam, esse hic, in quod dolor id aut ipsum dignissimos!
            Qui aliquid ipsa harum reiciendis, officia aliquam consectetur fugiat facere quam quod repudiandae quasi quia id odio maxime exercitationem animi. Deserunt a voluptatibus fuga dicta enim reiciendis adipisci possimus magnam.</p>
        </div>

        <div class="faq" id="faq">
            <h1 class="faq-topic">FREQUENTLY ASKED QUESTIONS</h1>
            <h2 class="faq-top">Stage Visibility</h2>
            <P class="faq-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis ex odio quia dolorum nihil ut neque optio repellat, ipsum praesentium nisi voluptatum laborum, maxime ipsa in doloremque nulla itaque.
            Facere, possimus? Alias, odio? Exercitationem necessitatibus sapiente, officia pariatur voluptatem, illum consectetur, harum dignissimos eos deserunt ab earum neque repellat est! Id maiores ipsum iure suscipit aperiam perspiciatis beatae magni?
            Sit consequuntur necessitatibus sapiente pariatur rem laudantium commodi et natus animi, voluptates ut autem! Modi sed quibusdam earum placeat perspiciatis hic dolorem, ex voluptates facere qui aut voluptatem optio fugit.
            Nemo, optio asperiores. Culpa blanditiis eveniet architecto atque illum inventore accusamus qui similique quidem, aliquam ut totam minus dolores voluptatem recusandae mollitia necessitatibus voluptatibus odit? Dolore nemo omnis cum commodi.
            Nobis deserunt, nisi eaque beatae excepturi rerum labore. Repellendus dolorem culpa, consequatur sit, repellat sapiente excepturi distinctio, dolore facilis incidunt possimus ullam nesciunt earum esse voluptas nobis commodi. Error, dolor.</P>
            <h2 class="faq-top">Festival Theme</h2>
            <P class="faq-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis ex odio quia dolorum nihil ut neque optio repellat, ipsum praesentium nisi voluptatum laborum, maxime ipsa in doloremque nulla itaque.
            Facere, possimus? Alias, odio? Exercitationem necessitatibus sapiente, officia pariatur voluptatem, illum consectetur, harum dignissimos eos deserunt ab earum neque repellat est! Id maiores ipsum iure suscipit aperiam perspiciatis beatae magni?
            Sit consequuntur necessitatibus sapiente pariatur rem laudantium commodi et natus animi, voluptates ut autem! Modi sed quibusdam earum placeat perspiciatis hic dolorem, ex voluptates facere qui aut voluptatem optio fugit.
            Nemo, optio asperiores. Culpa blanditiis eveniet architecto atque illum inventore accusamus qui similique quidem, aliquam ut totam minus dolores voluptatem recusandae mollitia necessitatibus voluptatibus odit? Dolore nemo omnis cum commodi.
            Nobis deserunt, nisi eaque beatae excepturi rerum labore. Repellendus dolorem culpa, consequatur sit, repellat sapiente excepturi distinctio, dolore facilis incidunt possimus ullam nesciunt earum esse voluptas nobis commodi. Error, dolor.</P>
            <h2 class="faq-top">Behind The Scene</h2>
            <P class="faq-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis ex odio quia dolorum nihil ut neque optio repellat, ipsum praesentium nisi voluptatum laborum, maxime ipsa in doloremque nulla itaque.
            Facere, possimus? Alias, odio? Exercitationem necessitatibus sapiente, officia pariatur voluptatem, illum consectetur, harum dignissimos eos deserunt ab earum neque repellat est! Id maiores ipsum iure suscipit aperiam perspiciatis beatae magni?
            Sit consequuntur necessitatibus sapiente pariatur rem laudantium commodi et natus animi, voluptates ut autem! Modi sed quibusdam earum placeat perspiciatis hic dolorem, ex voluptates facere qui aut voluptatem optio fugit.
            Nemo, optio asperiores. Culpa blanditiis eveniet architecto atque illum inventore accusamus qui similique quidem, aliquam ut totam minus dolores voluptatem recusandae mollitia necessitatibus voluptatibus odit? Dolore nemo omnis cum commodi.
            Nobis deserunt, nisi eaque beatae excepturi rerum labore. Repellendus dolorem culpa, consequatur sit, repellat sapiente excepturi distinctio, dolore facilis incidunt possimus ullam nesciunt earum esse voluptas nobis commodi. Error, dolor.</P>
            <h2 class="faq-top">Staff Support</h2>
            <P class="faq-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci officiis ex odio quia dolorum nihil ut neque optio repellat, ipsum praesentium nisi voluptatum laborum, maxime ipsa in doloremque nulla itaque.
            Facere, possimus? Alias, odio? Exercitationem necessitatibus sapiente, officia pariatur voluptatem, illum consectetur, harum dignissimos eos deserunt ab earum neque repellat est! Id maiores ipsum iure suscipit aperiam perspiciatis beatae magni?
            Sit consequuntur necessitatibus sapiente pariatur rem laudantium commodi et natus animi, voluptates ut autem! Modi sed quibusdam earum placeat perspiciatis hic dolorem, ex voluptates facere qui aut voluptatem optio fugit.
            Nemo, optio asperiores. Culpa blanditiis eveniet architecto atque illum inventore accusamus qui similique quidem, aliquam ut totam minus dolores voluptatem recusandae mollitia necessitatibus voluptatibus odit? Dolore nemo omnis cum commodi.
            Nobis deserunt, nisi eaque beatae excepturi rerum labore. Repellendus dolorem culpa, consequatur sit, repellat sapiente excepturi distinctio, dolore facilis incidunt possimus ullam nesciunt earum esse voluptas nobis commodi. Error, dolor.</P>
        </div>

        <div class="contact" id="contact">
            <h1 class="contact-topic">CONTACT US</h1>
            <h2 class="contact-text">To contact us, send us a message:</h2>
            <div id="error"></div>
            <form class="form-text" id="form" action="/" method="post">
                <div class="form-box">
                    <label for="name">Name</label>
                    <input class="name-input" type="text" name="name" id="name" placeholder=" Enter your name">
                    <small>Error message!</small>
                </div>
                <br>
                <div class="form-box">
                    <label for="email">Email</label>
                    <input class="email-input" type="email" name="email" id="email" placeholder=" example@gmail.com">
                    <small>Error message!</small>
                </div>
                <br>
                <div class="form-box">
                    <label for="subject">Subject</label>
                    <input class="subject-input" type="text" name="subject" id="subject" placeholder=" Enter message subject">
                    <small>Error message!</small>
                </div>
                <br>
                <div class="form-box">
                    <label for="message">Message</label>
                    <textarea class="message-input" name="message" id="message" placeholder=" Type your message here.."></textarea>
                    <small>Error message!</small>
                </div>
                <button class="submit-button" type="submit">SEND</button>
            </form>
        </div>
    </div>

    <footer>
        <div class="footer-links">
            <h3 class="footer-text"><a href="#faq">FAQ</a></h3>
            <h3 class="footer-text"><a href="#contact">CONTACT US</a></h3>
            <h3 class="footer-text"><a href="#home">Df.Festival</a></h3>
        </div>
    </footer>
    <script src="js/script.js"></script>
    <script src="index.js"></script>
</body>
</html>