Making of Simple search Page Using Html & CSS.

Step 1: Create one project folder search anywhere in your computer.

Step 2: You need to download Font Awesome so download font awesome from official site https://fontawesome.com/

Step 3: Now copy the downloaded file and extract the zip file into your search folder.

Step 4: Create new file search.html inside this search folder.

Copy and paste the following code in search.html.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="css/all.min.css">
	<link rel="stylesheet" type="text/css" href="style.css">
	<title>Search Box using Html & CSS</title>
</head>
<body>
	<div class="search-box">
		<input class="search-txt" type="text" name="" placeholder="Please search me">
		<a class="search-btn" href=""><i class="fas fa-search"></i></a>
	</div>
</body>
</html>

Step 5: Create another file style.css inside search folder.

Copy and paste the following code into the style.css file.

body{
	margin: 0;
	padding: 0;
	background: #082830;
}
.search-box{
	position: absolute;;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
    background: #2f3640;
    height: 40px;
    border-radius: 40px;
    padding: 10px;
}
.search-box:hover > .search-txt{
width: 240px;
padding: 0 6px;
}
.search-box:hover > .search-btn{
background: white;
}
.search-btn{
	color: #e84118;
	float: right;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #2f3640;
	display: flex;
	justify-content: center;
	align-items:center;
	transition: 0.4s; 
}
.search-txt{
	border: none;
	background: none;
	outline: none;;
	float: left;
	padding: 0;
	color: white;
    font-size: 16px;
    transition: 0.4s;
    line-height: 40px;
    width: 0px;
}

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *