xxxxxxxxxx1
<section class="intro">2
<div class="bg-image h-100" style="background-color: #aaf0d1;">3
<div class="mask d-flex align-items-center h-100">4
<div class="container">5
<div class="row">6
<div class="col-md-10 col-lg-8 col-xl-7 mx-auto">7
<div class="card mb-2"8
style="border-radius: 10em; background: linear-gradient(to right, #F0B6D5, #A38495);">9
<div class="card-body p-2">10
<div class="input-group input-group-lg">11
<input type="text" class="form-control form-control-lg rounde bg-transparent text-white"12
placeholder="Type Keywords" aria-label="Type Keywords" aria-describedby="basic-addon2" />13
<span class="input-group-text border-0" id="basic-addon2"><i14
class="fas fa-search fa-lg text-white"></i></span>15
</div>16
</div>17
</div>18
<div class="card" style="background-color: #edeaea;">19
<div class="card-body p-4">20
<h6 class="text-uppercase mt-3 mb-4" style="color: #A38495;">Advanced search</h6>21
<div class="row">22
<div class="col-md-4 mb-3">23
<div class="dropdown">24
<a class="btn btn-light btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"25
id="dropdownMenuLink" data-mdb-toggle="dropdown" aria-expanded="false">26
Accessories27
</a>28
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">29
<li><a class="dropdown-item" href="#">Action</a></li>30
<li><a class="dropdown-item" href="#">Another action</a></li>31
<li><a class="dropdown-item" href="#">Something else here</a></li>32
</ul>33
</div>34
</div>35
<div class="col-md-4 mb-3">36
<div class="dropdown">37
<a class="btn btn-light btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"38
id="dropdownMenuLink1" data-mdb-toggle="dropdown" aria-expanded="false">39
Color40
</a>41
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">42
<li><a class="dropdown-item" href="#">Action</a></li>43
<li><a class="dropdown-item" href="#">Another action</a></li>44
<li><a class="dropdown-item" href="#">Something else here</a></li>45
</ul>46
</div>47
</div>48
<div class="col-md-4 mb-3">49
<div class="dropdown">50
<a class="btn btn-light btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"51
id="dropdownMenuLink2" data-mdb-toggle="dropdown" aria-expanded="false">52
Size53
</a>54
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink2">55
<li><a class="dropdown-item" href="#">Action</a></li>56
<li><a class="dropdown-item" href="#">Another action</a></li>57
<li><a class="dropdown-item" href="#">Something else here</a></li>58
</ul>59
</div>60
</div>61
</div>62
<div class="row">63
<div class="col-md-4 mb-3">64
<div class="dropdown">65
<a class="btn btn-light btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"66
id="dropdownMenuLink3" data-mdb-toggle="dropdown" aria-expanded="false">67
Sale68
</a>69
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink3">70
<li><a class="dropdown-item" href="#">Action</a></li>71
<li><a class="dropdown-item" href="#">Another action</a></li>72
<li><a class="dropdown-item" href="#">Something else here</a></li>73
</ul>74
</div>75
</div>76
<div class="col-md-4 mb-3">77
<div class="dropdown">78
<a class="btn btn-light btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"79
id="dropdownMenuLink4" data-mdb-toggle="dropdown" aria-expanded="false">80
Time81
</a>82
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink4">83
<li><a class="dropdown-item" href="#">Action</a></li>84
<li><a class="dropdown-item" href="#">Another action</a></li>85
<li><a class="dropdown-item" href="#">Something else here</a></li>86
</ul>87
</div>88
</div>89
<div class="col-md-4 mb-3">90
<div class="dropdown">91
<a class="btn btn-light btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"92
id="dropdownMenuLink5" data-mdb-toggle="dropdown" aria-expanded="false">93
Type94
</a>95
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">96
<li><a class="dropdown-item" href="#">Action</a></li>97
<li><a class="dropdown-item" href="#">Another action</a></li>98
<li><a class="dropdown-item" href="#">Something else here</a></li>99
</ul>100
</div>101
</div>102
</div>103
<div class="d-flex justify-content-between align-items-center mt-4">104
<p class="mb-0" style="color: #939597;"><span class="text-pink font-weight-bold">108 </span>results</p>105
<div>106
<button type="button" class="btn btn-link text-pink btn-rounded" data-mdb-ripple-color="dark">107
Reset108
</button>109
<button type="button" class="btn btn-rounded purple-gradient">Search</button>110
</div>111
</div>112
</div>113
</div>114
</div>115
</div>116
</div>117
</div>118
</div>119
</section>xxxxxxxxxx1
html,2
body,3
.intro {4
height: 100%;5
}6
7
.form-control {8
border-color: transparent;9
}10
11
.input-group>.form-control:focus {12
border-color: transparent;13
box-shadow: inset 0 0 0 1px transparent;14
}15
16
.btn-link:hover {17
color: #f0b6d5;18
background-color: rgba(255, 255, 255, .35);19
}20
21
.btn-link:active,22
.btn-link.active {23
color: #f0b6d5;24
background-color: rgba(255, 255, 255, .35);25
}26
27
.btn-link:focus,28
.btn-link.focus {29
color: #f0b6d5;30
background-color: rgba(255, 255, 255, .35);31
}32
33
.btn-link:active:focus,34
.btn-link.active:focus {35
color: #f0b6d5;36
background-color: rgba(255, 255, 255, .35);37
}38
39
.form-control::placeholder {40
color: #fff;41
}42
43
.purple-gradient {44
color: #fff;45
background: linear-gradient(to right, #F0B6D5, #A38495);46
}47
.btn.purple-gradient:hover {48
color: #fff;49
}50
51
.text-pink {52
color: #F0B6D553
}1
1
Console errors: 0