resume.php

<?php /* Template Name: resume
    Template Post Type: post,page,download,product */
?>

<?php get_header(); ?>

<div class="body-hero">
    <section class="hero">
        <div class="hero__content">
            <h1 class="h2-hero">نمونه کار ها </h1>
            <h4 class="h4-hero my-5">ویراد توسعه کسب و کار شما</h4>
        </div>
        <img class="hero__img img-hero" alt="">
    </section>
</div>

<div>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<div    class="resume-wrapper ">

    <section style="direction: ltr" class="experience section-padding">
        <div class="container">

            <!--Skill experience-->

            <div class="section-wrapper clearfix">
                <h3 class="section-title text-white">Skills</h3>
                <!-- YOUR SET OF SKILLS  -->
                <ul>

                    <li class="skill-percentage">Photoshop / Illustrator</li>
                    <li class="skill-percentage">Blender / AutoCAD / 3DS Max</li>

                    <li class="skill-percentage">C/C++</li>
                    <li class="skill-percentage">Electronic /Arduino / Altium</li>

                    <li class="skill-percentage">Internet of Things</li>

                    <li class="skill-percentage">Android / java / kotlin</li>

                    <li class="skill-percentage">SEO </li>

                    <li class="skill-percentage">Security </li>

                    <li class="skill-percentage">HTML / CSS</li>
                    <li class="skill-percentage">Javascript / Vue.js / React.js</li>


                    <li class="skill-percentage">PHP / laravel</li>
                    <li class="skill-percentage">Wordpress</li>
                    <li class="skill-percentage">MySQL</li>

                    <li class="skill-percentage">Office</li>





                </ul>

            </div>



        </div>
    </section>

    <section  class="profile section-padding">
        <div class="container">

            <div class="picture-resume-wrapper">
                <div class="picture-resume">
                    <span><img src="../wp-content/themes/spy/images/logo_vearad.png" alt="vearad logo" /></span>
                </div>
                <div class="clearfix"></div>
            </div>

            <div class="name-wrapper">
                <h1>گروه نرم افزاری ویراد<br/></h1>
                <!-- YOUR NAME AND LAST NAME  -->
            </div>


            <div class="clearfix"></div>
            <div class="contact-info clearfix">

                <ul class="list-content ">
                    <a  href="tel:+989358668218"><li class=" btn-main">09358668218</li></a>
                    <!-- YOUR PHONE NUMBER  -->
                    <a href="mailto:vearad@gmail.com"><li class=" btn-main">vearad@gmail.com</li></a>
                    <!-- YOUR EMAIL -->
                    <a href="https://step24.ir/"><li class=" btn-main">step24.ir</li></a>
                    <!-- YOUR WEBSITE  -->

                </ul>
                <ul class="list-titles">
                    <li class=" btn-main">تماس</li>
                    <li class=" btn-main">ایمیل</li>
                    <li class=" btn-main">سایت</li>

                </ul>
            </div>
            <div class="contact-presentation rtl">
                <!-- YOUR PRESENTATION RESUME  -->
                <p class="bold">
                    تیم نرم افزاری ویراد واقع در شهر مشهد با مجربت ترین پرسنل در حوزه IT در کنار شما
                    ایستاده است.
                    متخصصان ما برای انجام پروژه های گرافیکی ، برنامه نویسی ، سخت افزار و هوش مصنوعی
                    آماده به کار هستند.
                    تیم ویراد نیز آموزش پروژه محور جهت رشد و توسعه فردی و کسب و کار شما میدهد تا بتوانید
                    پله های موفقیت را ترقی نمایید.
                </p>
            </div>
            <div class="contact-social clearfix">
                <ul class="list-titles">
                    <li class=" btn-main">instagram:</li>
                    <li class=" btn-main">Github:</li>
<!--                    <li>LinkedIn</li>-->
                </ul>
                <ul class="list-content">
                    <a  href="https://www.instagram.com/vearad/"><li class=" btn-main">vearad</li></a>
                    <a  href="https://github.com/dariushEm/"><li class=" btn-main">projects</li></a>
<!--                    <li><a href="https://in.linkedin.com/in/prateek0103">prateek0103</a></li>-->
                </ul>
            </div>
        </div>
    </section>

    <div class="clearfix"></div>
</div>
</div>


