Filter mixitup

Developer
Thulio Philipe
Size
2,109 Kb
Views
10,120
  1. Filter mixitup Previews
  2. Filter mixitup HTML Codes
  3. Filter mixitup CSS Codes
  4. Filter mixitup JS Codes

How do I make an filter mixitup?

Utilizando o mixitup para realizar filtros de conteúdo. What is a filter mixitup? How do you make a filter mixitup? This script and codes were developed by Thulio Philipe on 09 January 2023, Monday.

Filter mixitup Previews
IQ Test

Filter mixitup - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>filter mixitup</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="controls"> <button class="filter" data-filter="all">All</button> <button class="filter" data-filter=".category-1">Category 1</button> <button class="filter active" data-filter=".category-2">Category 2</button>
</div>
<div id="Container" class="container"> <div class="mix category-1"></div> <div class="mix category-1"></div> <div class="mix category-1"></div> <div class="mix category-2"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Filter mixitup - Script Codes CSS Codes

*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
}
.controls{ padding: 2%; background: #333; color: #eee;
}
label{ font-weight: 300; margin: 0 .4em 0 0;
}
button{ display: inline-block; padding: .4em .8em; background: #666; border: 0; color: #ddd; font-size: 16px; font-weight: 300; border-radius: 4px; cursor: pointer;
}
button.active{ background: #68b8c4;
}
button:focus{ outline: 0 none;
}
button + label{ margin-left: 20px;
}
.container{ padding: 2% 2% 0; text-align: justify; font-size: 0.1px; background: #68b8c4; -webkit-backface-visibility: hidden;
}
.container .mix,
.container .gap{ display: inline-block; width: 300px; height: 50px; margin-right: 10px;
}
.container .mix{ text-align: left; background: #03899c; margin-bottom: 2%; display: none;
}
.container .mix.category-1{ border-top: 2px solid limegreen;
}
.container .mix.category-2{ border-top: 2px solid yellow;
}

Filter mixitup - Script Codes JS Codes

$(function(){ $('#Container').mixItUp();
});
Filter mixitup - Script Codes
Filter mixitup - Script Codes
Home Page Home
Developer Thulio Philipe
Username thulioph
Uploaded January 09, 2023
Rating 3
Size 2,109 Kb
Views 10,120
Do you need developer help for Filter mixitup?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Thulio Philipe (thulioph) Script Codes
Name
Change favicon dynamically
Animated paths - Google Maps
Utilizando o Cycle
Parallax
Usando sharre
Google Maps - Reverse Geolocation
Parallax with only CSS3
A Pen by Thulio Philipe
Custom Google Maps API
Google static map to Base64
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!