Skip to main content
title

Video Section


1 2 3

Story Behind Our Digital Agency

Onekit is the leading digital marketing agency in New York. We are striving to provide integrated digital marketing solutions.

Read Story
                
                  <!-- =========={ VIDEO }==========  -->
                    <div id="video" class="section py-6 py-md-7 bg-body">
                      <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 me-lg-5 pe-lg-4"> 
                              <h2 class="fw-bold mb-3">Story Behind Our Digital Agency</h2>
                              <p class="lead mb-5">Onekit is the leading digital marketing agency in New York. We are striving to provide integrated digital marketing solutions.</p>
                              <!-- button -->
                              <a href="#" class="btn btn-primary hover-button-up me-3">
                                <!-- <i class="fas fa-paper-plane me-1"></i> -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="1.5rem" height="1.5rem" class="me-2" fill="currentColor" 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>
                                Read Story
                              </a>
                            </div>
                          </div><!-- end content -->
                    
                          <!-- team -->
                          <div class="col-lg-6" data-aos="fade-left">
                            <div class="position-relative rounded-3 overflow-hidden hover-shadow-sm">
                              <img src="src/img-min/section/purple-laptop.jpg" class="img-fluid w-100" alt="background images">
                              <div class="icon-center lightgallery-thumbnail">
                                <a id="preview-video2" aria-label="Introcluding Onekit" href="https://www.youtube.com/watch?v=BGPSIUZdTkc" class="btn btn-circle btn-lg btn-white position-relative">
                                  <span class="icon-center">
                                    <svg class="bi bi-play-fill" width="1.5rem" height="1.5rem" 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>
                                    <div class="play-btn-hover"></div>
                                  </span>
                                </a>
                              </div>
                            </div>
                          </div><!-- end team -->
                        </div>
                      </div>
                    </div><!-- end video -->
                
              

Try live demo from your smartphone

If you open this demo from laptop, please scan the QR code on this page to continue demo from your smartphone.

Don't forget to test PWA ( Progressive Web App ) features with click "Add to Home Screen".

