Fronted (HTML + CSS + JS) Adaptive layout in Figma

Task Need to create a stylish responsive email template based on the provided text and prepare it for upload to the email marketing service. What needs to be done Design the email. Code a responsive HTML email. Insert the provided text. Prepare blocks for images and icons. Add CTA buttons. Prepare links with UTM tags. Create a plain-text version of the email. Check rendering in major email clients. Prepare the final file for upload to the mailing service. Design Requirements A clean, modern, premium-style email is needed. The email should be easy to read, not overloaded, with a clear structure, short text blocks, visual accents, and several CTA buttons. Technical Requirements Responsive HTML email coding; Correct rendering on desktop and mobile; Table-based layout; Container width approximately 600–700 px; Inline CSS / email-compatible CSS; Buttons must be HTML/CSS, not images; All important data must be HTML text; Images must have alt text; No JavaScript; No forms inside the email; Links must work correctly; Preparation of UTM tags for CTA. Testing Need to check rendering in at least: Gmail; Apple Mail; Outlook; mobile email clients. Deliverables Ready HTML email file. Plain-text version. Preview or screenshots desktop/mobile. Instructions on where to change links, text, and images. File/version ready for upload to the mailing service. In your response, please attach examples of HTML email newsletters you have created and specify which mailing services you have worked with.

Hello. It is necessary to make some adjustments on the WP site with a ready theme on ELEMENTOR. The site https://lingualink.pl/ 1. Replace the image on the first screen with an order form, which is currently triggered by a button. As a result, it should look like in the first screenshot. 2. Also, add a FAQ block, approximately like in the second screenshot.

It is necessary to create the layout based on Figma with desktop, mobile, dark version, light version, with animations where needed, sliders. It is also important to implement the component system blocks in such a way that when we later transfer this to the backend, we can simply continue reproducing these blocks. The final result we envision is an archive containing HTML pages for all pages, namely the main category, video page, and the necessary files for operation, including dynamic scripts, styles, and so on. Currently, we are laying this out with content that we take directly from Figma. But it is important that we can later transfer this to the backend.

It is necessary to reproduce as accurately as possible:– the structure of the pages; – the layout of the blocks; – the catalog grid; – the sizes of the elements; – the margins; – the typography; – the colors; – the header and footer; – product cards – the menu structure; – menu categories; – modal windows; – adaptive behavior; – hover, active, and mobile states. – the product page must have microdata for products – Pages must be optimized according to Google SEO recommendations1. Type of siteResponsive online sushi delivery store.Main versions:– desktop – from 1280 px; – tablet – 768–1279 px; – mobile – 320–767 px.2. NavigationHomeCategoriesPromotionsAbout UsDelivery and PaymentContactsMenuProduct CardShopping CartPage TemplateThe “Page Template” block should contain:– header;– breadcrumb;— “up” arrow— Light and dark theme switcher with user choice retention.— A watermark with the logo on the background of the page— Fix an image of chopsticks on the right edge of the background— Footer ResultDeliver:– Figma mockup for desktop and mobile; – HTML files; – CSS; – JavaScript; – a folder with placeholders; – responsive version of the page; – archive of the completed project.The main requirement is the most accurate reproduction of the structure, design, and behavior of the page example.com

