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

    <section class='main'>
        <main>
            <!-- start banner -->
            <div class="uk-cover-container uk-height-large">
                <img src="img/pic01.png" alt="" uk-cover>
            </div>
            <!-- end banner -->
            <section class='uk-margin-large-top uk-margin-large-bottom'>
                <div class="full-container">
                    <div class="row">
                        <div class='about'>
                            <header>
                                <h2 class='mark'>زراج محمد بن عبدالعزيز الصانع</h2>
                            </header>
                            <div class='center bold text-gray'>
                                <p class='mark uk-text-large'>دعوات صداقات وتكبيرات في تحف الزواج</p>
                                <p><span class="mark">الشاب/</span> محمدعبدالعزيز الصانع <span class="mark">/علي كريمة</span> صالح ابراهيم النقيدان</p>
                                <p class='mark'>يوم الجمعة 1440ة/6/18</p>
                                <p>الفيديو:</p>
                            </div>
                        </div>
                    </div>
                    <div class="row uk-margin-large-top">
                        <iframe class='coverage-video' src="https://www.youtube.com/embed/lNzDwv2M5qo" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    </div>
                </div>
            </section>
            <section class='uk-section uk-margin-medium-top'>
                <div class="full-container">
                    <div class="row">
                        <div class="uk-grid uk-child-width-1-4@m uk-child-width-1-3@s uk-child-width-1-1 uk-grid-medium">
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                            <div class='uk-margin-medium-bottom'>
                                <div class="">
                                    <a href="#modal-center" uk-toggle>
                                        <img src="img/pic05.png" alt="">
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row uk-margin-small">
                        <h3 class='mark'>تصوير:</h3>
                        <div class='bold text-gray'>
                            <p>فوتوغرافي: عبدالسلام الفايز</p>
                            <p>فوتوغرافي: محمد السعيد</p>
                            <p>فيديو: احمد الشقير</p>
                            <p>فيديو: احمد عوده</p>
                        </div>
                    </div>
                    <div class="row">
                        <div class="center mark bold">
                            للمزيد من الصور <a class="red" href='#'>اضغط هنا</a>
                        </div>
                    </div>
                </div>
            </section>

        </main>
    </section>
    <section class="share">
        <div class="fill-container">
            <div class="row">
                <div class="gray-bg xs-none-float uk-margin-small">
                    <div class="right">
                        <div class="share-box">
                            نشر
                            <ul class="share-links inline-box">
                                <li><a href="#" class='fab fa-facebook-f icon fb'></a></li>
                                <li><a href="#" class='fab fa-twitter icon tw'></a></li>
                                <li><a href="#" class='fab fa-google-plus-g icon gp'></a></li>
                                <li><a href="#" class='fab fa-linkedin-in icon li'></a></li>
                                <li><a href="#" class='fab fa-pinterest-p icon pt'></a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="left">
                        <div class="comment-info inline-box">
                            <div class="comment-info-item">
                                التعليقات : 0 <i class='fas fa-comments'></i>
                            </div>
                            <div class="comment-info-item">
                                الزيارات : 2 <i class='fas fa-eye'></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row uk-margin-small">
                <div class="gray-bg">
                    <h3 class='mark'><i class='fas fa-plus'></i> أضف تعليق جديد</h3>
                    <div class="gray-bg">
                        <form action="" class='form-a'>
                            <div class="f-g uk-margin-small">
                                <input type="text" placeholder="اسمك" class='uk-input'>
                            </div>
                            <div class="f-g uk-margin-small">
                                <input type="text" placeholder="بريدك الالكتروني" class='uk-input'>
                            </div>
                            <div class="f-g uk-margin-small">
                                <input type="text" placeholder="التعليق" class='uk-textarea'>
                            </div>
                            <div class="f-g uk-margin-small">
                                <button class="btn">ارسل التعليق</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- start slider modal -->
    <div id="modal-center" class="uk-flex-top coverages-slider" uk-modal>
        <div class="uk-modal-dialog uk-margin-auto-vertical">
            <button class="uk-modal-close-default" type="button" uk-close></button>
            <div class="uk-position-relative uk-visible-toggle uk-light" tabindex="-1" uk-slideshow>
                <ul class="uk-slideshow-items">
                    <li>
                        <img src="img/pic01.png" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="img/pic01.png" alt="" uk-cover>
                    </li>
                    <li>
                        <img src="img/pic01.png" alt="" uk-cover>
                    </li>
                </ul>
                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
            </div>
        </div>
    </div>


@endsection