You can preview the code
Full code given below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
box-sizing: border-box;
}
#myInput[type=text]:focus {
border: none;
outline: none;
}
#myInput {
width: 100%;
font-size: 16px;
padding: 12px 40px 12px 20px;
border: none;
margin-bottom: 12px;
font-family: "Poppins", Sans-serif;
margin: 0 auto;
display: block
}
#myUL {
list-style-type: none;
padding: 0;
margin: 10px;
}
#myUL li {
width: 25%;
float: left;
padding: 10px 10px 30px 10px;
font-family: "Poppins", Sans-serif;
}
#myUL li a h1 {
padding: 15px 20px;
margin: 2px;
font-size: 14px;
background-color: #CF9945;
color: #ffffff;
text-align: center;
font-family: "Poppins", Sans-serif;
}
#myUL li a h3 {
padding: 20px 5px 5px 20px;
margin: 0;
font-size: 12px;
color: #CF9945;
text-align: left;
}
#myUL li a p {
padding: 5px 5px 5px 20px;
margin: 0;
font-size: 12px;
color: #787777;
text-align: left;
font-family: "Poppins", Sans-serif;
}
#myUL li a {
padding: 0px;
text-decoration: none;
font-size: 12px;
color: black;
display: block
font-family: "Poppins", Sans-serif;
}
.search-custom {
position: relative;
margin: 0 auto;
max-width: 700px;
border: 3px solid #CF9945;
padding: 0px 10px 0px 0px;
}
.search-custom i {
position: absolute;
right: 20px;
bottom: 15px;
color: #CF9945;
}
</style>
</head>
<body>
<div class="search-custom">
<input type="text" id="myInput" onkeyup="technicalFunction()" placeholder="Search try “surface preparation“ " title="Search try surface preparation" />
<i aria-hidden="true" class="fas fa-search"></i>
</div>
<script>
function technicalFunction() {
var input, filter, ul, li, a, i, txtValue;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
ul = document.getElementById("myUL");
li = ul.getElementsByTagName("li");
for (i = 0; i < li.length; i++) {
a = li[i].getElementsByTagName("a")[0];
txtValue = a.textContent || a.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
li[i].style.display = "";
} else {
li[i].style.display = "none";
}
}
}
</script>
<ul id="myUL">
<li>
<a href="#"><h1>TECHNICAL INFORMATION</h1></a>
<a href="#"><h3>Conversion Table</h3></a>
<a href="#"><p>Conversion Table 1</p></a>
<a href="#"><p>Conversion Table 2</p></a>
<a href="#"><p>Conversion Table 3</p></a>
<a href="#"><p>Conversion Table 4</p></a>
<a href="#"><h3>Preparation Method</h3></a>
<a href="#"><p>BASIC SURFACE PREPARATION</p></a>
<a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
<a href="#"><p>CONCRETE FLOORS</p></a>
<a href="#"><p>STEEL SURFACE PREPERATION</p></a>
<a href="#"><p>SAFETY & TECHNICAL</p></a>
<a href="#"><p>TECHNICAL INFORMATION</p></a>
<a href="#"><p>PAINT CALCULATION</p></a>
</li>
<li>
<a href="#"><h1>SURFACE PREPARATION</h1></a>
<a href="#"><h3>Conversion Table</h3></a>
<a href="#"><p>Conversion Table 1</p></a>
<a href="#"><p>Conversion Table 2</p></a>
<a href="#"><p>Conversion Table 3</p></a>
<a href="#"><p>Conversion Table 4</p></a>
<a href="#"><h3>Preparation Method</h3></a>
<a href="#"><p>BASIC SURFACE PREPARATION</p></a>
<a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
<a href="#"><p>CONCRETE FLOORS</p></a>
<a href="#"><p>STEEL SURFACE PREPERATION</p></a>
<a href="#"><p>SAFETY & TECHNICAL</p></a>
<a href="#"><p>TECHNICAL INFORMATION</p></a>
<a href="#"><p>PAINT CALCULATION</p></a>
</li>
<li>
<a href="#"><h1>DYES, STAINS & COLORS</h1></a>
<a href="#"><h3>Conversion Table</h3></a>
<a href="#"><p>Conversion Table 1</p></a>
<a href="#"><p>Conversion Table 2</p></a>
<a href="#"><p>Conversion Table 3</p></a>
<a href="#"><p>Conversion Table 4</p></a>
<a href="#"><h3>Preparation Method</h3></a>
<a href="#"><p>BASIC SURFACE PREPARATION</p></a>
<a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
<a href="#"><p>CONCRETE FLOORS</p></a>
<a href="#"><p>STEEL SURFACE PREPERATION</p></a>
<a href="#"><p>SAFETY & TECHNICAL</p></a>
<a href="#"><p>TECHNICAL INFORMATION</p></a>
<a href="#"><p>PAINT CALCULATION</p></a>
</li>
<li>
<a href="#"><h1>ALKYD BASED PAINTS</h1></a>
<a href="#"><h3>Conversion Table</h3></a>
<a href="#"><p>Conversion Table 1</p></a>
<a href="#"><p>Conversion Table 2</p></a>
<a href="#"><p>Conversion Table 3</p></a>
<a href="#"><p>Conversion Table 4</p></a>
<a href="#"><h3>Preparation Method</h3></a>
<a href="#"><p>BASIC SURFACE PREPARATION</p></a>
<a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
<a href="#"><p>CONCRETE FLOORS</p></a>
<a href="#"><p>STEEL SURFACE PREPERATION</p></a>
<a href="#"><p>SAFETY & TECHNICAL</p></a>
<a href="#"><p>TECHNICAL INFORMATION</p></a>
<a href="#"><p>PAINT CALCULATION</p></a>
</li>
<li>
<a href="#"><h1>ALKYD BASED PAINTS</h1></a>
<a href="#"><h3>Conversion Table</h3></a>
<a href="#"><p>Conversion Table 1</p></a>
<a href="#"><p>Conversion Table 2</p></a>
<a href="#"><p>Conversion Table 3</p></a>
<a href="#"><p>Conversion Table 4</p></a>
<a href="#"><h3>Preparation Method</h3></a>
<a href="#"><p>BASIC SURFACE PREPARATION</p></a>
<a href="#"><p>DIAGNOSTIC EXAMINATION OF SURFACE</p></a>
<a href="#"><p>CONCRETE FLOORS</p></a>
<a href="#"><p>STEEL SURFACE PREPERATION</p></a>
<a href="#"><p>SAFETY & TECHNICAL</p></a>
<a href="#"><p>TECHNICAL INFORMATION</p></a>
<a href="#"><p>PAINT CALCULATION</p></a>
</li>
</ul>
</body>
</html>
