Jump to content

Tempest99

Newbie
  • Posts

    7
  • Joined

  • Last visited

Information

  • Sex
    мужской

Tempest99's Achievements

Explorer

Explorer (1/14)

  • Week One Done Rare
  • One Month Later Rare
  • One Year In Rare

Recent Badges

0

Reputation

  1. У меня есть адаптивное меню .menu и при нажатии на один из пунктов меню происходит переход на соответствующую ссылку, но само меню не закрывается и фон .bg не исчезает. Как сделать так, чтобы при переходе на страницу после нажатия на ссылку, меню пропадало вместе с темным фоном? Возможно ли это сделать через css или же только через JS?Весь код https://jsfiddle.net/dut2v5ws/Сам сайт ilyin1ib.beget.tech
  2. У меня есть вертикальное меню навигации .navbar в виде белых кружков. Как сделать так, чтобы этот блок прилегал к краю .wrapper-а (или хотя бы держался на краю) и никуда не уезжал при уменьшении экрана, несмотря на то, что он имеет свойство position: fixed? Или же единственный выход это каждый раз двигать его приблизительно к краю .wrapper-а через медиа-запросы?Весь код https://jsfiddle.net/dut2v5ws/Сам сайт ilyin1ib.beget.tech
  3. При нажатии на один и белых кружков вертикальной навигации, активный должен гореть белым, но когда я нажимаю на второй кружок, который соответствует секции "О нас ", то осуществляется переход к этой секции, но почему-то кружок не становится белым и я не могу понять почему. Так же не понятно почему он не сменяет цвет при скроллинге страницы на следующую секцию, может где-то ошибка в 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'); } }); });
  4. Правильно ли будет сверстать блок из макета так, что блоку с картинкой и блоку с обратной связью нужно будет задавать фиксированную ширину и высоту? Или есть способ более правильный? Макет https://www.figma.com/file/zwa7oxqCS43WTsPEAQhMik/Форма-заказа?node-id=1%3A40
  5. у меня 4 квадрата и я хочу разместить каждый из этих квадратов в каждый угол флекс-контейнера,решил сделать это командой justify-self и когда задаю для дива one параметр justify-self: start, то реакции не идет. Можно ли разместить каждый див по углу через грид? https://codepen.io/tempest2708/pen/ZEWaepy
  6. Есть адаптивное меню .mobmenu и кнопка обратной связи .feedback.openform. Как сделать так,чтобы при нажатии на гамбургер, меню с темным задним фоном перекрывало кнопку обратной связи,чтобы ее нельзя было нажать? И наоборот,при нажатии на форму обратной связи,нельзя было вызвать адаптивное меню. С меню вроде как я справился,но вот как полностью вывести фидбэк на передний план и чтобы при этом чтобы header с гамбургером отошли назад? https://codepen.io/tempest2708/pen/dyMVoOp pornohub-google-chrome-2020-09-04-00-56-15_AYQgL2jv.compressed.mp4
  7. не могу понять почему у меня съезжает телефон при уменьшении экрана? Вроде все перепробовал , но не выходит... <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>
×
×
  • 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