Leaderboard


Popular Content

Showing content with the highest reputation since 03/31/2019 in all areas

  1. 2 points
    как вариант можно использовать background можно так и делать как вы сказали, ничего не мешает выходить за пределы блоков некоторым элементам
  2. 2 points
    Малость переделал стрелочку, теперь можно обойтись одним псевдоэлементом. А значит у вас из кода можно будет убрать .wrap и кружочки сделать с помощью второго псевдоэлемента для .block По поводу верстки - зачем вы все с помощью абсолютного позиционирования двигаете? Можно флексами обойтись. Код для стрелочки: <div class="box"></div> .box{ height: 100px; width: 200px; background: red; border-radius: 10px; position: relative; } .box:after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%) rotateX(180deg); width: 40px; height: 50px; background-image: radial-gradient(at 100% 30%, transparent, transparent 79%, red 80%, red), radial-gradient(at 0% 30%, transparent, transparent 79%, red 80%, red); background-position: 20px; }
  3. 2 points
    Возвращает "<h1>Hello World!</h1>". Проверьте подключение скрипта, он у вас срабатывает раньше чем построится DOM
  4. 2 points
    Поправил ваш стиль, у вас в медиа запросе была лишняя ; а вообще прогоните ваш сайт через валидатор - ужаснетесь
  5. 1 point
    Можно ещё у дизайнера спросить, каким сайтом он вдохновился. Когда-то давно мне попадался дизайнерский сайт, с точно такими же линиями. Возможно и он с него идею взял)
  6. 1 point
    Смотрите letter-spacing, line-height, возможно нужно поиграть с word-spacing. Так же есть вариант того, что дизайнер промахнулся с размерами, и некоторые слова выходят за границы сетки 🙂
  7. 1 point
    Сильно в код не вникал, но в целом да. Сами видите насколько код меньше и чище получился 🙂
  8. 1 point
    Здравствуйте Проще всего будет использовать SVG
  9. 1 point
    Приветствую. клик вешаете на блок со ссылкой, а не саму ссылку. Соответственно, событие сработает, даже если кликнуть правее от ссылки; непонятно, зачем вешаете событие на клик по второй ссылке внутри клика на первую, это ведь независимые элементы; нет точек с запятой в конце строк, это важно. Привыкайте писать их всегда; в подобных штуках хорошо бы проверять не только совпадения, но и вообще факт того, что в полях что-то вбито. Наскоряк переписал/дополнил как-то так: var regbutton = document.querySelectorAll('.button a'), form = document.querySelector('form'), inputs = document.querySelectorAll('input'), h3 = document.querySelector('h3'), reginfo = document.querySelectorAll('p'); regbutton[0].addEventListener('click', function(e) { e.preventDefault(); form.style.display = form.style.display === 'none' ? 'block' : 'none'; }); regbutton[1].addEventListener('click', function(e) { e.preventDefault(); if (inputs[0].value) { if (inputs[1].value && inputs[2].value) { if (inputs[1].value == inputs[2].value) { h3.textContent = 'Вы завершили регистрацию!'; reginfo[1].textContent = inputs[0].value; reginfo[2].textContent = inputs[1].value; } else { h3.textContent = 'Пароли не совпадают!'; } } else { h3.textContent = 'Введите пароль в оба текстовых поля'; } } else { h3.textContent = 'Введите имя'; } }); Продолжайте учить 🙂
  10. 1 point
    попробуйте так https://jsfiddle.net/5xpurek0/
  11. 1 point
    я бы выбрал с JS. Всё отличие в браузерной поддержке и удобстве использования.
  12. 1 point
    Почитайте как работают Флексы. Для наглядности используйте https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/
  13. 1 point
    Так нужно? https://codepen.io/anon/pen/bPqgvY?editors=1100
  14. 1 point
  15. 1 point
    Если отталкиваться от сложного пути то следует начать с метрик шрифтов — Погружение в CSS: метрики шрифтов, line-height и vertical-align Если посмотреть на разницу Ваших примеров то можно поспорить — какой из скринов "корректный"? Дело в том, что в примере под Windows — присутствует "излишний" отступ сверху, над текстом. В то же время под macOS высота строки в точности от нижней границы символов до верхней. От сюда следует понимать "по-центру" — это субъективное мнение. Разница в математических расчетах.
  16. 1 point
    <fieldset> <legend> Lorem ipsum dolor sit amet. </legend> Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quam harum facere provident nostrum eos fugit saepe quia quos natus maiores libero, nulla reprehenderit tempore. Sit quae culpa cupiditate voluptatum aspernatur? </fieldset> fieldset { border-radius: 5px; width: 400px; } К тег legend тоже можно применять разные css свойства если что.
  17. 1 point
    Thank you @klierik for the solution, it really works and help me to solve the problem.
  18. 1 point
    посмотрите в сторону https://webformyself.com/maski-css/ может поможет, а вообще картинкой проще всего конечно
  19. 1 point
    Мое извращение: Нужные размеры можно либо подобрать, либо использовать JS для автоматизации. Но, имхо, лучше с SVG разобраться, так как в моем примере не получится залить полупрозрачным фоном See the Pen pmqBMv by Alexandr (@AlexZaw) on CodePen. <div class="wrap"> <ul> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem lorem lorem lorem</div><span></span> </li> <li> <div class="el">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, cumque? lorem lorem lorem</div> <span></span></li> </ul> </div> *, :before, :after{ margin: 0; padding: 0; box-sizing: border-box; } .wrap{ background: url(http://placekitten.com/1000); } ul{ margin: 50px; list-style: none; display: inline-block; } li{ margin-bottom: 30px; position: relative; } .el{ position: relative; padding: 10px; } .el:before,.el:after, li:before,li:after,span:before,span:after{ content: ''; position: absolute; height: 100%; width: calc(50% - 40px); top: 0; border: 2px solid #ccc; } .el:before{ border-radius: 50px 0 0 50px; border-right: none; left: 0; } .el:after{ right: 0; border-left: none; border-radius: 0 50px 50px 0; } li:before,li:after,span:before,span:after{ width: 50px; top: calc(-100% + 2px); left: 50%; transform: translateX(calc(-100% + 2px)); border: 2px solid #ccc; border-radius: 0 0 50% 0; border-top: none; border-right: none; border-left: none; } li:after{ transform: scaleX(-1); } span{ position: absolute; height: 100%; width: 100%; top: 0; left: 0; } span:before{ top: calc(100% - 2px); transform: translateX(calc(-100% + 2px)) scaleY(-1); } span:after{ top: calc(100% - 2px); transform: scale(-1,-1); }
  20. 1 point
  21. 1 point
    По моему очевидно, что на таких вещах не экономят, если конечно, проект стоящий. Кто хочет бесплатно то подумайте 100 раз... https://senior.ua/articles/preimuschestva-i-nedostatki-deshevogo-vebhostinga
  22. 1 point
  23. 1 point
    Видны куски какого-то шаблонизатора вида {for:questions} и при этом не видно php-кода. А кроме того, неплохо бы посмотреть на ошибки. Тут-то сидят люди, для которых текст ошибок имеет значение.
  24. 1 point
    Как вариант делайте проверку в php, если соединение не защищено редиректите =)))
  25. 1 point
    на велосипеде катаюсь недавно, бмх.
This leaderboard is set to Kiev/GMT+03:00