@extends('.app')
@section('content')

<!-- Main Section Start -->
<section id="main" class="main active">
    <div class="main__content d-flex">
        <div class="container-fluid px-0 fullheight">
            <div class="row gx-0 gx-lg-5 fullheight">

                <!-- Main Section Intro Start -->
                <div class="col-12 col-lg-12 main__intro">

                    <iframe src="https://kahoot.it?pin={{$gamePin}}" name="kahoot-embed" scrolling="no" frameBorder="0" allowfullscreen="" width="100%" height="100%"></iframe>

                </div>
                <!-- Main Section Intro End -->
            </div>
        </div>
    </div>
</section>
<!-- Main Section End -->

<!-- Notify Popup Start -->
<div id="notify" class="popup notify">
    <div class="popup__container">

        <!-- Popup Content Start -->
        <div class="popup__content border-radius-l">
            <!-- popup close button -->
            <a id="notify-close" class="btn btn-s btn-s-icon popup-close" href="#0">
                <span class="btn__background light"></span>
                <span class="btn__text dark">
            <i class="fa-solid fa-xmark"></i>
            <em class="btn-title">Close</em>
            <em class="btn-hover">Close</em>
          </span>
            </a>

            <!-- Notify Popup Title Start -->
            <div class="popup-title">
                <p class="popup-title__title">Get to know about our launch</p>
                <p class="popup-title__text">Subscribe to our newsletter and we will send you a notification about the launch of our brand new site</p>
            </div>
            <!-- Notify Popup Title End -->

            <!-- Notify Form Container Start -->
            <div class="form-container">

                <!-- Reply Messages Start-->
                <div class="reply-group subscription-ok">
                    <i class="fa-solid fa-circle-check reply-group__icon"></i>
                    <p class="reply-group__title txt-light">Done!</p>
                    <span class="reply-group__text">Thanks for subscribing. We will send you a notification about our launch.</span>
                </div>
                <div class="reply-group subscription-error">
                    <i class="fa-solid fa-face-frown-open reply-group__icon"></i>
                    <p class="reply-group__title">Ooops!</p>
                    <span class="reply-group__text">Something went wrong. Please try again later.</span>
                </div>
                <!-- Reply Messages End-->

                <!-- Notify Contact Form Start-->
                <form class="form notify-form form-dark">
                    <input class="margin-l" type="email" placeholder="Your Email" required>
                    <button class="btn btn-l" type="submit">
                        <span class="btn__background dark"></span>
                        <span class="btn__text light">
                <em class="btn-title">Submit</em>
                <em class="btn-hover">Submit</em>
              </span>
                    </button>
                </form>
                <!-- Notify Contact Form End-->

            </div>
            <!-- Notify Form Container End -->

        </div>
        <!-- Popup Content End -->

    </div>
</div>
<!-- Notify Popup End -->

