xxxxxxxxxx1
<div class="container my-5 py-5 z-depth-1">2
3
4
<!--Section: Content-->5
<section class="">6
7
<p class="text-center font-weight-bold">Filter panel</p>8
9
<style>10
.link-black a {11
color: black;12
}13
14
.link-black a:hover {15
color: #0056b3;16
}17
18
.link-black .active {19
color: #0056b3;20
}21
22
.divider-small {23
width: 30px;24
background-color: rgba(0, 0, 0, .1);25
height: 3px;26
}27
</style>28
29
30
<!--Grid row-->31
<div class="row d-flex justify-content-center">32
33
<!--Grid column-->34
<div class="col-lg-3 col-md-5 col-sm-12 border p-4">35
36
<!-- Filter panel -->37
<div class="mb-5">38
<h5 class="font-weight-bold mb-3">Order by</h5>39
40
<div class="divider-small mb-3"></div>41
42
<ul class="list-unstyled link-black">43
<li class="mb-2">44
<a href="" class="active">Default</a>45
</li>46
<li class="mb-2">47
<a href="" class="">Popularity</a>48
</li>49
<li class="mb-2">50
<a href="" class="">Rating</a>51
</li>52
<li class="mb-2">53
<a href="" class="">Price: low to high</a>54
</li>55
<li class="mb-2">56
<a href="" class="">Price: high to low</a>57
</li>58
</ul>59
</div>60
<!-- Filter panel -->61
62
<!-- Filter panel -->63
<div class="mb-5">64
65
<h5 class="font-weight-bold mb-3">Category</h5>66
67
<div class="divider-small mb-3"></div>68
69
<div class="form-check pl-0 mb-2">70
<input type="radio" class="form-check-input" id="materialGroupExample1" name="groupOfMaterialRadios">71
<label class="form-check-label" for="materialGroupExample1">All</label>72
</div>73
74
<div class="form-check pl-0 mb-2">75
<input type="radio" class="form-check-input" id="materialGroupExample2" name="groupOfMaterialRadios"76
checked>77
<label class="form-check-label" for="materialGroupExample2">Laptops</label>78
</div>79
80
<div class="form-check pl-0 mb-2">81
<input type="radio" class="form-check-input" id="materialGroupExample3" name="groupOfMaterialRadios">82
<label class="form-check-label" for="materialGroupExample3">Smartphones</label>83
</div>84
85
<div class="form-check pl-0 mb-2">86
<input type="radio" class="form-check-input" id="materialGroupExample4" name="groupOfMaterialRadios">87
<label class="form-check-label" for="materialGroupExample4">Tablets</label>88
</div>89
90
</div>91
<!-- Filter panel -->92
93
<!-- Filter panel -->94
<div class="mb-5">95
96
<h5 class="font-weight-bold mb-3">Price</h5>97
98
<div class="divider-small mb-3"></div>99
100
<form class="range-field">101
<input type="range" min="0" max="319" />102
</form>103
104
<div class="row justify-content-center">105
106
<!-- Grid column -->107
<div class="col-md-6 text-left">108
<p class="dark-grey-text"><strong id="resellerEarnings">0$</strong></p>109
</div>110
<!-- Grid column -->111
112
<!-- Grid column -->113
<div class="col-md-6 text-right">114
<p class="dark-grey-text"><strong id="clientPrice">319$</strong></p>115
</div>116
<!-- Grid column -->117
</div>118
119
</div>120
<!-- Filter panel -->121
122
<!-- Filter panel -->123
<div class="link-black">124
125
<h5 class="font-weight-bold mb-3">Rating</h5>126
127
<div class="divider-small mb-3"></div>128
129
<div class="amber-text fa-sm mb-1">130
<i class="fas fa-star"></i>131
<i class="fas fa-star"></i>132
<i class="fas fa-star"></i>133
<i class="fas fa-star"></i>134
<i class="fas fa-star"></i>135
<a href="" class="ml-2 active">4 and more</a>136
</div>137
138
<div class="amber-text fa-sm mb-1">139
<i class="fas fa-star"></i>140
<i class="fas fa-star"></i>141
<i class="fas fa-star"></i>142
<i class="fas fa-star"></i>143
<i class="fas fa-star"></i>144
<a href="" class="ml-2">3 - 3,99</a>145
</div>146
147
<div class="amber-text fa-sm mb-1">148
<i class="fas fa-star"></i>149
<i class="fas fa-star"></i>150
<i class="fas fa-star"></i>151
<i class="fas fa-star"></i>152
<i class="fas fa-star"></i>153
<a href="" class="ml-2">3.00 and less</a>154
</div>155
156
</div>157
<!-- Filter panel -->158
159
</div>160
<!--Grid column-->161
162
</div>163
<!--Grid row-->164
165
166
</section>167
<!--Section: Content-->168
169
170
</div>1
1
1
1
Console errors: 0