Member Profile

Here are some tools, resources and recommendations you may find useful for your next or any future projects. Will continue to grow 😉

First Last

Change Avatar

Get started with some quick tips or find your saved favorites. 🤙

Want to suggest a snippet?

Got your suggestion!
Thanks, Name!
Oops! Something went wrong while submitting the form.
Logout
Copy
Buy us a coffeeBuy us a coffee

Getting Started

Why CodeCrumbs?

We made CodeCrumbs to offer a solution to Webflow designers/devs who often rely on small snippets of code for that extra functionality to benefit personal or client projects.

How to use CodeCrumbs?

You can use CodeCrumbs as a tool. A repository of your favorite and most used code snippets whenever you are working in Webflow. You'll have access to quickly copy and paste them where ever they are needed.

  1. Simply start by searching any desired code solution here.
  2. Click the "Learn How to Use" button for detailed instructions on how to apply them.
  3. Click the ♥️button to save your favorite crumbs for quicker access to them.

Saved Favorites

Clip Path - Slanted Edges
</ head> Code
<!-- SNIPPET NAME HERE -->
<style>
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%);
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%);
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
HTML/Embed Code
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* According Arrow */
.accordion__item > .accordion-header > .chev-icon {
  transition: .4s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header > .chev-icon {
  transform: rotate(-180deg);
}

.accordion_item-image {
  fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
var accordion = (function(){
  
  var $accordion = $('.js-accordion');
  var $accordion_header = $accordion.find('.js-accordion-header');
  var $accordion_item = $('.js-accordion-item');
 
  // default settings 
  var settings = {
    // animation speed
    speed: 400,
    
    // close all other accordion items if true
    oneOpen: false
  };
    
  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });
      
      $.extend(settings, $settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
        $('.js-accordion-item.active:not(:first)').removeClass('active');
      }
      
      // reveal the active accordion bodies
      $('.js-accordion-item.active').find('> .js-accordion-body').show();
    },
    toggle: function($this) {
            
      if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
        $this.closest('.js-accordion')
               .find('> .js-accordion-item') 
               .removeClass('active')
               .find('.js-accordion-body')
               .slideUp()
      }
      
      // show/hide the clicked accordion item
      $this.closest('.js-accordion-item').toggleClass('active');
      $this.next().stop().slideToggle(settings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init({ speed: 300, oneOpen: true });
});
</script>
HTML/Embed Code
Learn How to Use This
Disable User Select
</ head> Code
<!-- DISABLES TEXT SELECT -->
<style>
.noselect {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
$('.INCREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
});

$('.DECREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
})
</script>
HTML/Embed Code
Learn How to Use This
Open Specific Tabs from other Pages
</ head> Code
</ body> Code
<!-- OPEN SPECIFIC TABS -->
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).triggerHandler('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
HTML/Embed Code
/page-name?tab=tab-name-here
Learn How to Use This
Cookie Notice
</ head> Code
<!-- COOKIE CONSENT -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
</ body> Code
<!-- COOKIE CONSENT --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebe5ca",       // Background color for popup card
      "text": "#000000"              // Main text color for message
    },
    "button": {
      "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
      "text": "#fcf8f2",             // Button text color
      //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
    }
  },
  "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
  "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
  "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
  "content": {
    // Main message text on the cookie popup
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    
    // Button text to accept
    "dismiss": "Got it!",
    
    // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
    "href": "https://yoursite.com/cookie-policy"        
  }
});
</script>
HTML/Embed Code
Learn How to Use This
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA --> 
<script>
// Contact Form Captcha
  (function($) {
      "use strict";

      $.fn.captcha = function(param) {

          // DEFAULT VARIABLES
          var params = $.extend({
              idCaptchaText: 'captchaText',   // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
              idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
              class: ''                       // Class name for the submit button toggle. Default is ''.
          }, param);

          // Find and disable the submit button
          var submit = $(this).find('input[type=submit]');
          submit.attr('disabled', 'disabled');

          // Insert captcha text and input before the submit button with the given ID's
          $('');
          $('');   

          // Select text and input elements to fill
          var label = this.find('#' + params.idCaptchaText);
          var input = this.find('#' + params.idCaptchaInput);

          // Generate random numbers and the sum of them
          var rndmNr1 = Math.floor(Math.random() * 10),
              rndmNr2 = Math.floor(Math.random() * 10),
              totalNr = rndmNr1 + rndmNr2;

          // Print the numbers to screen
					//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
          $(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');

          // Check the input value, enable it if the sum is correct
          $(input).keyup(function () {
              if ($(this).val() == totalNr)
                  submit.removeAttr('disabled').addClass(params.class);
              else
                  submit.attr('disabled', 'disabled').removeClass(params.class);
          });

          // Don't breake jQuery chain!
          return this;
      }
  })(jQuery);
  
  

	//Run the Code
  $(document).ready(function () {
    $('.form-class-name').captcha();
  });
</script>
HTML/Embed Code
Learn How to Use This
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Disable Form Submit with the "Enter" Key
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>
HTML/Embed Code
Learn How to Use This
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR --> 
<style>
	:-moz-selection { color: #000; background: #90fcdc;}
	::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
HTML/Embed Code
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>

	//Dynamic Weekday
	$(document).ready(function(){
		// Get current day of the week
		var d = new Date();
		var weekday = new Array(7);
		weekday[0] = "Sunday";
		weekday[1] = "Monday";
		weekday[2] = "Tuesday";
		weekday[3] = "Wednesday";
		weekday[4] = "Thursday";
		weekday[5] = "Friday";
		weekday[6] = "Saturday";
		var n = weekday[d.getDay()];
    
    document.querySelectorAll(".weekday").forEach(function(weekday) {
  		weekday.innerHTML = n;
    });
	});

</script>
HTML/Embed Code
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
	// Dynamic Copyright Year
	var date = new Date().getFullYear();
	document.getElementById("year").innerHTML = date;
</script>
HTML/Embed Code
Learn How to Use This
Browser Back Button
</ head> Code
</ body> Code
<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
	$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.  
		window.history.back();
	});
});
</script>
HTML/Embed Code
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
HTML/Embed Code
Learn How to Use This
Custom Placeholder Animation
</ head> Code
<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
HTML/Embed Code
<!-- HTML TABLE --> 
<style>
/* ----------------------------- TABLE STYLES ----------------------------- */
:root {
  /* TABLE COLORS */
  --table-header-font-color: #ffffff;
  --table-header-bg-color: teal;
  --table-header-border-color: #ffffff;
  
  --table-cell-font-color: #777777;
  --table-cell-border-color: #d2d2d2;
  
  --table-bg-color: #ffffff;
  --table-border-color: #ffffff; /* Most Likely won't be seen */
  
  /* TABLE DIMENSIONS */
  --table-header-padding-top-bottom: 12px; /* headers top & bottom padding */
  --table-header-padding-left-right: 10px; /* headers left & right padding */
  --table-heading-font-size: 18px;
  
  --table-cell-padding-top-bottom: 10px;  /* Cells top & bottom padding */
  --table-cell-padding-left-right: 10px;  /* Cells left & right padding */
  --table-cell-font-size: 14px;
  --table-cell-min-width: 200px;
  
  --table-margin-bottom: 48px;
}
/* ----------------------------- END OF TABLE STYLES ----------------------------- */



