Chemisearch

This is a search engine called Chemisearch, where you can search for companies that sells these products:

This project is an online directory of chemicals in Brazil, you can find all of the requirements here. You can find the video presentation in this link.

In this project, I built:

• The main page, with a link to the results page by clicking the "search" button or the "companies" link in the navbar;
• The search results page, with a list of chemical companies, each with a link to the detail company page;
• The detail company page.

Each of these pages have versions for 3 different screen sizes:

• mobile: up to 768px;
• tablet: up to 1024px;
• desktop: from 1024px.

I followed the guidelines of the given design, including:

• Colors;
• Typographies: font face, size, and weight (used a similar one given the design);
• Layout: composition and space between elements, for the 3 given screen sizes.

In this project I:

• Used semantic HTML tags;
• Used CSS selectors correctly;
• Used HTML elements box model (margin, padding, width, height);
• Used industry-standard tools (flexbox) to place elements in the page;
• Created UIs adaptable to different screen sizes using media queries;
• Applied front-end best practices;
• Used CSS grid and flexbox;
• Used SASS.

What it does

This page shows a search engine for chemical products in Brazil.

Built with

HTML, CSS and SASS.

Live Demo

Click for live webpage

Getting Started

You will be redirected to a webpage where you can start a search for a company that sells the chemical products you want. You can refine your search by name, state, distance and price range. Also, when you click the search button, basic information about the company you selected will be shown.

Author

Murilo Roque Paiva da Silva

Github: @MuriloRoque

Twitter: @MuriloRoquePai1

Linkedin: MuriloRoque

🤝 Contributing

Contributions, issues and feature requests are welcome! Start by:

• Forking the project
• Cloning the project to your local machine
• cd into the project directory
• Run git checkout -b your-branch-name
• Make your contributions
• Push your branch up to your forked repository
• Open a Pull Request with a detailed description to the development branch of the original project for a review

Show your support

Give a ⭐️ if you like this project!

Acknowledgments

• The original design is attributed to Mathew Njuguna, Sam Achola and Kevin Mutua, original design

📝 License

• The original design is licenced under the Creative Commons 4.0 licence