Skip to content

Latest commit

 

History

History
61 lines (45 loc) · 1.77 KB

README.md

File metadata and controls

61 lines (45 loc) · 1.77 KB

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

preview

Features

  • Smooth animation effects
  • Responsive design
  • Customizable styles

Usage

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

  1. Clone the repository to your local machine:
git clone https://github.com/withaarzoo/Animated-Searchbar.git
  1. Include the style.css file in your HTML file:
<link rel="stylesheet" href="style.css">
  1. 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>
  1. 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

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! 🌟