garmoni

July 15, 2018

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

February 22, 2018

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

February 22, 2018

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

February 22, 2018

Должно выглядеть так

Какой именно класс мешает?

February 22, 2018

Возникла проблема с объединением popup окна и owl carousel. После добавления карусели, попап окно не работает.

http://garmoni.inf.ua/westworld/

http://prntscr.com/ii854d

February 22, 2018

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

February 22, 2018

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

они , почему то зависят от отступов главного списка

February 21, 2018

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

Еще вопрос по меню. Добавила второй уровень меню, только не получается его выровнять текст по правому краю.

<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;
}

Должно выглядеть так

February 21, 2018

Нашла анимацию гамбургер меню из трех полосок в крестик. Не могу понять как к нему прикрепить появление самого меню при нажатии.

<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);

}

December 4, 2017

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

December 4, 2017

36 минут назад, AlexZaw сказал:

покажите что у вас получается в песочнице

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

https://jsfiddle.net/0s3dz4o0/

December 4, 2017

Нужно сверстать переключатели input radio в виде блоков. (Размер M, L, XL, XXL)

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

все работает. На локальном и хостинге нет. Ссылка на сайт

http://garmoni.inf.ua/Brandly/

в самом низу

November 20, 2017

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

November 20, 2017

вопрос по форме.

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

November 19, 2017

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

November 19, 2017

8 минут назад, AlexZaw сказал:

Это же вроде у .box указан бордер, просто он заметнее становится когда появляется тень. Или вы про что то другое?

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

November 19, 2017

16 минут назад, AlexZaw сказал:
у вас в стилях указано
*:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
отключите это правило или увеличьте размеры inner:before и подправьте ему маржины чтобы он был по центру

Спасибо. Все получилось. И еще вопрос :rolleyes:

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

November 19, 2017

11 минуту назад, AlexZaw сказал:

Так я ваш пример переделал, а именно размеры и поведение inner:before

я уже успела поменять то что делала :facepalmxd:

вроди правильно работает но у меня правая часть круга не дорисовывается

http://garmoni.inf.ua/paprika/#sport-bar

November 19, 2017

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

November 19, 2017

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

November 19, 2017

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

November 19, 2017

Спасибо

November 19, 2017

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

November 17, 2017

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

November 17, 2017

Чтобы не создавать отдельно тему, еще вопрос :rolleyes:

Текст на картинке находится под логотипом
https://screenshots.firefox.com/zyZPqLgqEE1Ei59M/garmoni.inf.ua

после уменьшения экрана, картинка не уменьшает и получается такое
https://screenshots.firefox.com/yGW4tvmsJ7xGGJB8/garmoni.inf.ua

Sign In

garmoni

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by garmoni

Не отображаются заголовки на айфоне и айпаде

Как объединить popup окно и owl carousel

Как объединить popup окно и owl carousel

Как объединить popup окно и owl carousel

Как объединить popup окно и owl carousel

Как привязать выпадающее меню к событию нажатия кнопки?

Как привязать выпадающее меню к событию нажатия кнопки?

Как привязать выпадающее меню к событию нажатия кнопки?

Как привязать выпадающее меню к событию нажатия кнопки?

Не работает input radio

Не работает input radio

Не работает input radio

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

Как сверстать такой блок

В сетке bootstrap два col-md-6, одно падает вниз

В сетке bootstrap два col-md-6, одно падает вниз

Forums

Important Information