/* DON'T NEED TO WORRY ABOUT THESE BELOW!!! */
.table-wrap {
	overflow-x: scroll;
  width: 100%;
  margin-bottom: var(--table-margin-bottom);
}

table, th, td {
  border-collapse: collapse;
}

table {
	width: 100%;
  border: 1px solid var(--table-border-color);
  background-color: var(--table-bg-color);
}

th:last-child {
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-bg-color);
  border-bottom: 1px solid var(--table-header-bg-color);
}

th {
	text-align: left;
  color: var(--table-header-font-color);
  background-color: var(--table-header-bg-color);
  padding: var(--table-header-padding-top-bottom) var(--table-header-padding-left-right);
  font-size: 16px;
  border-left: 1px solid var(--table-header-bg-color);
  border-top: 1px solid var(--table-header-bg-color);
  border-right: 1px solid var(--table-header-border-color);
  border-bottom: 1px solid var(--table-header-bg-color);
  font-size: var(--table-heading-font-size);
}

td {
  color: var(--table-cell-font-color);
  border: 1px solid var(--table-cell-border-color);
	padding: var(--table-cell-padding-top-bottom) var(--table-cell-padding-left-right);
  font-size: var(--table-cell-font-size);
}

th, td {
	min-width: var(--table-cell-min-width);
}
</style>



<!-- ****TABLE CONTENT**** -->
<div class="table-wrap">
  <table>
    <!-- heading Columns -->
    <tr>
      <th>Shoe Type</th>
      <th>Color</th>
      <th>Size</th>
      <th>Details</th>
    </tr>

    <!-- Row 1 -->
    <tr>
      <td>Running</td>
      <td>White/Black</td>
      <td>10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 2 -->
    <tr>
      <td>Skateboarding</td>
      <td>Black</td>
      <td>6.5, 7, 8.5, 9, 9.5, 10.5, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>

    <!-- Row 3 -->
    <tr>
      <td>Hiking</td>
      <td>Tan</td>
      <td>7, 8.5, 9, 10.5, 11, 12</td>
      <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
    </tr>
  </table>
</div>
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js">

<script>
//Change SAVE20NOW to whatever coupon or text you want to be copied
$('input#coup-field').val('SAVE20NOW');
$("input#coup-field").prop('readOnly', true);
$('input#coup-field').css( 'cursor', 'text' );

