Expandable Animated Card Slider on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/AGh-Ffeo8Yw Contact Us: https://www.fiverr.com/s/1qgzx59 #cardslider, #squarespace, #jishaansinghal,#css,#html,#js,#jquery,#squarespacewebsite,#customcode

-
Image
Expandable Animated Card Slider on Squarespace 7.0 & 7.1 website || jishaansinghal Video: https://youtu.be/AGh-Ffeo8Yw Contact Us: https://www.fiverr.com/s/1qgzx59 #cardslider , #squarespace , #jishaansinghal , #css , #html , #js , #jquery , #squarespacewebsite , #customcode
Post a Comment

How to add Circular Filter Menu In jQuery 2022 by jishaansinghal

-

How to add Circular Filter Menu In jQuery 2022 by jishaansinghal








CSS CDN:

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

    <link rel='stylesheet prefetch' href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

    <link rel="stylesheet" href="https://www.jqueryscript.net/demo/circular-filter-menu/style.css">

    <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">


JS CDN:

  <script src="https://code.jquery.com/jquery-3.6.0.js"

        integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>

    <script src="https://www.jqueryscript.net/demo/circular-filter-menu/main.js"></script>


HTML CODE:

  <div class="muck-up">

        <div class="overlay"></div>

        <div class="top">

            <div class="nav">

                <span class="ion-android-menu"></span>

                <p>Timeline</p>

            </div>

            <div class="user-profile">

                <img src="https://www.jqueryscript.net/demo/circular-filter-menu/assets/pic.jpg">

                <div class="user-details">

                    <h4>Nelly Bennet</h4>

                    <p>Web/Front-end Designer</p>

                </div>

            </div>

        </div>

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

        <div class="filter-btn">

            <a id="one" href="#"><i class="ion-ios-checkmark-outline"></i></a>

            <a id="two" href="#"><i class="ion-ios-alarm-outline"></i></a>

            <a id="three" href="#"><i class="ion-ios-heart-outline"></i></a>

            <a id="all" href="#"><i class="ion-ios-star-outline"></i></a>

            <span class="toggle-btn ion-android-funnel"></span>

        </div>

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

        <div class="bottom">

            <div class="title">

                <h3>My Tasks</h3>

                <small>July 8,2021</small>

            </div>

            <ul class="tasks">

                <li class="one red">

                    <span class="task-title">Make New Icon</span>

                    <span class="task-time">5pm</span>

                    <span class="task-cat">Web App</span>


                </li>

                <li class="one red">

                    <span class="task-title">Catch up with Brian</span>

                    <span class="task-time">3pm</span>

                    <span class="task-cat">Mobile Project</span>


                </li>

                <li class="two green">

                    <span class="task-title">Design Explorations</span>

                    <span class="task-time">2pm</span>

                    <span class="task-cat">Company Web site</span>


                </li>

                <li class="three yellow">

                    <span class="task-title">New Projects</span>

                    <span class="task-time">2pm</span>

                    <span class="task-cat">Starting</span>

                </li>

            </ul>

        </div>

    </div>



















keywords:

jquery, tutorial, ajax, radial menu, radial css menu, circular menu, circular navigation menu, radial menu html, css circle menu, how to make a radial menu, circular menu in html css, circular menu css, how to make circular menu, html css circular menu, how to create circular menu in css, creating a radial menu css, jquery for beginners, jquery tutorial, jquery tutorial for beginners, jquery tutorials, jquery lessons, beginner jquery, jquery filters, jquery selectors, jquery first, jquery last, jquery not, jquery lt, jquery gt, jquery last-child, jquery last child, jquery first child, jquery first-child, filterable gallery, filterable image gallery, how to create a filterable gallery, how to design filterable image gallery, portfolio gallery, how to create a portfolio gallery with filtering, how to add filter with portfolio gallery using html css, portfolio filter gallery html css & jquery, how to create an image gallery with filters, css filter image gallery, html portfolio, css portfolio, css gallery with filters, coding, jquery ajax with validation, website, code, java, scrpt, script, javascript, registration, form, login, in, validation, error, php, wordpress, html, how, to, howto, beginners, responsive, media, queries, coder, decode, easy tutorials, mysqli, css, web design, www, programming, json, response, guide, development, formdata, database, filter, filteration, search, livesearch, live, filters, lavarel, cookies, session, data, filtertable, table, bootstrap 4, bootstrap, class, img, list, drop, down, dropdown, excel, circular navigation, javascript radial menu, circular navbar menu using html and css, how to create circular menu html css, css radial menu, animated menu, animated circular menu, how to use radial menu, circlular menu using css and jquery, circular menu jquery, how to create circular menu with jquery, radial menu using jquery, jquery menu, how to, coding market, css filtering, button filtering, list filtering, tabs filtering, filtering in jquery, button filtering using jquery, list filtering in jquery, tabs filtering in jquery



























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

How to add Vector Scrolling GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal

-
Image
How to add GSAP animation Effects on your Squarespace Website in 2022 with full source code by jishaansinghal Source Code: Paste this code on Header code injection: <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel='stylesheet' type='text/css'> <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script> <script src="https://www.jqueryscript.net/demo/performant-scroll-gsap-vector/jquery.vs.min.js"></script> Paste this code on Footer code injection: <script> // And so concludes the new VectorScr...
Read more

How to install and use owl carousel mousewheel animation slider with full source code by jishaansinghal 2022

-
Image
How to install and use owl carousel mouse wheel animation slider with full source code by jishaansinghal 2022 Source Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css"/> <style> body{ background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1); height: 70vh; } img{ width: 100%; height: 250px; } </style> </head> <body> <div class="owl-carousel owl-theme" style=...
Read more