Filter List
.filters-wrapper{
display: flex;
flex-wrap: wrap;
}
.filter-column{
max-width: 400px;
width: 25%;
}
.filter-section {
text-align: left;
margin-bottom: 20px;
}
.filter-section div:nth-child(2){
margin-top: 15px !important;
}
.FilterBy-label{
font-weight: 600;
color: #000153;
}
.input-wrapper{
margin-top: 10px !important;
}
input{
border-radius: 0!important;
}
.list-container {
width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: left;
}
.item {
width: 22%;
height: 130px;
margin: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
/* Hide items by default */
.item.hide {
display: none;
}
/*Flip cards*/
.flip-card{
background: transparent;
width: 180px;
height: 128px;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.6s;
transform-style: preserve-3d;
}
/*
.flip-card:hover .flip-card-inner{
transform: rotateY(180deg);
}
*/
.flip-card-front, .flip-card-back{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-card-front{
background-color: none;
color: white;
border-radius: 10px;
}
.flip-card-back{
border-radius: 10px;
color: white;
transform: rotateY(180deg);
font-size: 14px;
line-height: 1.4;
vertical-align: middle;
display: flex;
justify-content: center;
align-items: center;
}
.flip-card-back p{
width: 90%;
margin-bottom: 0;
}
img.logo-filter-img{
width: 100%;
height: auto;
}
/*
Front/back Cards Background colours
.acronis .flip-card-front, .acronis .flip-card-back{
background-color: #001645;
}
.Avast .flip-card-front, .Avast .flip-card-back{
background-color: #07182a;
}
.barracuda .flip-card-f, .barracuda .flip-card-back{
background-color: #783887;
}
.BitTitan .flip-card-front, .BitTitan .flip-card-back{
background-color: #4112cc;
}
.CloudM .flip-card-front, .CloudM .flip-card-back{
background-color: #e65704;
}
.csat .flip-card-front, .csat .flip-card-back{
background-color: #1c87bd;
}
.Google .flip-card-front, .Google .flip-card-back{
background-color: #d33c4e;
}
.Halopsa .flip-card-front, .Halopsa .flip-card-back {
background-color: #f8384b;
}
.GoogleCloud .flip-card-front, .GoogleCloud .flip-card-back{
background-color: #2670f5;
}
.GoogleWorkspace .flip-card-front, .GoogleWorkspace .flip-card-back{
background-color: #eab900;
}
.IBM-Cloud .flip-card-front, .IBM-Cloud .flip-card-back{
background-color: #00c1e4;
}
.Jamf .flip-card-front, .Jamf .flip-card-back{
background-color: #319873;
}
.Kaseya .flip-card-front, .Kaseya .flip-card-back{
background-color: #182120;
}
.Microsoft .flip-card-front, .Microsoft .flip-card-back{
background-color: #7cba00;
}
.Microsoft365 .flip-card-front, .Microsoft365 .flip-card-back{
background-color: #f46536;
}
.Nitro .flip-card-front, .Nitro .flip-card-back{
background-color: #e54622;
}
.Parallels .flip-card-front, .Parallels .flip-card-back{
background-color: #1d4562;
}
.ParallelsRAS .flip-card-front, .ParallelsRAS .flip-card-back{
background-color: #db2232;
}
.Printix .flip-card-front, .Printix .flip-card-back{
background-color: #3e8cd1;
}
.Skykick .flip-card-front, .Skykick .flip-card-back{
background-color: #00aeeb;
}
.TeamViewer .flip-card-front, .TeamViewer .flip-card-back{
background-color: #0c1770;
}
*/
/*Responsive*/
@media screen and (max-width: 1080px){
.filters-wrapper{
display: block;
margin: auto;
width: 98%;
}
.filter-column{
max-width: 800px;
width: 95%;
margin: 25px auto;
}
.filter-section{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: left;
align-items: center;
}
.filter-section label:first-child{
width: 100%;
font-size: 18px;
}
div.input-wrapper{
margin-top: 15px !important;
margin-right: 25px;
font-size: 18px;
}
.list-container{
width: 90%;
margin: 25px auto auto;
justify-content: left;
}
.item{
width: 230px;
}
}
@media screen and (max-width: 647px){
.list-container{
display: block;
}
.item{
margin: 15px auto;
width: 80%;
min-height: 207px;
border-radius: 10px;
}
.flip-card{
width: 100%;
height: 100%;
}
.flip-card-front, .flip-card-back{
border-radius: 20px;
}
}
Search by Type
Backup & Recovery
Business Applications
Cloud Infrastructure
Productivity & Collaboration
Security
Robust data protection solutions.
Comprehensive cybersecurity suite.
Cloud security and data protection.
Powerful cloud infrastructure solutions.
Collaborative productivity suite.
All-in-One PSA Software for Service Providers
Advanced cloud computing and AI.
Document productivity solutions.
Cloud-based print management.
function handleCheckboxChange() {
const checkboxes = document.querySelectorAll(".filter-checkbox");
const selectedFiltersType = [];
const selectedFiltersEcosystem = [];
checkboxes.forEach(checkbox => {
const filterValue = checkbox.getAttribute("data-filter");
if (checkbox.checked) {
if (checkbox.classList.contains("filter-checkbox-type")) {
selectedFiltersType.push(filterValue);
} else if (checkbox.classList.contains("filter-checkbox-ecosystem")) {
selectedFiltersEcosystem.push(filterValue);
}
}
});
const filtersApplied = selectedFiltersType.length > 0 || selectedFiltersEcosystem.length > 0;
const items = document.querySelectorAll(".item");
items.forEach(item => {
const itemCategories = item.classList;
if (!filtersApplied) {
// No filters: show all items except those originally marked with .hide
if (!item.classList.contains("hide")) {
item.style.display = "flex";
} else {
item.style.display = "none";
}
} else {
const matchType = selectedFiltersType.length === 0 || selectedFiltersType.some(f => itemCategories.contains(f));
const matchEcosystem = selectedFiltersEcosystem.length === 0 || selectedFiltersEcosystem.some(f => itemCategories.contains(f));
if (matchType && matchEcosystem) {
item.style.display = "flex";
} else {
item.style.display = "none";
}
}
});
}
document.querySelectorAll(".filter-checkbox").forEach(cb =>
cb.addEventListener("change", handleCheckboxChange)
);
handleCheckboxChange();