Continuation of the project. Redesign and relaunch of the Brovchak Family Dental Care clinic website 0680006609 http://brovchak-clinic.com.ua/ specifications from SEO expert https://docs.google.com/spreadsheets/d/17_WyPf3XVpzbuBjpJ7MNFs12QUL-aHv7iIbKudY-IEw/edit?gid=0#gid=0 https://miro.com/app/board/uXjVHXxFvIE=/About the project A complete redesign of the existing dental clinic website is required based on the ready prototype in Miro. The result should include: UI/UX design responsive layout WordPress integration SEO-safe relaunch technical optimization analytics setup the ability for easy self-editing of content It is critically important: the website must not only look modern but also improve business metrics and not lose current SEO positions.Business goals of the project The redesign is being carried out to: increase the number of inquiries from the website; improve the conversion of booking forms; enhance trust in the clinic; demonstrate the expertise of the doctors; present complex clinical cases; form a premium positioning; increase the number of inquiries for implants, orthopedics, and comprehensive treatment.Visual conceptPositioning Premium author dentistry. Not a chain clinic. Not a mass flow of patients. Individual approach, predictable results, and complex clinical solutions.The emotion the website should evoke "Here, not just dentists work. Here, a team of experts creates long-term and predictable solutions, paying attention to every detail."Style Workshop / Dental Atelier. Author's dentistry. Premium minimalism. Focus on: microscopy; navigational implantation; digital scanning; gnathology; complex rehabilitations. Use: large professional photos of doctors; photos of doctors at work; real patient cases; photos of the clinic. Minimize or completely exclude: stock photos; template dental images; typical design solutions of chain clinics.SEO and relaunch Critical requirement: The redesign must not lead to a significant drop in organic traffic. It is necessary to: preserve the SEO structure of the website; preserve or correctly transfer URLs; set up 301 redirects; transfer all meta tags; preserve page indexing; check robots.txt; check sitemap.xml; check canonical; check schema.org; perform an SEO audit before and after the launch.KPI SEO Permissible drop in organic traffic after launch: no more than 10%. Preference will be given to performers who have successful cases of SEO-safe migrations.UX and conversion The website must provide: quick access to booking a consultation; clear service structure; simple navigation; mobile convenience; quick contact with the clinic. Anticipate: CTA blocks; booking forms; quick call; messengers; trust blocks; video testimonials; treatment cases.Technical requirementsSpeed Google PageSpeed: Desktop — 90+ Mobile — 95+ Core Web Vitals must meet Google's recommendations.Optimization It is necessary to: optimize CSS; optimize JS; set up caching; optimize images; use WebP; minimize third-party scripts.Code quality Important: clean code; absence of unnecessary plugins; use of WordPress's built-in capabilities and theme; compatibility with future WordPress updates.AI assistant (agent) A solution for implementing an AI consultant needs to be proposed. Desired functionality: answers to typical questions; booking a consultation; integration with Telegram; integration with Instagram Direct; integration with Facebook Messenger; integration with Viber; transfer leads to CRM or administrators, or to a Telegram bot Please describe the proposed solution separately.Work result The output should include: New website design. Responsive layout. SEO-safe launch. Optimized code. Configured analytics. Administrator instructions. Warranty support after launch. Implementation of AI Search and AI output Within the project, a separate set of works is required to prepare the website for Google AI Overviews, AI Mode, ChatGPT, Gemini, Perplexity, Copilot, and other AI search engines. The work includes: Designing the entity map of the clinic: organization, branches, doctors, services, cases, articles, FAQ, videos, and prices. Creating logical connections between: doctors and services; services and cases; services and FAQ; articles and authors; branches and available treatment directions. Implementing structured data JSON-LD: Organization; MedicalClinic / Dentist; LocalBusiness; Person; ProfilePage; Service; MedicalProcedure — where semantically correct; Article / BlogPosting; VideoObject; FAQPage; BreadcrumbList; WebSite; WebPage; ImageObject. Creating structured content types in WordPress: services; doctors; cases; articles; FAQ; videos; branches; prices. Implementing ACF connections between content types and automatic generation of schema.org from approved fields. Building FAQ in three levels: FAQ on service pages; separate expert decision-guide pages; general patient question center. Ensuring the accessibility of main content in HTML without dependence on client-side JavaScript, images, or PDF. Implementing authorship of medical content: author; medical reviewer; publication date; update date; link to the doctor's profile. Adding transcripts to expert videos and linking videos with services, doctors, and cases. Checking robots.txt, sitemap.xml, canonical, noindex, snippet controls, and site accessibility for search and AI crawlers. Setting up tracking of AI traffic: separate channel group in GA4; referrer sources ChatGPT, Perplexity, Gemini, Copilot, Claude; transferring the source to CRM and Telegram applications; report in Looker Studio; accounting for self-reported attribution from patients. Creating a basic set of queries for regular monitoring of the clinic's visibility in AI output. Checking structured data through Rich Results Test and Schema Markup Validator. Preparing instructions for the administrator: how to add FAQ; how to create a case; how to specify the author; how to update the medical review date; how to add video and transcript; how to link material with service and doctor. other.