$(document).ready(function() {
  $('#copy-btn').CopyToClipboard();
  $('.copy-btn').click(function(){
  	//The values "Copied!" and #9ccd65 below are what the button will change to for 2 seconds
    $('.copy-btn').html('Copied!');
    $('.copy-btn').css('background-color', '#9ccd65');
    //The values "Copy" and #ec4609 below are what it will change back to
    setTimeout(function() { 
      $('.copy-btn').html('Copy')
      $('.copy-btn').css('background-color', '#ec4609')
    }, 2000);
  });
});
</script>
HTML/Embed Code
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict';
		$('.acc-head').on("click", function () {
			$(this).next().slideToggle(300);											// 300 is the milliseconds on open
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
HTML/Embed Code
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;  
}
</style>
</ body> Code
HTML/Embed Code
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    if (form.style.display === "none") {
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
HTML/Embed Code
Learn How to Use This

Aw, looks like you haven't saved any to your favorites yet.

Start Searching

Account Details

Click the button below to view details about your account such as membership type etc. If you have any questions about your membership please contact us via Slack.

View Account Details
Clip Path - Slanted Edges
</ head> Code
<!-- SNIPPET NAME HERE -->
<style>
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%);
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%);
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}
</style>
</ body> Code
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* According Arrow */
.accordion__item > .accordion-header > .chev-icon {
  transition: .4s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header > .chev-icon {
  transform: rotate(-180deg);
}

.accordion_item-image {
  fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
var accordion = (function(){
  
  var $accordion = $('.js-accordion');
  var $accordion_header = $accordion.find('.js-accordion-header');
  var $accordion_item = $('.js-accordion-item');
 
  // default settings 
  var settings = {
    // animation speed
    speed: 400,
    
    // close all other accordion items if true
    oneOpen: false
  };
    
  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });
      
      $.extend(settings, $settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
        $('.js-accordion-item.active:not(:first)').removeClass('active');
      }
      
      // reveal the active accordion bodies
      $('.js-accordion-item.active').find('> .js-accordion-body').show();
    },
    toggle: function($this) {
            
      if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
        $this.closest('.js-accordion')
               .find('> .js-accordion-item') 
               .removeClass('active')
               .find('.js-accordion-body')
               .slideUp()
      }
      
      // show/hide the clicked accordion item
      $this.closest('.js-accordion-item').toggleClass('active');
      $this.next().stop().slideToggle(settings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init({ speed: 300, oneOpen: true });
});
</script>
Learn How to Use This
Disable User Select
</ head> Code
<!-- DISABLES TEXT SELECT -->
<style>
.noselect {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
</ body> Code
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
$('.INCREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
});

$('.DECREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
})
</script>
Learn How to Use This
Open Specific Tabs from other Pages
</ head> Code
</ body> Code
<!-- OPEN SPECIFIC TABS -->
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).triggerHandler('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
Learn How to Use This
Cookie Notice
</ head> Code
<!-- COOKIE CONSENT -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
</ body> Code
<!-- COOKIE CONSENT --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebe5ca",       // Background color for popup card
      "text": "#000000"              // Main text color for message
    },
    "button": {
      "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
      "text": "#fcf8f2",             // Button text color
      //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
    }
  },
  "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
  "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
  "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
  "content": {
    // Main message text on the cookie popup
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    
    // Button text to accept
    "dismiss": "Got it!",
    
    // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
    "href": "https://yoursite.com/cookie-policy"        
  }
});
</script>
Learn How to Use This
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA --> 
<script>
// Contact Form Captcha
  (function($) {
      "use strict";

      $.fn.captcha = function(param) {

          // DEFAULT VARIABLES
          var params = $.extend({
              idCaptchaText: 'captchaText',   // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
              idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
              class: ''                       // Class name for the submit button toggle. Default is ''.
          }, param);

          // Find and disable the submit button
          var submit = $(this).find('input[type=submit]');
          submit.attr('disabled', 'disabled');

          // Insert captcha text and input before the submit button with the given ID's
          $('');
          $('');   

          // Select text and input elements to fill
          var label = this.find('#' + params.idCaptchaText);
          var input = this.find('#' + params.idCaptchaInput);

          // Generate random numbers and the sum of them
          var rndmNr1 = Math.floor(Math.random() * 10),
              rndmNr2 = Math.floor(Math.random() * 10),
              totalNr = rndmNr1 + rndmNr2;

          // Print the numbers to screen
					//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
          $(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');

          // Check the input value, enable it if the sum is correct
          $(input).keyup(function () {
              if ($(this).val() == totalNr)
                  submit.removeAttr('disabled').addClass(params.class);
              else
                  submit.attr('disabled', 'disabled').removeClass(params.class);
          });

          // Don't breake jQuery chain!
          return this;
      }
  })(jQuery);
  
  

	//Run the Code
  $(document).ready(function () {
    $('.form-class-name').captcha();
  });
</script>
Learn How to Use This
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>
</ body> Code
Learn How to Use This
Disable Form Submit with the "Enter" Key
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>
Learn How to Use This
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR --> 
<style>
	:-moz-selection { color: #000; background: #90fcdc;}
	::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>

	//Dynamic Weekday
	$(document).ready(function(){
		// Get current day of the week
		var d = new Date();
		var weekday = new Array(7);
		weekday[0] = "Sunday";
		weekday[1] = "Monday";
		weekday[2] = "Tuesday";
		weekday[3] = "Wednesday";
		weekday[4] = "Thursday";
		weekday[5] = "Friday";
		weekday[6] = "Saturday";
		var n = weekday[d.getDay()];
    
    document.querySelectorAll(".weekday").forEach(function(weekday) {
  		weekday.innerHTML = n;
    });
	});

</script>
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
	// Dynamic Copyright Year
	var date = new Date().getFullYear();
	document.getElementById("year").innerHTML = date;
</script>
Learn How to Use This
Browser Back Button
</ head> Code
</ body> Code
<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
	$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.  
		window.history.back();
	});
});
</script>
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
Learn How to Use This
Custom Placeholder Animation
</ head> Code
<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>
</ body> Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js">

<script>
//Change SAVE20NOW to whatever coupon or text you want to be copied
$('input#coup-field').val('SAVE20NOW');
$("input#coup-field").prop('readOnly', true);
$('input#coup-field').css( 'cursor', 'text' );

