Михаил Р.

requests парсит лишь первый ответ сервера и не может в динамический контент.

что делать?

Не использовать requests для парсинга, а использовать selenium.

- У Вас 2 контейнера на странице (нужный Вам - второй), какой элемент по счету получает querySelector()?
- Если Вы не знаете точно, зачем Вам получать элементы по классам, или это единственный получаемый такой элемент - используйте id.

Ниже исправленный код, все работает. Вам необходимо добавить в верстке id="select" для списка, и id="output" для вывода:

const list = {
    'Audi': 'Audi AG — немецкая автомобилестроительная компания в составе концерна Volkswagen Group, специализирующаяся на выпуске автомобилей под маркой Audi. Штаб-квартира расположена в Ингольштадте.',
    'Volkswagen': 'Volkswagen — немецкая автомобильная марка, одна из многих, принадлежащих концерну Volkswagen AG. Под этой маркой в 2007 году было реализовано 5 млн 20 тыс. автомобилей. Штаб-квартира — в Вольфсбурге.',
    'Opel': 'Adam Opel AG — немецкий производитель автомобилей. Штаб-квартира расположена в Рюссельсхайме, Германия. Компания была основана 21 января 1863 года и приступила к выпуску автомобилей в 1899 году. С 1929 года принадлежала концерну General Motors.'
}

document.addEventListener('DOMContentLoaded', () => {
    const select = document.querySelector('#select');
    const output = document.querySelector('#output');

    select.addEventListener('change', () => {
        output.textContent = list[select.value];
    });
});

Попробуйте следующие варианты:

img {
    image-rendering: optimizeQuality;
}

или:

<object type="image/svg+xml" data="img.svg" width="100" height="100"></object>

или:

<embed type="image/svg+xml" src="img.svg" width="100" height="100"/>

Пример сетки, оформлять не стал:

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

CSS object-fit.

либо же это должно происходить на сервере?

На сервере, сразу получать изображение необходимого размера.

Нужно, чтобы при наведение на любую из кнопку верхний и нижний бордер меняли цвет.

Можно ли убрать подчеркивание ссылки в HTML не прибегая к CSS и атрибуту style

Нет

border-image
https://nikitahl.com/gradient-border-css

Возможно:
- ElectronJS
- Tauri

Но это все текст с кучей отдельных элементов. Неужели каждый элемент вручную с помощью % нужно высчитывать и рисовать?

- Svg, с расположением каждой части в нужном месте, например: d: path("M 1072.8 952.661 V 336.358").
- Каждый элемент svg имеет свой id (например: id="path12523-5"), к которому можно обратиться из css/js.
- Для каждого разрешения дисплея - отдельный svg, но со старыми id.
- JS передает логику по id элементов в svg, не задумываясь, как они там расположены.

Встал следующий вопрос - как реализовать подгрузку меню сайта (навбара), чтобы в случае необходимости (например нужно будеть добавить пункты меню для сайта) не пришлось переписывать все страницы сайта, а изменить только сам навбар, который все страницы сайта уже самостоятельно подгрузят себе.

Фактически, 3 варианта:
1. Динамическая подгрузка пунктов меню, через js. В таком случае, не нужны сборщики, но SEO данного блока будет так себе.
2. Использование сборщика проектов, например, Webpack + шаблонизатор (EJS или Handlebars).
3. Использование сборщика проектов, например, Webpack + React/Vue.

В CSS существует ограниченный набор свойств для непосредственного управления межстрочным интервалом или отступами непосредственно от букв. Либо это line-height, либо возня с отрицательными margin или псевдо элементами.

Ну вот и у госов теперь все "ровно":
line-height: 1;

Как через xpath достать язык страницы?

Если в html имеется атрибут lang, то можно получить его значение: /html/@lang

Tell Google about localized versions of your page, а теперь по-русски:
1. html lang="ru" должен быть указан и сообщать текущий язык страницы. Отдельный атрибут lang="ru" у элемента перебивает основной, указанный в html lang="ru".
2. В head необходимо указывать мета атрибуты (ссылки) на аналогичные страницы, но на другом языке.
3. В head необходимо указать мета атрибут (ссылку) на текущую страницу.
4. В head необходимо указать мета атрибут (ссылку) на страницу с языком по умолчанию (hreflang="x-default"), если у пользователя в браузере установлен язык, который не обнаружен в мета атрибутах (ссылках) в head нашей страницы, обычно - это английский (стандартный). Здесь же обычно создают механизм выбора языка страницы с последующей переадресацией (если у нас такая имеется), либо перевод авто-переводчиком текущей страницы.

Важно! Гугл в примерах использует поддомены для языковых версий, я же использую поддомены лишь для регионов или отдельной функциональности (админка, личный кабинет итп).

Пример ru страницы (дефолтной):

<html lang="ru">
<head>
    <title>This is content ru lang (default)</title>
    <!-- link from others lang versions -->
    <link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
    <link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
    <!-- link from current lang versions (ru) -->
    <link rel="alternate" hreflang="ru" href="https://example.com/page"/>
    <!-- link from not supported lang versions -->
    <link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
</head>
<body>
    <div>This is content ru lang (default)</div>
    <div lang="en">This is content en lang</div>
</body>
</html>

Пример en страницы:

<html lang="en">
<head>
    <title>This is content en lang</title>
    <!-- link from others lang versions -->
    <link rel="alternate" hreflang="ru" href="https://example.com/page"/>
    <link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
    <!-- link from current lang versions (en) -->
    <link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
    <!-- link from not supported lang versions -->
    <link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
</head>
<body>
    <div>This is content en lang</div>
    <div lang="ru">This is content ru lang</div>
</body>
</html>

Пример страницы с не определенным языком (hreflang="x-default"), она же en версия страницы:

<html lang="en">
<head>
    <title>This is content en lang</title>
    <!-- link from others lang versions -->
    <link rel="alternate" hreflang="ru" href="https://example.com/page"/>
    <link rel="alternate" hreflang="de" href="https://example.com/de/page"/>
    <!-- link from current lang versions (en) -->
    <link rel="alternate" hreflang="en" href="https://example.com/en/page"/>
    <!-- link from not supported lang versions -->
    <link rel="alternate" hreflang="x-default" href="https://example.com/en/page"/>
</head>
<body>
    <div>This is content ru lang</div>
    <div lang="ru">This is content ru lang</div>
</body>
</html>

Должен ли мой переключатель языка, к примеру, быть в виде ссылок < a>, или < button> + js тоже норм (как по умолчанию в opencart)?

Без разницы, главное, чтобы после действия был выполнен переход на другую страницу с необходимыми метатегами.

Желательно, чтобы каждая страница сообщала свой язык, используя атрибут land в html теге:
<html lang="ru">

https://developers.google.com/youtube/iframe_api_r...
https://developers.google.com/youtube/player_param...

let player;

function onYouTubePlayerAPIReady() {
    player = new YT.Player('player', {
        videoId: '123',
        playerVars: {
            autoplay: 1,
            fs: 0
        },
        events: {
            'onReady': onPlayerReady
        }
    });
}

Так же учитывайте тот факт, что многие браузеры блокируют авто-воспроизведение звуков и видео без явного действия пользователя.

В linux сделал сайт

Сам файл находится в windows

Хм...

< img src="file:///C:\Users\cu_1\Desktop\sublime\images\1.avif">

Вангую, что не верный адрес до изображения. Расположите файл в директории рядом с index.html, а путь до файла пропишите /1.avif.