HTML
xxxxxxxxxx1
<section class="intro">2
<div class="bg-image h-100" style="background-color: #F5DF4D;">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
<div class="card-body d-flex justify-content-between py-2">9
<div class="input-group input-group-lg">10
<span class="input-group-text border-0 px-1" id="basic-addon2"><i class="fas fa-search fa-lg" style="color: #939597;"></i></span>11
<input type="text" class="form-control form-control-lg rounded" placeholder="Search"12
aria-label="Search" aria-describedby="basic-addon2" />13
</div>14
<p class="mb-0 d-flex flex-row align-self-center" style="color: #939597;"><span class="font-weight-bold pe-1">108 </span>results</p>15
</div>16
</div>17
<div class="card">18
<div class="card-body p-4">19
<h6 class="mt-3 mb-4" style="color: #939597;">Advanced search</h6>20
<div class="row">21
<div class="col-md-4 mb-3">22
<div class="dropdown">23
<a class="btn btn-outline-dark btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"24
id="dropdownMenuLink" data-mdb-toggle="dropdown" aria-expanded="false">25
Accessories26
</a>27
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">28
<li><a class="dropdown-item" href="#">Action</a></li>29
<li><a class="dropdown-item" href="#">Another action</a></li>30
<li><a class="dropdown-item" href="#">Something else here</a></li>31
</ul>32
</div>33
</div>34
<div class="col-md-4 mb-3">35
<div class="dropdown">36
<a class="btn btn-outline-dark btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"37
id="dropdownMenuLink1" data-mdb-toggle="dropdown" aria-expanded="false">38
Color39
</a>40
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink1">41
<li><a class="dropdown-item" href="#">Action</a></li>42
<li><a class="dropdown-item" href="#">Another action</a></li>43
<li><a class="dropdown-item" href="#">Something else here</a></li>44
</ul>45
</div>46
</div>47
<div class="col-md-4 mb-3">48
<div class="dropdown">49
<a class="btn btn-outline-dark btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"50
id="dropdownMenuLink2" data-mdb-toggle="dropdown" aria-expanded="false">51
Size52
</a>53
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink2">54
<li><a class="dropdown-item" href="#">Action</a></li>55
<li><a class="dropdown-item" href="#">Another action</a></li>56
<li><a class="dropdown-item" href="#">Something else here</a></li>57
</ul>58
</div>59
</div>60
</div>61
<div class="row">62
<div class="col-md-4 mb-3">63
<div class="dropdown">64
<a class="btn btn-outline-dark btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"65
id="dropdownMenuLink3" data-mdb-toggle="dropdown" aria-expanded="false">66
Sale67
</a>68
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink3">69
<li><a class="dropdown-item" href="#">Action</a></li>70
<li><a class="dropdown-item" href="#">Another action</a></li>71
<li><a class="dropdown-item" href="#">Something else here</a></li>72
</ul>73
</div>74
</div>75
<div class="col-md-4 mb-3">76
<div class="dropdown">77
<a class="btn btn-outline-dark btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"78
id="dropdownMenuLink4" data-mdb-toggle="dropdown" aria-expanded="false">79
Time80
</a>81
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink4">82
<li><a class="dropdown-item" href="#">Action</a></li>83
<li><a class="dropdown-item" href="#">Another action</a></li>84
<li><a class="dropdown-item" href="#">Something else here</a></li>85
</ul>86
</div>87
</div>88
<div class="col-md-4 mb-3">89
<div class="dropdown">90
<a class="btn btn-outline-dark btn-rounded btn-lg btn-block dropdown-toggle" href="#" role="button"91
id="dropdownMenuLink5" data-mdb-toggle="dropdown" aria-expanded="false">92
Type93
</a>94
<ul class="dropdown-menu" aria-labelledby="dropdownMenuLink5">95
<li><a class="dropdown-item" href="#">Action</a></li>96
<li><a class="dropdown-item" href="#">Another action</a></li>97
<li><a class="dropdown-item" href="#">Something else here</a></li>98
</ul>99
</div>100
</div>101
</div>102
<div class="d-flex justify-content-between align-items-center mt-4">103
<div>104
<button type="button" class="btn btn-dark btn-rounded">Search</button>105
<button type="button" class="btn btn-link btn-rounded" style="color: #939597;" data-mdb-ripple-color="dark">106
Delete107
</button>108
</div>109
</div>110
</div>111
</div>112
</div>113
</div>114
</div>115
</div>116
</div>117
</section>CSS
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
.btn-link:hover {16
background-color: rgba(0,0,0,.05);17
}18
.btn-link:active, .btn-link.active {19
background-color: rgba(0,0,0,.05);20
}21
.btn-link:focus, .btn-link.focus {22
background-color: rgba(0,0,0,.05);23
}24
.btn-link:active:focus, .btn-link.active:focus {25
background-color: rgba(0,0,0,.05);26
}JS
1
1
Console errors: 0