Layout of the landing page
Technical task for landing page layout
General information
- Project: Landing for Tamagotchi
- Number of blocks: 5
- Layout files: Access to layouts provided in Figma (link to layout).
Layout requirements
Technologies:
- HTML5
- CSS3 (preferably using preprocessors: Sass or LESS)
- JavaScript (if necessary for animations)
- Responsive design using media queries (mobile-first)
- Compatibility with modern browsers (Google Chrome, Mozilla Firefox, Safari, Microsoft Edge)
- Cross-browser and cross-platform testing
Project structure:
- Main page with 6 blocks
- Use of BEM methodology for class naming
Animation requirements:
- Each animation needs to be discussed and approved separately, as not all animations are displayed in the Figma layout.
- To discuss animations, organize a discussion with the developer.
- Use of CSS animations and libraries (e.g., GSAP).
Block descriptions
Block 1:
- Content: Title
- Animation: Smooth appearance of Tamagotchi, leaf movement
- Additional: Adaptive text positioning
Block 2:
- Content: image text button
- Animation: Falling banknotes
- Additional: Adaptive resizing of images and text
Block 3:
- Content: Transition
- Animation: Spinning roulette, eggs flying out of jackpot
- Additional: Adaptive positioning of icons and text in a column on mobile devices
Block 4:
- Content: 5 - 3D figures
- Animation: 3D figures hitting drums and music playing
- Additional: Adaptive resizing of images and text
Additional requirements
SEO optimization:
- Use of semantic markup
- Optimization of image loading (Lazy Loading)
- Setting meta tags
Performance:
- CSS and JavaScript minification
- Optimization of font loading
Project repository and build:
- GitHub repository
- Testing:
- Testing on various devices and browsers
- Validation testing for HTML and CSS errors
Work stages
- Discussion and approval of animations for each block
- Layout of all blocks sequentially with intermediate checks
- Integration of animations and final check
- Testing and error correction
- Project handover
https://www.figma.com/design/Z1VrGtoW2vx7yfY3a0HSZJ/Tamagothci?node-id=1265-543&t=YFjuBCfenz3om1Mt-0
-
3274 52 0 Good day. Grigory. Great experience in layout. We can start work right now. Write in private.
-
555 12 0 Good day, I have great experience in developing similar websites, write in private messages to discuss the details
-
4762 50 0 1 Good day! Ready to perform the work efficiently and within the agreed deadlines. Over 6 years of experience. Write in DM to discuss the details.
-
243 Commercial experience in frontend development - over 5 years.
Stack:
Vue 3 (Composition API) + Nuxt.js - 4 years
React - 3 years
I can assess your project and provide all the information about it. Ready to start immediately. I have a lot of experience in developing such websites and systems. Waiting for you in private messages.
-
128 Good day!
We are pleased to contact you with a proposal from the IT company Natberh. We are a team of professionals specializing in the development of websites, mobile applications, and other software products. On our part, we guarantee you more than 5 years of experience in the field of information technology, confirmed by successful cases and long-term partnerships.
We look forward to discussing your specific needs and providing you with high-quality solutions.
P.S. It is important for us to discuss the details of your project.
Website: https://www.natberh.tech/
… Portfolio: https://www.natberh.tech/portfolio, olimpdigital.com/ua/portfolio
Thank you for your attention, sincerely,
Victoria,
HR Manager
-
229 Hello, I will be happy to complete your task, I am good at layout and will do it for you in the shortest possible time, I invite you to cooperate.
Current freelance projects in the category HTML & CSS
Layout of a page for a website on Khoroshop + and editing 2 written pages
112 USD
Hello! Task: To create the "Loyalty Program" page and make adjustments to the "Wholesale Cooperation" and "Corporate Orders" pages Page "Loyalty Program": - Create the page in HTML code according to our design in Figma - Adapt for desktop and mobile versions, iOS and… HTML & CSS ∙ 10 hours 17 minutes back ∙ 27 proposals |
Need a developer for WordPress
607 USD
Looking for a developer to implement a website on WordPress. Below I have detailed the project and requirements. About the project Here is the link to the design https://www.figma.com/design/htJTa5T5vY3oIlMOlZlI1o/Estate-Services?node-id=6315-2&t=gNsXRNevlb0hpS9h-1 Currently,… Content Management Systems, HTML & CSS ∙ 13 hours 44 minutes back ∙ 61 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 ∙ 16 hours 2 minutes back ∙ 33 proposals |
I need to create a website from a PDF, is it possible?The design is already fully drawn but we only have it in PDF, as the Figma file was lost... There may be discrepancies with it. This is acceptable. Do we need to redraw it in Figma? Or is it possible to layout and put it on a CMS, and if so, which one? There will be a lot of… HTML & CSS, Web Programming ∙ 16 hours 3 minutes back ∙ 97 proposals |
Development of a WordPress + WooCommerce online store# Development of an Online Store for Agricultural Equipment The design mockup is currently in the final stages of development. I fully understand that without a ready mockup, the final estimate will be inaccurate. However, if you have already implemented similar e-commerce… Content Management Systems, HTML & CSS ∙ 23 hours 56 minutes back ∙ 63 proposals |