Search the Community

Здравствуйте! У меня стоит задача, что при наведении на блок li строка должна поменять цвет, в том числе и картинка. Я меняю картинку с помощью background-image: none; background: url(../img/check_icon_red.png) left no-repeat; Но теперь картинка позицианируется не там где должна, её можно поставить на место только вручную, через -100px. Нужно поставить ровно туда, где она была. Должна быть в одном ряду с другими

есть див с 5 img, при уменьшении экрана див выходит за него. Я добавил overflow: auto для этого div в надежде на то, что я смогу прокручивать фотки с помощью скроллбара, однако даже с ним почему-то я не вижу часть фоток которые вышли за границу. Что с этим можно сделать? класс video повторяется 5 раз, я тут оставил только 1 .content{ width: 90%; background-color: #333; } .video{ margin: 0px 4px 0px 4px; width: 310; display: flex; flex-direction:column; } .video_button_text{ margin-top: 10px; display: flex; flex-direction: row; font-size: 20px; color: white; } .video_text_div{ display: inline-block; width: 250px; } .video_text{ text-align: justify-all; margin: 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .slidan_videos{ margin: 0px 10px 0px 20px; overflow: auto; width: auto; margin-bottom: 50px; display: flex; flex-direction: row; justify-content: space-around; } <div class="content"> <div class = slidan_videos> <div class = video> <div> <a href = 'ссылка'><img class="img" src=""картинка"></a> </div> <div class = video_button_text> <div class = avatarka_div> <a href="ссылка" target="_blank"><img class = avatarka src="картинка"></a> </div> <div class = video_text_div> <p class = video_text><a href="ссылка">текст</a></p> </div> </div> </div>

Добрый день. Начинающий программист, столкнулся с проблемой. Селектор .class не работает должным образом. Несмотря на правильное, я надеюсь, описание, на web-странице не отображается ни одно изображение. С чем может быть связано? Заранее спасибо за помощь.

Использую готовый плагин для модальных окон(от MaxGraph). Проблема в том, что когда у меня открыто два модальных окна, для примера Форма + Политика конфендициальности, и мне нужно закрыть политику вместе с ней закрывается и другое модальное окно. В JS я не сильно разбираюсь(собственно из за этого и использую готовый плагин), можете помочь кто работал с этим плагином? Я примерно понимаю как он работает, но реализовать чтобы закрывалось только одно не получается. <div class="content"> <button class="modal-btn" data-path="first" data-animation="fadeInUp" data-speed="1500">Открыть окно 1</button> </div> <div class="modal"> <div class="modal__wrapp" data-target="first"> <div class="modal__content"> <button class="modal__close">Закрыть</button> модальное окно <button data-path="policy">Политика</button> </div> </div> <div class="modal__wrapp" data-target="policy"> <div class="modal__content"> <button class="modal__close">Закрыть</button> политика </div> </div> </div> .modal { --transition-time: 0.3s; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 1000; cursor: pointer; overflow-y: auto; overflow-x: hidden; text-align: center; opacity: 0; visibility: hidden; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp { display: none; cursor: default; width: fit-content; height: fit-content; } .modal__content{ position: absolute; left: 500px; width: 500px; height: 500px; display: flex; color: white; flex-direction: column; text-align: left; background-color: #000; } .modal__content button{ width: 200px; height: 50px; margin: 50px 0; } .modal.is-open { opacity: 1; visibility: visible; transition: opacity var(--transition-time), visibility var(--transition-time); } .modal__wrapp.modal-open { display: flex; } .disable-scroll { position: relative; overflow: hidden; height: 100vh; position: fixed; left: 0; top: 0; width: 100%; } .fade { opacity: 0; transition: opacity var(--transition-time); } .fade.animate-open { opacity: 1; transition: opacity var(--transition-time); } .fadeInUp { opacity: 0; transform: translateY(vw(-100)); transition: opacity var(--transition-time), transform var(--transition-time); } .fadeInUp.animate-open { opacity: 1; transform: translateY(0); transition: opacity var(--transition-time), transform var(--transition-time); } .modal__wrapp[data-target="policy"] .modal__content{ left: 1050px; background-color: #000; opacity: .5; } class Modal { constructor(options) { let defaultOptions = { isOpen: () => {}, isClose: () => {}, } this.options = Object.assign(defaultOptions, options); this.modal = document.querySelector('.modal'); this.speed = false; this.animation = false; this.isOpen = false; this.modalContainer = false; this.previousActiveElement = false; this.fixBlocks = document.querySelectorAll('.fix-block'); this.focusElements = [ 'a[href]', 'input', 'button', 'select', 'textarea', '[tabindex]' ]; this.events(); } events() { if (this.modal) { document.addEventListener('click', function(e){ const clickedElement = e.target.closest('[data-path]'); if (clickedElement) { let target = clickedElement.dataset.path; let animation = clickedElement.dataset.animation; if (clickedElement.classList.contains('modal-close')) { this.close(); } let speed = clickedElement.dataset.speed; this.animation = animation ? animation : 'fade'; this.speed = speed ? parseInt(speed) : 300; this.modalContainer = document.querySelector(`[data-target="${target}"]`); this.open(); return; } if (e.target.closest('.modal__close')) { this.close(); return; } }.bind(this)); window.addEventListener('keydown', function(e) { if (e.keyCode == 27) { if (this.isOpen) { this.close(); } } if (e.keyCode == 9 && this.isOpen) { this.focusCatch(e); return; } }.bind(this)); this.modal.addEventListener('click', function(e) { if (!e.target.classList.contains('modal__wrapp') && !e.target.closest('.modal__wrapp') && this.isOpen) { this.close(); } }.bind(this)); } } open() { this.previousActiveElement = document.activeElement; this.modal.style.setProperty('--transition-time', `${this.speed / 1000}s`); this.modal.classList.add('is-open'); this.disableScroll(); this.modalContainer.classList.add('modal-open'); this.modalContainer.classList.add(this.animation); setTimeout(() => { this.options.isOpen(this); this.modalContainer.classList.add('animate-open'); this.isOpen = true; this.focusTrap(); }, this.speed); } close() { if (this.modalContainer) { this.modalContainer.classList.remove('animate-open'); this.modalContainer.classList.remove(this.animation); this.modal.classList.remove('is-open'); this.modalContainer.classList.remove('modal-open'); this.enableScroll(); this.options.isClose(this); this.isOpen = false; this.focusTrap(); } } focusCatch(e) { const focusable = this.modalContainer.querySelectorAll(this.focusElements); const focusArray = Array.prototype.slice.call(focusable); const focusedIndex = focusArray.indexOf(document.activeElement); if (e.shiftKey && focusedIndex === 0) { focusArray[focusArray.length - 1].focus(); e.preventDefault(); } if (!e.shiftKey && focusedIndex === focusArray.length - 1) { focusArray[0].focus(); e.preventDefault(); } } focusTrap() { const focusable = this.modalContainer.querySelectorAll(this.focusElements); if (this.isOpen) { focusable[0].focus(); } else { this.previousActiveElement.focus(); } } disableScroll() { let pagePosition = window.scrollY; this.lockPadding(); document.body.classList.add('disable-scroll'); document.body.dataset.position = pagePosition; document.body.style.top = -pagePosition + 'px'; } enableScroll() { let pagePosition = parseInt(document.body.dataset.position, 10); this.unlockPadding(); document.body.style.top = 'auto'; document.body.classList.remove('disable-scroll'); window.scroll({ top: pagePosition, left: 0 }); document.body.removeAttribute('data-position'); } lockPadding() { let paddingOffset = window.innerWidth - document.body.offsetWidth + 'px'; this.fixBlocks.forEach((el) => { el.style.paddingRight = paddingOffset; }); document.body.style.paddingRight = paddingOffset; } unlockPadding() { this.fixBlocks.forEach((el) => { el.style.paddingRight = '0px'; }); document.body.style.paddingRight = '0px'; } } const modal = new Modal({ isOpen: (modal) => { console.log(modal); console.log('opened'); }, isClose: () => { console.log('closed'); }, });

Мне нужен такой результат : Не понимаю почему background не применяется вокруг иконок: Сам код: Html: css: Html: <section class="finish"> <div class="container"> <h2 class="finish_header">По окончании обучения Вы сможете!</h2> <div class="finish_divider"></div> <div class="finish_wrapper"> <finish_item> <div class="finish_round"> <img src="/icons/finish/1 (1).png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/2.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Создать свой сайт или блог</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/3.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Обеспечить ему медленный, но верный рост в ТОП</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/4.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> <finish_item> <div class="finish_round"> <img src="/icons/finish/5.png" alt="" class="finish_icon"> </div> <div class="finish_descr">Достигнуть стабильного прироста посетителей</div> </finish_item> </div> </div> </section> Css: .finish .finish_wrapper { margin-top: 41px; display: flex; justify-content: space-between; } .finish .finish_wrapper .finish_item { width: 204px; } .finish .finish_wrapper .finish_item .finish_round { width: 115px; height: 115px; background-color: #b4e2ff; border-radius: 8px; } .finish_descr { font-family: Roboto; font-size: 17px; line-height: 20px; font-weight: 300; color: #efefef; Спасибо! Уже решил, спасибо! У меня CSS селектор вида:.finish .finish_wrapper .finish_item .finish_roundА должен быть:.finish .finish_wrapper finish_item .finish_roundТ.е. без точки перед finish_item, так как это не класс, а элемент

Приветствую! Подскажите, плиз, как сделать чекбокс как на скрине? Я новичок в верстке и что-то не могу разобраться в кастомизации данной штуки

Сделал вот такой эффект прокрутки вглубь сайта с появляющимися картинками и исчезающими когда прокручиваешь. let zSpacing = -1000, lastPos = zSpacing / 5, $frames = document.getElementsByClassName('frame'), frames = Array.from($frames), zVals = [] window.onscroll = function() { let top = document.documentElement.scrollTop, delta = lastPos - top lastPos = top frames.forEach(function(n, i) { zVals.push((i * zSpacing) + zSpacing) zVals[i] += delta * -5.5 let frame = frames[i], transform = `translateZ(${zVals[i]}px)`, opacity = zVals[i] < Math.abs(zSpacing) / 1.5 ? 1 : 0 frame.setAttribute('style', `transform: ${transform}; opacity: ${opacity}`) }) } Текст и фото скролятся отлично но если в текст вставить ссылку или кнопку, то они не активными становятся. Если поменять свойство текста, вместо relative на ststic, ссылка работает нормально но уже понятно что её уже не подвинуть. Я не понимаю почему эти ссылки появляются но не работают, ведь если дело в том, что ты должен попасть на нужный фрейм что бы активировать ссылку то почему в таком случае работает static, при том что он тоже появляется и исчезает? И как вообще сделать, что бы ссылка была активна и работала всё время, с появления и до исчезновения?

Всем привет, у меня такой вот вопрос, делаю сайт через react и при изменении расширения что-то идёт не так и какой-то бред получается, подскажите как решить данную проблему. Я вообще не понимаю из-за чего это происходит, по этому не могу нормально объяснить 😅.

Не работает transition при появлений модального окна: <a class="btn">Modal</a> <div class="modal"> <div class="overlay"> <div class="content"> <a class="close">X</a> <h1>Title</h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt repellat asperiores rerum animi officiis minus corporis iure voluptate accusantium, ut optio ratione iusto nemo delectus. Quasi illum libero dolorum neque?</p> </div> </div> </div> //scss .modal .overlay{ position: fixed; top: 0;left: 0; width: 100%;height: 100%; background: rgba($color: #000000, $alpha: .8); z-index: 1; display: none; } .modal .content{ width: 500px;height: 200px; position: absolute; top: 50%;left: 50%; transform: translate(-50%, -50%); background-color: #fff; z-index: 2; text-align: center; display: none; a{ line-height: 30px; font-weight: bold; color: #fff; top: -50px;; position: absolute; right: -50px; font-size: 40px; padding: 10px; } h1{ margin-bottom: 20px; } } .modal.active .overlay{ display: block; } .modal.active .content{ display: block; } //Jquery $(document).ready(function(){ $(".btn, .close").click(function() { $(".modal").toggleClass("active") }) }) Я понимаю что на display не работает transition. но и нельзя ставить opacity т.к перекрывает контент сзади него изначально. Что делать?

Всем привет! Может ли кто-нибудь сказать как реализована такая каруселька у элементов каталога? MyVideo_55.mp4

Всем привет! Задача стоит следующая. Есть 8 элементов (IMG). Т.е. одна целая картинка разрезана на 8 частей(рамка) Нужно сверстать гибкой версткой макет, где эти 8 кусочков будут одним целым( рамкой) а внутри можно будет размещать любой текс, рамка по высоте подстраивается под текс, по ширине на всю ширину окна. Кручу верчу, все никак не получается. Подскажите в какую сторону думать. Каждый Img в отдельный div и все дивы в общий контейнер? и дальше как

Более опытные товарищи, ай нид ё хелп!) Имеется выпадающее меню с классом .sub-menu__list. При наведении оно выпадает, но перекрывается блоком .page__main. Для наглядности прикрепляю скрин и код. Естественно, нужно, чтобы выпадающее меню было поверх контента следующего блока. Подскажите, как это реализовать? P.S. Если нужно поиграть с z-index, подскажите в каком классе, т.к. я перепробовал свои варианты - результата не дало. HTML <header class="header"> <div class="header__all _container"> <div class="header__image"> </div> </div> <div class="header__container _container"> <a href="#" class="header__logo"><img src="img/SL-logo.png" alt="SL"></a> <nav class="header__menu menu"> <ul class="menu__list"> <li class="menu__item"> <a href="#" class="menu__link">Главная</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Обучение</a> <ul class="sub-menu__list"> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Направления</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Стоимость</a></li> <li class="sub-menu__item"><a href="#" class="sub-menu__link">Расписание</a></li> </ul> </li> <li class="menu__item"> <a href="#" class="menu__link">О нас</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Контакты</a> </li> <li class="menu__item"> <a href="#" class="menu__link">Доп.услуги</a> </li> </ul> </nav> <a href="#" class="header__phone"><img src="img/header-phone.png" alt="h-phone"></a> </div> </header> <main class="page"> <div class="page__container _container"> <div class="page__main"></div> CSS .header { } .header__all + ._container { position: relative; } .header__image { background: grey; background-size: cover; height: 302px; font-size: 48px; text-align: center; } /*=======================================HEADER-NAV=======================================*/ .header__container { display: flex; min-height: 110px; align-items: center; margin: 15px auto 0 auto; position: absolute; } .header__logo { } .header__menu { margin: 0 0 0 95px; } .menu { } .menu__list { display: flex; } .menu__item { position: relative; } .menu__item:not(:last-child) { margin: 0 68px 0 0; } .menu__link { font-size: 20px; } .header__phone { margin: 0 0 0 175px; } /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SUB-MENU~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ .sub-menu__list { display: none; position: absolute; } .sub-menu__item { width: 204px; } .sub-menu__item:first-child { padding: 40px 0 0 0; } .sub-menu__link { font-size: 18px; max-width: 204px; } .sub-menu__item:not(:last-child) { margin: 0 0 22px 0; } .menu__item:hover .sub-menu__list { display: block; } /*=======================================MAIN=======================================*/ .page { } .page__container { } .page__main { background: rgba(203, 32, 218, 0.25); height: 300px; font-size: 48px; text-align: center; }

Подскажите пожалуйста, как правильно сделать кастомный список стран используя API. Вот fetch код: const countryList = document.querySelector('.form-list.country'); fetch('https://restcountries.com/v3.1/all').then(res => { return res.json(); }).then(data => { let output = ''; data.forEach(country => { output += `<li class="form-item" data-value="${country.name.common}">${country.name.common}</li>`; countryList.innerHTML = output; }); }).catch(err => { console.log(err); }); полный код html, css, js Во втором списке "Country" список формируется, но название страны не поставляется в форму, а атрибут "data-value="" " в инпут ниже. В первом списке "Guests Amount" все ок, т.к. данные прописаны в html. Нужен такой же, но со странами. Сразу скажу, с тегом select все работает, но мне нужна стилизованная выпадашка. Заранее спасибо.

Здравствуйте! http://unbrokenteam.ru/ Как переместить кнопку на ту же вертикальную линию, что и поля для ввода? Вот как сейчас Вот как должно быть Я использую этот класс для кнопки в style.css .noTableBorder-button { left: 0; margin-left: 0; transform: none; display: block; } index.html style.css

Всем привет, подскажите, пожалуйста, как сделать так, чтобы форма открывалась при нажатии на кнопку, которой на странице находится несколько штук? У меня есть кнопка и несколько ее копий на странице, и я хочу, чтобы если пользователь захотел нажать на кнопку, только на другом месте страницы, открывалась та же самая форма. Но, к сожалению, ее открывает, только самая первая кнопка, подскажите, пожалуйста, решение! Спасибо! <body> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <button class="btn-modal" id="open">Отправить заявку</button> <div class="wrapper-modal" id="wrapperModal"> <div class="overlay-modal" id="overlayModal"></div> <div class="form-modal__item" id="formModal"> <form action="#" id="formModalBody" class="form-modal__body"> <h4 class="form-modal__title"> Оставьте заявку </h4> <span class="close" id="close"> <div class="form-modal__item"> <label for="formName" class="form-modal__label"> Имя: </label> <input id="formName" type="text" name="name" class="form-modal__input" placeholder="Ваше имя *"> </div> <div class="form-modal__item"> <label for="formTel" class="form-modal__label"> Номер телефона: </label> <input id="formTel" type="tel" name="length" class="form-modal__input" placeholder="+7 (___) ___ - __ - __ *"> </div> <div class="form-modal__item"> <label for="formEmail" class="form-modal__label"> Email: </label> <input id="formEmail" type="text" name="width" class="form-modal__input" placeholder="Введите e-mail *"> </div> <button class="form-modal__button" id="open">Отправить</button> </form> </div> </div> </body> #wrapperModal { display: none; position: fixed; width: 100%; height: 100%; z-index: 3; top: 8%; left: 20%; } #wrapperModal.active { display: block; } #overlayModal { position: absolute; top: -8%; left: -20%; width: 100%; height: 100%; z-index: 0; background-color: grey; opacity: 0.5; } .form-modal__body { width: 270px; min-height: 200px; background: #363A4D; border-radius: 20px; padding: 48px 51px 41px 50px; position: relative; } .form-modal__title { font-size: 24px; margin-bottom: 23px; } .close:before, .close:after { position: absolute; content: ' '; right: 28px; top: 16px; height: 18px; width: 2px; background-color: #7E839A; cursor: pointer; border-radius: 5px; } .close:before { transform: rotate(45deg); } .close:after { transform: rotate(-45deg); } .form-modal__label { margin-bottom: 6px; } const btnForm = document.getElementById('open'); const modal = document.getElementById('wrapperModal'); const overlay = document.getElementById('overlayModal'); const close = document.getElementById('close'); btnForm.addEventListener('click', (e) => { e.preventDefault() modal.classList.add('active'); }); const closeModal = () => { modal.classList.remove('active'); } overlay.addEventListener('click',closeModal); close.addEventListener('click',closeModal);

Помогите сделать минимальную макет с header, footer, LeftMenu, Content, RightMenu на Bootstrap 4-5. Ширина LeftMenu + Content + RightMenu аналогична ширине основного блока текущего сайта(htmlforum.io). Другими словами не на всю ширину браузера, а по центру. Может для ширины таких элементов имеется какая-то практика? LeftMenu - привязано к левому краю контейнера. RightMenu - привязано к правому краю контейнера. Для примера... Пробую, всё скачет... https://jsfiddle.net/User65659/0jxt7qLg/45/ Аналог на картинке

Всем привет! Подскажите, пожалуйста, как правильно сделать раскрывающиеся блоки со скрытым содержанием внутри? У меня в принципе все работает, блок открывается и закрывается, НО если я нажимаю на блок, а не на стрелочку, она у меня остается в таком же положении(а она должна у меня меняться, когда блок открывается), и получается куча мала, и выглядит это не очень презентабельно. Подскажите, пожалуйста! <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 1 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 1</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 2 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 2</div> </div> </div> </div> <div class="wrapper-div"> <div class="div"> <div class="window-one"> <h3 class="title"> Заголовок 3 </h3> <div class="arrow-test"></div> </div> <div class="window-two"> <div class="text">Текст 3</div> </div> </div> </div> .div{ border: 1px solid #3A444E; border-radius: 10px; width: 300px; height: 64px; overflow: hidden; } .div.open { height: auto; background: #000; color: #fff; } .window-one { display: flex; align-items: center; justify-content: space-between; } .title { margin-bottom: 20px; } .arrow-test { content: ''; background: url('http://cdn.onlinewebfonts.com/svg/img_387044.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } .arrow-test.open { content: ''; background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/d/dd/Eo_circle_yellow_arrow-up.svg/1024px-Eo_circle_yellow_arrow-up.svg.png') no-repeat center center / 100%; width: 30px; height: 30px; cursor: pointer; } $('.div, .arrow-test').click( function(){ $(this).toggleClass('open')});

Всем привет! Подскажите, пожалуйста, как сделать так, чтобы у меня табы переключались с помощью кнопок "Назад" и "Следующая" с js/jquery. Еще, когда я хочу вернуться назад и нажимаю на предыдущую ячейку, ничего не срабатывает, но когда нажимаю следующую, все прекрасно работает. В общем, у меня какой то кривоватый таб:) Подскажите, пожалуйста! <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="tabs"> <div class="tab active"> <div class="tab__content"> <ul class="steps"> <li class="step active">1</li> <li class="step">2</li> <li class="step">3</li> </ul> <h2>Заголовок 1</h2> <p>Текст 1</p> <button class="btnNext">Следующая</button> </div> </div> <div class="tab"> <div class="tab__content"> <ul class="steps"> <li class="step">1</li> <li class="step active">2</li> <li class="step">3</li> </ul> <h2>Заголовок 2</h2> <p>Текст 2</p> <button class="btnNext">Следующая</button> <button class="btnPrev">Назад</button> </div> </div> <div class="tab"> <div class="tab__content"> <ul class="steps"> <li class="step">1</li> <li class="step">2</li> <li class="step active">3</li> </ul> <h2>Заголовок 3</h2> <p>Текст 3</p> </div> </div> </div> ul,li { display: block; cursor: pointer; } .tabs { margin: 50px; } .steps { display: flex; position: absolute; top: 0px; left: 35px; } .step { display: flex; margin-right: 15px; font-size: 15px; justify-content: center; align-items: center; border-radius: 50%; width: 50px; height: 50px; border: 1px solid red; } .step.active{ background: green; } .tab { padding: 20px; background: blue; width: 300px; height: 200px; border-radius: 20px; display: none; } .tab.active { display: block; } (function($) { $(function() { $('ul.steps').on('click', 'li:not(.active)', function() { $(this) .addClass('active').siblings().removeClass('active') .closest('div.tabs').find('div.tab').removeClass('active').eq($(this).index()).addClass('active'); }); }); })(jQuery);

https://codepen.io/baicuao/pen/LYewoPZ вот песочница. У меня картинка находится в блоке world, но когда смотрю через инспектор она находится в блоке ниже в .help__container, из-за этого даже стили на элементах .help не работают

суть проблемы: создано два элемента - Аккордеон с 3 раскрывающимися пунктами и кнопка при нажатии на которую происходит так же раскрытие дочернего элемента. все работает исправно но если я в html, код аккордеона расположу над кодом кнопки то при открытии элемента аккордеона кнопка сместится вниз и наоборот. мне нужно это исправить любым способом. ошибок в коде нет мне просто нужен вариант.

https://jsfiddle.net/daniars/wzty3xp6/ - ссылка на код 1)Как должно быть 2)На данный момент Никак не пойму, почему они не ровно стоят

Мне нужно, чтоб одна моя картинка была поверх другой, у контейнера уже есть готовый фон. 1)Вот как она должна выглядить 2)Как она выглядит у меня z-index, не работает почему-то