$(document).ready(function() {
  $('#copy-btn').CopyToClipboard();
  $('.copy-btn').click(function(){
  	//The values "Copied!" and #9ccd65 below are what the button will change to for 2 seconds
    $('.copy-btn').html('Copied!');
    $('.copy-btn').css('background-color', '#9ccd65');
    //The values "Copy" and #ec4609 below are what it will change back to
    setTimeout(function() { 
      $('.copy-btn').html('Copy')
      $('.copy-btn').css('background-color', '#ec4609')
    }, 2000);
  });
});
</script>
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict';
		$('.acc-head').on("click", function () {
			$(this).next().slideToggle(300);											// 300 is the milliseconds on open
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;  
}
</style>
</ body> Code
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    if (form.style.display === "none") {
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
Learn How to Use This
Reset Webflow Form
</ head> Code
</ body> Code
<!-- RESET WEBFLOW FORM AFTER SUBMIT --> 
<script>
$(function() {
  /*** START SCRIPT CONFIG ***/

  // Replace with value for your form. ie. "#your-form-id" or ".your-form-class"
  var FORM_SELECTOR = ".your-class";

  // Do you want to hide the success message after the form is submitted?
  var HIDE_SUCCESS_MESSAGE = false;
  
  // Do you want the success message to show above the form?
  var SUCCESS_MESSAGE_ABOVE_FORM = true;

  /*** END SCRIPT CONFIG ***/

  var resetCustomElement = function(customElement) {
    var inputElement = customElement.nextSibling;
    if (inputElement.checked) {
      customElement.classList.add("w--redirected-checked");
    } else {
      customElement.classList.remove("w--redirected-checked");
    }
  };

  var resetForm = function(form, successDiv) {
    // Reset the inputs in the form
    form.reset();

    // Reset custom checkboxes
    document.querySelectorAll(".w-checkbox-input--inputType-custom").forEach(resetCustomElement);

    // Reset custom radio buttons
    document.querySelectorAll(".w-form-formradioinput--inputType-custom").forEach(resetCustomElement);

    // Show the form
    form.style.display = "block";

    // Hide Success Message
    if (HIDE_SUCCESS_MESSAGE) {
      successDiv.style.display = "none";
    }
  };

  var form = document.querySelector(FORM_SELECTOR);
  var successDiv = form.nextSibling;
  if (!HIDE_SUCCESS_MESSAGE && SUCCESS_MESSAGE_ABOVE_FORM) {
    // Move the form last so that the success message appears before it
    form.parentElement.appendChild(form);
  }

  // Create an observer to run our resetForm function when Webflow hides our form after submission
  var observer = new MutationObserver(function(mutations) {
    if (form.style.display === "none") {
      resetForm(form, successDiv);
    }
  });

  // Listen for when the style attribute of our form changes
  observer.observe(form, { attributes: true, attributeFilter: ["style"] });
});
</script>
Learn How to Use This
Simple JQuery Accordion
</ head> Code
<!-- Closes Simple JQuery Accordion Bodies on Published Site --> 
<style>
.acc-body {
	display: none;
}
</style>
</ body> Code
<!-- Simple JQuery Accordion --> 
<script>
(function ($) {
	'use strict';
		$('.acc-head').on("click", function () {
			$(this).next().slideToggle(300);											// 300 is the milliseconds on open
			$('.acc-body').not($(this).next()).slideUp('fast');
		});
}(jQuery));
</script>
Learn How to Use This
Coupon Copy-to-Clipboard
</ head> Code
</ body> Code
<!-- COUPON COPY TO CLIPBOARD --> 
<script type="text/javascript" src="https://milankyncl.github.io/jquery-copy-to-clipboard/jquery.copy-to-clipboard.js">

<script>
//Change SAVE20NOW to whatever coupon or text you want to be copied
$('input#coup-field').val('SAVE20NOW');
$("input#coup-field").prop('readOnly', true);
$('input#coup-field').css( 'cursor', 'text' );

$(document).ready(function() {
  $('#copy-btn').CopyToClipboard();
  $('.copy-btn').click(function(){
  	//The values "Copied!" and #9ccd65 below are what the button will change to for 2 seconds
    $('.copy-btn').html('Copied!');
    $('.copy-btn').css('background-color', '#9ccd65');
    //The values "Copy" and #ec4609 below are what it will change back to
    setTimeout(function() { 
      $('.copy-btn').html('Copy')
      $('.copy-btn').css('background-color', '#ec4609')
    }, 2000);
  });
});
</script>
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
Learn How to Use This
Browser Back Button
</ head> Code
</ body> Code
<!-- Browser Back Button -->
<script>
$( document ).ready(function() {
	$( ".back-button__class-name" ).click(function() { // Create any class name between the " ". Then add this class name to any back button on that page.  
		window.history.back();
	});
});
</script>
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
	// Dynamic Copyright Year
	var date = new Date().getFullYear();
	document.getElementById("year").innerHTML = date;
</script>
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>

	//Dynamic Weekday
	$(document).ready(function(){
		// Get current day of the week
		var d = new Date();
		var weekday = new Array(7);
		weekday[0] = "Sunday";
		weekday[1] = "Monday";
		weekday[2] = "Tuesday";
		weekday[3] = "Wednesday";
		weekday[4] = "Thursday";
		weekday[5] = "Friday";
		weekday[6] = "Saturday";
		var n = weekday[d.getDay()];
    
    document.querySelectorAll(".weekday").forEach(function(weekday) {
  		weekday.innerHTML = n;
    });
	});

</script>
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
Learn How to Use This
Disable Form Submit with the "Enter" Key
</ head> Code
</ body> Code
<!-- DISABLE SUBMIT WITH ENTER KEY --> 
<script>
$(document).ready(function() {
  $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});
</script>
Learn How to Use This
Math Captcha for Forms
</ head> Code
</ body> Code
<!-- MATH CAPTCHA --> 
<script>
// Contact Form Captcha
  (function($) {
      "use strict";

      $.fn.captcha = function(param) {

          // DEFAULT VARIABLES
          var params = $.extend({
              idCaptchaText: 'captchaText',   // The ID for the captcha text which is the label as the math question. Default is 'captchaText'.
              idCaptchaInput: 'captchaField', // The ID for the captcha input. Default is 'captchaInput'.
              class: ''                       // Class name for the submit button toggle. Default is ''.
          }, param);

          // Find and disable the submit button
          var submit = $(this).find('input[type=submit]');
          submit.attr('disabled', 'disabled');

          // Insert captcha text and input before the submit button with the given ID's
          $('');
          $('');   

          // Select text and input elements to fill
          var label = this.find('#' + params.idCaptchaText);
          var input = this.find('#' + params.idCaptchaInput);

          // Generate random numbers and the sum of them
          var rndmNr1 = Math.floor(Math.random() * 10),
              rndmNr2 = Math.floor(Math.random() * 10),
              totalNr = rndmNr1 + rndmNr2;

          // Print the numbers to screen
					//$(label).text(rndmNr1 + ' + ' + rndmNr2 + ' =');
          $(input).attr("placeholder", rndmNr1 + ' + ' + rndmNr2 + ' =');

          // Check the input value, enable it if the sum is correct
          $(input).keyup(function () {
              if ($(this).val() == totalNr)
                  submit.removeAttr('disabled').addClass(params.class);
              else
                  submit.attr('disabled', 'disabled').removeClass(params.class);
          });

          // Don't breake jQuery chain!
          return this;
      }
  })(jQuery);
  
  

	//Run the Code
  $(document).ready(function () {
    $('.form-class-name').captcha();
  });
</script>
Learn How to Use This
Cookie Notice
</ head> Code
<!-- COOKIE CONSENT -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.css" />
</ body> Code
<!-- COOKIE CONSENT --> 
<script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js" data-cfasync="false"></script>

<script>
window.cookieconsent.initialise({
  "palette": {
    "popup": {
      "background": "#ebe5ca",       // Background color for popup card
      "text": "#000000"              // Main text color for message
    },
    "button": {
      "background": "#a09e91",       // Background color for button (use "transparent" if you use the "wire" theme below.     "
      "text": "#fcf8f2",             // Button text color
      //border: "#a09e91"            // Remove the first "//" if you plan on using the wire theme below
    }
  },
  "theme": "block",               // Theme options: "edgeless", "block", "classic", "wire"  
  "position": "bottom-right",        // Positions options: "bottom-right", "bottom-left", "top", "bottom" 
  "static": false,                  // Set to "true" only if you choose "top" for the position which will push your content down instead of covering it.
  "content": {
    // Main message text on the cookie popup
    "message": "This website uses cookies to ensure you get the best experience on our website.",
    
    // Button text to accept
    "dismiss": "Got it!",
    
    // Button Link to your cookie policy or remove this line if you want it to go to: https://www.cookiesandyou.com/ (info site about cookies for your visitors)
    "href": "https://yoursite.com/cookie-policy"        
  }
});
</script>
Learn How to Use This
Open Specific Tabs from other Pages
</ head> Code
</ body> Code
<!-- OPEN SPECIFIC TABS -->
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
  var tabName = getParam('tab');
  if (!tabName) return;

  $('.' + tabName).triggerHandler('click');

  function getParam(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
      results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
  }
});
</script>
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
$('.INCREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
});

