garmoni

Сверстала сайт. Проверила на адаптацию на разных расширениях экрана. Когда сбросила клиенту, пишет что не отображаются заголовки на айфоне и айпаде. У меня их нет и посмотреть инспектор для этих устройств нет возможности. Может кто то с таким сталкивался.

Проблема решена с помощью lightbox

Попробовала Lightbox. Там проблема с позиционированием крестика close и стрелок.

Должно выглядеть так Какой именно класс мешает?

Возникла проблема с объединением popup окна и owl carousel. После добавления карусели, попап окно не работает. http://garmoni.inf.ua/westworld/ http://prntscr.com/ii854d

Все получилось. Еще раз спасибо )

Не могу понять, почему во вложенном меню так такие большие отступы. они , почему то зависят от отступов главного списка

Спасибо, получилось. Еще вопрос по меню. Добавила второй уровень меню, только не получается его выровнять текст по правому краю. <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; } Должно выглядеть так

Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии. <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); }

Спасибо. Забыла за слайдер

в песочнице все работает, только после выбора одного размера, нажимаю на другой и новый и предыдущий остается с выбранным цветом. на сайте вообще не работает выбор. цвет не меняется при клике https://jsfiddle.net/0s3dz4o0/

Нужно сверстать переключатели input radio в виде блоков. (Размер M, L, XL, XXL) Изначально при выборе блока, все работало, менялся цвет. Теперь перестало работать и не могу найти причину. Вставляю часть кода в https://jsfiddle.net/ все работает. На локальном и хостинге нет. Ссылка на сайт http://garmoni.inf.ua/Brandly/ в самом низу

Изменила в мозиле путем @-moz-document url-prefix() { .mail-but button { top: -42px; }}

вопрос по форме. почему в разных браузерах позиция кнопки-стрелки в разных местах https://jsfiddle.net/n7va4u34/

Спасибо еще раз

Да, в box. Как сделать, чтобы при наведении бордер темнее не становился?

Спасибо. Все получилось. И еще вопрос При наведении, у inner вместе с тенью появляется бордер на 2 пикселя. Как его уменьшить?

я уже успела поменять то что делала вроди правильно работает но у меня правая часть круга не дорисовывается http://garmoni.inf.ua/paprika/#sport-bar

какая часть изменилась? а то я много уже успела поменять

https://fiddle.jshell.net/pkj6ey4t/1/

тень получилось сделать. как при наведении мышки сделать тень не только на inner но и на inner:before? и чтобы они одновременно реагировали на наведение. а не отдельно

Спасибо

Возникла проблема с версткой такого блока как на картинке. Подскажите в каком направлении искать информацию?

Получилось. Спасибо

Чтобы не создавать отдельно тему, еще вопрос Текст на картинке находится под логотипом https://screenshots.firefox.com/zyZPqLgqEE1Ei59M/garmoni.inf.ua после уменьшения экрана, картинка не уменьшает и получается такое https://screenshots.firefox.com/yGW4tvmsJ7xGGJB8/garmoni.inf.ua