Jump to content

garmoni

User
  • Posts

    50
  • Joined

  • Last visited

Everything posted by garmoni

  1. Сверстала сайт. Проверила на адаптацию на разных расширениях экрана. Когда сбросила клиенту, пишет что не отображаются заголовки на айфоне и айпаде. У меня их нет и посмотреть инспектор для этих устройств нет возможности. Может кто то с таким сталкивался.
  2. Попробовала Lightbox. Там проблема с позиционированием крестика close и стрелок.
  3. Должно выглядеть так Какой именно класс мешает?
  4. Возникла проблема с объединением popup окна и owl carousel. После добавления карусели, попап окно не работает. http://garmoni.inf.ua/westworld/ http://prntscr.com/ii854d
  5. Не могу понять, почему во вложенном меню так такие большие отступы. они , почему то зависят от отступов главного списка
  6. Спасибо, получилось. Еще вопрос по меню. Добавила второй уровень меню, только не получается его выровнять текст по правому краю. <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> <ul> <li><a href="#">Dolores</a></li> <li><a href="#">Maeve</a></li> <li><a href="#">Bernard</a></li> <li><a href="#">Ford</a></li> <li><a href="#">Man in black</a></li> </ul> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> .nav__list { display: none; } .nav__list--opened { display: block; position: absolute; background: #efefef; right: -100px; top: -40px; width: 510px; height: 100vh; padding-top: 140px; z-index: 98; } .nav__list ul { width: 120px; } .nav__list li { margin: 25px 0 25px 5px; } .nav__link { font-family: Colibri, sans-serif; text-transform: capitalize; font-size: 24px; color: #333; } .nav__list li ul { display: none; } .nav__list li ul li { margin-bottom: 22px; } .nav__list li ul li a { color: #8f8f8f; font-size: 20px; } .nav__list li:hover ul { display: block; } #nav-toggle { position: relative; display: inline-block; width:42px; height:25px; z-index: 99; } #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); width: 32px; } #nav-toggle.active span:after { transform: rotate(-45deg); width: 32px; } Должно выглядеть так
  7. Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии. <nav class="nav"> <div class="nav__btn"> <a id="nav-toggle" href="#"><span></span> </a> </div> <ul class="nav__list"> <li> <a href="#" class="nav__link">Episodes</a> </li> <li> <a href="#" class="nav__link">Characters</a> </li> <li> <a href="#" class="nav__link">Park</a> </li> <li> <a href="#" class="nav__link">Gallery</a> </li> <li> <a href="#" class="nav__link">actors</a> </li> </ul> </nav> $(document).ready(function(){ $('#nav-toggle').click(function(){ $(this).toggleClass('active'); }); .nav__list { display: none; } #nav-toggle {position: relative; display: inline-block; width:42px; height:25px;} #nav-toggle span { position: absolute; left: 0; top: 10px; } #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { position: absolute; display: block; content: ''; height: 5px; width: 42px; background: #000; border-radius: 2px; cursor: pointer; } #nav-toggle span:before { top: -10px; } #nav-toggle span:after { bottom: -10px; } /* Добавим анимацию всех свойств для блоков нашей иконки */ #nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; } /* Центральный блок делаем прозрачным */ #nav-toggle.active span { background-color: transparent; } /* Смещаем псевдо-элементы в центр иконки (на место основного блока) */ #nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; } /* Наклоняем псевдо-элементы под углом 45 градусов, но в разные стороны */ #nav-toggle.active span:before { transform: rotate(45deg); } #nav-toggle.active span:after { transform: rotate(-45deg); }
  8. Спасибо. Забыла за слайдер
  9. в песочнице все работает, только после выбора одного размера, нажимаю на другой и новый и предыдущий остается с выбранным цветом. на сайте вообще не работает выбор. цвет не меняется при клике https://jsfiddle.net/0s3dz4o0/
  10. Нужно сверстать переключатели input radio в виде блоков. (Размер M, L, XL, XXL) Изначально при выборе блока, все работало, менялся цвет. Теперь перестало работать и не могу найти причину. Вставляю часть кода в https://jsfiddle.net/ все работает. На локальном и хостинге нет. Ссылка на сайт http://garmoni.inf.ua/Brandly/ в самом низу
  11. Изменила в мозиле путем @-moz-document url-prefix() { .mail-but button { top: -42px; }}
  12. вопрос по форме. почему в разных браузерах позиция кнопки-стрелки в разных местах https://jsfiddle.net/n7va4u34/
  13. Да, в box. Как сделать, чтобы при наведении бордер темнее не становился?
  14. Спасибо. Все получилось. И еще вопрос При наведении, у inner вместе с тенью появляется бордер на 2 пикселя. Как его уменьшить?
  15. я уже успела поменять то что делала вроди правильно работает но у меня правая часть круга не дорисовывается http://garmoni.inf.ua/paprika/#sport-bar
  16. какая часть изменилась? а то я много уже успела поменять
  17. тень получилось сделать. как при наведении мышки сделать тень не только на inner но и на inner:before? и чтобы они одновременно реагировали на наведение. а не отдельно
  18. Возникла проблема с версткой такого блока как на картинке. Подскажите в каком направлении искать информацию?
  19. Чтобы не создавать отдельно тему, еще вопрос Текст на картинке находится под логотипом https://screenshots.firefox.com/zyZPqLgqEE1Ei59M/garmoni.inf.ua после уменьшения экрана, картинка не уменьшает и получается такое https://screenshots.firefox.com/yGW4tvmsJ7xGGJB8/garmoni.inf.ua
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy