Skip to main content
title

بخش اسلایدر و تصاویر متحرک


1 2 3

              
                <!-- =========={ SLIDER }==========  -->
                <div id="slider" class="section">
                  <div class="hero-slider nav-inset-button nav-light-dots carousel" data-flickity='{ "cellAlign": "left","rightToLeft": true, "wrapAround": true, "adaptiveHeight": true, "pageDots": true, "autoPlay": 5000 }'>
                    <div class="col-12 px-0 pt-7 pb-7 pb-md-7 z-index-1" style="min-height: 520px;background-image: url('src/img-min/bg/bg.jpg');background-size: cover;">
                      <!-- background overlay -->
                      <div class="overlay bg-gradient-secondary opacity-90 z-index-n1"></div>

                      <div class="container">
                        <div class="row align-items-center justify-content-center">
                          <!-- content -->
                          <div class="col-12 col-md-10" data-aos="fade-up">
                            <div class="mt-0 py-0 py-lg-5 text-center text-lg-start hero-caption">
                              <h2 class="display-5 fw-bold text-white">Business & Government</h2>
                              <h2 class="display-5 fw-bold text-warning mb-4 mb-sm-3">With Our Solid Team</h2>
                              <p class="lead text-light mb-5">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>

                              <a class="btn btn-warning" href="#profile">
                                <!-- <i class="fas fa-paper-plane me-1"></i>  -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="me-2" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                                More Details
                              </a>
                            </div>
                          </div><!-- end content -->
                        </div>
                      </div>
                    </div>

                    <div class="col-12 px-0 pt-7 pb-7 pb-md-7 z-index-1" style="min-height: 520px;background-image: url('src/img-min/bg/bg3.jpg');background-size: cover;">
                      <!-- background overlay -->
                      <div class="overlay bg-gradient-secondary opacity-90 z-index-n1"></div>

                      <div class="container">
                        <div class="row align-items-center justify-content-center">
                          <!-- content -->
                          <div class="col-12 col-md-10" data-aos="fade-up">
                            <div class="mt-0 py-0 py-lg-5 text-center text-lg-start hero-caption">
                              <h2 class="display-5 fw-bold text-white">Developing a New Concept</h2>
                              <h2 class="display-5 fw-bold text-warning mb-4 mb-sm-3">With our Experience</h2>
                              <p class="lead text-light mb-5">لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است</p>

                              <a class="btn btn-warning" href="#services">
                                <!-- <i class="fas fa-paper-plane me-1"></i> -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" fill="currentColor" class="me-2" viewBox="0 0 512 512"><path d="M53.12,199.94l400-151.39a8,8,0,0,1,10.33,10.33l-151.39,400a8,8,0,0,1-15-.34L229.66,292.45a16,16,0,0,0-10.11-10.11L53.46,215A8,8,0,0,1,53.12,199.94Z" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><line x1="460" y1="52" x2="227" y2="285" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>
                                Our Services
                              </a>
                            </div>
                          </div><!-- end content -->
                        </div>
                      </div>
                    </div>
                  </div>
                </div><!-- end slider-->
              
            

تصاویر برنامه


لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ

              
                <!-- =========={ SCREENSHOT }==========  -->
                <div id="screenshot" class="section py-6 py-md-7 bg-body">
                  <div class="container">
                    <!-- section header -->
                    <header class="text-center mx-auto mb-5">
                      <h2 class="h3 h2-md fw-bold">Screenshot</h2>
                      <hr class="divider my-4 bg-warning border-warning">
                      <p class="lead text-muted">Take a look at the app by its screenshots</p>
                    </header><!-- end section header -->

                    <div class="row align-items-center">
                      <div class="col-md-10 mx-auto">
                        <!-- screenshot slider -->
                        <div class="carousel nav-dark-button" data-flickity='{ "cellAlign": "left","rightToLeft": true, "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": true , "pageDots": false, "imagesLoaded": true }'>
                          <div class="carousel-cell col-12 col-md-6 col-lg-4 px-7 px-md-5 text-center">
                            <div class="slider-item">
                              <figure class="position-relative">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                  <!-- Clip path image -->
                                  <defs>
                                    <clipPath id="svgf">
                                      <rect x="52" y="10" width="380" height="818"/>
                                    </clipPath>
                                  </defs>

                                  <!-- Phone screen -->
                                  <image clip-path="url(#svgf)" xlink:href="src/img-min/app/app1.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                  <!-- Phone cover -->
                                  <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                </svg>
                              </figure>
                            </div>
                          </div>
                          <div class="carousel-cell col-12 col-md-6 col-lg-4 px-7 px-md-5 text-center">
                            <div class="slider-item">
                              <figure class="position-relative">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                  <!-- Clip path image -->
                                  <defs>
                                    <clipPath id="svgf2">
                                      <rect x="52" y="10" width="380" height="818"/>
                                    </clipPath>
                                  </defs>

                                  <!-- Phone screen -->
                                  <image clip-path="url(#svgf2)" xlink:href="src/img-min/app/app2.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                  <!-- Phone cover -->
                                  <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                </svg>
                              </figure>
                            </div>
                          </div>
                          <div class="carousel-cell col-12 col-md-6 col-lg-4 px-7 px-md-5 text-center">
                            <div class="slider-item">
                              <figure class="position-relative">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                  <!-- Clip path image -->
                                  <defs>
                                    <clipPath id="svgf3">
                                      <rect x="52" y="10" width="380" height="818"/>
                                    </clipPath>
                                  </defs>

                                  <!-- Phone screen -->
                                  <image clip-path="url(#svgf3)" xlink:href="src/img-min/app/app3.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                  <!-- Phone cover -->
                                  <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                </svg>
                              </figure>
                            </div>
                          </div>
                          <div class="carousel-cell col-12 col-md-6 col-lg-4 px-7 px-md-5 text-center">
                            <div class="slider-item">
                              <figure class="position-relative">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                  <!-- Clip path image -->
                                  <defs>
                                    <clipPath id="svgf4">
                                      <rect x="52" y="10" width="380" height="818"/>
                                    </clipPath>
                                  </defs>

                                  <!-- Phone screen -->
                                  <image clip-path="url(#svgf4)" xlink:href="src/img-min/app/app4.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                  <!-- Phone cover -->
                                  <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                </svg>
                              </figure>
                            </div>
                          </div>
                          <div class="carousel-cell col-12 col-md-6 col-lg-4 px-7 px-md-5 text-center">
                            <div class="slider-item">
                              <figure class="position-relative">
                                <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                  <!-- Clip path image -->
                                  <defs>
                                    <clipPath id="svgf5">
                                      <rect x="52" y="10" width="380" height="818"/>
                                    </clipPath>
                                  </defs>

                                  <!-- Phone screen -->
                                  <image clip-path="url(#svgf5)" xlink:href="src/img-min/app/app5.jpg" height="92%" width="100%" style="transform:translateY(30px);"></image>

                                  <!-- Phone cover -->
                                  <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                                </svg>
                              </figure>
                            </div>
                          </div>
                        </div><!-- end screenshot slider -->
                      </div>
                    </div>
                  </div>
                </div><!-- End screenshot-->
              
            
