Integrate Custom Graphics into an Existing Audio Loop Player Website Description:

Job ID: 38595879

Budget: $30 – $250 USD

I have an existing audio loop player website where the elements are already correctly positioned. A new custom graphic design has been created, and I need to replace the current elements with CSS-based solutions that align with the new graphics. It's important to note that no external links or libraries should be used. Currently, the website is referencing an external tailwind.min.css file, but I want everything to be consolidated into a single HTML file with inline CSS. Additionally, some buttons on the page have multiple (toggle) states, so it’s important that you check the current website's functionality before starting the project to understand how these toggle states work. These are simple buttons, and they should be reproduced using CSS without external libraries. Since there are only a few objects on the page, it would be ideal to handle all the graphics and styling directly in CSS, which should simplify the project and keep everything contained in one file. Also, the website previously worked well in mobile view before the elements were rearranged, so the new design should maintain that functionality. I will provide images to show how the site should look. Requirements: Replace the current elements with CSS solutions based on the provided graphics. Ensure the website works in mobile view as it did before. Remove any external links or CSS files, and include all styles inline in the HTML file. The final result should be a single HTML file with embedded CSS and no external dependencies. Understand how the toggle buttons work by reviewing the current website functionality before starting. Reproduce the simple buttons with CSS (no external libraries). Since there are few elements, it would be preferable to handle all styling and graphics in CSS. Let me know if you need more details or clarification.

IMPORTANT:
All development for testing and code verification should be on www.jaruc.com/test/
where now you can see and test the project. After agreement ftp passwd will be hangled. Have a Great Day!
Related categories: JavaScript Website Design CSS HTML5 HTML