Day, 460
Jon Snow
2 November 2018, 13:13

Сделал разметку форм.

Нарезал макет и принял решение, как будет всё выглядеть. (вот как это всё пока выглядит)

  1. Будет flexible markup с максимальной шириной макета 1800px.
  2. Верхнее меню прицеплено к верху страницы, при прокрутке.
  3. Поле поиска на форме в верхнем меню скрыто. Оно разворачивается/сворачивается при клике на лейбл с картинкой поиска (на самом деле эта картинка - символ Font Awesome).
  4. При нажатии на комбобоксы в форме, дату можно выбрать в календаре. (задача максимум)
  5. В лиде блок с соцсетями прижат к левому краю, и с фиксированной шириной. (задача максимум - на ширине устройства, аналогичного смартфону, блок при hover'е разворачивается шире, позволяя юзеру нажать пальцем на каждую соцсеть).
  6. В лиде блок для формы с большой картинкой расширяется до 1800 px совокупной ширины макета. Форма посередине меняет свои габариты и относительную ширину в зависимости от ширины устройства (но если ширина > 1800px, остаётся как в макете).
  7. В блоках news, our services и our rooms списки комнат выглядят как есть независимо от ширины устройства. Но если ширина становится меньше ширины списка, entries будут показываться по 2 в строчку, или как newsfeed.
  8. Блок Explore your best room тянется как обычно, размеры контента относительны.
  9. Если ширина устройства меньше, чем синий блок Find your Best Room here, картинка пропадает, отображается только синий блок.
  10. Testimonials отображаются по центру страницы в виде newsfeed'а независимо от их количества. (хотя было бы хорошо, если бы можно было их прятать под кат...)
  11. Блок видео можно реализовать как обычный блок с изображением паузы и текста как в макете (задача минимум), или прикрепить рандомное видео, создав для него стили как на макете (задача максимум).
  12. Футер остаётся с теми же относительными габаритами, что и в оригинальном макете. Но при уменьшении ширины устройства меньше, чем весь этот блок, секции футера располагаются по центру страницы как newsfeed. Порядок Description - Menu - Socials - Copyright.
Like it? Share with friends!
Add comment
See in dairy
Goal

You can publish
your goal here

We can help you achieve it!

310 000

like-minded

tools

for an exciting achievement

Join us!
Sign up

Signup

Уже зарегистрированы?
Quick sign-up through social networks.
Sign in

Sign in.
Allowed.

Not registered yet?
 
Log in through social networks
Forgot your password?