Today I am going to show you how to add a search box on home page of any website.
At first edit or open the index.html file with notepad++.
Then find the <body> tag and bellow this tag find this line.
<div class="main">
And after this code just copy and paste the code bellow and save.
<div class="top-section">
<div style="float: right;">
<form action="https://www.google.com/search" method="GET" class="search-form">
<input type="text" name="q" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
</div>
</div>
After that you have to open the css folder and edit the style.css file with notepad++.
Now copy the code bellow and paste it in last of style.css file and save.
.search-form {
display: flex;
float: right;
margin-top: 0px;
margin-right: 3px;
margin-bottom: 5px;
}
.search-form input {
padding: 5px;
border: none;
border-radius: 4px 0 0 4px;
}
.search-form button {
padding: 5px 10px;
border: none;
background-color: #3498DB;
color: white;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.search-form button:hover {
background-color: #4a54e1;
}
Now refresh your website. All done !!!!!