Lendose editing using HTML, CSS and JavaScript
Platforms: Windows, MacOs.Browsers: SafariGoogle ChromeMozilla FirefoxOpera Mobile devices browsers iOS 7 and above Mobile devices browsers Android 5 and above, except UC Browser When the list takes into account the features of the browsers, their limitations of appearance and behavior of objects.Standards: HTML5/CSS3/Jquery Design Compliance: the layer may not be performed by the Pixel Perfect method and differences with a relative error up to 5% are possible (elements size, font rendering and interliterate/interliterate distances, as well as internal and external distances).General: All text elements of the layout must be texted, except where such implementation is technically impossible.Structural and comprehensive code.The site will be added tracker scripts such as: GTM, HotJar, Pixels, etc.Before the start: Check access to the FigmeCheck access to the fonts (will be published on request if they are not in the Google)Give feedback on the upgrading, proposals and improvement of the tz and lendous.Before check the templates on the subject of the possibility of exporting vector files, setting modes and the technical possibility of implementing the designers' ideas.Check the hidden layers if they are presentIn the process of work check the styles of texts in line-height, letter-spacing, etc.Often this is missing the sight.Check the network of the model.Sometimes networks have gutter space in 20px or 50px rather than standard 30px.This will help to avoid the need for castles in the future.Guide for designers on the layer
The width of the site is static, the site is flat in the center.At 1024px, there should be no horizontal scroll.Stay to the bottomStay staticExtension: blocks with changing content are adjusted according to the design when content is reduced/augmented.For text blocks filled with visual editors, design styles should be prescribed with tags.Page scaling: Pages when scaling a page in the range of 70-150% in Chrome browsers, Safari should look the same as with 100%.Small errors are permitted that arise due to the incorrect roundings of the coordinates of the browsers.HTML code:Coding - utf-8Structural, commentable code (see the beginning/end of large blocks).On the buttons are hanging identifiers for further use of triggers on these buttons.Class names and identifiers - to your consideration.Images:All images must be optimized through the tinypng service in order to reduce the total weight of the images.Intransparent images must be exported in .jpg in order to save the file size.Icons and small images:The first priority is the use of svg spots.Second priority - png stops through the element , Third priority - html tags img All icons should be optimized for retina screens
Fonts: fonts available through the Google fonts service must be connected with CDN https://fonts.google.com/ File organization: HTML files are in root.Main page is index.html. Styles in the folder /css/Javascript - /js/Design Images - /img/Content Images - /pic/Adaptivity: Page content is adjusted to the actual size of the browser window, without spots on the width of global containers on key points With sizes greater than 320px should not occur horizontal spinning of the page.Using desktop first methods in the approachFor basic resolutions we take - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile).Additionally: When the adblock is enabled, all content on the site should be available.In the final version of the site, the logo will be different, now it is a blurry.
Task:index- You can use Lazy Load- Animation links in the header, example - https://infinizai.webflow.io/ - Animation buttons Play, Play now, example - https://axieinfinity.com/ - Animation icon of social networks in the footer - https://orivium.io/contact (clickable)- Content upload - smooth appearance - Animation label "copy address" in the table - light darkness when turning (clickable) (function - by click copies the address of the wallet) - Animation address of the wallet in the table - light darkness when turning (clickable) - Animation of the people around - light effect in the air as it turns on the wallet.An animation of the appearance of the second block with text, table and button - for example here.Table to the left, text and button to the right.- Animation of the appearance of the third block with text and NFT map similar to the second.- Text animation View More in the table - easy lighting at inclination (click)
Browsers: SafariGoogle ChromeMozilla FirefoxOpera iOS 7 and above mobile devices browsers Android 5 and above mobile devices browsers, except UC Browser When listing takes into account the features of the browsers, their limitations of appearance and the behavior of objects.Standards: HTML5/CSS3/Jquery Design Compliance: the layer may not be performed by the Pixel Perfect method and differences with a relative error up to 5% are possible (elements size, font rendering and interliterate/interliterate distances, as well as internal and external distances).General: All text elements of the layout must be texted, except where such implementation is technically impossible.Structural and comprehensive code.The site will be added tracker scripts such as: GTM, HotJar, Pixels, etc.Before the start: Check access to the FigmeCheck access to the fonts (will be published on request if they are not in the Google)Give feedback on the upgrading, proposals and improvement of the tz and lendous.Before check the templates on the subject of the possibility of exporting vector files, setting modes and the technical possibility of implementing the designers' ideas.Check the hidden layers if they are presentIn the process of work check the styles of texts in line-height, letter-spacing, etc.Often this is missing the sight.Check the network of the model.Sometimes networks have gutter space in 20px or 50px rather than standard 30px.This will help to avoid the need for castles in the future.Guide for designers on the layer
The width of the site is static, the site is flat in the center.At 1024px, there should be no horizontal scroll.Stay to the bottomStay staticExtension: blocks with changing content are adjusted according to the design when content is reduced/augmented.For text blocks filled with visual editors, design styles should be prescribed with tags.Page scaling: Pages when scaling a page in the range of 70-150% in Chrome browsers, Safari should look the same as with 100%.Small errors are permitted that arise due to the incorrect roundings of the coordinates of the browsers.HTML code:Coding - utf-8Structural, commentable code (see the beginning/end of large blocks).On the buttons are hanging identifiers for further use of triggers on these buttons.Class names and identifiers - to your consideration.Images:All images must be optimized through the tinypng service in order to reduce the total weight of the images.Intransparent images must be exported in .jpg in order to save the file size.Icons and small images:The first priority is the use of svg spots.Second priority - png stops through the element , Third priority - html tags img All icons should be optimized for retina screens
Fonts: fonts available through the Google fonts service must be connected with CDN https://fonts.google.com/ File organization: HTML files are in root.Main page is index.html. Styles in the folder /css/Javascript - /js/Design Images - /img/Content Images - /pic/Adaptivity: Page content is adjusted to the actual size of the browser window, without spots on the width of global containers on key points With sizes greater than 320px should not occur horizontal spinning of the page.Using desktop first methods in the approachFor basic resolutions we take - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile).Additionally: When the adblock is enabled, all content on the site should be available.In the final version of the site, the logo will be different, now it is a blurry.
Task:index- You can use Lazy Load- Animation links in the header, example - https://infinizai.webflow.io/ - Animation buttons Play, Play now, example - https://axieinfinity.com/ - Animation icon of social networks in the footer - https://orivium.io/contact (clickable)- Content upload - smooth appearance - Animation label "copy address" in the table - light darkness when turning (clickable) (function - by click copies the address of the wallet) - Animation address of the wallet in the table - light darkness when turning (clickable) - Animation of the people around - light effect in the air as it turns on the wallet.An animation of the appearance of the second block with text, table and button - for example here.Table to the left, text and button to the right.- Animation of the appearance of the third block with text and NFT map similar to the second.- Text animation View More in the table - easy lighting at inclination (click)
Описание проекта: Браузерная игра rock-paper-scissors на основе блокчейна.
Страницы: главная, рефералка, 3 политики, faq.
Дизайн еще в работе, но со структурой можно уже ознакомиться: https://www.figma.com/file/CdxJZAFotyjiZGh1mkgegZ/RPS?type=design&node-id=0%3A1&mode=design&t=Sh6pBVDIbeNEWn8Q-1
Нюансы:
1) Таблица. Данные для таблицы можно ajax запросом сделать на jquery без фреймворка.
2) Рефералка. Юзер вставляет адрес кошелька, автоматически происходит проверка валидности кошелька и он получает уникальную реферальную ссылку. Можно сделать регуляркой str.match(/(\b0x[a-f0-9]{40}\b)/g)
Браузеры:
Safari
Google Chrome
Mozilla Firefox
Opera
Браузеры мобильных устройств iOS 7 и выше
Браузеры мобильных устройств Android 5 и выше, за исключением UC Browser
При верстке учитываются особенности браузеров, их ограничения внешнего вида и поведения объектов.
Стандарты: HTML5/CSS3/Jquery
Соответствие дизайну: верстка может не выполняется методом Pixel Perfect и возможны отличия с относительной погрешностью до 5% (размеры элементов, рендеринг шрифтов и межстрочных/межбуквенных расстояний, а также внутренних и внешних отступов).
Общее: Все текстовые элементы макетов должны верстаться текстом, за исключением случаев, где подобная реализация невозможна технически. Понятный, структурный код. На сайт будут добавлены скрипты трекеров типа: GTM, HotJar, Pixels и тд.
Перед стартом:
Проверить доступ к фигме
Проверить доступ к шрифтам (выдам по запросу если их нету в гугле)
Дать фидбек по доработке, предложениям и улучшению тз и лендоса.
Заранее проверить макеты на предмет возможности экспорта векторных файлов, режимов наложения и технический возможности реализации задумок дизайнера.
Проверить скрытые слои если таковые присутствуют
В процессе работы проверять стили текстов в плане line-height, letter-spacing и др. Часто это упускается из виду.
Проверить сетку макета. Иногда сетки имеют gutter space в 20px или 50px, а не стандартные 30px. Это поможет избежать необходимости в костылях в дальнейшем.
Ширина сайта: статична, сайт выровнен по центру. При 1024px должна отсутствовать горизонтальная прокрутка.
Подвал прижат к низу
Шапка статична
Расширяемость: блоки с изменяющимся содержимым подстраиваются в соответствии с дизайном при уменьшении/увеличении контента.
Для текстовых блоков, заполняемых с помощью визуальных редакторов, должны быть прописаны стили оформления c тегами.
Масштабирование страниц: страницы при масштабировании страницы в диапазоне 70 -150% в браузерах Chrome, Safari должны выглядеть так же как и при 100%. Допускаются небольшие погрешности, которые возникают из-за неправильных округлений координат браузеров.
HTML код:
Кодировка – utf-8
Структурный, комментируемый код (обозначается начало/конец крупных блоков).
На кнопках висят идентификаторы для дальнейшего использования тригеров на эти кнопки.
Имена классов и идентификаторов – на твое усмотрение.
Изображения:
Все изображения должны быть оптимизированы через сервис tinypng в целях уменьшения суммарного веса картинок.
Непрозрачные картинки необходимо экспортировать в .jpg в целях экономии размера файла.
Иконки и маленькие изображения:
Первый приоритет - использование svg спрайтов.
Второй приоритет - png спрайты через элемент <i>, <span>
Третий приоритет - html теги img
Все иконки должны быть оптимизированы для retina экранов
Шрифты: шрифты, доступные через сервис google fonts должны подключаться с CDN https://fonts.google.com/
Файловая организация: HTML файлы лежат в корне. Главная страница – index.html. Остальные – по именам макетов.
Стили в папке /css/
Javascript - /js/
Изображения оформления - /img/
Изображения содержания - /pic/
Адаптивность:
Содержимое страницы подстраивается под фактические размеры окна браузера, без рывков по ширине глобальных контейнеров на ключевых точках
При размерах более 320px не должно возникать горизонтальной прокрутки страницы.
Использование desktop first методов в подходе
За основные разрешения берем - 1920(hd+), 1440 (hd), 1200px (wide), 992 px (desktop), 568 px(mobile), 414 px(mobile-s).
Дополнительно:
При включенном adblock должен быть доступен весь контент на сайте.
В финальной версии сайта - логотип будет другой, сейчас стоит заглушка
Задачи:
index
- Можно использовать Lazy Load
- Анимация ссылок в хедере, пример - https://infinizai.webflow.io/
- Анимация кнопок Play, Play now, пример - https://axieinfinity.com/
- Анимация иконок соц сетей в футере - https://orivium.io/contact (кликабельны)
- Подгрузка контента - плавное появление
- Анимация значка “copy address” в таблице - легкое затемнение при наведении (кликабельно) (функция - по клику копирует адрес кошелька)
- Анимация адреса кошелька в таблице - легкое затемнение при наведении (кликабельно)
- Анимация монеток вокруг человечков - легкий эффект парения в воздухе как на этом примере парят сундучки. В разнобой.
- Анимация появления второго блока с текстом, таблицей и кнопкой - по примеру как тут . Таблица слева, текст и кнопка справа.
- Анимация появления третьего блока текстом и картой NFT аналогично второму.
- Анимация текста View More в таблице - легкое подсвечивание при наведении (кликабельно)
-
5 days111 USD
5 days111 USD
I’m ready to take the layer to work, I’ll do everything according to tz, I’m guaranteed the high quality of my work in the specified time! Thank you, call me. For the correct assessment, you need to see the model.
-
15 days267 USD
192 1 0 15 days267 USD
Hi, interested in your project, ready to perform it in your time and following your TZ, I attach my sample to some work
HTTPS://big-viktor.github.io/Cripto
HTTPS://next-js-social-62mrayxtz-academictest.vercel.app/Home
-
5 days67 USD
445 1 1 5 days67 USD
👋Good day !I’m also from Odessa, if we can meet :)
You have recently worked with a similar task so you can perform your task quickly and quality.💫Ready to start work as quickly as possible.⏰The cost is 3000 UAH.💰Duration of execution: 5 days.⏱I work without prepaid.🌟Implemented projects:
HTTPS://www.voxloud.com/it/en
HTTPS://www.thehomehub.net
HTTPS://www.elmont.com
HTTPS://go.voxloud.com/activate_now/signup
HTTPS://vlad-yermolayev.github.io/specteh/dist
… Let’s write, let’s talk in detail.🎨🔗🔗🔗🔗🔗📩
-
3 days111 USD
572 3 days111 USD
Good day ! Ready to perform.
I’ve been working on the website for more than 5 years.
There is a great experience in the construction of various buildings.
You can see some information about me at https://aleksandrkorostashivets.github.io/
Adaptive to all screen extensions, cross-browser.
Mobile First
Google PageSpeed - Green Zone
-
6 days78 USD
412 5 1 6 days78 USD
Good afternoon Alexander!I'm getting acquainted with TZ, I'll make a line of everything with a clean code.I have experience working with HTML, CSS, JS and other technologies.I put it clearly on the macet.Ready to start right now and ensure high quality work.The project will be guaranteed:
good and good;
Adaptive and crossbrowser;
Clean code and animation (if desired).✔✔✔Examples of my work:
HTTP://zenpage.000.pe/
HTTPS://bribalko.github.io/italic/home.html
Duration: 3 days to 3 days.✔✔Price: 500 UAHWrite, let’s talk more!
-
6 days89 USD
340 6 0 6 days89 USD
Hello to you!
I work with the following stick: HTML/CSS/SCSS/JS/Jquery/React/TailwindCSS/bootstrap5/BEM/pixel perfect/responsive design etc.
I met your T3. Ready to perform the work in time. Working time up to 6 days. All wishes and wishes will be taken into account. Example of my code in the portfolio (see)
Communications at any time.
The price of the question is 4000g.
Thank you for attention!
I will be happy to cooperate.
-
3 days56 USD
688 10 0 3 days56 USD
Welcome to detailed knowledge of TZ. Ready to fulfill your order. I do everything clearly. You get a clean structured code for the BEM, adaptive to all screen sizes. The price and deadlines are indicated for the four pages that are currently in Figma (only a line). I will be grateful for the cooperation. We can discuss more in detail.
by P.S. To perform the animation of coins you need an image separately of each coin, and you now in the figure this is all made with one image.
-
1 day22 USD
285 3 0 1 day22 USD
Good time of day.
From the TZ once you see that man from Odessa.
So I will tell you: any caprice for your money!
Examples you are referring to are summarized in a variety of designers, but you probably want to get a unique, valid manual code that will be easier and faster? JQuery is no longer used.
Send the map, we will see.
-
4 days78 USD
212 4 days78 USD
I’m ready to help you, I’ll make 100% full frontend.
Use different technologies to select the customer
-
1 day11 USD
466 13 1 1 day11 USD
Good day .
Give access to the model for assessment.
• • • • •
-
5 days111 USD
477 2 0 5 days111 USD
Welcome to! I got acquainted with TZ, ready to start work. For details please write.
-
15 days111 USD
546 7 0 15 days111 USD
Good day, ready to do it.
Great experience in wraping and optimization.
The price is when I see the model.
The deadlines when I see the map
-
1 day22 USD
425 8 0 1 day22 USD
Good day Alex. I have read your TZ, quite interesting. I am looking forward to working with you.
Here are a few examples of my robots.
HTTPS://grays26.github.io/grants/
HTTPS://grays26.github.io/freebie/
https://grays26.github.io/alex-blog/
HTTPS://grays26.github.io/book/
HTTPS://grays26.github.io/HomeServices/
The corporate:
HTTPS://grays26.github.io/ship/
… https://grays26.github.io/clinic/
For an adequate assessment of the work, it is necessary to look at the design. As long as I put my fool. My face is open and awaits you. Please write, we will discuss the phases of the project.
-
5 days111 USD
4873 39 0 5 days111 USD
Contact me if you want quality.
_________________________________________________________________
-
3 days67 USD
180 1 0 3 days67 USD
Daddy, ready to do your lendous! All there is clear, one with the keframe to play should be where the coins liberate) So I'm glad to be a partner! I'm going to tell you exactly how I look at the map.
-
4 days89 USD
1705 18 0 4 days89 USD
Goodbye 😍😍
I create websites with an adaptive that are greatly displayed on all devices.💻I write on the net code html/css(scss)/js(jquery)
My portfolio of dimafomaa .online
Real deadlines and cost can be indicated after review and discussion of the task 👍🏻
Some of the works for quick review:
HTTPS://leprint.com.ua
… HTTPS://ecoclean.ua/
https://dimafomaa.github.io/chef/
https://dimafomaa.github.io/nove/
HTTPS://speeddating.in.ua/
HTTPS://rudenkocenter.online/🎨
-
2 days22 USD
481 6 0 2 days22 USD
Good evening, familiar with TZ ready to perform a layer of banding, a layer of clean code on html, css, scss, with the addition of js functional, a layer of crossbrowser, adaptive, semantic, with compliance with the WEM methodology
For more detail, write to P.P.
Examples of my works from the castle
https://vitalik-13.github.io/my-portfolio/
-
1 day25 USD
1070 33 1 4 1 day25 USD
Good day, I am a front-end developer with more than 6 years of commercial experience, in the edge I am a professional, please contact me, I will be happy to collaborate!
-
5 days111 USD
234 5 days111 USD
Alexander, hello to you! I want to thank you for the detailed and grateful TZ, read easy and pleasant, the sin of it not to keep in the work. I want to work with you at least because of this.
Usually I work on JS frameworks, (React, Next.js), but working with pure HTML/CSS is not a problem for me.
With regard to the details of the project and my proposals to it, I am pleased to communicate with you at LS, so the TZ is very clear and there are practically no questions. I would just look at the model first.
At the expense of the animations, I am pleased to modify your proposals.
An example of my work, a minimalist animated site:
HTTPS://pur-ruby.vercel.app/
-
5 days111 USD
1988 22 0 5 days111 USD
Welcome to!
I will be happy to cooperate. Always in contact. to turn.
Examples of work https://web.khorol.com.ua
-
15 days111 USD
457 6 0 15 days111 USD
Ready to get to work. I can tell you more about the price when I see the model.
-
2 days125 USD
554 7 0 2 days125 USD
Hello Alex !Thank you for the detail, it is worthy of respect!Cover the layout to evaluate dates and prices.
I also suggest not to use the Jquery library as it’s already a bit old, it’s better if we can do it without it, what do you say?✅I agree with the rest, and I have no questions.I suggest you to talk in detail about the cooperation, I look forward to your answer!A few of my works:
by dskasteel.com
by github.io/detailing
by odorlessrefinish.com
With respect Sergey!
-
1 day22 USD
420 6 0 1 day22 USD
Welcome to! Is it possible to access the Figma to assess terms and prices? and thank you.
-
1 day22 USD
1816 38 1 1 day22 USD
Hello to you! Is it possible to access the Figme to assess the deadlines and prices? I will be happy to cooperate. thank you.
-
Вітаю! Дуже змістовне ТЗ, а можна побачити хоча б скріни макету?
-
Alex Smirnov Team Lid
открыл
-
Доброго вечора!
Опис проекту/ТЗ -- вище всяких похвал. Але без можливості подивитися на те, що ви маєте у фігмі — дати адекватну оцінку неможливо. Поділитесь доступом? read only буде достатньо. Або хоча б пару скріншотів..
-
Alex Smirnov Team Lid
открыл
-
Вибачте, але я пас. Бажаю вам знайти найкращого виконався
-
"разработка 3 страниц лендинга" 😂
-
Current freelance projects in the category HTML & CSS
Moved the website from OpenCart to the Khoroshop platformHello. There is a website on OpenCart, an online store. It is necessary to transfer the structure of the site to the GoodShop platform, select a design for the new site, and make it fully functional. HTML & CSS, Web Programming ∙ 5 hours 49 minutes back ∙ 19 proposals |
Need a strong WordPress / WooCommerce specialist for the refinement of the MARSPRO website.We are looking for a responsible freelancer or a small team for the quality completion and technical refinement of the MARSPRO company website. The website is already operational, but there are many minor and significant technical issues left by the previous developer. We need a… Content Management Systems, HTML & CSS ∙ 1 day 6 hours back ∙ 43 proposals |
Sandra Ice Cream - Kaleidoscop
92 USD
We have a small project, and we would like to know if you can prepare a video for us for an LED screen. The video will be used at our event. We will provide all necessary materials: design, brand book, dimensions, and technical requirements. Please let us know if you are… HTML & CSS ∙ 1 day 7 hours back ∙ 6 proposals |
WordPress block layoutHello. We need to do a redesign, specifically the layout of the blocks as shown in the mockup. The structure is not very different from what is currently done, except for the header and hero block. We need to redesign both the mobile and desktop versions. The website is on… HTML & CSS, Website Maintenance ∙ 1 day 12 hours back ∙ 67 proposals |
Development of a website according to the specifications on FramerYou need to create a website based on the parameters in the technical specification. https://docs.google.com/document/d/1ODO2C9Krb4AaMiJz9wfbNzWlAyA2FwCCHL8r0biajUY/edit?usp=sharing Please provide your actual rate based on this design. HTML & CSS, Javascript and Typescript ∙ 1 day 14 hours back ∙ 26 proposals |
Odessa