Николай Шабалин

Вам уже подсказали про гриды, что лучше смотреть в эту сторону. Но у меня есть дополнительные вопросы нужен ли адаптив.

В целом это всё выглядит примерно вот так

<div class="grid">
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>
  <div class="child">
    Мiсто
    <div>viber</div>
    <div>Telegram</div>
  </div>

  <div class="image">картинка</div>
</div>

Элемент с картинкой можно поставить вообще в любое место внутри .grid-родителя

.grid {
  display: grid;
  grid-template-columns: repeat(4, 158px);
  gap: 20px;
}

.child {
  border: 1px solid #000;
  border-radius: 4px;
}

.image {
  grid-column: 1 / 3;
  grid-row: 2 / 4;
  border: 1px solid #000;
  border-radius: 4px;
}

Таблицы должны иметь одинаковое количество ячеек в каждом ряду.

1 1 1
1 1 1
1 1 1

Если какой-то ячейки нет в ряду, то вы должны растнуть ячейку на две

1 1 1
2   1
1 1 1

Если в ряду вообще одна ячейка из трёх, тогда нужно растянуть на 3 ячейки

1 1 1
2   1
3

В вашем случае нужно заменить первый и последний ряды с

<tr>
  <td height="50px" width="100%"></td>
</tr>

на

<tr>
  <td height="50px" colspan="5"></td>
</tr>

5 — потому что у вас 5 ячеек в втором ряду. Ячейкам во втором ряду вы уже можете указать конкретные ширины

Попробуйте обновить VS Code до последней версии, либо удалите ваш VS Code, загрузите заново и установите

.text-take {
 ...
 pointer-events: none;
}

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

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

Категория: если посмотреть в спецификацию, то <a> входит в категорию потока, фраз, ощутимых элементов. Каждый элемент имеет категории, которые используются при определении контентной модели.

Контентная модель: прозрачная. И вот тут самый интересный момент, потому что чаще всего элемент ждёт такие же стандартные категории как поток или фраза, а что значит прозрачный не совсем понятно. Если коротко, то прозрачная - зависит от контентной модели родителя. Какой родитель у ссылки такая контентная модель у ссылки.

То есть на ваш вопрос "будет ли правильно обернуть заголовок h3 в ссылку" ответить нельзя пока мы не узнаем какой родитель у ссылки.

Вот так нельзя

<span>
  <a href="">
    <h3>Заголовок</h3>
  </a> 
</span>

А вот так уже можно

<div>
  <a href="">
    <h3>Заголовок</h3>
  </a> 
</div>

По поводу "или же лучше ссылку обернуть в заголовок" - можно

<h3>
  <a href="">Заголовок</a>
</h3>

Если у вас ещё проблемы с вкладыванием элементов, то лучше спеки не найти - https://html.spec.whatwg.org/multipage/text-level-...

Смотрите на:
1. интерсующий элемент: span, div, button, a
2. его категорию: flow, phrasing
3. его контентную модель: flow, phrasing

Категория - отвечает за тип элемента. Контентная модель - что можно вставить в элемент.

У вас селектор .bg-img:last-child не находит элемент. Поэтому нужно подобрать подходящий селектор.

Я бы на вашем месте на необходимый элемент добавил дополнительный класс, например bg-img-tablet и уже его скрывал на нужных разрешениях экрана.

Очень мало контекста. Тут бы пример вашей разметки увидеть.

Но предположу, что нужно лишь добавить атрибуты размеров

<video width="960" height="540">
  <source src="...">
</video>

Создаёте PUG-файлы страниц, как с HTML:
1. index.pug
2. about.pug
2. catalog.pug

В сборке(dev и prod) это будут HTML-страницы
1. index.html
2. about.html
3. catalog.html

Так как в браузере никакого PUG нет, сборка делает HTML-страницы, то в браузере вы смотрите на HTML-страницы. В связи с этим вам нужно указывать ссылки на эти страницы:

<ul>
  <li><a href="index.html">Главная</a></li>
  <li><a href="about.html">О нас</a></li>
  <li><a href="catalog.html">Каталог</a></li>
</ul>

Я бы не советовал так делать, так как с десктопа тоже можно позвонить. Раньше я сам звонил с помощью скайпа и при клике по такой ссылке телефон пробрасывалс в скайп.

Связка imac - iphone сейчас прекрасно работает.

новое обновление windows 10, тоже начнёт связывать андроиды с виндой.

Не используйте fieldset для оформления, вы убиваете семантику элемента. Fieldset предназначен для группировки инпутов по смыслу, то есть если у нескольких инпутов одна смысловая нагрузка, например инпуты для ввода данных кредитной карточки, то есть смысл их оборачивать в fieldset в ином случае это противозаконно.

Ничего не стоит сделать это с помощью CSS

Поспорю с Андреем.
2) Не храните все символы в одном шрифтовом файле, если у Вас мультиязычный сайт, то есть на сайте есть функционал, который позволяет сменить язык, то храните символы каждого "языка" в отдельных файлах. Это крайне просто.

Зачем так делать? Опять же повторюсь, если сайт мультиязычный, то нет смысла заставлять английского пользователя скачивать кириллические символы. Уменьшив файл в несколько раз вы ускорите загрузку шрифтовых файлов. Для этого в CSS есть директива unicode-range.

Например, для подключения кириллицы

@font-face {
    font-display: swap;
    font-family: 'Lato';
    src: url('/fonts/lato-light/lato-light.cyrillic.woff2') format('woff2'), 
        url('/fonts/lato-light/lato-light.cyrillic.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; // только кириллица
}

Как это работает? Браузер анализирует ваш DOM понимает какие символы используются на сайте и если есть совпадение, то шрифт закачивается, то есть в данном примере если на сайте есть кириллица, то lato-light.cyrillic.woff2 скачается и отрисуется, а шрифт lato-light.latin.woff2 даже не закачается.

Для разделения символов можно использовать инструмент fontmin, либо его gulp аналог

codepen

Посмотрите загрузился ли шрифт в вкладке network - font.

В этом случае загружается.

<style>
            .image {
                width: 100px;
                height: 100px;
                background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
            }
        </style>

        <div class="image"></div>

а в этом случае нет.

<style>
            .image {
                width: 100px;
                height: 100px;
                background-image: url('https://hi-news.ru/wp-content/uploads/2015/01/Galaxy.jpg');
            }
        </style>

        <div class=""></div>

Это всё очень просто проверяется в developer tools вашего браузера. Во вкладке network

SVG самый верный путь.

Вот это полезно для начинания - css-live.ru/articles/karmannoe-rukovodstvo-po-napi...

И Йоксель много про svg пишет - css.yoksel.ru

Оберните формой и повесьте слушателя submit

<form method="post" action="send/to/server">
  <input id="textbox" name="sendtext" class="controls-elements" placeholder="Напишите сообщение и нажмите Enter" type="text"></input>
  <button id="send" onclick="buttonotprav()" class="controls-elements" type="submit">Отправить</button>
</form>

$('form').on('submit', event => {
  event.preventDeailt();
  ... // тут можно получить ответ от сервера, если ajax'ом сделать
})