$('.DECREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
})
</script>
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* According Arrow */
.accordion__item > .accordion-header > .chev-icon {
  transition: .4s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header > .chev-icon {
  transform: rotate(-180deg);
}

.accordion_item-image {
  fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
var accordion = (function(){
  
  var $accordion = $('.js-accordion');
  var $accordion_header = $accordion.find('.js-accordion-header');
  var $accordion_item = $('.js-accordion-item');
 
  // default settings 
  var settings = {
    // animation speed
    speed: 400,
    
    // close all other accordion items if true
    oneOpen: false
  };
    
  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });
      
      $.extend(settings, $settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
        $('.js-accordion-item.active:not(:first)').removeClass('active');
      }
      
      // reveal the active accordion bodies
      $('.js-accordion-item.active').find('> .js-accordion-body').show();
    },
    toggle: function($this) {
            
      if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
        $this.closest('.js-accordion')
               .find('> .js-accordion-item') 
               .removeClass('active')
               .find('.js-accordion-body')
               .slideUp()
      }
      
      // show/hide the clicked accordion item
      $this.closest('.js-accordion-item').toggleClass('active');
      $this.next().stop().slideToggle(settings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init({ speed: 300, oneOpen: true });
});
</script>
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
Learn How to Use This
Custom Quantity Buttons
</ head> Code
<!-- CUSTOM QUANTITY BUTTONS -->
<style>
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
</style>
</ body> Code
<!-- CUSTOM QUANTITY BUTTONS --> 
<script>
$('.INCREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(val + 1);
});

$('.DECREMENT-CLASS').click(function() {
  var $input = $(this).parents('.QUANTITY-GROUP-CLASS').find('.QUANTITY-NUMBER-FIELD-CLASS');
  var val = parseInt($input.val(), 10);
  $input.val(Math.max(val - 1, 1));
})
</script>
Learn How to Use This
Remove iOS Form Styles
</ head> Code
<!--Removes iOS form styling--> 
<style>
input, textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;  
}
</style>
</ body> Code
Learn How to Use This
Ignore Pointer (Cursor) Events
</ head> Code
<!-- Ignore Cursor Events --> 
<style>
.your-class-name {
	pointer-events: none;
}
</style>
</ body> Code
Learn How to Use This
HTML Tables
</ head> Code
</ body> Code
Learn How to Use This
Custom Placeholder Animation
</ head> Code
<!-- Input Field Placeholder Animation --> 
<style>
  ::placeholder {
  	transition: all 350ms ease;
  }
  
  .your-input-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
  
  .your-textarea-class:focus::placeholder {
  	transform: translate(20px, 0);
    opacity: 0.0;
  }
