Technical task for layout and integration
1. General requirements
Pixel Perfect relative to Figma layouts.
Do not change or simplify the design without agreement.
All visual effects (gradients, shadows, glows, transparencies, borders, etc.) should be implemented as closely as possible to the layout.
In case of technical limitations, any changes must be agreed upon in advance.
2. Layout
Semantic HTML5.
Responsive and cross-browser layout.
Custom classic WordPress theme from scratch, without using ready-made themes.
3. Responsiveness
Layouts are designed for Desktop and Mobile.
At intermediate resolutions (resolutions), adaptation is performed by scaling and restructuring elements without violating the design concept. (Note: in official technical style, "At intermediate breakpoints" or "For intermediate screens" is used more often).
Best option: At intermediate screen width values, adaptation is performed by scaling and restructuring elements without violating the design concept.
The transition to the mobile version is performed only at the agreed adaptation point (breakpoint).
If a change in composition or an additional design layout is needed for specific resolutions, this must be agreed upon in advance.
4. Optimization
Image conversion to WebP (or AVIF where possible).
Optimal image compression.
Responsive images (srcset, sizes).
Lazy Loading.
Minification of CSS and JavaScript.
Maximum possible optimization of website loading speed.
5. Interactivity
Implement:
Hover / Active / Focus states;
button, link, and card animations;
search field and form element states;
smooth opening of images from thumbnails (Lightbox / Fancybox or similar);
smooth transitions between interface states.
If the behavior of an element is absent in the layout, implement it according to the project's style.
6. Completion of work
Deploy the fully finished website on the client's server.
Transfer the source code, WordPress theme, and all project files.
Correct any remarks identified during acceptance if they are related to non-compliance with the layout or this technical task.
Link to the layout
https://www.figma.com/design/MngyP8sAZP3titWFpDivT1/Rugby--Original-?node-id=3284-2242&t=MJ7cFzBpFZPXzq4b-1
