The animated-searchbar from withaarzoo

animated-searchbar's Introduction

Animated Search Bar

This repository contains code for creating an animated search bar using HTML and CSS. The search bar expands and contracts smoothly to enhance user experience .

Preview

Features

Smooth animation effects
Responsive design
Customizable styles

Usage

To use this animated search bar in your project, follow these steps:

Clone the repository to your local machine:

git clone https://github.com/withaarzoo/Animated-Searchbar.git

Include the style.css file in your HTML file:

<link rel="stylesheet" href="style.css">

Copy the HTML code for the search bar from index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Animated Search Bar</title>
</head>
<body>
    <div class="search">
        <input type="text" placeholder="Search.." required>
    </div>
</body>
</html>

Customize the styles in style.css to match your project's design if needed.

Customization

You can customize various aspects of the search bar, such as colors, font, and size, by modifying the CSS variables in the style.css file.

Dependencies

This project uses the Google Fonts API to import the "Poppins" font for styling the search bar.

License

This project is licensed under the MIT License.

Credits

Font: Google Fonts - Poppins

Feel free to contribute to this project by creating pull requests or reporting issues. If you find this project helpful, don't forget to star it on GitHub! 🌟

Recommend Projects