demo qr code
                
                  <!-- =========={ INTROCLUDING }==========  -->
                  <div id="qr-code" class="section bg-gradient-primary">
                    <div class="container-fluid p-0">
                      <div class="row g-0">
                        <!-- img block -->
                        <div class="col-lg-4 order-lg-2 text-white showcase-img" style="background-image: url('src/img-min/section/overview1.jpg');">
                          <div class="icon-center lightgallery-thumbnail">
                            <a aria-label="Introcluding Onekit" href="https://www.youtube.com/watch?v=BGPSIUZdTkc">
                              <div class="position-relative text-white">
                                <!-- <i class="fas fa-play-circle play-btn-icon" aria-hidden="true"></i> -->
                                <svg xmlns="http://www.w3.org/2000/svg" width="70" height="70" viewBox="0 0 512 512"><path fill="currentColor" d="M238.23,342.43l89.09-74.13a16,16,0,0,0,0-24.6l-89.09-74.13A16,16,0,0,0,212,181.86V330.14A16,16,0,0,0,238.23,342.43Z"></path><path stroke="currentColor" d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:none;stroke-miterlimit:10;stroke-width:32px"></path></svg>
                                <div class="play-btn-hover bg-primary opacity-80"></div>
                              </div>
                            </a>
                          </div>
                        </div>

                        <!-- content block -->
                        <div class="col-lg-8 order-lg-1 my-auto showcase-text text-center text-md-start">
                          <div class="position-relative 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="px-4 px-lg-6 mt-5 mt-lg-7" data-aos="fade-right">
                              <!-- Row -->
                              <div class="row justify-content-center">
                                <div class="col-11 col-sm-8 col-lg-12 col-xl-6 order-xl-2 text-center text-md-start">
                                  <h3 class="fw-bold text-white mb-4">Try live demo from your smartphone</h3>
                                  <p class="text-light">If you open this demo from laptop, please scan the QR code on this page to continue demo from your smartphone.</p>
                                  <p class="text-light mb-5 mb-xl-4">Don't forget to test PWA ( Progressive Web App ) features with click "Add to Home Screen".</p>
                                  <div class="d-none d-xl-block w-50 mx-auto">
                                    <svg class="text-warning" width="126" height="63" viewBox="0 0 253.000000 125.000000" xmlns="http://www.w3.org/2000/svg">
                                      <g transform="translate(0.000000,125.000000) scale(0.100000,-0.100000)"
                                      fill="currentColor" stroke="none">
                                      <path d="M1719 1153 c-24 -21 -46 -41 -49 -44 -13 -18 -139 -79 -152 -74 -8 3
                                      -21 18 -30 33 -27 45 -55 65 -80 58 -13 -3 -54 -33 -93 -66 -91 -79 -104 -81
                                      -162 -36 -77 60 -131 46 -256 -62 -27 -23 -52 -42 -56 -42 -4 0 -13 16 -20 35
                                      -32 90 -117 81 -288 -33 -29 -19 -55 -33 -56 -31 -2 2 -15 23 -30 47 -30 46
                                      -30 46 -57 32 -24 -13 -200 -228 -200 -243 1 -7 9 -22 19 -34 28 -34 72 -21
                                      135 40 l51 49 32 -37 c29 -33 36 -37 66 -31 18 3 49 17 67 31 19 14 38 25 44
                                      25 6 0 24 13 41 28 16 15 47 35 67 45 35 15 37 15 43 -1 3 -10 23 -35 44 -56
                                      57 -56 79 -52 159 27 37 36 85 74 107 85 l40 20 27 -21 c58 -48 73 -57 88 -53
                                      8 2 31 7 50 10 23 4 55 24 95 61 33 30 65 55 71 55 6 0 17 -11 24 -25 7 -14
                                      26 -33 42 -43 24 -15 35 -17 73 -8 30 7 44 15 42 25 -1 9 8 14 26 15 16 1 31
                                      6 35 11 4 6 15 15 25 20 10 6 18 15 18 20 0 38 83 73 95 40 3 -8 14 -17 25
                                      -20 11 -4 17 -10 14 -15 -3 -5 6 -12 20 -16 28 -7 54 16 54 46 1 20 -29 55
                                      -52 64 -11 3 -21 15 -24 27 -3 11 -17 25 -32 30 -19 8 -22 12 -12 18 8 5 10
                                      14 7 20 -14 21 -53 11 -97 -26z"/>
                                      <path d="M1930 880 c-25 -9 -97 -41 -160 -70 -133 -61 -213 -90 -248 -90 -13
                                      0 -40 9 -58 21 -42 26 -67 21 -187 -32 -49 -22 -110 -45 -137 -51 -44 -10 -51
                                      -9 -75 11 -15 11 -35 21 -44 21 -9 0 -65 -18 -125 -40 -61 -22 -118 -40 -127
                                      -40 -10 0 -27 13 -39 30 -12 17 -30 30 -42 30 -27 0 -150 -84 -193 -132 -65
                                      -72 -101 -76 -130 -15 -25 53 -59 62 -76 20 -7 -15 -25 -56 -40 -90 -34 -73
                                      -34 -71 -9 -103 l20 -25 34 40 c32 37 35 39 52 24 11 -9 38 -25 60 -37 l42
                                      -20 53 35 c30 19 55 39 57 43 11 30 116 110 144 110 9 0 18 -7 22 -15 3 -8 16
                                      -15 30 -15 14 0 28 -5 31 -11 10 -15 57 -3 159 42 l88 39 29 -25 c34 -28 101
                                      -45 107 -26 2 6 9 11 16 11 6 0 45 16 86 36 41 20 98 42 126 49 47 12 52 11
                                      80 -11 50 -41 179 -24 223 29 7 10 19 17 26 17 7 0 55 28 107 63 52 34 113 71
                                      136 81 47 21 58 42 41 79 -16 35 -27 38 -79 17z"/>
                                      <path d="M2205 519 c-139 -59 -359 -129 -430 -136 -59 -5 -66 -4 -95 21 -50
                                      42 -83 36 -236 -44 l-135 -71 -32 27 c-41 35 -78 29 -205 -30 -54 -25 -108
                                      -46 -120 -46 -20 0 -22 5 -22 51 0 57 -25 109 -51 109 -20 0 -63 -55 -55 -69
                                      3 -5 -1 -11 -9 -15 -8 -3 -15 -17 -15 -30 0 -14 -7 -29 -16 -34 -13 -7 -14
                                      -13 -4 -31 6 -13 9 -30 6 -38 -6 -16 19 -53 36 -53 4 0 8 11 8 24 0 36 10 56
                                      29 55 10 0 11 -2 4 -6 -18 -7 -16 -32 2 -39 8 -4 12 -10 9 -15 -3 -5 1 -9 8
                                      -9 7 0 18 -10 23 -23 8 -18 19 -23 58 -25 31 -2 55 2 69 12 12 9 29 16 36 16
                                      8 0 27 11 44 25 41 35 101 51 133 37 14 -6 25 -18 25 -26 0 -14 15 -15 84 -7
                                      4 1 6 8 2 16 -6 16 19 22 28 6 7 -10 56 -2 56 9 0 5 9 12 20 15 11 3 20 10 20
                                      16 0 17 33 47 46 42 8 -3 29 5 48 16 33 21 35 21 65 4 17 -10 33 -25 36 -33 7
                                      -20 76 -54 84 -41 4 5 27 9 51 8 25 -1 45 2 45 6 0 5 36 20 80 35 44 14 157
                                      65 250 112 l170 85 1 43 c1 23 -2 42 -7 42 -5 0 -9 7 -9 15 0 23 -36 16 -135
                                      -26z"/>
                                      </g>
                                    </svg>
                                  </div>
                                </div>

                                <div class="col-11 col-sm-8 col-lg-6 order-xl-1 align-self-end">
                                  <div class="px-xl-5 text-center">
                                    <img class="img-fluid" src="src/img-min/app/qr-demo.png" alt="demo qr code">
                                  </div>
                                </div>
                              </div>
                              <!-- End Row -->
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div><!-- end Introcluding -->
                
              
Story