</style>
</ body> Code
Learn How to Use This
Custom Select Field
</ head> Code
<!-- Custom Select Field Styles --> 
<style>
  /************ ADD YOUR VALUES BELOW ************/
  :root {
    /* ----------- Colors ----------- */
		--list-bg-color: white;
    --list-text-color: inherit; /* Use "inherit" to take on parent text color */
    --select-field-arrow-color: black; /* This is the select field arrow color */
    --border-color-active: black; /* Active State */
    --border-color-hover: #dcdcdd; /* Select Field could be the same as your form field border color */
    --list-item-bg-color: #ededed; /* Select Field Hover/Focus State */

    /* ----------- Spacing ----------- */
    --select-field-padding-left: 12px; /* Match the padding values for your form fields */
    --select-field-padding-right: 12px; /* Match the padding values for your form fields */
    --list-padding-top-bottom: 10px; /* This is the top and bottom padding for the dropdown list */
    --list-max-height: 150px; /* You can set this to "Auto" as well */
    --list-item-padding-left: 18px; 
    --list-item-padding-right: 18px;
    --list-item-min-height: 40px; /* This is the height of each list item in the dropdown */
    --list-item-line-height: 40px; /* This is the height of each list item in the dropdown */

             /* ^^^  Make sure both "line-height" and "min-height" are the same! ^^^  */
  }
  /************ END OF CUSTOM VALUES ************/



  .nice-select {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    clear: both;
    padding-left: var(--select-field-padding-left);
    padding-right: var(--select-field-padding-right);
    position: relative;
    text-align: left !important;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    white-space: nowrap; 
  }


  .nice-select:hover {
    border-color: var(--border-color-hover); 
  }


  .nice-select:active, .nice-select.open, .nice-select:focus {
    border-color: var(--border-color-active);
  }


  .nice-select:after {
    border-bottom: 2px solid var(--select-field-arrow-color);
    border-right: 2px solid var(--select-field-arrow-color);
    content: '';
    display: block;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    -ms-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    -webkit-transition: all 0.15s ease-in-out;
    transition: all 0.15s ease-in-out;
    width: 5px; 
  }


  .nice-select.open:after {
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg); 
  }


  .nice-select.open .list {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: scale(1) translateY(0);
    -ms-transform: scale(1) translateY(0);
    transform: scale(1) translateY(0); 
  }


  .nice-select.disabled {
    border-color: #ededed;
    color: #999;
    pointer-events: none; 
  }


  .nice-select.disabled:after {
    border-color: #cccccc; 
  }


  .nice-select.wide {
    width: 100%; 
  }


  .nice-select.wide .list {
    left: 0 !important;
    right: 0 !important; 
  }


  .nice-select.right {
    float: right; 
  }


  .nice-select.right .list {
    left: auto;
    right: 0; 
  }


  .nice-select.small {
    font-size: 12px;
    height: 36px;
    line-height: 34px; 
  }


  .nice-select.small:after {
    height: 4px;
    width: 4px; 
  }


  .nice-select.small .option {
    line-height: 34px;
    min-height: 34px; 
  }


  .nice-select .list {
    background-color: var(--list-bg-color);
    color: var(--list-text-color);
    border-radius: 5px;
    box-shadow: 0 7px 20px 0px rgba(68, 68, 68, 0.11);
    border-color: 3px solid #ededed;
    box-sizing: border-box;
    margin-top: 4px;
    opacity: 0;
    overflow: hidden;
    padding: var(--list-padding-top-bottom) 0px;
    pointer-events: none;
    position: absolute;
    top: 100%;
    left: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    max-height: var(--list-max-height);
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
    -webkit-transform: scale(0.75) translateY(-21px);
    -ms-transform: scale(0.75) translateY(-21px);
    transform: scale(0.75) translateY(-21px);
    -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out;
    z-index: 9; 
  }


  .nice-select .list:hover .option:not(:hover) {
    background-color: transparent !important; 
  }


  .nice-select .option {
    cursor: pointer;
    font-weight: 400;
    line-height: var(--list-item-line-height);
    list-style: none;
    min-height: var(--list-item-min-height);
    outline: none;
    padding-left: var(--list-item-padding-left);
    padding-right: var(--list-item-padding-right);
    text-align: left;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }

  .nice-select .option:first-child {
    display: none;
  }

  span.current {
    color: var(--list-text-color);
  }

  .nice-select .option:hover, .nice-select .option.focus, .nice-select .option.selected.focus {
    background-color: var(--list-item-bg-color);
  }

  .nice-select .option.selected {
    font-weight: bold; 
  }

  .nice-select .option.disabled {
    background-color: transparent;
    color: #999;
    cursor: default; 
  }

  .no-csspointerevents .nice-select .list {
  display: none; 
  }

  .no-csspointerevents .nice-select.open .list {
  display: block; 
  }
</style>
</ body> Code
<!-- CUSTOM SELECT FIELD --> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-nice-select/1.1.0/js/jquery.nice-select.min.js"></script>