داستان

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است چاپگرها و متون بلکه روزنامه و مجله در ستون و سطرآنچنان که لازم است

              
                <!-- =========={ STORY and TEAM }==========  -->
                <div id="story" class="section py-6 py-md-7 bg-gradient-primary overflow-hidden">
                  <!-- scribble -->
                  <figure class="scribble scale-5 opacity-10 bottom-0 end-0 z-index-n1">
                    <svg class="text-secondary" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M42.5,-66.2C57.1,-56.7,72.5,-48.4,81.1,-35.3C89.8,-22.2,91.8,-4.4,89.6,13C87.3,30.4,80.7,47.4,69.5,60.1C58.3,72.9,42.4,81.5,25.9,84.6C9.5,87.8,-7.4,85.4,-22.7,79.8C-37.9,74.1,-51.5,65.2,-60.9,53.3C-70.4,41.4,-75.8,26.6,-79,10.8C-82.1,-5,-83.1,-21.7,-77.7,-36.4C-72.4,-51,-60.7,-63.7,-46.7,-73.5C-32.7,-83.3,-16.4,-90.1,-1.2,-88.2C13.9,-86.3,27.8,-75.7,42.5,-66.2Z" transform="translate(100 100)" />
                    </svg>
                  </figure>

                  <!-- scribble -->
                  <figure class="scribble scale-6 opacity-10 bottom-0 end-0 z-index-n1">
                    <svg class="text-secondary" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M42.5,-66.2C57.1,-56.7,72.5,-48.4,81.1,-35.3C89.8,-22.2,91.8,-4.4,89.6,13C87.3,30.4,80.7,47.4,69.5,60.1C58.3,72.9,42.4,81.5,25.9,84.6C9.5,87.8,-7.4,85.4,-22.7,79.8C-37.9,74.1,-51.5,65.2,-60.9,53.3C-70.4,41.4,-75.8,26.6,-79,10.8C-82.1,-5,-83.1,-21.7,-77.7,-36.4C-72.4,-51,-60.7,-63.7,-46.7,-73.5C-32.7,-83.3,-16.4,-90.1,-1.2,-88.2C13.9,-86.3,27.8,-75.7,42.5,-66.2Z" transform="translate(100 100)" />
                    </svg>
                  </figure>

                  <!-- scribble -->
                  <figure class="scribble scale-7 opacity-10 bottom-0 end-0 z-index-n1">
                    <svg class="text-secondary" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M42.5,-66.2C57.1,-56.7,72.5,-48.4,81.1,-35.3C89.8,-22.2,91.8,-4.4,89.6,13C87.3,30.4,80.7,47.4,69.5,60.1C58.3,72.9,42.4,81.5,25.9,84.6C9.5,87.8,-7.4,85.4,-22.7,79.8C-37.9,74.1,-51.5,65.2,-60.9,53.3C-70.4,41.4,-75.8,26.6,-79,10.8C-82.1,-5,-83.1,-21.7,-77.7,-36.4C-72.4,-51,-60.7,-63.7,-46.7,-73.5C-32.7,-83.3,-16.4,-90.1,-1.2,-88.2C13.9,-86.3,27.8,-75.7,42.5,-66.2Z" transform="translate(100 100)" />
                    </svg>
                  </figure>

                  <!-- scribble -->
                  <figure class="scribble scale-8 opacity-10 bottom-0 end-0 z-index-n1">
                    <svg class="text-secondary" width="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
                      <path fill="currentColor" d="M42.5,-66.2C57.1,-56.7,72.5,-48.4,81.1,-35.3C89.8,-22.2,91.8,-4.4,89.6,13C87.3,30.4,80.7,47.4,69.5,60.1C58.3,72.9,42.4,81.5,25.9,84.6C9.5,87.8,-7.4,85.4,-22.7,79.8C-37.9,74.1,-51.5,65.2,-60.9,53.3C-70.4,41.4,-75.8,26.6,-79,10.8C-82.1,-5,-83.1,-21.7,-77.7,-36.4C-72.4,-51,-60.7,-63.7,-46.7,-73.5C-32.7,-83.3,-16.4,-90.1,-1.2,-88.2C13.9,-86.3,27.8,-75.7,42.5,-66.2Z" transform="translate(100 100)" />
                    </svg>
                  </figure>

                  <div class="container">
                    <div class="row">
                      <!-- content -->
                      <div class="col-lg-6 align-self-center" data-aos="fade-right">
                        <div class="max-box mb-5 mb-lg-0"> 
                          <div class="mb-3"><span class="badge bg-warning text-dark rounded">Story</span></div>
                          <h2 class="h1 mb-3 fw-bold text-white">Story Behind yaghout Template</h2>
                          <p class="lead text-light">yaghout is responsive one page template with flat design and fast loading. This one page html template is best for start your single page website project.</p>
                          <div class="mt-5">
                            <div id="video-gallery" class="d-inline-block">
                              <a class="btn btn-white mb-3 mb-md-0 hover-button-up" href="https://www.youtube.com/watch?v=BGPSIUZdTkc">
                                <!-- <i class="fas fa-play"></i> -->
                                <svg class="bi bi-play-fill ms-1 mb-1 me-2" width="1.2rem" height="1.2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                  <path d="M11.596 8.697l-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 010 1.393z"></path>
                                </svg>Watch Video
                              </a>
                            </div>
                          </div>
                        </div>
                      </div><!-- end content -->

                      <!-- team -->
                      <div class="col-lg-6" data-aos="fade-left">
                        <!-- review slider -->
                        <div class="nav-light-dots" data-flickity='{ "cellAlign": "left","rightToLeft": true, "imagesLoaded": true, "wrapAround": true, "prevNextButtons": false, "adaptiveHeight": true, "pageDots": true }'>
                          <div class="col-12 col-sm-6 col-md-4 col-lg-6 px-4 px-md-3 px-lg-4">
                            <!-- team block -->
                            <div class="team2 mb-4 rounded-3 shadow-sm">
                              <div class="team-thumb bg-light-dark">
                                <img src="src/img-min/team/avatar1-small.png" srcset="src/img-min/team/avatar1.png 480w" sizes="(max-width: 600px) 480px" class="img-fluid" alt="images title">
                                <a class="view-profile" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="مشاهده پروفایل کاربری" title="مشاهده پروفایل" href="#">
                                  <!-- <i class="fas fa-eye"></i> -->
                                  <svg class="bi bi-eye" width="1.2rem" height="1.2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 001.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0014.828 8a13.133 13.133 0 00-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 001.172 8z" clip-rule="evenodd"></path>
                                    <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"></path>
                                  </svg>
                                </a>
                              </div>
                              <div class="team-info bg-body">
                                <div class="team-info-content">
                                  <p class="h5">کامران محمدی</p>
                                  <p>بنیان گذار</p>
                                  <!-- social icon -->
                                  <div class="team-info-social mb-2">
                                    <a class="text-twitter" aria-label="twitter link" href="#">
                                      <!-- <i class="fab fa-twitter text-twitter"></i> -->
                                       <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/></svg>
                                    </a>
                                    <a class="text-facebook" aria-label="Facebook link" href="#">
                                      <!-- <i class="fab fa-facebook text-facebook"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/></svg>
                                    </a>
                                    <a class="text-instagram" aria-label="Instagram link" href="#">
                                      <!-- <i class="fab fa-instagram text-instagram"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"/><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"/><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"/></svg>
                                    </a>
                                    <a class="text-linkedin" aria-label="Linkedin link" href="#">
                                      <!-- <i class="fab fa-linkedin text-linkedin"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/></svg>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div><!-- end team block -->
                          </div>
                          
                          <div class="col-12 col-sm-6 col-md-4 col-lg-6 px-4 px-md-3 px-lg-4">
                            <!-- team block -->
                            <div class="team2 mb-4 rounded-3 shadow-sm">
                              <div class="team-thumb bg-light-dark">
                                <img src="src/img-min/team/avatar2-small.png" srcset="src/img-min/team/avatar2.png 480w" sizes="(max-width: 600px) 480px" class="img-fluid" alt="images title">
                                <a class="view-profile" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="مشاهده پروفایل کاربری" title="مشاهده پروفایل" href="#">
                                  <!-- <i class="fas fa-eye"></i> -->
                                  <svg class="bi bi-eye" width="1.2rem" height="1.2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 001.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0014.828 8a13.133 13.133 0 00-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 001.172 8z" clip-rule="evenodd"></path>
                                    <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"></path>
                                  </svg>
                                </a>
                              </div>
                              <div class="team-info bg-body">
                                <div class="team-info-content">
                                  <p class="h5">مهدی حسینی</p>
                                  <p>برنامه نویس</p>
                                  <!-- social icon -->
                                  <div class="team-info-social mb-2">
                                    <a class="text-twitter" aria-label="Twitter link" href="#">
                                      <!-- <i class="fab fa-twitter text-twitter"></i> -->
                                       <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/></svg>
                                    </a>
                                    <a class="text-facebook" aria-label="Facebook link" href="#">
                                      <!-- <i class="fab fa-facebook text-facebook"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/></svg>
                                    </a>
                                    <a class="text-instagram" aria-label="Instagram link" href="#">
                                      <!-- <i class="fab fa-instagram text-instagram"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"/><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"/><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"/></svg>
                                    </a>
                                    <a class="text-linkedin" aria-label="Linkedin link" href="#">
                                      <!-- <i class="fab fa-linkedin text-linkedin"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/></svg>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div><!-- end team block -->
                          </div>

                          <div class="col-12 col-sm-6 col-md-4 col-lg-6 px-4 px-md-3 px-lg-4">
                            <!-- team block -->
                            <div class="team2 mb-4 rounded-3 shadow-sm">
                              <div class="team-thumb bg-light-dark">
                                <img src="src/img-min/team/avatar1-small.png" srcset="src/img-min/team/avatar3.png 480w" sizes="(max-width: 600px) 480px" class="img-fluid" alt="images title">
                                <a class="view-profile" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="مشاهده پروفایل کاربری" title="مشاهده پروفایل" href="#">
                                  <!-- <i class="fas fa-eye"></i> -->
                                  <svg class="bi bi-eye" width="1.2rem" height="1.2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 001.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0014.828 8a13.133 13.133 0 00-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 001.172 8z" clip-rule="evenodd"></path>
                                    <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"></path>
                                  </svg>
                                </a>
                              </div>
                              <div class="team-info bg-body">
                                <div class="team-info-content">
                                  <p class="h5">آرش حسینی</p>
                                  <p>بازاریاب</p>
                                  <!-- social icon -->
                                  <div class="team-info-social mb-2">
                                    <a class="text-twitter" aria-label="Twitter link" href="#">
                                      <!-- <i class="fab fa-twitter text-twitter"></i> -->
                                       <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/></svg>
                                    </a>
                                    <a class="text-facebook" aria-label="Facebook link" href="#">
                                      <!-- <i class="fab fa-facebook text-facebook"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/></svg>
                                    </a>
                                    <a class="text-instagram" aria-label="Instagram link" href="#">
                                      <!-- <i class="fab fa-instagram text-instagram"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"/><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"/><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"/></svg>
                                    </a>
                                    <a class="text-linkedin" aria-label="Linkedin link" href="#">
                                      <!-- <i class="fab fa-linkedin text-linkedin"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/></svg>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div><!-- end team block -->
                          </div>
                          
                          <div class="col-12 col-sm-6 col-md-4 col-lg-6 px-4 px-md-3 px-lg-4">
                            <!-- team block -->
                            <div class="team2 mb-4 rounded-3 shadow-sm">
                              <div class="team-thumb bg-light-dark">
                                <img src="src/img-min/team/avatar2-small.png" srcset="src/img-min/team/avatar4.png 480w" sizes="(max-width: 600px) 480px" class="img-fluid" alt="images title">
                                <a class="view-profile" data-bs-toggle="tooltip" data-bs-placement="top" aria-label="مشاهده پروفایل کاربری" title="مشاهده پروفایل" href="#">
                                  <!-- <i class="fas fa-eye"></i> -->
                                  <svg class="bi bi-eye" width="1.2rem" height="1.2rem" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                                    <path fill-rule="evenodd" d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.134 13.134 0 001.66 2.043C4.12 11.332 5.88 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457A13.134 13.134 0 0014.828 8a13.133 13.133 0 00-1.66-2.043C11.879 4.668 10.119 3.5 8 3.5c-2.12 0-3.879 1.168-5.168 2.457A13.133 13.133 0 001.172 8z" clip-rule="evenodd"></path>
                                    <path fill-rule="evenodd" d="M8 5.5a2.5 2.5 0 100 5 2.5 2.5 0 000-5zM4.5 8a3.5 3.5 0 117 0 3.5 3.5 0 01-7 0z" clip-rule="evenodd"></path>
                                  </svg>
                                </a>
                              </div>
                              <div class="team-info bg-body">
                                <div class="team-info-content">
                                  <p class="h5">دانیال حسینی</p>
                                  <p>برنامه نویس ارشد</p>
                                  <!-- social icon -->
                                  <div class="team-info-social mb-2">
                                    <a class="text-twitter" aria-label="Twitter link" href="#">
                                      <!-- <i class="fab fa-twitter text-twitter"></i> -->
                                       <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M496,109.5a201.8,201.8,0,0,1-56.55,15.3,97.51,97.51,0,0,0,43.33-53.6,197.74,197.74,0,0,1-62.56,23.5A99.14,99.14,0,0,0,348.31,64c-54.42,0-98.46,43.4-98.46,96.9a93.21,93.21,0,0,0,2.54,22.1,280.7,280.7,0,0,1-203-101.3A95.69,95.69,0,0,0,36,130.4C36,164,53.53,193.7,80,211.1A97.5,97.5,0,0,1,35.22,199v1.2c0,47,34,86.1,79,95a100.76,100.76,0,0,1-25.94,3.4,94.38,94.38,0,0,1-18.51-1.8c12.51,38.5,48.92,66.5,92.05,67.3A199.59,199.59,0,0,1,39.5,405.6,203,203,0,0,1,16,404.2,278.68,278.68,0,0,0,166.74,448c181.36,0,280.44-147.7,280.44-275.8,0-4.2-.11-8.4-.31-12.5A198.48,198.48,0,0,0,496,109.5Z"/></svg>
                                    </a>
                                    <a class="text-facebook" aria-label="Facebook link" href="#">
                                      <!-- <i class="fab fa-facebook text-facebook"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M455.27,32H56.73A24.74,24.74,0,0,0,32,56.73V455.27A24.74,24.74,0,0,0,56.73,480H256V304H202.45V240H256V189c0-57.86,40.13-89.36,91.82-89.36,24.73,0,51.33,1.86,57.51,2.68v60.43H364.15c-28.12,0-33.48,13.3-33.48,32.9V240h67l-8.75,64H330.67V480h124.6A24.74,24.74,0,0,0,480,455.27V56.73A24.74,24.74,0,0,0,455.27,32Z"/></svg>
                                    </a>
                                    <a class="text-instagram" aria-label="Instagram link" href="#">
                                      <!-- <i class="fab fa-instagram text-instagram"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M349.33,69.33a93.62,93.62,0,0,1,93.34,93.34V349.33a93.62,93.62,0,0,1-93.34,93.34H162.67a93.62,93.62,0,0,1-93.34-93.34V162.67a93.62,93.62,0,0,1,93.34-93.34H349.33m0-37.33H162.67C90.8,32,32,90.8,32,162.67V349.33C32,421.2,90.8,480,162.67,480H349.33C421.2,480,480,421.2,480,349.33V162.67C480,90.8,421.2,32,349.33,32Z"/><path fill="currentColor" d="M377.33,162.67a28,28,0,1,1,28-28A27.94,27.94,0,0,1,377.33,162.67Z"/><path fill="currentColor" d="M256,181.33A74.67,74.67,0,1,1,181.33,256,74.75,74.75,0,0,1,256,181.33M256,144A112,112,0,1,0,368,256,112,112,0,0,0,256,144Z"/></svg>
                                    </a>
                                    <a class="text-linkedin" aria-label="Linkedin link" href="#">
                                      <!-- <i class="fab fa-linkedin text-linkedin"></i> -->
                                      <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" viewBox="0 0 512 512"><path fill="currentColor" d="M444.17,32H70.28C49.85,32,32,46.7,32,66.89V441.61C32,461.91,49.85,480,70.28,480H444.06C464.6,480,480,461.79,480,441.61V66.89C480.12,46.7,464.6,32,444.17,32ZM170.87,405.43H106.69V205.88h64.18ZM141,175.54h-.46c-20.54,0-33.84-15.29-33.84-34.43,0-19.49,13.65-34.42,34.65-34.42s33.85,14.82,34.31,34.42C175.65,160.25,162.35,175.54,141,175.54ZM405.43,405.43H341.25V296.32c0-26.14-9.34-44-32.56-44-17.74,0-28.24,12-32.91,23.69-1.75,4.2-2.22,9.92-2.22,15.76V405.43H209.38V205.88h64.18v27.77c9.34-13.3,23.93-32.44,57.88-32.44,42.13,0,74,27.77,74,87.64Z"/></svg>
                                    </a>
                                  </div>
                                </div>
                              </div>
                            </div><!-- end team block -->
                          </div>
                        </div>
                      </div><!-- end team -->
                    </div>
                  </div>
                </div><!-- end story and team -->