Design and Create a Website

Task Description An experienced frontend developer or layout designer is needed for the phased update of a large existing website. The site has been operational for many years, contains a significant number of pages, various types of content, forms, tables, and interactive blocks. It uses a proprietary server system, with existing legacy HTML/CSS. A complete replacement of technologies or the content management system is not planned. In the first phase, a new responsive overall template for the site needs to be developed. After the successful completion of the first phase, a sequential update of internal pages is planned. The site name, URL, design mockups, and current output files will be provided to a limited number of candidates after preliminary selection based on portfolio and experience.What is Included in the First Phase The overall visual shell needs to be implemented: header for desktop and mobile versions; main and mobile navigation; utility elements of the header; overall container and page grid; navigation chain ("breadcrumbs"); basic interface elements: buttons, links, input fields; general typography styles with the possibility of phased connection; footer; responsive behavior of the template; compatibility of the new shell with pages that will temporarily remain in the old design. Unique internal blocks of individual pages do not need to be completely redesigned in the first phase.Project Features Large existing site with many types of pages. Existing legacy CSS and outdated HTML markup in places. The new design will be implemented gradually. Simultaneous complete replacement of all pages is not possible. The contractor does not gain access to the server, CMS, and working project. The client will independently integrate the prepared layout. The contractor will be provided with current CSS files, mockups, graphic materials, HTML fragments, and examples of pages as needed to complete the work. Several iterations are expected after the test integration into the real project.Technical Approach The new CSS is expected to be connected over the existing styles with subsequent gradual migration and removal of outdated rules. The following is allowed: creating new CSS/SCSS files; proposing changes to the HTML of the common parts of the template; correcting existing CSS rules that hinder implementation; proposing improvements to the DOM structure; creating new reusable components. Changes to the existing CSS must be submitted separately in the form of: patch/diff file; separate compatibility file; or a documented list of changed rules and selectors. The following must be avoided: uncontrolled use of !important; deeply nested and fragile CSS selectors; binding styles to text or the ordinal number of an element; duplicating all markup separately for desktop and mobile versions; connecting heavy frameworks without prior agreement; global rules that may disrupt the display of pages that have not yet been updated.Quality Requirements The project is designed for further long-term development. A one-time "fitting to a screenshot" is not needed, but rather clean, professional, and maintainable markup. The following is expected: clear component structure; reusable CSS classes; CSS custom properties for colors, sizes, margins, and other design tokens; reasonable specificity of selectors; semantic HTML5 markup; correct hierarchy of headings; absence of unnecessary DOM wrappers; absence of duplicate content that can be indexed; correct use of header, nav, main, section, footer; use of buttons and links according to their purpose; interface accessibility via keyboard; states hover, focus, active, and disabled; absence of horizontal scrolling of the page; correct operation with dynamic content of varying lengths; clear and professionally organized code.SEO and Performance Updating the template should not worsen the technical SEO indicators of the site. The following is necessary: preserve the semantics of the main content; not create separate duplicates of the DOM for mobile and desktop versions without justified need; not hide important content for indexing using JavaScript; not disrupt the hierarchy of headings; not remove existing SEO, analytical, and structural attributes from the provided HTML fragments; minimize additional JavaScript; not use heavy libraries without agreement; provide image sizes and avoid noticeable layout shifts during loading; not allow significant deterioration of Lighthouse and Core Web Vitals metrics after integration. The contractor must understand that quality CSS alone does not fix the DOM structure. If markup changes are necessary for a professional result, appropriate HTML fragments must be prepared and submitted to the client.Responsiveness Layout testing must be performed at least at the following widths: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Between the control sizes, the interface must also remain correct and functional. Horizontal scrolling of the entire page is not allowed. Exceptions for individual components, such as large tables, must be agreed upon in advance.Result of the First Phase The contractor delivers: New CSS or SCSS along with the compiled CSS. Standalone demo HTML page. HTML fragments of the header, menu, and footer, if the markup has changed. Separate patch/diff of changes to legacy CSS. New SVGs, images, icons, and fonts. Instructions for connection and integration. Description of the CSS structure and components. List of new and changed classes and selectors. Screenshots of the result at control sizes. List of known limitations and discrepancies with mockups. Recommendations for further migration of internal pages.Iterations The cost of the first phase should include: Agreement on the overall structure and desktop version. Responsive refinement of tablet and mobile versions. Correction of issues identified by the client after the first test integration. Additional work outside the agreed first phase will be assessed separately.What to Specify in the Application Please indicate: experience working with large existing websites and legacy CSS; examples of complex responsive layouts; code examples or links to repositories, if available; approach to organizing CSS architecture; experience in gradual design migration without a complete site shutdown;

We need to create a design in Figma from HTML files (I will place everything in the document for the task) So that we can later convert all these pages in the website builder Maximum focus on mobile design and responsiveness as all traffic comes from there This will be the main page of the site + checkout page + 2 upsell pages (1 product - 1 page) In general, the task is to prepare them for layout and adaptation for mobile devices On the drive, there will be the main page + checkout + 1 upsell page + our logo (to be placed everywhere) in general, adapting in all senses to our brand The latest design can be found at this link https://3plus3.heroman.com.ua/upsells/t-shirt/ The footer at the bottom of all pages should be placed everywhere as on the main page (the Rich) Sales funnel logic Main page checkout upsell 1 upsell 2 Thank you page (we have it) LINK TO THE ARCHIVE WITH PAGES https://drive.google.com/drive/folders/1IKh0sTVd6WCIUm0QSBFctRlaD6iEasez?usp=sharing

It needs to be similar to what I will send from Figma. It doesn't have to be identical. Overall, the first page is ready.

It is necessary to transfer the finished website design (landing page for a course, infobusiness) from Figma to Weblium in one day.

Changes need to be made to 3 (three) different forms, calculators, and data entry pages on the website according to the technical specifications. The implementation of the calculators and pages is required in two languages. It is possible to refine the existing forms and calculators or create new ones if that is easier for execution. The technical specifications will be provided. During the execution of the task, minor additions or clarifications regarding changes to the calculators or forms (templates) may be made.