Review & Rating Form Plugin for Squarespace 7.0 & 7.1 website || Jishaansinghal Video: https://youtu.be/7qNilb-lkuQ Contact Us: https://www.fiverr.com/s/8z77YQo https://www.fiverr.com/s/gDppjKY https://www.fiverr.com/s/8z77YWo https://www.fiverr.com/s/rEvv280 https://www.fiverr.com/s/akAAWKN https://www.fiverr.com/s/9955k3A #squarespace,#RatingForm,#jishaansinghal,#css,#html,#js,#jquery,#squarespace

-
Image
Review & Rating Form Plugin for Squarespace 7.0 & 7.1 website || Jishaansinghal Video: https://youtu.be/7qNilb-lkuQ Contact Us: https://www.fiverr.com/s/8z77YQo https://www.fiverr.com/s/gDppjKY https://www.fiverr.com/s/8z77YWo https://www.fiverr.com/s/rEvv280 https://www.fiverr.com/s/akAAWKN https://www.fiverr.com/s/9955k3A #squarespace , #RatingForm , #jishaansinghal , #css , #html , #js , #jquery , #squarespace
Post a Comment

In this video, I'm going to show you how to use Effect flip Slider on your own website by jishaansinghal

-
 In this video,I'm going to show you how to use Effect flip Slider on your own website by jishaansinghal






Code:
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Swiper demo</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />

    <style>
      html,
      body {
        position: relative;
        height: 100%;
      }

      body {
        background: #eee;
        font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
        font-size: 14px;
        color: #000;
        margin: 0;
        padding: 0;
        background-image: linear-gradient(to right, #051937, #252b67, #5b3692, #9f34b4, #eb12c7);
      }

      .swiper {
        width: 300px;
        height: 300px;
        padding: 50px;
        -webkit-box-shadow: 5px 5px 20px 5px #000000; 
box-shadow: 5px 5px 20px 5px #000000;
      }

      .swiper-slide {
        background-position: center;
        background-size: cover;
        width: 300px;
        height: 300px;
        -webkit-box-shadow: 5px 5px 20px 5px #000000; 
box-shadow: 5px 5px 20px 5px #000000;
      }

      .swiper-slide img {
        display: block;
        width: 100%;
        height: 100% !important;
      }
    </style>
  </head>

  <body>
    <div class="swiper mySwiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </div>
        <div class="swiper-slide">
          <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
        </div>
      </div>
      <div class="swiper-button-next"></div>
      <div class="swiper-button-prev"></div>
      <div class="swiper-pagination"></div>
    </div>

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <script>
      var swiper = new Swiper(".mySwiper", {
        effect: "flip",
        grabCursor: true,
        pagination: {
          el: ".swiper-pagination",
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      });
    </script>
  </body>
</html>






keywords:
website design and development,motivation,personal development,career,business,ecommerce,job,moshiur,codersfoundation,lifestyle,rich life,website design,bangla tutorial,coding,computer programming,online career,freelancing,wordpress,wordpress bangla tutorial,woocommerce,wordpress plugins,website development,wordpress development,make website,job opportunity,Funny,Bangladeshi,Youtuber,Comedy,Entertainment,Prank
FreelancingOnline Money EarningTutorialEducationLearn EnglishFunny Videosmake money onlinevlogFreelancer nasimbangla funny videobangladesh top freelancermotivational video best
outsourcingfreelancingfreelancing bangla tutorialoutsourcing institutejamal sirjamal sir video tutorialjamal sir freelancing video tutorialfreelance jobhow to get freelance jobfreelancing training center chittagongfreelanceing training center dhakafreelancing banglajamal sir channelseo bangla tutorialMohammad Jamal uddinfreelancer jamal uddinmohammad Jamal uddinmohammad jamal uddin






Comments

Post a Comment

Popular posts from this blog

how to add a button as a circle button on the Squarespace by jishaansinghal

-
Image
  In this video, I'm showing you how to add a button as a circle button on the Squarespace button with custom CSS Code!    How To Install: Once a button has been added and saved, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box. This plugin uses a CSS editor and works with Squarespace 7.1, 7.0 to add an active effect on Button on Squarespace 7.1,7.0 by jishaansinghal. This code uses a CSS editor and works with Squarespace 7.1, 7.0 templates. This code uses CSS editor Copy and pastes the code below into the editor box. -------------------------------------------------------------------------------------------------------- // Circle Button Style o squarespace // .sqs-block-button-element--medium { padding : 100px 45px !important ; -webkit-border-radius : 50% !important ; -moz-border-radius : 50% !important ; border-radius : 50% !important ; } Customize: You do not need to change the transform or tra...
Read more

Bouncing word change animation on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/X1ERq32l6ik Contact Us: https://www.fiverr.com/s/R7ko6EV #Bouncingwordchange, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

-
Image
Bouncing word change animation on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/X1ERq32l6ik Contact Us: https://www.fiverr.com/s/R7ko6EV #Bouncingwordchange , #squarespace , #jishaansinghal , #css , #html , #js , #jquery , #squarespacewebsite , #customcode
Read more

3D Carousel on Squarespace website with html css and js code by jishaansinghal

-
Image
I'm going to show you how to add 3D Carousel on the Squarespace website with HTML CSS and JS code by jishaansinghal Paste this code in a Code Block: <div id="contentContainer" class="trans3d"> <section id="carouselContainer" class="trans3d"> <figure id="item1" class="carouselItem trans3d"><div class="carouselItemInner trans3d">1</div></figure> <figure id="item2" class="carouselItem trans3d"><div class="carouselItemInner trans3d">2</div></figure> <figure id="item3" class="carouselItem trans3d"><div class="carouselItemInner trans3d">3</div></figure> <figure id="item4" class="carouselItem trans3d"><div class="carouselItemInner trans3d">4</div></figure> <figure id="item5" class="caro...
Read more