title

Brand Sections


Brand Sections style 1
                  
                    <!-- start brands -->
                    <div id="partner-brand" class="relative py-16 bg-white dark:bg-gray-800">
                      <div class="container xl:max-w-6xl mx-auto px-4">
                        <div class="lex flex-wrap flex-row -mx-4 justify-center">
                          <div class="w-full px-4">
                            <!-- slider brand -->
                            <div class="nav-dark-button" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "pageDots": false, "imagesLoaded": true }'>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img1.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img2.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img3.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img4.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img5.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 xl:w-1/5 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img6.png" alt="Image Description">
                                </a>
                              </div>
                            </div><!-- end slider brand -->
                          </div>
                        </div>
                      </div>
                    </div><!-- End brand-->
                  
                
Brand Sections style 2
                  
                    <!-- start brands -->
                    <div id="partner-brand" class="relative py-16 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
                      <div class="container xl:max-w-6xl mx-auto px-4">
                        <div class="lex flex-wrap flex-row -mx-4 justify-center">
                          <div class="w-full px-4">
                            <!-- slider brand -->
                            <div data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "pageDots": false, "imagesLoaded": true }'>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img1.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img2.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img3.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img4.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img5.png" alt="Image Description">
                                </a>
                              </div>
                              <div class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/4 py-4 lg:py-1 px-6 lg:px-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image mx-auto opacity-80 hover:opacity-100 max-w-full h-auto" src="src/img-min/brand/img6.png" alt="Image Description">
                                </a>
                              </div>
                            </div><!-- end slider brand -->
                          </div>
                        </div>
                      </div>
                    </div><!-- End brand-->
                  
                
Brand Sections style 3
                  
                    <!-- start brand  -->
                    <div id="partner-brand" class="relative pt-20 pb-8 md:pt-24 md:pb-12 bg-gray-50 dark:bg-gray-900 dark:bg-opacity-20">
                      <div class="container xl:max-w-6xl mx-auto px-4">
                        <div class="flex flex-wrap flex-row -mx-4">
                          <div class="flex-shrink max-w-full px-4 w-full">
                            <!-- list brand -->
                            <ul class="flex flex-wrap flex-row -mx-4 justify-center">
                              <li class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-6 xl:px-12 mb-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image max-w-full h-auto mx-auto" src="src/img-min/brand/img1.png" alt="Image Description">
                                </a>
                              </li>
                              <li class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-6 xl:px-12 mb-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image max-w-full h-auto mx-auto" src="src/img-min/brand/img2.png" alt="Image Description">
                                </a>
                              </li>
                              <li class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-6 xl:px-12 mb-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image max-w-full h-auto mx-auto" src="src/img-min/brand/img3.png" alt="Image Description">
                                </a>
                              </li>
                              <li class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-6 xl:px-12 mb-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image max-w-full h-auto mx-auto" src="src/img-min/brand/img4.png" alt="Image Description">
                                </a>
                              </li>
                              <li class="flex-shrink max-w-full w-full sm:w-1/2 md:w-1/3 lg:w-1/5 px-6 xl:px-12 mb-12 text-center">
                                <a href="#" target="_blank">
                                  <img class="brands-image max-w-full h-auto mx-auto" src="src/img-min/brand/img5.png" alt="Image Description">
                                </a>
                              </li>
                            </ul><!-- end list brand -->
                          </div>
                        </div>
                      </div>
                    </div><!-- End brand-->