@extends('user.layouts.index')
@section('page_content')



    <link rel="stylesheet" href="{{asset ('css/contact_us.css')}}">
   <link rel="stylesheet" href="{{ asset('css/home.css') }}">

        <!--CONTACT US TOP BORDER-->
        <section class="contactUs-top-border">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 about-h1">
                        <h1 >Contact Us</h1>
                    </div>
                    <div class="col-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
                        <p class=" home-bar-text"><img src="../slicing/My Shout About Us/icons8-home.svg" class="img-fluid text-center"> Home / <span class="blue"> Contact Us</span></p>
                    </div>
                </div>
            </div>
        </section>

        <!-- MAP-->
        <section class="map-section">
            <div class="container-fluid map-section-container">
                <div class="row">
                    <div class="col-12">
                        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d28943.424269701227!2d67.04768643415208!3d24.93452144276091!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3eb33f68689fe4f9%3A0xcf5ef741e646eeff!2sFederal%20B%20Area%20Karachi%2C%20Karachi%20City%2C%20Sindh%2C%20Pakistan!5e0!3m2!1sen!2s!4v1627896417550!5m2!1sen!2s" class="text-center map" allowfullscreen="" loading="lazy"></iframe>
                    </div>
                </div>
            </div>
        </section>

        <!-- CONTACT FORM-->
        <section class="contact-form">
            <div class="container-fluid contact-form-container">
                <div class="row">
                    <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6">
                        <div class="row">
                        <div class="col-12 center-txt">
                        <h4><u class="blue">Send</u> Message</h4>
                        </div>
                        </div>
                        <br>
                        <div class="row">
                        <div class="col-12 col-lg-6 center-txt">
                            <div class="form-group">
                                <label for="my-input">Full Name:</label>
                                <input id="my-input" class="form-control form-input" type="text" name="">
                            </div>
                        </div>
                        <div class="col-12 col-lg-6 center-txt">
                            <div class="form-group">
                                <label for="my-input">Your Email:</label>
                                <input id="my-input" class="form-control form-input" type="email" name="">
                            </div>
                        </div>
                        <div class="col-12 center-txt">
                            <div class="form-group">
                                <label for="my-input">Subject:</label>
                                <input id="my-input" class="form-control form-input" type="text" name="">
                            </div>
                        </div>
                        <div class="col-12 center-txt">
                            <div class="form-group">
                                <label for="my-input">Message:</label><br>
                                <textarea name="" id="text" cols="66" rows="10" class="form-control form-input textarea"></textarea>
                            </div>
                        </div>
                        <div class="col-12 center-txt">
                            <button class="btn btn-md form-button">Send Message</button>
                        </div>
                        </div>
                    </div>
                <div class="col-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 contact-details">
                    <div class="row">
                        <div class="col-12">
                            <h4><u class="blue">Get</u> In Touch</h4>
                        </div>             
                        <div class="col-12">
                            <h5 class="text-secondary">Lorem ipsum dolor sit amet, consectetuer</h5>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div class="col-12">
                            <h3>Office Address:</h3>
                        </div>
                        <div class="col-12">
                            <h5 class="text-secondary">Office and Administrative Support Occupations</h5>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div class="col-12">
                            <h3>Contact Number:</h3>
                        </div>
                        <div class="col-12">
                            <h5 class="text-secondary">920-325-2839</h5>
                        </div>
                        <br>
                        <br>
                        <br>
                        <div class="col-12">
                            <h3>Email Address:</h3>
                        </div>
                        <div class="col-12">
                            <a href="myshout@gmail.com" class="text-decoratione-none text-secondary">myshout@gmail.com</a>
                        </div>
                    </div>
                </div>         
                </div>
            </div>
        </section>

            

@endsection