Сверстать страничку на Bootstrap 4
Страница состоит из:
- Верхнего navbar, растягивающегося на всю ширину
- Font awesome иконки “назад” с ссылкой на google.com в том же окне
- Логотипа (вставьте любой) внешней ссылкой
- Двух текстов с id = ‘top_balance’ для верхнего и id = ‘top_balance_value’ для нижнего
- Font awesome иконки “назад” с ссылкой на google.com в том же окне
- Области графика
- Информационная панель из двух квадратных картинок-иконок (вставьте любые внешние) и текста по макету:
- Hello world левый id = ‘info_team_a’
- Hello world левый id = ‘info_team_b’
- 999 id = ‘info_score’
- Hello word мелкий = ‘info_timing’
- Hello world левый id = ‘info_team_a’
- Контейнер для графика в который надо вставить chart.js (id=’chart_main’) без настройки с любыми тестовыми данными. График всегда должен занимать всю область контейнера (может быть добавить отступы для красоты небольшие, на усмотрение верстальщика)
- Информационная панель из двух квадратных картинок-иконок (вставьте любые внешние) и текста по макету:
- Область вкладок: стандартные бустраповские navs (+tabs plugin) с текстом tab1, tab2, tab3. Во всех макетах кроме десктопа внутри первой вкладки надо вставить canvas (id=’canvas_field’)’. Канвас всегда должен сохранять соотношение сторон 1,3 (плюс-минус)! Канвас обернуть в див чтобы мы могли к нему применять css-трансформации. В десктоп макете вкладка1 и вкладка 2 содержат листы (см. ниже).
- Во вторую и третью вкладку поместить boostrap list group (id=’tab_list_events’, id=’tab_list_bets’’) c 3-мя элементами каждый с каким-нибудь тестовым текстом.
- Контролы: Две кнопки, красная и зеленая (btn-success id=’button_up’, btn-danger id=’button_down’) с текстом и font awesome иконками (любыми), стандартный dropdown button (id=’dropdown_bet’) с тремя тестовыми значениями в выпадающем списке.
Все шрифты - Roboto (Regular, Medium, Bold см. макет).