<main class="container">



    <!-- counter -->
    <section class="m-3">
        <section class="card-counter">
            <div class="container my-2">
                <div class="row justify-content-center text-center">
                    <div class="col-12"></div>
                    <div class="col-md-4">
                        <span id="count1" class="display-4"></span>
                        <p>پروژه های انجام شده</p>
                    </div>
                    <div class="col-md-4">
                        <span id="count2" class="display-4"></span>
                        <p>تعداد دانشجویان</p>
                    </div>
                    <div class="col-md-4">
                        <span id="count3" class="display-4"></span>
                        <p>تعداد پرسنل</p>
                    </div>
                </div>
            </div>
        </section>
    </section>
    <!-- counter -->






    <!-- card our project site -->
    <section class="projects">

        <div class="card-container my-5 d-flex flex-wrap ">

            <div class="container">
                <div class="gallery_tabs btn-main text-white">
                    <H2>
                        <span class="fab fa-globe"></span>
                        نمونه طراحی سایت</H2>
                </div>

            </div>

            <div class="card glass">

                <h2>IOT Hiva</h2>

                <img src="../wp-content/themes/spy/images/iotHiva.png"/>

                <div class="card-content">

                    <h3> خانه اینترنت اشیاء</h3>
                    <p></p>
                    <p>backend: wordpress</p>
                    <p>front: html,css,js</p>
                    <button>
                        <a
                                class="link-card-sites"
                                href="https://iotHiva.ir/"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>

            <div class="card glass">

                <h2>Step24</h2>

                <img src="../wp-content/themes/spy/images/step24.png"/>

                <div class="card-content">

                    <h3>داشبورد کسب و کار شما</h3>
                    <p></p>
                    <p>backend: php, laravel</p>
                    <p>front: Vue.js</p>
                    <button>
                        <a
                                class="link-card-sites"
                                href="https://step24.ir/"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>

            <div class="card glass">

                <h2>98diha</h2>

                <img src="../wp-content/themes/spy/images/98diha.png"/>

                <div class="card-content">

                    <h3>پلتفرم آهنگ زنگ </h3>
                    <p></p>
                    <p>backend: wordpress</p>
                    <p>front: (vip) html,css,js</p>

                    <button>
                        <a
                                class="link-card-sites"
                                href="https://98diha.ir/"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>

            <div class="card glass">

                <h2>androidha</h2>

                <img src="../wp-content/themes/spy/images/androidha.png"/>

                <div class="card-content">

                    <H3>نرم افزارهای اندروید</H3>
                    <p></p>
                    <p>backend: wordpress</p>
                    <p>front: html,css,js</p>
                    <button>
                        <a
                                class="link-card-sites"
                                href="https://androidha.ir/"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>

        </div>
    </section>


    <!-- card our project app -->
    <section class="projects">
        <div class="card-container my-5 d-flex flex-wrap">

            <div class="container">
                <div class="gallery_tabs btn-main text-white">
                    <H2>
                        <span class="fab fa-android"></span>
                        نمونه اپلیکیشن های اندروید</H2>
                </div>

            </div>


            <div class="card glass">

                <h2>Spy Game</h2>

                <img class="img_app" src="../wp-content/themes/spy/images/spy.png"/>

                <div class="card-content">

                    <a href="https://98diha.ir/spy-game-android"> اپلیکیشن جاسوس </a>
                    <button>
                        <a
                                class="link-card-sites"
                                href="https://cafebazaar.ir/app/com.simurgh.spy"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>

            <div class="card glass">

                <h2>wink Game</h2>

                <img class="img_app" src="../wp-content/themes/spy/images/wink.png"/>

                <div class="card-content">

                    <a href="https://98diha.ir/%d8%af%d8%a7%d9%86%d9%84%d9%88%d8%af-%d8%a8%d8%a7%d8%b2%db%8c-%da%86%d8%b4%d9%85%da%a9">
                        بازی چشمک </a>
                    <button>
                        <a
                                class="link-card-sites"
                                href="https://cafebazaar.ir/app/com.simurgh.wink"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>


            <div class="card glass">

                <h2>98diha</h2>

                <img class="img_app" src="../wp-content/themes/spy/images/98diha-icon.png"/>

                <div class="card-content">

                    <a href="https://98diha.ir/%d9%86%d8%b1%d9%85-%d8%a7%d9%81%d8%b2%d8%a7%d8%b1-%db%b9%db%b8-%d8%af%db%8c-%d9%87%d8%a7">نرم
                        افزار 98دی ها </a>
                    <button>
                        <a
                                class="link-card-sites"
                                href="https://cafebazaar.ir/app/com.simurgh.a98diha"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>


            <div class="card glass">

                <h2>Hide App</h2>

                <img class="img_app" src="../wp-content/themes/spy/images/barman.png"/>

                <div class="card-content">

                    <a href="https://cafebazaar.ir/app/com.androidha.BarMan">نرم افزار مخفی ساز </a>
                    <button>
                        <a
                                class="link-card-sites"
                                href="https://cafebazaar.ir/app/com.androidha.BarMan"
                                target="_blank"
                        >
                            مشاهده پروژه
                        </a>
                    </button>
                </div>

            </div>


        </div>
    </section>

    <!-- out graphic logo -->
    <section class="projects">
    <div class="mt-5">
        <section class="py-5">
            <div class="container my-5">
                <h2 class="gallery_tabs btn-main text-white">نمونه طراحی لوگو</h2>
            </div>

            <!--====== Gallery Section ======-->
            <section id="gallery">
                <div class="container">
                    <!-- Filterable Gallery -->
                   <!-- <ul class="gallery_tabs">
                        <li class="active" data-filter="all">همه</li>
                        <li data-filter="students">هنرجویان</li>
                        <li data-filter="experts">متخصصان</li>
                    </ul>-->

                    <div class="gallery_wrapper">

                        <div class="gallery_item experts">
                            <img data-enlargable width="50"
                                 class="img"
                                 src="../wp-content/themes/spy/images/hiva_logo.png"
                                 alt="hiva_logo-img"
                            />
                        </div>


                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/Amata.png"
                                 alt="Amata-img"
                            />
                        </div>
                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/shahmaghsoud.png"
                                 alt="Amata-img"
                            />
                        </div>

                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/coffe.png"
                                 alt="coffe-img"
                            />
                        </div>

                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="http://spy-game.ir/wp-content/uploads/2022/10/logo2.jpg"
                                 alt="img"
                            />
                        </div>

                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/Artboard.png"
                                 alt="Artboard-img"
                            />
                        </div>


                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="http://spy-game.ir/wp-content/uploads/2022/10/logo1.png"
                                 alt="img"
                            />
                        </div>
                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/logo-step24.png"
                                 alt="step24-img"
                            />
                        </div>

                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/amataa.png"
                                 alt="step24-img"
                            />
                        </div>

                        <div class="gallery_item students">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/fighter.png"
                                 alt="hiva_logo-img"
                            />
                        </div>

                        <div class="gallery_item students">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/cshow.png"
                                 alt="img"
                            />
                        </div>

                        <div class="gallery_item students">
                            <img data-enlargable
                                 class="img"
                                 src="../wp-content/themes/spy/images/salamat.png"

                                 alt="salamat-img"
                            />
                        </div>

                        <div class="gallery_item experts">
                            <img data-enlargable
                                 class="img"

                                 src="../wp-content/themes/spy/images/vearad-logo.png"
                                 alt="vearad-img"
                            />
                        </div>


                    </div>

                    <!-- Lightbox -->
                    <div class="lightbox">
                        <div class="lightbox_wrapper">
                            <div class="lightbox_content">
                                <img src="" class="lightbox_img" alt="lightbox-img"/>
                            </div>
                        </div>
                        <div class="lightbox_close">
                            <span></span>
                            <span></span>
                        </div>
                    </div>
                </div>
            </section>
        </section>
    </div>
    </section>

    <!-- out graphic cart visite -->

    <section class="projects">
        <div class="card-container my-5 d-flex flex-wrap">

            <div class="container">

                <div class="gallery_tabs btn-main ">
                    <H3 class="m-2">
                        <span class="fab fa-globe"></span>
                        نمونه طراحی کارت ویزیت</H3>
                </div>

            </div>

            <div class="gallery_card m-4 experts">
                <img data-enlargable width="50"
                     class="img"

                     src="../wp-content/themes/spy/images/card_visitVB.png"
                     alt="card_visit_vearadF"
                />
            </div>

            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"

                     src="../wp-content/themes/spy/images/card_visitVF.png"
                     alt="card_visit-vearadF"
                />
            </div>

            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"

                     src="../wp-content/themes/spy/images/cartVisitHivaB.png"
                     alt="card_visit_HivaB"
                />
            </div>

            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"

                     src="../wp-content/themes/spy/images/cartVisitHivaF.png"
                     alt="card_visit-HivaF"
                />
            </div>

            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"

                     src="../wp-content/themes/spy/images/radin.png"
                     alt="card_visit_radin"
                />
            </div>

        </div>

    </section>


    <!-- out graphic site -->

    <section class="projects">
        <div class="card-container my-5 d-flex flex-wrap">

            <div class="container">

                <div class="gallery_tabs btn-main ">
                    <H3 class="m-2">
                        <span class="fab fa-globe"></span>
                        نمونه عکس شاخص سایت</H3>
                </div>

            </div>


            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/swift.jpg"
                     alt="POSTER_SITE_00"
                />
            </div>
            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/brush.jpg"
                     alt="POSTER_SITE_01"
                />
            </div>
            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/Compiler.jpg"
                     alt="POSTER_SITE_02"
                />
            </div>
            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/IOT.jpg"
                     alt="POSTER_SITE_03"
                />
            </div>
            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/programing.jpg"
                     alt="POSTER_SITE_04"
                />
            </div>
            <div class="gallery_card m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/string.jpg"
                     alt="POSTER_SITE_05"
                />
            </div>


        </div>

    </section>

    <!-- out graphic poster -->
    <section class="projects">
        <div class="card-container my-5 d-flex flex-wrap">

            <div class="container">

                <div class="gallery_tabs btn-main ">
                    <H3 class="m-2">
                        <span class="fab fa-globe"></span>
                        نمونه طراحی پوستر</H3>
                </div>

            </div>


            <div class="card glass">

                <div class="gallery_poster2 m-4 experts">

                    <img data-enlargable
                         class="img"
                         src="../wp-content/themes/spy/images/photo_2021.png"
                         alt="POSTER_SITE_00"
                    />

                </div>

                <div class="card-content">

                    <h3>پوستر دورهمی</h3>
                    <p class="text-secondary">طراحی شده برای تبلیغات در شبکه های اجتماعی</p>
                </div>

            </div>


            <div class="card glass">

                <div class="gallery_poster2 m-4 experts">

                    <img data-enlargable
                         class="img"
                         src="../wp-content/themes/spy/images/poste_iot.png"
                         alt="POSTER_SITE_01"
                    />

                </div>

                <div class="card-content">

                    <h3>پوستر هدر سایت</h3>
                    <p class="text-secondary">طراحی شده برای بالا سایت قسمت header</p>
                </div>

            </div>


            <div class="card glass">

                <div class="gallery_poster2 m-4 experts">

                    <img data-enlargable
                         class="img"
                         src="../wp-content/themes/spy/images/cartoon-iot.png"
                         alt="POSTER_SITE_02"
                    />

                </div>

                <div class="card-content">

                    <h3>کارتون بسته بندی</h3>
                    <p class="text-secondary">طراحی شده برای جلد روی بسته بندی </p>
                </div>

            </div>



            <div class="card glass">

                <div class="gallery_poster2 m-4 experts">

                    <img data-enlargable
                         class="img"
                         src="../wp-content/themes/spy/images/se_la_traket.png"
                         alt="POSTER_SITE_03"
                    />

                </div>

                <div class="card-content">

                    <h3>تراکت سه لت</h3>
                    <p class="text-secondary">طراحی شده برای تبلیغات تراکتی (تاشو) </p>
                </div>

            </div>

            <div class="card glass">

                <div class="gallery_poster2 m-4 experts">

                    <img data-enlargable
                         class="img"
                         src="../wp-content/themes/spy/images/se_la_traket_f.png"
                         alt="POSTER_SITE_04"
                    />

                </div>

                <div class="card-content">

                    <h3>تراکت سه لت</h3>
                    <p class="text-secondary">طراحی شده برای تبلیغات تراکتی (تاشو) - قسمت جلو</p>
                </div>

            </div>




        </div>

    </section>

    <!-- out graphic traket -->

    <section class="projects">
        <div class="card-container my-5 d-flex flex-wrap">


            <div class="container">

                <div class="gallery_tabs btn-main ">
                    <H3 class="m-2">
                        <span class="fab fa-globe"></span>
                        نمونه طراحی تراکت</H3>
                </div>

            </div>


            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/race.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/race2.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/vearad1.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/vearad2.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/stive.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/poster-1080.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/poster-1081.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/poster02.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/story.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/poster12.png"
                     alt="hiva_logo-img"
                />
            </div>
            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/dentis.png"
                     alt="hiva_logo-img"
                />
            </div>
            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/help.png"
                     alt="hiva_logo-img"
                />
            </div>

            <div class="gallery_traket m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/docter.png"
                     alt="hiva_logo-img"
                />
            </div>

        </div>

    </section>

    <!-- out graphic insta -->

    <section class="projects">
        <div class="card-container my-5 d-flex flex-wrap">

            <div class="container">

                <div class="gallery_tabs btn-main ">
                    <H3 class="m-2">
                        <span class="fab fa-globe"></span>
                        نمونه طراحی قالب اینستاگرام</H3>
                </div>

            </div>


            <div class="gallery_post m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/post_insta.jpg"
                     alt="post_insta-img"
                />
            </div>
            <div class="gallery_post m-4 students">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/tutorial-_rasperipy.png"
                     alt="hiva_logo-img"
                />
            </div>
            <div class="gallery_post m-4 students">
                <img data-enlargable
                     class="img"
                     src="http://spy-game.ir/wp-content/uploads/2022/10/student1.jpg"
                     alt="img"
                />
            </div>
            <div class="gallery_post m-4 students">
                <img data-enlargable
                     class="img"
                     src="http://spy-game.ir/wp-content/uploads/2022/10/student2.jpg"
                     alt="img"
                />
            </div>
            <div class="gallery_post m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/3.png"
                     alt="poster3-img"
                />
            </div>
            <div class="gallery_post m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images//The_100_2.png"
                     alt="img"
                />
            </div>
            <div class="gallery_post m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images//The_100_3.png"
                     alt="img"
                />
            </div>
            <div class="gallery_post m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images//The_100_4.png"
                     alt="img"
                />
            </div>
            <div class="gallery_post m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/cover0.png"
                     alt="cover0-img"
                />
            </div>
            <div class="gallery_post m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/cover1.png"
                     alt="cover1-img"
                />
            </div>
            <div class="gallery_post m-4 experts">
                <img data-enlargable
                     class="img"
                     src="../wp-content/themes/spy/images/cover2.png"
                     alt="cover2-img"
                />
            </div>

        </div>

    </section>


    <!--   <div class="mt-5">
           <section class="py-5">
               <div class="container my-5">
                   <h2 class="gallery_tabs btn-main text-white">نمونه طراحی تراکت و پوستر</h2>
               </div>
               <section id="gallery">
                   <div class="container">
                       <ul class="gallery_tabs">
                           <li class="active" data-filter="all">همه</li>
                           <li data-filter="students">هنرجویان</li>
                           <li data-filter="experts">متخصصان</li>
                       </ul>

                       <div class="gallery_wrapper">


                       </div>

                       <div class="lightbox">
                           <div class="lightbox_wrapper">
                               <div class="lightbox_content">
                                   <img src="" class="lightbox_img" alt="lightbox-img"/>
                               </div>
                           </div>
                           <div class="lightbox_close">
                               <span></span>
                               <span></span>
                           </div>
                       </div>
                   </div>
               </section>
           </section>
       </div>-->

