Адаптивный дизайн страницы
425 UAHВёрстка адаптивной страницы, в идеале только HTML/CSS.
На экране три колонки - 1,2,3 - 300/1000/300 px (display: flex)
при уменьшении размера
1,2 ниже 3
еще меньше
1 ниже 2 ниже 3
на всех устройствах размер шрифта одинаковый (name="viewport" content="width=device-width")
не используем:
- медиа запросы
- jQuery
- подгружаемые шаблоны
- подгружаемые шрифты
во вложении
зарисовки с пояснениями
и архив с наброском
К описанию задания есть архив
в нем готовая структура реализующая адаптивность без медиа запросов
и обеспечивающая одинаковый размер шрифта на всех устройствах
там же подробные комментарии.
В файле pdf есть дизайн и описание к нему
Собственно задача
Вписать дизайн в готовую структуру
или если это удобнее, то написать свою структуру и вставить дизайн
Дополнительные пояснения к дизайну
в файле pdf
на первой странице общий вид страницы
страница состоит из 3 частей 1, 2, 3
1- левая
2- центр
3- правая
1 часть состоит из блочных элементов - ссылок
описана и нарисована на 4 странице описания
для разворачивания вкладок, вероятно понадобится JS,
но есть способ лучше
css реакция на клик - https://myrusakov.ru/css-click.html
2 часть состоит из 2 или 3 блочных элементов - статей
каждая статья состоит из заголовка, номера и блоков
подробнее о блоках на 2 странице описания про номер на 3
на второй странице показаны варианты блоков.
- только тест,
- рисунок и поверх него текст,
- только рисунок
- рисунок и под ним тест
все варианты нужно показать в статье
Важно!
на первой странице - общий вид, показана только одна статья
остальные будут видны при горизонтальной прокрутке
если нужно, я отправлю возможны вариант верстки этого элемента
3 часть состоит из блочных элементов - сообщений
эскиз на 5 странице
Важно!
нужна только вёрстка, в идеале HTML+CSS
Сейчас это выглядит так
http://sp.help8.ru
Приложения 2
Результаты работы
Отзыв заказчика о сотрудничестве с фрилансером
Адаптивный дизайн страницыРабота выполнена быстро и качественно. Большинство исполнителей отказались от работы так как не могли (не знали как ) сделать адаптивный дизайн без медиа запросов. Степан успешно решил эту задачу. Он внимательно читает задание, быстро и качественно устраняет замечания.
Отзыв фрилансера о сотрудничестве с заказчиком
Адаптивный дизайн страницыОтличный заказчик, всегда вовремя присылает правки. Адекватно оценивает сроки сдачи проекта, всегда готов сотрудничать и отвечает практически мгновенно.
-
3 дня637 UAH
30 3 дня637 UAH
Здравствуйте. готов выполнить эту работу. Хорошо верстаю адаптивно на флексах. Пишите в лс или на почту [email protected]
-
2 дня2000 UAH
137 2 дня2000 UAH
Работаю с HTML5, CSS3
Готова выполнить работу учитывая все пожелания
Портфолио есть в профиле
Рада буду сотрудничать
-
2 дня2000 UAH
198 2 0 2 дня2000 UAH
Обращайтесь.
Большой Опыт WEB-разработки, Веб дизайна, адаптивной верстки, копирайтинга, seo.
Gulp, git
JS, jQuery,
CSS, SCSS, SASS, LESS, Bootstrap
HTML, PUG
Связь со мной:
Telegram: @holyweb
… Skype: vadim_kohan
E-mail: [email protected]
Мое портфолио:
Freelancehunt
-
Как адаптировать без медиа запросов ?
-
Резина наверное нужна.
-
Предоставьте пример адаптива без медиа запросов.
-
Здравствуйте, Мурат.
Думала, что можно сделать такое через flex-direction: row-reverse и flex-wrap: wrap, но нет, ни в какой конфигурации не получается. Медиа-запросы всё равно нужны, хотя бы пара строчек. Чтобы а) правильно переносились блоки и б) чтобы блоки меняли свой размер. -
Актуальные фриланс-проекты в категории HTML и CSS верстка
Разработка интерактивной карты Palworld для сайтаНеобходимо разработать интерактивную карту Palworld по примеру: https://palworld.gg/map Нам нужна не просто статическая картинка, а полноценная интерактивная карта, где пользователь может смотреть локации, включать / выключать категории объектов, искать нужные точки и… HTML и CSS верстка, Javascript и Typescript ∙ 12 часов 24 минуты назад ∙ 16 ставок |
Настройка интернет-магазина тканей на WordPress + WooCommerce по шаблону Astra
14 789 UAH
Необходимо настроить и подготовить к работе интернет-магазин мебельных тканей для рынка Норвегии. Домен, хостинг и WordPress уже установлены: eximtextilnordiq.com Сайт нужно сделать не с нуля и без индивидуального программирования, а на готовом бесплатном шаблоне Astra,… CMS, HTML и CSS верстка ∙ 17 часов 18 минут назад ∙ 49 ставок |
Сайт реберня-піцеріяКлиентская часть — динамическое меню с Firebase, категории с вкладками, карточки блюд с фото и ценами, поддержка двух размеров (пицца 30/40 см), адаптивный мобильный дизайн, боковое меню с контактами и локацией. Админ-панель — авторизация, управление категориями и блюдами… HTML и CSS верстка ∙ 21 час 8 минут назад ∙ 75 ставок |
Необходимо сделать доработку на сайте Modx Evolution CMS 3.1.7
1000 UAH
Разрабатывается доработка дизайна и верстка сайта, нужно будет внедрить эти работы на сайт. Также внедрить некоторые доработки на сайте. HTML и CSS верстка, PHP ∙ 21 час 49 минут назад ∙ 23 ставки |
Разработка карты семян Minecraft Java / просмотрщика семян для сайтаРазработка карты семян Minecraft Java / Seed Viewer для сайтаОписание проекта Необходимо разработать браузерный инструмент Minecraft Java Seed Map / Seed Viewer, который будет работать на нашем сайте и позволит пользователю ввести семя Minecraft Java Edition и просмотреть… C и C++, HTML и CSS верстка ∙ 1 день 14 часов назад ∙ 13 ставок |