Верстаю макет с Фигмы - https://www.figma.com/file/2rdy1qjBTl7D6BAC8S4qlf/Webovio?node-id=0%3A1. Наверстал CSS В результате отображается следующая картинка в режиме инструментов разработчика. А вне режима вообще отображает Подскажите как добиться отображения текста как на макете.

Привет! Недавно проходила первый этап на собесе с заданием и провалила. Нужно было создать копию отправленного изображения (прикреплено). Предполагаю, что ошибка была изначально в том, что требование "Use SASS variables by changing width and background, it has to change completely, the shape must be responsive (all its parts grow or shrink respectively)" не было выполнено. Фидбека не было, к сожалению. Работа проделана была только с html css. Но быть может были допущены другие другие ошибки? Буду признательна, если кто-нибудь укажет на них. Код ниже и по ссылке: https://codepen.io/qizqepml-th... ls/LYeYqjX <div class="wrapper"> <div class="circle"> <div class="panel panel--1"> </div> <div class="panel panel--2"> </div> <div class="panel panel--3"> </div> <div class="panel panel--4"> </div> <div class="circle--2"> </div> </div> </div> * { box-sizing: border-box; } body { background-color: #2b2b2b; } .wrapper { background-color: #2b2b2b; position: absolute; display: flex; align-items: center; justify-content: center; top: 50%; left: 50%; transform: translate(-50%, -50%); } .circle { height: 29vw; width: 29vw; border-radius: 50%; position: absolute; transform: rotateZ(25deg); background-color: #333333; } .panel { height: 17.5vw; width: 17.5vw; border-radius: 50%; border: 1.5vw solid #f14100; } .panel--1 { float: left; position: absolute; } .panel--2 { float: right; position: relative; } .panel--3 { bottom: 0; position: absolute; } .panel--4 { bottom: 0; right: 0; position: absolute; } .circle--2 { border: 1.5vw solid #f14100; position: relative; border-radius: 50%; height: 25vw; width: 25vw; top: 50%; left: 50%; margin-right: -50%; transform: translate(-50%, -50%); outline: 10vw solid #2b2b2b; }

Добрый вечер, хотел спросить, как мне сделать так как на первом фото последний абзац начинается с левой строки, word-spacing даже пробовал, не помогло 1) То что мне нужно 2)То что у меня https://jsfiddle.net/#&togetherjs=AzUkONtK9g там, текст должен быть на середине, можете не говорить про text-align и т.д