</main>

<script>
    var projects = document.getElementsByClassName(projects);
    document.addEventListener("DOMContentLoaded", () => {
        function counter(id, start, end, duration) {
            let obj = document.getElementById(id),
                current = start,
                range = end - start,
                increment = end > start ? 1 : -1,
                step = Math.abs(Math.floor(duration / range)),
                timer = setInterval(() => {
                    current += increment;
                    obj.textContent = current;
                    if (current == end) {
                        clearInterval(timer);
                    }
                }, step);
        }

        counter("count1", 0, 26, 1000);
        counter("count2", 0, 161, 4500);
        counter("count3", 0, 16, 4000);
    });

    //   gallery
    try {
        fetch(
            new Request(
                "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js",
                {method: "HEAD", mode: "no-cors"}
            )
        )
            .then(function (response) {
                return true;
            })
            .catch(function (e) {
                var carbonScript = document.createElement("script");
                carbonScript.src =
                    "//cdn.carbonads.com/carbon.js?serve=CE7DC2JW&placement=wwwcssscriptcom";
                carbonScript.id = "_carbonads_js";
                document.getElementById("carbon-block").appendChild(carbonScript);
            });
    } catch (error) {
        console.log(error);
    }
</script>
<script
        async
        src="https://www.googletagmanager.com/gtag/js?id=G-LLWL5N9CSM"