<script>
	$(document).ready(function() {
  	$('select').niceSelect();
	});
</script>
Learn How to Use This
Dynamic Copyright Year
</ head> Code
</ body> Code
<!-- Dynamic Copyright Year -->
<script>
	// Dynamic Copyright Year
	var date = new Date().getFullYear();
	document.getElementById("year").innerHTML = date;
</script>
Learn How to Use This
Dynamic Weekday
</ head> Code
</ body> Code
<!-- DYNAMIC WEEKDAY --> 
<script>

	//Dynamic Weekday
	$(document).ready(function(){
		// Get current day of the week
		var d = new Date();
		var weekday = new Array(7);
		weekday[0] = "Sunday";
		weekday[1] = "Monday";
		weekday[2] = "Tuesday";
		weekday[3] = "Wednesday";
		weekday[4] = "Thursday";
		weekday[5] = "Friday";
		weekday[6] = "Saturday";
		var n = weekday[d.getDay()];
    
    document.querySelectorAll(".weekday").forEach(function(weekday) {
  		weekday.innerHTML = n;
    });
	});

</script>
Learn How to Use This
Reveal Submit Button When Email is Validated
</ head> Code
</ body> Code
<!-- REVEAL SUBMIT BUTTON WHEN EMAIL IS VALIDATED --> 
<script>
  $(function(){

    // Only show submit button on proper email
    ;( function( $, window, document, undefined ) {
        'use strict';
        var form        = '.email-form',
            className   = 'email-active',
            submit      = 'input[type="submit"]',
            email       = 'input[type="email"]';
        $( form ).each( function(){
            var $form   = $( this ),
                $email  = $form.find( email ),
                $submit  = $form.find( submit ),
                val     = '';
            $email.on( 'keyup.addClassWhenEmail', function(){
                val = $email.val();
                $submit.toggleClass( className, val != '' && /^([\w-\.]+@([\w-]+\.)+[\w-]{2,12})?$/.test( val ) );    
            });
        });
    })( jQuery, window, document );
  })