<!-- Contact Section Start -->
<section id="contact" class="inner contact">
    <div class="inner__content d-flex">
        <div class="container-fluid px-0 fullheight">
            <div class="row gx-0 gx-lg-5 fullheight">

                <!-- Inner Data Start -->
                <div class="col-12 col-lg-8 inner__data">

                    <!-- Inner Section Blocks Start -->
                    <div class="innerdata__blocks">

                        <!-- Scroll Blocks (Desktop) Start -->
                        <div class="blocks__scroll">

                            <!-- Inner Container - Section Title Start -->
                            <div class="blocks__container">
                                <div class="content-block">
                                    <div class="container-fluid px-0">
                                        <div class="row gx-5">
                                            <div class="col-12">
                                                <h2 class="inner__title">Let's create something amazing together.</h2>
                                            </div>
                                            <div class="col-12 col-md-4">
                                                <img class="inner__name" src="img/svg/section-name-contact.svg" alt="About Me">
                                            </div>
                                            <div class="col-12 col-md-8">
                                                <p class="inner__text">Let's get in touch. You can call us or leave a request here.
                                                    We are always glad to see you in our office from <span>9:00 to 18:00</span>.</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Inner Container - Section Title End -->

                            <!-- Inner Container - Contact Data Start -->
                            <div class="blocks__container">
                                <div class="content-block">
                                    <div class="container-fluid p-0">
                                        <div class="row gx-5 gy-5 align-items-stretch">
                                            <!-- contact data single item -->
                                            <div class="col-12 col-md-6 col-xl-4">
                                                <div class="contactdata__item contactdata-item-1 card-auto card-gradient border-radius-s">
                                                    <div class="contactdata__image contactdata-image-1"></div>
                                                    <div class="contactdata__title">
                                                        <h5>Location</h5>
                                                    </div>
                                                    <div class="contactdata__descr">
                                                        <p class="small">
                                                            <a class="contact-link" href="https://goo.gl/maps/nWXKpGaDPuyH6gxRA" target="_blank">11 West 53 Street,<br>New York, NY 10019</a>
                                                        </p>
                                                        <p class="small">
                                                            <a class="contact-link" href="https://goo.gl/maps/xap5o3MZBuC6DFHz8" target="_blank">3400 Broadway,<br>Oakland, CA 94611</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- contact data single item -->
                                            <div class="col-12 col-md-6 col-xl-4">
                                                <div class="contactdata__item contactdata-item-2 card-auto card-white border-radius-s">
                                                    <div class="contactdata__image contactdata-image-2"></div>
                                                    <div class="contactdata__title">
                                                        <h5>Follow me</h5>
                                                    </div>
                                                    <div class="contactdata__descr">
                                                        <ul class="contactdata__socials">
                                                            <li>
                                                                <a class="contact-link" href="https://www.facebook.com/" target="_blank">Facebook</a>
                                                            </li>
                                                            <li>
                                                                <a class="contact-link" href="https://www.instagram.com/" target="_blank">Instagram</a>
                                                            </li>
                                                            <li>
                                                                <a class="contact-link" href="https://twitter.com/" target="_blank">Twitter</a>
                                                            </li>
                                                            <li>
                                                                <a class="contact-link" href="https://pinterest.com/" target="_blank">Pinterest</a>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- contact data single item -->
                                            <div class="col-12 col-md-6 col-xl-4">
                                                <div class="contactdata__item contactdata-item-3 card-auto card-white border-radius-s">
                                                    <div class="contactdata__image contactdata-image-3"></div>
                                                    <div class="contactdata__title">
                                                        <h5>Contact</h5>
                                                    </div>
                                                    <div class="contactdata__descr">
                                                        <p class="small">
                                                            <a class="contact-link" href="tel:+12127089400">+1 212-708-9400</a>
                                                            <br>
                                                            <a class="contact-link" href="tel:+15104570211">+1 510-457-0211</a>
                                                        </p>
                                                        <p class="small">
                                                            <a class="contact-link" href="mailto:example@example.com?subject=Message%20from%20your%20site">support@uficschengen.eu</a>
                                                            <br>
                                                            <a class="contact-link" href="mailto:example@example.com?subject=Message%20from%20your%20site">hello@emeric.com</a>
                                                        </p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- Inner Container - Contact Data End -->

                            <!-- Inner Container - Form Start -->
                            <div class="blocks__container">
                                <!-- h3 title -->
                                <div class="content-block">
                                    <h3>Just say hello!</h3>
                                    <p class="block__text">Want to know more about my work, tell me about your project or just to say hello?
                                        Drop me a line and I'll get back as soon as possible.
                                    </p>
                                </div>
                                <!-- contact form -->
                                <div class="content-block">
                                    <div class="form-container">

                                        <!-- Contact Form Reply Group Start -->
                                        <div class="reply-group">
                                            <i class="fa-solid fa-circle-check reply-group__icon"></i>
                                            <p class="reply-group__title">Done!</p>
                                            <span class="reply-group__text">Thanks for your message. We will get back as soon as possible</span>
                                        </div>
                                        <!-- Contact Form Reply Group End -->

                                        <!-- Contact Form Start -->
                                        <form class="form form-dark contact-form" id="contact-form">
                                            <!-- Hidden Required Fields -->
                                            <input type="hidden" name="project_name" value="Emeric - Coming Soon & Portfolio Template">
                                            <input type="hidden" name="admin_email" value="support@mixdesign.club">
                                            <input type="hidden" name="form_subject" value="Contact Form Message">
                                            <!-- END Hidden Required Fields-->
                                            <div class="container-fluid px-0">
                                                <div class="row gx-5">
                                                    <div class="col-12 col-md-6">
                                                        <input type="text" name="Name" placeholder="Your Name*" required>
                                                    </div>
                                                    <div class="col-12 col-md-6">
                                                        <input type="text" name="Company" placeholder="Company Name">
                                                    </div>
                                                    <div class="col-12 col-md-6">
                                                        <input type="email" name="E-mail" placeholder="Email Adress*" required>
                                                    </div>
                                                    <div class="col-12 col-md-6">
                                                        <input type="tel" name="Phone" placeholder="Phone Number*" required>
                                                    </div>
                                                    <div class="col-12">
                                                        <textarea class="margin-s" name="Message" placeholder="A Few Words*" required></textarea>
                                                    </div>
                                                    <div class="col-12">
                                                        <span class="inputs-description">*Required fields</span>
                                                        <button class="btn btn-l" type="submit">
                                                            <span class="btn__background dark"></span>
                                                            <span class="btn__text light">
                                  <em class="btn-title">Submit</em>
                                  <em class="btn-hover">Submit</em>
                                </span>
                                                        </button>
                                                    </div>
                                                </div>
                                            </div>
                                        </form>
                                        <!-- Contact Form End  -->

                                    </div>
                                </div>
                            </div>
                            <!-- Inner Container - Form End -->

                            <!-- Inner Container - Marquee Start -->
                            <div class="blocks__container">
                                <div class="decor">
                                    <!-- Marquee Start -->
                                    <a class="marquee small marquee-relative link-l-arrow" href="https://themeforest.net/user/mix_design/portfolio" target="_blank">
                                        <div class="marquee-content scroll">
                                            <span>hello@emeric.com</span>
                                            <span>hello@emeric.com</span>
                                            <span>hello@emeric.com</span>
                                            <span>hello@emeric.com</span>
                                        </div>
                                        <div class="marquee-content scroll">
                                            <span>hello@emeric.com</span>
                                            <span>hello@emeric.com</span>
                                            <span>hello@emeric.com</span>
                                            <span>hello@emeric.com</span>
                                        </div>
                                    </a>
                                    <!-- Marquee End -->
                                </div>
                            </div>
                            <!-- Inner Container - Marquee End -->

                        </div>
                        <!-- Scroll Blocks (Desktop) End -->

                    </div>
                    <!-- Inner Section Blocks End -->

                </div>
                <!-- Inner Data End -->

                <!-- Inner Media Start -->
                <div class="col-12 col-lg-4 inner__media">

                    <!-- Inner Media Content Start -->
                    <div class="innermedia__content border-radius-l">

                        <!-- Image Background Start -->
                        <div class="innermedia__image innermedia-image-3"></div>
                        <!-- Image Background End -->

                    </div>
                    <!-- Inner Media Content End -->

                </div>
                <!-- Inner Media End -->

            </div>
        </div>
    </div>
</section>
<!-- Contact Section End -->



@endsection