A simple working search bar for HTML websites.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

41 lines
1.8 KiB

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<link href="style.css" type="text/css" rel="stylesheet">
<link href="web-fonts-with-css/css/all.css" rel="stylesheet">
</head>
<body>
<div id="search">
<i id="leftarrow" class="fas fa-angle-left"></i><i id="rightarrow" class="fas fa-angle-right"></i><a id="searchbutton" title="search"><i class="fas fa-search"></i></a><input id="searchfield" type="search" placeholder="Search all articles"/>
</div>
<article>
<a class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus fermentum sapien nunc. </a>
</article>
<article>
<a class="text">Praesent ultrices eros at ipsum facilisis mattis. Integer viverra in turpis non efficitur. Nam vel sem posuere, rutrum risus et, malesuada dolor. </a>
</article>
<article>
<a class="text">Donec accumsan quam felis. Fusce eget nisi quis eros pretium sollicitudin. Suspendisse at tellus nibh. Aliquam ut ipsum ac magna dapibus mollis non in odio.</a>
</article>
<article>
<a class="text">Phasellus sollicitudin mollis dui, non feugiat nibh dapibus eu. Nunc sodales, ex at laoreet lobortis, velit ex varius ipsum, nec pretium odio sapien in mi. A</a>
</article>
<article>
<a class="text">Nulla euismod feugiat turpis, eget fringilla dolor vehicula non. Etiam et volutpat magna, ut ullamcorper metus. Duis vulputate congue nibh, quis tincidunt magna gravida et.</a>
</article>
<article>
<a class="text">Aliquam vulputate, diam ut convallis scelerisque, nunc lorem vestibulum leo, ac porttitor odio lacus in arcu. Cras non justo dictum enim varius congue.</a>
</article>
<script src="jquery-3.4.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>