Story Behind Onekit Template

Onekit 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.

                
                  <!-- =========={ VIDEO }==========  -->
                  <div id="video" class="section py-6 py-md-7 bg-gradient-primary overflow-hidden">
                    <!-- scribble -->
                    <figure class="scribble scale-4 opacity-10 top-50 start-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-5 opacity-10 top-50 start-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 top-50 start-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 top-50 start-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 justify-content-center">
                        <div class="col-6 col-lg-4 ms-lg-auto order-lg-2 px-lg-5">
                          <!-- about Thumb -->
                          <div class="position-relative my-6 mt-5 mt-lg-n2 mb-8 mb-lg-5" style="padding-bottom: 120%">
                            <figure class="position-absolute start-0 top-0 w-75" data-aos="fade-left">
                              <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/app3.jpg" height="92%" width="100%" style="transform:translateY(24px);"></image>
                                <!-- Phone cover -->
                                <image xlink:href="src/img-min/app/device/iphone-dark.png" height="100%" width="100%"></image>
                              </svg>
                            </figure>

                            <figure class="position-absolute end-0 w-75" style="top:12%" data-aos="fade-left" data-aos-delay="200">
                              <svg version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480.000000 906.000000">
                                <!-- Clip path image -->
                                <defs>
                                  <clipPath id="svgf1">
                                    <rect x="52" y="10" width="380" height="818"/>
                                  </clipPath>
                                </defs>
                                <!-- Phone screen -->
                                <image clip-path="url(#svgf1)" 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="col-lg-6 order-lg-1 align-self-center" data-aos="fade-up">
                          <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 Onekit Template</h2>
                            <p class="lead text-light">Onekit 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 class="d-inline-block lightgallery-thumbnail">
                                <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>
                      </div>
                    </div>
                  </div><!-- end video -->