</script>
Learn How to Use This
Custom Selection & Highlight Color
</ head> Code
<!-- CUSTOM SELECTION / HIGHLIGHT COLOR --> 
<style>
	:-moz-selection { color: #000; background: #90fcdc;}
	::selection { color: #000; background: #90fcdc;}
</style>
</ body> Code
Learn How to Use This
Apple Frost Blur
</ head> Code
<!-- APPLE FROST BLUR --> 
<style>
.frost-blur {
  -webkit-backdrop-filter: blur(40px);
  backdrop-filter: blur(40px);
}
</style>
</ body> Code
Learn How to Use This
Disable User Select
</ head> Code
<!-- DISABLES TEXT SELECT -->
<style>
.noselect {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
</style>
</ body> Code
Learn How to Use This
Custom Javascript Accordion
</ head> Code
<!-- Javascript Accordion Styles -->
<style>
/* According Arrow */
.accordion__item > .accordion-header > .chev-icon {
  transition: .4s all;
  transform: rotate(0deg);
}

.accordion__item.active > .accordion-header > .chev-icon {
  transform: rotate(-180deg);
}

.accordion_item-image {
  fill: #FF8E63;
}
</style>
</ body> Code
<!-- Javascript Accordion -->
<script>
var accordion = (function(){
  
  var $accordion = $('.js-accordion');
  var $accordion_header = $accordion.find('.js-accordion-header');
  var $accordion_item = $('.js-accordion-item');
 
  // default settings 
  var settings = {
    // animation speed
    speed: 400,
    
    // close all other accordion items if true
    oneOpen: false
  };
    
  return {
    // pass configurable object literal
    init: function($settings) {
      $accordion_header.on('click', function() {
        accordion.toggle($(this));
      });
      
      $.extend(settings, $settings); 
      
      // ensure only one accordion is active if oneOpen is true
      if(settings.oneOpen && $('.js-accordion-item.active').length > 1) {
        $('.js-accordion-item.active:not(:first)').removeClass('active');
      }
      
      // reveal the active accordion bodies
      $('.js-accordion-item.active').find('> .js-accordion-body').show();
    },
    toggle: function($this) {
            
      if(settings.oneOpen && $this[0] != $this.closest('.js-accordion').find('> .js-accordion-item.active > .js-accordion-header')[0]) {
        $this.closest('.js-accordion')
               .find('> .js-accordion-item') 
               .removeClass('active')
               .find('.js-accordion-body')
               .slideUp()
      }
      
      // show/hide the clicked accordion item
      $this.closest('.js-accordion-item').toggleClass('active');
      $this.next().stop().slideToggle(settings.speed);
    }
  }
})();

$(document).ready(function(){
  accordion.init({ speed: 300, oneOpen: true });
});
</script>
Learn How to Use This
Datepicker
</ head> Code
<!-- DATE PICKER STYLES -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/pikaday/css/pikaday.css">
<style>
:root {
	/* Color Settings */
  --accent-color: #7262e6;							/* Controls BG Color for Selected Date */
  --secondary-accent-color: #9287e2;		/* Controls Text Color for Current Date */
	--main-bg-color: #1f2023;							/* Controls BG Color of the Calendar */
  --secondary-bg-color: #27292d;				/* Controls BG for Calendar Dates */
  --heading-color: #ffffff;							/* Controls Main Heading Color */
  --font-color: #c1c9d2;								/* Controls Main Font Color */
  --accent-top-text-color: #ffffff;			/* Controls Font Color on top of Accent Color */
  --disabled-font-color: #999999;				/* Controls Disabled Font Color */
  --shadow-color: 0 5px 15px -5px rgba(0,0,0,.5);
  
  /* Size & Spacing Settings */
  --border-radius: 4px;									/* Controls Large Border Radius (Calendar Itself) */
  --border-radius-sm: 2px;							/* Controls Small Border Radius (Calendar Dates) */
  --font-size: 16px;										/* Controls Font Size */
  --table-gap: 2px;											/* High number is not recommended */
  
  /* Arrow Icons */
  --left-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dd958382e006f4eb2033_chevron-left.svg');
  --right-arrow: url('https://assets.website-files.com/5ef7d336e1f9137fc9a09781/5ef7dbca268421b03c01abf6_chevron-right.svg');   
  --arrow-bg-color: transparent;
}



/* Picker Element Itself */
.pika-single {
  color: var(--heading-color);
  background: var(--main-bg-color);
  border: none !important;
  border-bottom-color: none !important;
  border-radius: var(--border-radius);
  font-family: inherit !important;
}

/* Datepicker Shadow */
.pika-single.is-bound {
  box-shadow: var(--shadow-color) !important;
}

/* Month & Year Displayed in Middle */
.pika-label {
  color: var(--heading-color);
  background-color: transparent !important;
}

.pika-prev, .is-rtl .pika-next {
	background-image: var(--left-arrow);
}
.pika-next, .is-rtl .pika-prev {
  background-image: var(--right-arrow);
}

/* This is the table element which includes the days labels and the days in the month */
.pika-table {
	border-spacing: var(--table-gap) !important;
  border-collapse: separate;
  font-size: var(--font-size) !important;
}

/* Days of the Week Labels */
.pika-table th {
  color: var(--font-color);
  text-align: center;
}

/* Days of the Week Underline - Example = underline dotted */
abbr[title] {
  text-decoration: none !important;
  cursor: default !important;
}

/* Month Days on Calendar - Default State */
.pika-button {
  color: var(--font-color);
  background: var(--secondary-bg-color);
  border-radius: var(--border-radius-sm);
  text-align: center;
  font-size: 12px !important;
}

/* Week Label */
.pika-week {
  color: var(--font-color);
}

/* Current Day Text/Number Color */
.is-today .pika-button {
  color: var(--secondary-accent-color) !important;
}

/* The Selected Date/Day */
.is-selected .pika-button {
  color: var(--accent-top-text-color) !Important;
  background: var(--accent-color);
  box-shadow: none !important;
}

/* Styles for any Disabled Dates/Days  */
.is-disabled .pika-button {
  color: var(--disabled-font-color);
  opacity: .3;
  background: transparent !important;
}

/* Styles for Date/Day Hover (can be same styles as "selected" styles) */
.pika-button:hover {
  color: var(--accent-top-text-color) !important;
  background: var(--accent-color) !important;
  border-radius: var(--border-radius-sm) !important;
}

/* Next & Prev Arrow Buttons */
.pika-prev, .pika-next {
	display: block;
	cursor: pointer;
	position: relative;
	outline: none;
	border: 0;
	padding: 0;
	width: 20px;
	height: 30px;
	text-indent: 20px;
	white-space: nowrap;
	overflow: hidden;
	background-color: var(--arrow-bg-color) !important;
	opacity: .5;
}
</style>
</ body> Code
<!-- DATE PICKER JS --> 
<script src="https://cdn.jsdelivr.net/npm/pikaday/pikaday.js"></script>
<!-- FOR 'SINGLE' DATE PICKER ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
var picker = new Pikaday({ 
	field: document.getElementById('datepicker'),
	disableWeekends: true, // Disables option to select weekend days
	firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
	minDate: new Date(), // Disables option to select days prior to current day
  //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>





<!-- FOR 'MULTIPLE' DATE PICKERS ON ONE FORM/PAGE. REMOVE CODE BELOW IF NOT NEEDED! -->
<script>
$('.date-picker').each(function() {  // ".date-picker" is the class name you would set on each field that needs a date picker.
    $(this).data('pikaday', new Pikaday({ 
      field: $(this)[0],
      disableWeekends: true, // Disables option to select weekend days
      firstDay: 0, // First day of the week - 0 for Sunday & 1 for Monday
      minDate: new Date(), // Disables option to select days prior to current day
      //yearRange: [1968, new Date().getFullYear().toString()], //Here you can choose the earliest year option to the current date or change "new Date().getFullYear().toString()" to 2008 for example.  
    }));
});

//Sets Default Date to Current Date
picker.gotoToday()
</script>
Learn How to Use This
Clip Path - Slanted Edges
</ head> Code
<!-- SNIPPET NAME HERE -->
<style>
.cp-1{
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10vw), 0 100%);
}

.cp-2{
	clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 calc(0% + 10vw), 100% 0, 100% 100%, 0 100%);
}

.cp-3{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 50% 100%,0 90%);
}

.cp-4{
	clip-path: polygon(0 0, 100% 0, 100% 90%, 25% 80%, 50% 100%, 5% 80%, 0 100%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 75% 80%, 50% 100%, 25% 80%, 0 90%);
}

.cp-btn {
	clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
  -webkit-clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}

.cp-btn:hover {
	clip-path: polygon(0 0, 100% 0, 100% 90%, 0 90%);
  -webkit-clip-path: polygon(0 0, 100% 10%, 100% 100%, 0 90%);
}
</style>
</ body> Code
Learn How to Use This
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home