Jump to content

garmoni

User
  • Posts

    50
  • Joined

  • Last visited

Information

  • Sex
    женский
  • From
    Днепр

Recent Profile Visitors

926 profile views

garmoni's Achievements

Explorer

Explorer (1/14)

-2

Reputation

  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/
×
×
  • 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