></script>

<script>
    window.dataLayer = window.dataLayer || [];

    function gtag() {
        dataLayer.push(arguments);
    }

    gtag("js", new Date());
    gtag("config", "G-LLWL5N9CSM");

</script>
<script>
    /*=====--- Filterable Gallery with Lightbox ---=====*/

    const body = document.body;
    const galleryTabs = document.querySelectorAll('.gallery_tabs li');
    const galleryItems = document.querySelectorAll('.gallery_item');
    const galleryImgs = document.querySelectorAll('.gallery_item img');
    const lightbox = document.querySelector('.lightbox');
    const lightboxImg = document.querySelector('.lightbox_img');
    const lightboxCloseBtn = document.querySelector('.lightbox_close');


    /*===== 01) Gallery Filtering functionality =====*/

    galleryTabs.forEach((currTab) => {
        currTab.addEventListener('click', (e) => {

            // removing the existing 'active' class from the tabs.
            e.target.parentElement.querySelector('.active').classList.remove('active');

            // adding the 'active' class to the currently clicked tab.
            e.target.classList.add('active');


            let filterValue = e.target.getAttribute('data-filter');

            galleryItems.forEach((currItem) => {
                if (filterValue === 'all' || currItem.classList.contains(filterValue)) {
                    currItem.classList.remove('hide');
                    currItem.classList.add('show');
                } else {
                    currItem.classList.remove('show');
                    currItem.classList.add('hide');
                }
            });

        });
    });


    /*===== 02) Lightbox functionality =====*/

    galleryImgs.forEach((currImg) => {
        currImg.addEventListener('click', (e) => {

            let imgSrc = e.target.getAttribute('src');

            lightboxImg.setAttribute('src', imgSrc);

            lightbox.classList.add('open');
            body.classList.add('overflow_hide');

        });
    });


    // Function for closing the Lightbox
    const lightboxClose = () => {
        lightbox.classList.remove('open');
        body.classList.remove('overflow_hide');
    };


    // closing the lightbox on clicking the lightboxClose btn.
    lightboxCloseBtn.addEventListener('click', lightboxClose);


    // closing the lightbox on clicking outside of it.
    window.addEventListener('click', (e) => {
        if (e.target.className === 'lightbox_wrapper') {
            lightboxClose();
        }
    });


    // closing the lightbox on pressing the Escape key.
    window.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            lightboxClose();
        }
    });


    function getPics() {
    } //just for this demo
    const imgs = document.querySelectorAll('.gallery img');
    const fullPage = document.querySelector('#fullpage');

    imgs.forEach(img => {
        img.addEventListener('click', function () {
            fullPage.style.backgroundImage = 'url(' + img.src + ')';
            fullPage.style.display = 'block';
        });
    });


    $('img[data-enlargable]').addClass('img-enlargable').click(function () {
        var src = $(this).attr('src');
        $('<div>').css({
            background: 'RGBA(255,255,0,.5) url(' + src + ') no-repeat center',
            backgroundSize: 'contain',
            width: '50%', height: '50%',
            position: 'fixed',
            zIndex: '10000',
            top: '0', left: '0',
            cursor: 'zoom-out'
        }).click(function () {
            $(this).remove();
        }).appendTo('body');
    });


    // Some code thanks to @chrisgannon

    var select = function(s) {
        return document.querySelector(s);
    }

    function randomBetween(min, max) {
        var number = Math.floor(Math.random() * (max - min + 1) + min);

        if (number !== 0) {
            return number;
        } else {
            return 0.5;
        }
    }

    var tl = new TimelineMax();

    for (var i = 0; i < 20; i++) {

        var t = TweenMax.to(select('.bubble' + i), randomBetween(1, 1.5), {
            x: randomBetween(12, 15) * (randomBetween(-1, 1)),
            y: randomBetween(12, 15) * (randomBetween(-1, 1)),
            repeat: -1,
            repeatDelay: randomBetween(0.2, 0.5),
            yoyo: true,
            ease: Elastic.easeOut.config(1, 0.5)
        })

        tl.add(t, (i + 1) / 0.6)
    }

    tl.seek(50);

</script>


<?php get_footer(); ?>