Make a Search Bar using HTML/CSS/JavaScript

in this tutorial, I will show you how to make an awesome search bar with a beautiful animation using HTML, CSS, and JavaScript.
it's a simple project that will add some originality to your web site. of course, you can download the project from the link at the bottom of this article. so let's start coding.

HTML Code

 <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- doctorcodetutorial_ads-content_AdSense2_1x1_as -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-3668461567243783"
     data-ad-slot="8591495914"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS code

 @import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto&display=swap');
*{
    margin: 0;
    padding: 0;
    outline: 0;
    font-family: 'Roboto',sans-serif;
}

nav{
    width: 100%;
    height: 64px;
    background-color: #3949ab;
    position: relative;
    z-index: 1;
}
.container{
    width: 80%;
    position: absolute;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
}
nav h1{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fafafa;
    text-transform: uppercase;
}
nav button{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    background-image: url(55369.png);
    background-size: cover;
    background-position: center;
    border: none;
    background-color: transparent;
    width: 30px;
    height: 30px;
}
.hide{
    position: relative;
    z-index: 0;
    opacity: 0;
    margin-top: -64px;
}
#search{
    width: 100%;
    height: 64px;
    background-color: #3949ab;
    transition: .4s;
}
#search input{
    width: calc(100% - 180px);
    padding: 10px 15px;
    margin-right: 25px;
    background-color: transparent;
    border: none;
    font-size: 1.5rem;
    border-bottom: 3px solid #fafafa;
    color: #fafafa;
    transition: .4s;
}
#search input::placeholder{
    color: #b2b2b2;
    font-family: 'Open Sans',sans-serif;
}
#search button:hover{
    color: #212121;
    background-color: #fafafa;
}
#search button{
    padding: 10px 25px;
    border: 2px solid #fafafa;
    background-color: transparent;
    color: #fafafa;
    transition: .4s;
}
.content{
    padding: 50px 0;
}
.content h1{
    font-size: 2.3rem;
    margin-bottom: 30px;
    text-transform: uppercase;
}
.content img{
    width: 100%;
    margin-bottom: 50px;
}

.content p{
    font-size: 1.5rem;
    line-height: 3rem;
    margin-bottom: 100px;
}

JavaScript Code

 
var searchbar = document.querySelector("#search");
function slide(){
    
    if(searchbar.classList.contains("hide")){
        searchbar.classList.remove("hide");
    }else{
         searchbar.classList.add("hide");
    }
}

this was the source code of the project, of course, you can download the project from the link bellow

DOWNLOAD