-
Posts
7 -
Joined
-
Last visited
Information
-
Sex
мужской
Recent Profile Visitors
The recent visitors block is disabled and is not being shown to other users.
Tempest99's Achievements
-
У меня есть адаптивное меню .menu и при нажатии на один из пунктов меню происходит переход на соответствующую ссылку, но само меню не закрывается и фон .bg не исчезает. Как сделать так, чтобы при переходе на страницу после нажатия на ссылку, меню пропадало вместе с темным фоном? Возможно ли это сделать через css или же только через JS?Весь код https://jsfiddle.net/dut2v5ws/Сам сайт ilyin1ib.beget.tech
-
У меня есть вертикальное меню навигации .navbar в виде белых кружков. Как сделать так, чтобы этот блок прилегал к краю .wrapper-а (или хотя бы держался на краю) и никуда не уезжал при уменьшении экрана, несмотря на то, что он имеет свойство position: fixed? Или же единственный выход это каждый раз двигать его приблизительно к краю .wrapper-а через медиа-запросы?Весь код https://jsfiddle.net/dut2v5ws/Сам сайт ilyin1ib.beget.tech
-
При нажатии на один и белых кружков вертикальной навигации, активный должен гореть белым, но когда я нажимаю на второй кружок, который соответствует секции "О нас ", то осуществляется переход к этой секции, но почему-то кружок не становится белым и я не могу понять почему. Так же не понятно почему он не сменяет цвет при скроллинге страницы на следующую секцию, может где-то ошибка в js коде?Сам сайт ilyin1ib.beget.techВесь код https://jsfiddle.net/bhkjudvL/ <nav class="navbar"> <ul> <li> <a href="#main" class="dot active" data-scroll="main"> <span>Главная</span> </a> </li> <li> <a href="#about_us" class="dot" data-scroll="about_us"> <span>О нас</span> </a> </li> </ul> </nav> <section id="main" class="main"> <div class="wrapper"> <div class="content"> <p class="main-title"> Нам Вы можете полностью доверить создание, доработку и продвижение сайта. </p> <h1>Первая веб-студия с постоплатой по<br>факту выполненной работы</h1> <button class="btn-main open-popup"><span>Оставить заявку</button> </div> </div> </section> <section id="about_us" class="about_us"> <div class="wrapper"> <div class="content"> <div class="inverted"> <h2>Веб-студия Inter-web – это<br>возможность <span class="pink">заявить о себе</span></h2> </div> <div class="features"> <h4>Мы всегда отслеживаем новые тенденции и на их основе предлагаем уникальные предложения. </h4> <div class="features-block"> <div class="quantity_block"> <span class="quantity_numbers one">10</span> <span class="quantity_text">лет на рынке</span> </div> <div class="desc"> <p>Агентство “Inter-web” существует на рынке более *n* лет. За все время работы мы успели построить доверительные отношения со всеми клиентами и показать весь наш профессионализм в работе.</p> </div> </div> <div class="features-block"> <div class="quantity_block"> <span class="quantity_numbers two">75</span> <span class="quantity_text">специалистов в<br>штате</span> </div> <div class="desc"> <p>У нас идет строгий отбор сотрудников фирмы. В агентстве “Inter-web” работают исключительно профессионалы своего дела.</p> </div> </div> <div class="features-block"> <div class="quantity_block"> <span class="quantity_numbers three">150</span> <span class="quantity_text">выполненных<br>проектов</span> </div> <div class="desc"> <p>За плечами более *количество* успешно сделанных и работающих сайтов.</p> </div> </div> </div> </div> </section> .navbar { position: fixed; top: 50%; right: 120px; transform: translateY(-50%); z-index: 1000; } .navbar ul li { width: 200px; position: relative; text-align: right; } .navbar ul li .dot { color: #fff; display: block; padding: 5px 0; } .navbar ul li .dot span { display: inline-block; background: #fff; color: black; letter-spacing: 1px; padding: 10px 25px; margin-right: 30px; border-radius: 3px; transform: translateX(30px); opacity: 0; } .navbar ul li:hover .dot span { transform: translateX(0px); opacity: 1; } .navbar ul li .dot span::before { content: ''; position: absolute; top: 50%; right: 0; transform: translate(7px, -50%); border-left: 7px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; display: block; } .navbar ul li .dot::before, .navbar ul li .dot::after { content: ''; position: absolute; top: 50%; border-radius: 50%; display: block; transition: .2s ease-out; } .navbar ul li .dot::before { height: 15px; width: 15px; border: 1px solid #fff; right: 0; transform: translateY(-50%); } .navbar ul li .dot.active::before { background-color: #fff; } .navbar ul li:hover .dot::before { border: 3px solid #fff; } $(window).on('scroll',function(){ var link = $('.navbar a.dot'); var top = $(window).scrollTop(); $('section').each(function(){ var id = $(this).attr('id'); var height = $(this).height(); var offset = $(this).offset().top - 150; if(top >= offset && top < offset + height){ link.removeClass('active'); $('.navbar').find('[data-scroll="' + id + '"]').addClass('active'); } }); });
-
Правильно ли будет сверстать блок из макета так, что блоку с картинкой и блоку с обратной связью нужно будет задавать фиксированную ширину и высоту? Или есть способ более правильный? Макет https://www.figma.com/file/zwa7oxqCS43WTsPEAQhMik/Форма-заказа?node-id=1%3A40
-
Tempest99 changed their profile photo
-
у меня 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол флекс-контейнера,решил сделать это командой justify-self и когда задаю для дива one параметр justify-self: start, то реакции не идет. Можно ли разместить каждый див по углу через грид? https://codepen.io/tempest2708/pen/ZEWaepy
-
Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад? https://codepen.io/tempest2708/pen/dyMVoOp pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4
-
не могу понять почему у меня съезжает телефон при уменьшении экрана? Вроде все перепробовал , но не выходит... <div class="row"> <div class="col-lg-3 "> <img src="img/logo.png" alt="logo"> </div> <div class=" col-lg-2 offset-lg-4 align-self-center phone text-right"><a href="#">+7 495 771 05 08</a></div> <div class="col-lg-3 align-self-center text-right"><button class="button header-btn ">получить консультацию</button></div> </div>