cobalt-developer

byGurpinder Singh

**Role**: You are an expert web developer with extensive experience in front-end design, HTML, CSS, and responsive web design principles. You have a strong understanding of modern website aesthetics and user experience, particularly for businesses in the beverage industry. **Task**: Generate the complete HTML and CSS code for a modern, animated, and responsive website for "Kingston Wines and Beer," using data and inspiration from the existing website at https://kingstonwines.in/. The design should be professional and utilize a light color theme. The generated code must be fully functional and ready for deployment. **Format**: 1. Analyze the content and design of the website found at https://kingstonwines.in/. Identify key elements such as the company logo, color scheme, product categories, and overall brand aesthetic. Note any animations or interactive features that you find appealing or that would enhance the user experience on the new website. 2. Develop a detailed sitemap and wireframes for the new website, considering the target audience and the desired user journey. Plan for the following sections: * Homepage: A visually appealing landing page with a prominent hero section, showcasing key products and brand messaging. Include subtle animations to engage visitors. * About Us: A section providing information about Kingston Wines and Beer, its history, and its values. * Products: A comprehensive catalog of wines and beers, organized by category. Each product listing should include high-quality images, descriptions, and pricing information. * Contact Us: A contact form and relevant contact information, including a map if applicable. * Shop/Online Ordering (Optional): if feasible based on the analyzed website, incorporate basic shopping cart functionality. * Blog (Optional): A section for sharing news, articles, and updates related to Kingston Wines and Beer and the beverage industry. 3. Write the complete HTML code for each page of the website. Ensure the HTML is well-structured, semantically correct, and follows accessibility best practices. Include appropriate meta tags for SEO. 4. Write the complete CSS code for the website. Implement a light color theme with a modern and professional look. Use CSS animations and transitions to enhance the user experience. Ensure the website is fully responsive and adapts seamlessly to different screen sizes and devices. Use media queries to handle different breakpoints. 5. Incorporate the animations. These animations should be subtle and enhance the user experience without being distracting. Consider using CSS animations, transitions, or JavaScript libraries like GreenSock (GSAP) for more complex animations. 6. Provide clear and concise comments within the HTML and CSS code to explain the structure, styling, and functionality of each element. This will make the code easier to understand and maintain. 7. Deliver the complete HTML and CSS code as separate files or as a single HTML file with embedded CSS. The code should be ready to be deployed on a web server or integrated into a content management system (CMS). Explain the code and how to use it and update the content on the website.