Website layout
223 USD Requirements: Layout of a responsive website Pixel Perfect based on the design developed in Figma. (link to the design below)
Goal: Creation of a responsive website https://zoodom.ua and valid W3C (will be checked), correctly displayed on mobile, tablet, and desktop devices, meeting modern UX/UI requirements and Google's mobile optimization requirements in 2024.
Technologies: Use of HTML5, CSS3, JavaScript (ES6+), SCSS/LESS (if necessary). The layout should be cross-browser (Chrome, Safari, Firefox, Edge) and responsive for all major screen resolutions.
1. Screen resolutions and breakpoints
To ensure correct display on all devices, the following breakpoints must be set (Intermediate resolutions must display blocks without shifts and without horizontal scrolls):
- Mobile devices:
- Minimum resolution: 320px (for example, iPhone SE, old smartphones).
- Main mobile resolution: 360px – 414px (for example, iPhone X, Galaxy S10).
- Tablets:
- Minimum resolution: 768px (for example, iPad Mini).
- Tablets (portrait): 768px – 1024px (for example, iPad).
- Tablets (landscape): 1024px – 1366px (for example, iPad Pro).
- Desktops:
- Minimum resolution: 1280px.
- Recommended resolutions for desktops: 1440px and above
For each breakpoint, appropriate styles must be set to ensure optimal content display.
2. Technical requirements for layout
- Grid: Use of a grid (CSS Grid) system to ensure the responsiveness of the layout (without builders. The use of Flexbox is possible with justification).
- Animations and transitions: The use of CSS animations should be smooth and minimal, considering performance on mobile devices. (animation wishes in the attached file)
Where there are sliders - automatic scrolling of elements every 3 seconds.
- Image optimization: Images must be adapted for different resolutions using WebP formats and lossless compression. Mechanisms for lazy loading images must also be implemented.
- Icons and graphics: Use SVG for icons and graphics to ensure high quality on all screens.
- Typography: Font sizes should dynamically change depending on the screen resolution.
- Media queries: All media queries must be clearly structured and support the main breakpoints.
3. Verification and testing
- Layout testing must be conducted on real devices, as well as in browser emulators to confirm correct operation on all supported resolutions and operating systems (iOS, Android).
Priority screen sizes for testing:
1. 393x873:
- Xiaomi Mi 10T, Mi 10T Pro
- Xiaomi Redmi Note 9 Pro
- Xiaomi Redmi Note 9
2. 390x844:
- iPhone 14
- iPhone 13 and 13 Pro
- iPhone 12 and 12 Pro
3. 360x800:
- Samsung Galaxy S20
- Honor 7X
- Huawei P40 Lite
4. 414x896:
- iPhone 11 Pro Max
- iPhone 11
- iPhone Xr
5. 430x932:
- iPhone 14 Pro Max
6. 393x851:
- Google Pixel 5
- Xiaomi Mi 10 Pro
- Xiaomi Redmi Note 8 Pro
7. 412x915:
- OnePlus 7T
Priority browsers for testing:
Chrome and Safari
- Mandatory verification of the layout for content overflow. The layout should not break:
- when adding more text to elements;
- when using images with inappropriate sizes;
- text should not fall out of objects;
- content overflow should not lead to grid disruption.
- Verification through Google Mobile-Friendly Test and PageSpeed Insights tool to assess performance and compliance with mobile standards.
4.SEO.
-SEO information on metadata on pages will be provided separately.
5. Design.
- The design is created with a perspective for project development. Therefore, additional explanations will be given on which blocks do not need to be laid out at the moment.
- If necessary, there is a possibility of making changes to the design (the designer is available for communication).
6. Conclusion
The layout must be completed considering all the above parameters (but not limited to them for achieving the best results), including responsiveness and optimization for mobile devices.
Upon completion of the layout work, a testing period is provided - one week from the moment of receiving the last comment.
7. Functionality. A preliminary document describing the functionality of blocks and elements will be provided. Ready to discuss unclear functional elements in the design, both in advance and during the collaboration process.
Design for layout: https://www.figma.com/design/RPrjahTERmhbN3g9uKL6Eo/%D0%97%D0%BE%D0%BE%D0%B4%D1%96%D0%BC_website?node-id=0-1&node-type=canvas
If there are additional questions or clarification is needed on specific sections, I am ready to answer.
Applications 1
Client's review of cooperation with Igor K.
Website layoutGreat job! The contractor approached the task with a high level of professionalism, especially in matters of technical optimization. The animations were executed in full accordance with our examples and wishes, giving the site dynamism and a modern look. All work was done neatly. Despite the fact that some aspects had to be adapted during the work considering the real conditions of design application on various devices, changes were made promptly. Thank you for your attention to detail and responsible approach to the project.
-
14 days223 USD
548 2 0 14 days223 USD
Hello, I am interested in your project.
I would be happy to invest my experience and efforts for its successful implementation.
I look forward to your decision.
-
2 days89 USD
445 1 1 2 days89 USD
👋 Good afternoon!
💫 I recently worked on a similar task, so I can complete your task quickly and efficiently.
⏰ I am ready to start working as soon as possible.
💰 Cost: 4000 UAH.
⏱️ Deadline: 2 days.
🌟 I work without prepayment.
… 🎨 Completed projects:
🔗 https://www.voxloud.com/it/en
🔗 https://www.thehomehub.net
🔗 https://www.elmont.com.ua
🔗 https://go.voxloud.com/activate_now/signup
🔗 https://vlad-yermolayev.github.io/specteh/dist
📩 Write to me, we will discuss in more detail.
-
3 days178 USD
457 2 1 3 days178 USD
Good afternoon. My Gulp + webpack builder fully meets all your requirements and I am ready to start working on the project. Considering that you have some blocks that do not need to be designed right now, the price I set has a 10% discount. You also have the option to refuse animations, which will also give a 5% discount on the price. In my last job, I did the design myself, so design revisions are not a problem for me.
-
10 days267 USD
1773 25 0 10 days267 USD
Hello, Ruslan. I have been working for a long time on the development of similar websites in commercial companies. I fully understand your technical specifications and wishes regarding the execution. Taking into account all possible revisions and nuances: Deadline: 10 days. Cost: 12000 UAH My website: https://dmytro-kuzan.vercel.app/
-
5 days111 USD
362 5 days111 USD
Ready to do the layout according to all standards, have knowledge of SEO, will optimize HTML code without adding unnecessary elements. Over 20 years of experience in layout design.
Regarding deadlines, from 2 to 5 days.
-
14 days557 USD
2036 22 0 14 days557 USD
Hello!
I will be happy to collaborate. Always in touch. Feel free to reach out.
Examples of work https://web.khorol.com.ua
-
8 days289 USD
239 8 days289 USD
Hello!
I am interested in your proposal regarding development.
The price and deadlines can be adjusted during the communication process, clarifications, and website development.
I would be happy to put in effort and my experience for successful implementation.
Portfolio:
Freelancehunt
…
I look forward to your decision!
-
14 days312 USD
2238 24 0 14 days312 USD
Hello, Ruslan!!!
I am ready to quickly and efficiently create the layout for your website!
The result will be clean HTML/CSS/JS code without the use of bulky third-party libraries. I design with full adaptation and cross-browser compatibility, adhering to all modern technologies, which allows my projects to achieve high loading speeds according to Google Page Speed, positively impacting SEO promotion.
I am ready to discuss the task in personal correspondence.
My latest works:
… https://s-iteost.vercel.app/index.html - landing
https://sanyok185.github.io/Top-10/home.html - multipage
https://sanyok185.github.io/PLUGIT/main.html - multipage
https://sanyok185.github.io/Property/home.html - multipage
https://sanyok185.github.io/Proyavlennya/ - landing
https://sanyok185.github.io/StanDesk/ - landing
https://sanyok185.github.io/Bruden/home.html - store
https://sanyok185.github.io/VPNit/home.html - multipage
-
4 days122 USD
343 4 days122 USD
Сongratulations Vitaly.
More than 9 years of dev experience,
html, css, js, sass, scss, pug, webback, adaptive design and more
optimal_ai page -
https://boyko1396.github.io/optimal_ai/dist/index.htmlц
ціна 5500, час винонання 4 дняц
https://github.com/boyko1396 - my github:)
-
1 day11 USD
2656 40 0 1 day11 USD
Hello, I will do it, write to me, I will be glad to cooperate.
Hello, I will do it, write to me, I will be glad to cooperate.
-
7 days289 USD
7828 96 0 7 days289 USD
Hello. I can create a responsive website based on a template in Figma.
For the layout, I will use HTML, CSS, and JS, as well as the BEM methodology.
Portfolio: Freelancehunt
Write to me, I will be glad to collaborate with you.
-
14 days367 USD
448 4 0 14 days367 USD
Hello!
I have familiarized myself with the project requirements and the animations that need to be implemented on the website. Considering the number and complexity of animations, such as scrolling blocks, moving icons, smooth color transitions, and element animations on hover.
The estimated time for completing all the work is 10-14 days, including adapting the animations for different devices and testing.
If you are satisfied with the conditions, I would be happy to discuss the details and start working.
Best regards,
… Vyacheslav
-
15 days334 USD
531 3 0 15 days334 USD
Good day, Ruslan!
I will be happy to collaborate with you and complete the order in the shortest possible time. In my work, I pay special attention to the reliability of the code, the quality of the created website, and user convenience. My websites are cross-browser, responsive, and have animations. They match the layout (perfect pixel). I am ready to discuss a price acceptable to you. I am ready to start working immediately.
Here is the link to my portfolio:
Freelancehunt
Reasons to work with me:
- Clean and minimal code for your easy understanding.
- Always ready to discuss your vision of the final product.
… - Easy communication.
- Deep interest in understanding the main idea of your vision.
I can help you with:
- HTML5 and CSS3.
- JavaScript.
- BEM methodology.
- Compatibility with different browsers (Firefox, Chrome, Opera, Safari).
- If needed, mobile first.
- Modern and responsive design.
- Complex CSS/JS animations.
- Parallax effect.
- Working with Figma layouts.
- Pixel Perfect Conversion.
- Implementation in light and dark themes.
- Automatic theme switching of the site when switching the operating system theme.
- Toggle between light and dark themes using a toggle switch.
Best regards,
Bohdan Gotra
-
17 days534 USD
985 3 0 17 days534 USD
Hello.
Is only layout needed, or integration with a specific ecommerce platform?
I am ready to discuss the details and start working! :)
Have a nice day!
-
15 days601 USD
155 1 0 15 days601 USD
Good afternoon.
I will complete the layout quickly and efficiently.
__________________________________
-
Доброго вечора, надайте інформацію, під яку систему готується верстка?
Питання до потенційних виконавців, ви дійсно не цінуєте свою працю і свій труд з пропозиціями 5-14к?
-
Много повторяющихся блоков, один раз написал структуру и стили и дальше ctrl + c, ctrl + v. Работы на 2 дня максимум
-
Бажаю удачі))
-
Я что то пропустил? Почему Flex проигрывает уже Гридам? Я понимаю если надо делать mansory сетку это без вариантов Грид. Но почему обычный Flex будет хуже 3 для 3х колонок, чем Грид? Очень заинтересовало, буду благодарен за пояснения
-
Current freelance projects in the category HTML & CSS
Error correction, conversion optimization, and UX improvement in a Shopify storeAn experienced Shopify developer is required to address the following tasks: 1. Fixing critical JavaScript errors (priority) In several user sessions, errors are recorded when adding products to the cart, which prevent order completion. Errors are reproduced on different… HTML & CSS, Java ∙ 2 hours 51 minutes back ∙ 12 proposals |
SCSS HTML JS FIGMA Layout
22 USD
Need a layout of the template from Figma without dev mode. Well-structured SCSS, responsive at your discretion, everything by sections. If you use Claude code, that's a big plus. It needs to be done by yesterday. Please specify the price. Need to start today and finish as soon… HTML & CSS ∙ 6 hours 27 minutes back ∙ 60 proposals |
WordPress website online store
445 USD
A good website is needed (on WordPress) for an online store (selling CBD products in the USA).The category is competitive, with many photos/many products, it needs to be original. There is some kind of technical specification. Later, it will need to be promoted on social media… HTML & CSS ∙ 7 hours 22 minutes back ∙ 42 proposals |
Fix the CSS/DOM layout of cards in the Chrome extension for localizing D&D BeyondThere is a Chrome extension Manifest V3 that localizes the D&D Beyond website into Ukrainian. The project is written in TypeScript + WXT. The extension works through a content script: it finds English text on D&D Beyond pages and replaces it with the Ukrainian translation. The… HTML & CSS, Javascript and Typescript ∙ 15 hours 24 minutes back ∙ 31 proposals |
I am looking for a person who can help fill the advertising agency website on WordPress.I created the pages in the cloud and now I have done everything on WordPress. I am looking for someone who can help fill the website with content. Quickly and efficiently, certain photos will probably need to be generated in GPT. I will try to help. There are about 15 pages. AI Content Creation, HTML & CSS ∙ 2 days 3 hours back ∙ 40 proposals |
Kyiv