Attractive and responsive HTML5 & CSS3 Filters.
Zain Muhammad
Posted on February 15, 2022
Here we are going to design attractive and eye catchy filters using HTML5 ,CSS3 and using bit JavaScript.
Code Pen Filters Link
Code
<!DOCTYPE html>
<html>
<head>
<title>Attractive Filters</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
/* css for new filters */
.sect-filters_and_sort .new-sect-filters_and_sort{
display:flex;
/* align-items:center; */
overflow:auto;
scroll-behavior: smooth;
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
.sect-filters_and_sort .new-sect-filters_and_sort{
padding:16px 0px;
}
.sect-filters_and_sort .od-new-filter{
display: grid;
grid-template-columns: 33% 67%;
flex-shrink:0;
background: #F7F8FB;
border-left:0px;
border-radius: 8px;
width:183px;
height:60px;
margin-right:16px;
cursor:pointer;
margin-bottom:0px;
}
.od-new-filter .filter-text-section{
margin: auto 0;
font-size: 14px;
font-weight: 600;
color: #000066;
padding:0px 5px 0px 12px;
border-radius: 0px 8px 8px 0px;
}
.od-new-filter .icon-section{
background: #D4D4FF;
border-radius: 8px 0px 0px 8px;
color:#000066;
}
.od-new-filter .filters-icon{
display:block;
height:100%;
margin:auto;
transition: all .5s ease-in-out;
}
.od-new-filter{
transition: all .5s ease-in-out;
}
.new-sect-filters_and_sort .mobile-filters .od-filters-input{
display: none;
overflow: hidden;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter{
background: #D4D4FF;
transition: all .5s ease-in-out;
border: none;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .icon-section{
background:transparent;
}
.od-new-filter .filters-icon.filter-icon-cross{
display:none;
transition: all .5s ease-in-out;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .filter-text-section{
color: #000066;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .filters-icon{
display:none;
}
.new-sect-filters_and_sort .mobile-filters input:checked+.od-new-filter .filters-icon.filter-icon-cross{
display:block;
}
.filters-button{
height: 40px;
width:40px;
background: #ffffff;
border-radius: 50px;
margin-top: -5.9%;
cursor:pointer;
outline:none;
border:0px;
filter: drop-shadow(0px 1px 30px rgba(0, 0, 0, 0.05)) drop-shadow(0px 1px 4px rgba(0, 0, 0, 0.15));
}
.filters-button:focus{
outline:none;
border:0px;
}
.filters-button.right-filters-button{
float: right;
margin-right: -2.5%;
transform: rotate(180deg);
}
.filters-button.left-filters-button{
margin-left: -2.5%;
}
.new-sect-filters_and_sort .mobile-filters{
display: flex;
transition: all 2s ease-in-out;
}
.sect-filters_and_sort .new-sect-filters_and_sort::-webkit-scrollbar {
display: none;
}
@media screen and (max-width: 767px){
.filters-button{
margin-top: -35%;
margin-right: -4%;
}
}
@media screen and (max-width: 768px){
.best-speciality-no-line{
font-size: 16px;
line-height: 1.5;
padding-top: 16px;
}
.fixed-header .sect-filters_and_sort.sect-filter-and-sort-variation-2.widget-active{
top:59px;
}
}
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px)
and (device-width : 414px)
and (device-height : 736px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 3)
and (-webkit-device-pixel-ratio : 3) {
.filters-button {
margin-top: -32%;
}
}
@media screen and (min-width: 411px) and (max-width: 424px) {
.filters-button {
margin-top: -31%;
}
}
@media screen and (max-device-width: 320px) {.filters-button {margin-top: -43%;}}
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.filters-button{display:none;} /* your css rules for ipad portrait */
}
@media screen and (max-width: 991px){
/* css for auto handling */
.new-sect-filters_and_sort .mobile-filters{
display: grid;
grid-template-rows: repeat(2,1fr);
grid-auto-flow: column;
transition: all 2s ease-in-out;
}
/* css for auto handling */
.new-sect-filters_and_sort .mobile-filters .od-new-filter {
margin-bottom:16px;
}
}
/* css for new filters end here*/
</style>
</head>
<body>
<div class="sect-filters_and_sort bg-white sect-filter-and-sort-variation-2">
<div class="container">
<div class="new-sect-filters_and_sort" id="new-search-filters">
<div class="mobile-filters">
<div>
<input type="checkbox" class="od-filters-input" id="show-near-me">
<label class="od-new-filter" for="show-near-me">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#near-me"></use>
</svg>
</div>
<div class="filter-text-section">Doctors Near me</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="lowest-fee-sort">
<label class="od-new-filter" for="lowest-fee-sort">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#pocket-icon"></use>
</svg>
</div>
<div class="filter-text-section">Lowest Fee</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="most-experienced">
<label class="od-new-filter" for="most-experienced">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#most-experience"></use>
</svg>
</div>
<div class="filter-text-section">Most Experienced</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="availability-today">
<label class="od-new-filter" for="availability-today">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#available-today"></use>
</svg>
</div>
<div class="filter-text-section">Available Today</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="female-only">
<label class="od-new-filter" for="female-only">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#female-doc-icon"></use>
</svg>
</div>
<div class="filter-text-section">Female Doctors</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="highest-rated">
<label class="od-new-filter" for="highest-rated">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#high-rating"></use>
</svg>
</div>
<div class="filter-text-section">Highest Rated</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="online-now-filter">
<label class="od-new-filter" for="online-now-filter">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#online-now"></use>
</svg>
</div>
<div class="filter-text-section">Online Now</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="video-consultation">
<label class="od-new-filter" for="video-consultation">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#video-consulation"></use>
</svg>
</div>
<div class="filter-text-section">Video Consultation</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="oladoc-care-500">
<label class="od-new-filter" for="oladoc-care-500">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#od-care"></use>
</svg>
</div>
<div class="filter-text-section">Doctors Below Rs. 500</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="male-only">
<label class="od-new-filter" for="male-only">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#male-doc-icon"></use>
</svg>
</div>
<div class="filter-text-section">Male Doctors</div>
</label>
</div>
<div>
<input type="checkbox" class="od-filters-input" id="discounted">
<label class="od-new-filter" for="discounted">
<div class="icon-section">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon filter-icon-cross">
<use xlink:href="#cross-icon"></use>
</svg>
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="filters-icon">
<use xlink:href="#discounts"></use>
</svg>
</div>
<div class="filter-text-section">Discounts</div>
</label>
</div>
</div>
</div>
<div class="container">
<button class="filters-button right-filters-button" id="btn-right" aria-label="right-btn">
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top:-4px;">
<path d="M6.5 1L1.5 6L6.5 11" stroke="#232426" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
<button class="filters-button left-filters-button" id="btn-left" style="float:left;display:none;" aria-label="left-btn">
<svg width="8" height="12" viewBox="0 0 8 12" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top:-4px;">
<path d="M6.5 1L1.5 6L6.5 11" stroke="#232426" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
</button>
</div>
</div>
</div>
<!-- svgs icons -->
<div class="listing-svg d-none">
<svg>
<defs>
<g id="crose-icon-svg">
<path d="M4.65313 3.97798L7.89313 0.737981C7.96594 0.652958 8.00399 0.543591 7.99967 0.431735C7.99535 0.319879 7.94898 0.213773 7.86983 0.134619C7.79067 0.0554663 7.68457 0.0090961 7.57271 0.00477558C7.46085 0.000455069 7.35149 0.0385024 7.26646 0.111314L4.02646 3.35131L0.786464 0.10687C0.701441 0.0340579 0.592074 -0.00398905 0.480218 0.00033146C0.368362 0.00465197 0.262256 0.0510217 0.183103 0.130175C0.10395 0.209328 0.0575794 0.315434 0.0532588 0.42729C0.0489383 0.539146 0.0869857 0.648513 0.159797 0.733536L3.3998 3.97798L0.155353 7.21798C0.108828 7.25782 0.0710408 7.30685 0.0443638 7.36199C0.0176868 7.41713 0.00269541 7.47719 0.000331191 7.5384C-0.00203303 7.59961 0.00828072 7.66065 0.030625 7.71768C0.0529692 7.77471 0.0868618 7.82651 0.130175 7.86983C0.173488 7.91314 0.225287 7.94703 0.28232 7.96937C0.339354 7.99172 0.40039 8.00203 0.461599 7.99967C0.522807 7.9973 0.582866 7.98231 0.638006 7.95564C0.693146 7.92896 0.742176 7.89117 0.782019 7.84465L4.02646 4.60465L7.26646 7.84465C7.35149 7.91746 7.46085 7.95551 7.57271 7.95119C7.68457 7.94687 7.79067 7.9005 7.86983 7.82134C7.94898 7.74219 7.99535 7.63608 7.99967 7.52423C8.00399 7.41237 7.96594 7.303 7.89313 7.21798L4.65313 3.97798Z" fill="currentColor"/>
</g>
<g id="pocket-icon">
<path d="M4 3H20C20.5304 3 21.0391 3.21071 21.4142 3.58579C21.7893 3.96086 22 4.46957 22 5V11C22 13.6522 20.9464 16.1957 19.0711 18.0711C17.1957 19.9464 14.6522 21 12 21C10.6868 21 9.38642 20.7413 8.17317 20.2388C6.95991 19.7362 5.85752 18.9997 4.92893 18.0711C3.05357 16.1957 2 13.6522 2 11V5C2 4.46957 2.21071 3.96086 2.58579 3.58579C2.96086 3.21071 3.46957 3 4 3V3Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 10L12 14L16 10" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="female-doc-icon">
<path d="M19 20.5998V17.9998C19 16.7268 18.4943 15.5059 17.5941 14.6057C16.6939 13.7055 15.473 13.1998 14.2 13.1998H5.8C4.52696 13.1998 3.30606 13.7055 2.40589 14.6057C1.50571 15.5059 1 16.7268 1 17.9998V20.5998" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.0224 2.14644L11.0225 2.14647C11.5177 2.3774 11.9809 2.8351 12.2341 3.35411C12.3853 3.6639 12.4327 3.83989 12.4936 4.6601C12.5786 5.80481 12.8104 6.70867 13.2545 7.5H6.73668C7.22428 6.60813 7.51469 5.50466 7.51469 4.51072C7.51469 3.37574 8.22022 2.36651 9.18501 2.03336L9.18501 2.03335C9.40344 1.95792 9.73549 1.92146 10.0986 1.94322C10.4605 1.9649 10.7965 2.04103 11.0224 2.14644ZM3.82025 9.45811C3.55181 9.33516 3.40039 9.10859 3.40039 8.8203C3.40039 8.64059 3.55782 8.4157 4.05197 7.88965C4.70465 7.19476 5.22259 6.35363 5.41213 5.681C5.46432 5.49556 5.54258 4.92644 5.58587 4.41623C5.68076 3.29989 5.87392 2.7 6.38832 1.92395C6.99561 1.00797 8.05796 0.286361 9.09182 0.0876055C11.3133 -0.339323 13.3501 0.821686 14.1476 2.96973C14.2602 3.27284 14.361 3.82258 14.4102 4.40266C14.4541 4.92028 14.5329 5.49556 14.5851 5.681C14.7746 6.35363 15.2925 7.19476 15.9452 7.88965C16.6164 8.60417 16.7071 8.81482 16.506 9.19168C16.4515 9.29383 16.4073 9.37045 16.273 9.42793L16.309 9.5H15.9949C15.3808 9.5991 13.9107 9.60029 10.0643 9.59998C6.34521 9.59972 4.17141 9.56845 3.97019 9.51248C3.95608 9.50855 3.94221 9.50439 3.92857 9.5H3.80629L3.82025 9.45811Z" fill="currentColor"/>
</g>
<g id="near-me">
<g clip-path="url(#clip0)">
<path d="M21 10.877C21 17.877 12 23.877 12 23.877C12 23.877 3 17.877 3 10.877C3 8.49 3.94821 6.20082 5.63604 4.51299C7.32387 2.82516 9.61305 1.87695 12 1.87695C14.3869 1.87695 16.6761 2.82516 18.364 4.51299C20.0518 6.20082 21 8.49 21 10.877Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M12 13.877C13.6569 13.877 15 12.5338 15 10.877C15 9.2201 13.6569 7.87695 12 7.87695C10.3431 7.87695 9 9.2201 9 10.877C9 12.5338 10.3431 13.877 12 13.877Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="24" fill="currentColor" transform="translate(0 0.876953)"/>
</clipPath>
</defs>
</g>
<g id="video-consulation">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.6 12.5668C15.6 12.7124 15.5208 12.8464 15.3932 12.9168C15.2656 12.9872 15.11 12.9828 14.9868 12.9048L12.4348 11.2956V12.8C12.4348 13.0208 12.2556 13.2 12.0348 13.2H4.8C4.5792 13.2 4.4 13.0208 4.4 12.8V7.2C4.4 6.9792 4.5792 6.8 4.8 6.8H12.0348C12.2556 6.8 12.4348 6.9792 12.4348 7.2V8.7044L14.9868 7.0952C15.11 7.0172 15.2656 7.0128 15.3932 7.0832C15.5208 7.1536 15.6 7.2876 15.6 7.4332V12.5668ZM17.0712 2.9288C15.1824 1.04 12.6712 0 10 0C7.3288 0 4.8176 1.04 2.9288 2.9288C1.0404 4.8176 0 7.3288 0 10C0 11.8368 0.5004 13.626 1.4492 15.1872L0.0204004 19.4736C-0.0271996 19.6172 0.0099997 19.7756 0.1172 19.8828C0.1936 19.9592 0.2956 20 0.4 20C0.4424 20 0.4852 19.9932 0.5264 19.9796L4.8128 18.5508C6.374 19.4996 8.1632 20 10 20C12.6712 20 15.1824 18.96 17.0712 17.0712C18.96 15.1824 20 12.6712 20 10C20 7.3288 18.96 4.8176 17.0712 2.9288Z" fill="currentColor"/>
</g>
<g id="online-now">
<path d="M16 21.8276V19.8276C16 18.7668 15.5786 17.7494 14.8284 16.9992C14.0783 16.2491 13.0609 15.8276 12 15.8276H5C3.93913 15.8276 2.92172 16.2491 2.17157 16.9992C1.42143 17.7494 1 18.7668 1 19.8276V21.8276" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 11.8276C10.7091 11.8276 12.5 10.0368 12.5 7.82764C12.5 5.6185 10.7091 3.82764 8.5 3.82764C6.29086 3.82764 4.5 5.6185 4.5 7.82764C4.5 10.0368 6.29086 11.8276 8.5 11.8276Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M17 11.8276L19 13.8276L23 9.82764" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="od-care">
<path d="M23 7.13379L16 12.1338L23 17.1338V7.13379Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14 5.13379H3C1.89543 5.13379 1 6.02922 1 7.13379V17.1338C1 18.2384 1.89543 19.1338 3 19.1338H14C15.1046 19.1338 16 18.2384 16 17.1338V7.13379C16 6.02922 15.1046 5.13379 14 5.13379Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="most-experience">
<path d="M20 7.90405H4C2.89543 7.90405 2 8.79948 2 9.90405V19.9041C2 21.0086 2.89543 21.9041 4 21.9041H20C21.1046 21.9041 22 21.0086 22 19.9041V9.90405C22 8.79948 21.1046 7.90405 20 7.90405Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 21.9041V5.90405C16 5.37362 15.7893 4.86491 15.4142 4.48984C15.0391 4.11477 14.5304 3.90405 14 3.90405H10C9.46957 3.90405 8.96086 4.11477 8.58579 4.48984C8.21071 4.86491 8 5.37362 8 5.90405V21.9041" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="available-today">
<path d="M19 4.3501H5C3.89543 4.3501 3 5.24553 3 6.3501V20.3501C3 21.4547 3.89543 22.3501 5 22.3501H19C20.1046 22.3501 21 21.4547 21 20.3501V6.3501C21 5.24553 20.1046 4.3501 19 4.3501Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M16 2.3501V6.3501" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 2.3501V6.3501" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 10.3501H21" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="high-rating">
<path d="M7 22.2163H4C3.46957 22.2163 2.96086 22.0056 2.58579 21.6305C2.21071 21.2554 2 20.7467 2 20.2163V13.2163C2 12.6859 2.21071 12.1772 2.58579 11.8021C2.96086 11.427 3.46957 11.2163 4 11.2163H7M14 9.21631V5.21631C14 4.42066 13.6839 3.6576 13.1213 3.09499C12.5587 2.53238 11.7956 2.21631 11 2.21631L7 11.2163V22.2163H18.28C18.7623 22.2218 19.2304 22.0527 19.5979 21.7403C19.9654 21.4279 20.2077 20.9932 20.28 20.5163L21.66 11.5163C21.7035 11.2297 21.6842 10.937 21.6033 10.6586C21.5225 10.3801 21.3821 10.1226 21.1919 9.90382C21.0016 9.68504 20.7661 9.51024 20.5016 9.39153C20.2371 9.27281 19.9499 9.21303 19.66 9.21631H14Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="discounts">
<g clip-path="url(#clip0)">
<path d="M23.2265 13.6091C22.935 13.0187 22.6341 12.4083 22.6341 11.9999C22.6341 11.5915 22.935 10.9811 23.2255 10.3912C23.7254 9.37594 24.2923 8.22516 23.8259 7.10088C23.3435 5.93811 22.1012 5.52069 21.0049 5.15276C20.431 4.9603 19.7807 4.74184 19.5187 4.48039C19.2583 4.21994 19.0398 3.56957 18.8473 2.99618C18.4799 1.8999 18.063 0.657141 16.8997 0.174735C15.7749 -0.291674 14.6247 0.275215 13.6099 0.774618C13.0195 1.06556 12.4091 1.366 11.9997 1.366C11.5913 1.366 10.9809 1.06556 10.391 0.775118C9.37619 0.275215 8.22442 -0.291174 7.10064 0.174735C5.93787 0.657141 5.52095 1.8999 5.15302 2.99618C4.96006 3.56957 4.7421 4.21994 4.48065 4.48089C4.2202 4.74234 3.56933 4.9603 2.99544 5.15326C1.89965 5.52119 0.656897 5.93861 0.173991 7.10088C-0.292418 8.22566 0.274971 9.37594 0.775373 10.3917C1.06632 10.9821 1.36726 11.592 1.36726 12.0004C1.36726 12.4088 1.06632 13.0192 0.775873 13.6096C0.276971 14.6244 -0.289918 15.7747 0.17649 16.899C0.658896 18.0622 1.90115 18.4797 2.99794 18.8476C3.57133 19.04 4.2217 19.2585 4.48265 19.519C4.7436 19.7804 4.96206 20.4308 5.15502 21.0047C5.52245 22.101 5.93986 23.3432 7.10264 23.8256C7.39758 23.9476 7.69402 23.9991 7.98896 23.9991C8.8203 23.9991 9.64364 23.5937 10.3925 23.2252C10.9824 22.9343 11.5923 22.6338 12.0012 22.6338C12.4101 22.6338 13.0205 22.9348 13.6109 23.2252C14.6262 23.7251 15.7769 24.2915 16.8997 23.8256C18.0625 23.3437 18.4799 22.101 18.8478 21.0047C19.0408 20.4308 19.2593 19.7804 19.5207 19.519C19.7817 19.258 20.432 19.04 21.0054 18.8471C22.1017 18.4792 23.3445 18.0622 23.8269 16.8995C24.2933 15.7752 23.7264 14.6244 23.2265 13.6091ZM21.4313 14.4924C21.7128 15.0638 22.0982 15.8457 21.9787 16.1331C21.8448 16.4561 20.9914 16.7425 20.3685 16.9515C19.5477 17.2269 18.6994 17.5118 18.1065 18.1052C17.5126 18.6986 17.2277 19.5475 16.9522 20.3678C16.7428 20.9912 16.4563 21.8445 16.1334 21.978C15.8429 22.0984 15.0636 21.7115 14.4937 21.4311C13.6978 21.0392 12.8755 20.6337 12.0007 20.6337C11.1264 20.6337 10.3035 21.0392 9.50867 21.4306C8.93778 21.712 8.15843 22.0984 7.86799 21.978C7.54555 21.8445 7.25911 20.9912 7.05015 20.3683C6.7747 19.5475 6.48976 18.6986 5.89587 18.1047C5.30249 17.5118 4.45465 17.2274 3.63431 16.9515C3.01144 16.7425 2.1576 16.4556 2.02363 16.1321C1.90415 15.8447 2.28958 15.0628 2.57102 14.4919C2.96295 13.6966 3.36837 12.8738 3.36837 11.9994C3.36837 11.1251 2.96245 10.3023 2.57052 9.50691C2.28908 8.93602 1.90365 8.15368 2.02213 7.86723C2.1566 7.5443 3.00994 7.25735 3.63332 7.04839C4.45415 6.77245 5.30299 6.4875 5.89587 5.89412C6.48926 5.30123 6.7737 4.4529 7.04965 3.63206C7.25861 3.00868 7.54555 2.15485 7.86799 2.02137C7.90498 2.00588 7.94997 1.99938 8.00146 1.99938C8.35289 1.99938 9.01126 2.32332 9.50917 2.56877C10.305 2.96069 11.1274 3.36561 12.0012 3.36561C12.8755 3.36561 13.6988 2.96019 14.4942 2.56877C15.0656 2.28782 15.8454 1.9019 16.1344 2.02187C16.4573 2.15585 16.7438 3.00918 16.9527 3.63256C17.2282 4.4534 17.5126 5.30173 18.106 5.89512C18.6999 6.4885 19.5482 6.77345 20.369 7.04889C20.9919 7.25785 21.8453 7.5448 21.9792 7.86773C22.0987 8.15518 21.7138 8.93752 21.4318 9.50841C21.0404 10.3038 20.635 11.1266 20.635 12.0004C20.6345 12.8743 21.0399 13.6971 21.4313 14.4924Z" fill="currentColor"/>
<path d="M16.6108 7.38611C16.2203 6.99569 15.587 6.99568 15.1965 7.38661L7.38955 15.2001C6.99962 15.5905 6.99962 16.2239 7.39005 16.6138C7.58551 16.8093 7.84096 16.9062 8.09691 16.9062C8.35286 16.9062 8.60881 16.8088 8.80428 16.6133L16.6113 8.79983C17.0012 8.40891 17.0012 7.77603 16.6108 7.38611Z" fill="currentColor"/>
<path d="M8.49566 6.35535C7.01195 6.35535 5.80469 7.56261 5.80469 9.04632C5.80469 10.5305 7.01195 11.7378 8.49566 11.7378C9.97937 11.7378 11.1861 10.5305 11.1861 9.04632C11.1861 7.56261 9.97937 6.35535 8.49566 6.35535ZM8.49566 9.73818C8.11473 9.73818 7.80429 9.42774 7.80429 9.04632C7.80429 8.66489 8.11423 8.35495 8.49566 8.35495C8.87658 8.35495 9.18652 8.66539 9.18652 9.04632C9.18652 9.42774 8.87658 9.73818 8.49566 9.73818Z" fill="currentColor"/>
<path d="M15.5049 12.2617C14.0212 12.2617 12.8145 13.4694 12.8145 14.9536C12.8145 16.4373 14.0212 17.6441 15.5049 17.6441C16.9886 17.6441 18.1959 16.4368 18.1959 14.9536C18.1959 13.4689 16.9886 12.2617 15.5049 12.2617ZM15.5049 15.6445C15.124 15.6445 14.8141 15.3346 14.8141 14.9536C14.8141 14.5717 15.124 14.2613 15.5049 14.2613C15.8864 14.2613 16.1963 14.5717 16.1963 14.9536C16.1963 15.3346 15.8859 15.6445 15.5049 15.6445Z" fill="currentColor"/>
</g>
<defs>
<clipPath id="clip0">
<rect width="24" height="24" fill="currentColor"/>
</clipPath>
</defs>
</g>
<g id="cross-icon">
<path d="M17.9701 6L6.3042 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.3042 6L17.9701 18" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
<g id="male-doc-icon">
<path d="M16 21.3708V19.3708C16 18.31 15.5786 17.2925 14.8284 16.5424C14.0783 15.7922 13.0609 15.3708 12 15.3708H5C3.93913 15.3708 2.92172 15.7922 2.17157 16.5424C1.42143 17.2925 1 18.31 1 19.3708V21.3708" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8.5 11.3708C10.7091 11.3708 12.5 9.57996 12.5 7.37082C12.5 5.16168 10.7091 3.37082 8.5 3.37082C6.29086 3.37082 4.5 5.16168 4.5 7.37082C4.5 9.57996 6.29086 11.3708 8.5 11.3708Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 8.37082V14.3708" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M23 11.3708H17" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</g>
</defs>
</svg>
</div>
<script>
// javascript for scroll on click
(function(w){
w.addEventListener('load', function(){
const btn_left = document.getElementById('btn-left'),
btn_right = document.getElementById('btn-right'),
content = document.getElementById('new-search-filters');
const content_scroll_width = content.scrollWidth;
let content_scoll_left = content.scrollLeft;
if (btn_right) {
btn_right.addEventListener('click', () => {
content_scoll_left += 199;
if (content_scoll_left >= content_scroll_width) { content_scoll_left = content_scroll_width;
}
// check for button hide and show
if (content_scroll_width - 400) {
btn_left.style.display="block";
}
// check for button hide and show
content.scrollLeft = content_scoll_left;
});
}
if (btn_left) {
btn_left.addEventListener('click', () => {
content_scoll_left -= 199;
if (content_scoll_left <= 0) {
content_scoll_left = 0;
// check for button hide and show
btn_left.style.display="none";
// check for button hide and show
}
btn_right.style.display="block";
content.scrollLeft = content_scoll_left;
});
}
});
})(window);
document.addEventListener('DOMContentLoaded', () => {
var scrollLeftPrev = 0;
$('#new-search-filters').scroll(function () {
var $elem=$('#new-search-filters');
var newScrollLeft = $elem.scrollLeft(),
width=$elem.width(),
scrollWidth=$elem.get(0).scrollWidth;
var offset=8;
if (scrollWidth- newScrollLeft-width<1) {
$("#btn-right").hide();
$("#btn-left").show();
}
if (newScrollLeft === 0) {
$("#btn-right").show();
$("#btn-left").hide();
}
scrollLeftPrev = newScrollLeft;
});
});
// javascript for scroll on click ends here
</script>
</body>
</html>
💖 💪 🙅 🚩
Zain Muhammad
Posted on February 15, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.