Wan-Derer, берете любой понравившийся сайт и его цвета.
Или поиск по картинкам.
Или в сборнике шаблонов.
Или "ок, гугл, палитры для сайта|презентаций".
И т.д.
3Dcache, что это? Редактор какой-то cms?
Похоже на неверный путь.
Точнее похоже на путь по серверу, а не по сайту.
Вероятнее всего, путь будет просто src="picture.svg"
Если cms позволяет хранить картинки в своей корневой папке, а не в специальной папке images.
Обычно есть какая-то страница образец, на которой это можно посмотреть. И сделать по аналогии.
Дальше скажу сложное, но придётся разбираться. Нужно открыть инструменты разработчика в браузере, вкладку Console и посмотреть где браузер ищет каринку. Сравнить с тем, где она лежит на самом деле. И поправить путь.
По-хорошему, я вижу два варианта:
1. Немножко изучить html, css. Можно по тренажерам HTML Academy.
2. Нанять специалиста на фрилансе.
Почему я это пишу: потому что, судя по скринам, это не контентное изображение, это украшение какого-то текста. Такие картинки вставляются в стилях.
Конечно, всё зависит от того, какую задачу вы решаете этим сайтом. Если это сайт-однодневка для быстрой рекламы чего-то, то и черт с ним, как вставилось, так и ладно. А если что-то нормальное, то и делать хорошо бы сразу нормально.
3Dcache, svg вставляется на сайт несколькими способами:
1. Инлайном в разметку. Это тот код, который вы показываете прямо копируется и вставляется в html. (Так делают, если нужна смена нескольких цветов или анимации.)
2. SVG код сохраняется как файл с расширением . svg
И дальше вставляется
2.1 тегом img
2.2 фоном или маской в css
2.3 в content псевдоэлемента (неудобно управлять размерами)
3. Вставляется инлайном в base64 в css, всюду куда вставлялся путь к внешней картинке.
4. Из svg делаются спрайты.
4.1 из symbol - устаревший вариант,можно было использовать только в use
4.2 из svg - актуальный вариант, можно использовать в use, в img, в css в любом виде (фон, маски, content)
Думаю, что на данном этапе вам подойдут варианты 1 или лучше 2
Если опять не понятно, то постарайтесь конкретней сформулировать, что у вас есть и что нужно получить.
1. <section class="main">
Это не секция в любом случае.
Это либо div, который нужен для группировки не имеющей смысла, либо тег main для основного содержимого страницы.
2. <p>Название статьи:</p>
Это не p, это <label>.
Для подписей полей формы используют label и связывают его с инпутом. Во-первых, для скринридеров, во-вторых, чтобы клик по подписи ставил фокус в поле. https://developer.mozilla.org/en-US/docs/Learn/For...
3.
<a href="logout.php">
<button>Выйти</button>
</a>
Всегда проверяйте код валидатором https://validator.w3.org/nu/
Кнопки нельзя вкладывать в ссылки. И наоборот нельзя.
Выберите что-то одно. Видимо, в вашем случае ссылку.
4. Кнопки удобнее делать тегом button, а не input. Вам же легче будет стилизовать.
Вариант с input работающий но устаревший.
1. Иконки сжимаются, потому что забыли запретить это делать flex-shrink: 0
2. С центрированием вы ошибаетесь. Оно работает. Но дело в том, что родитель блоков .tab тоже флекс и его элементы занимают ширину по контенту. Соответственно, без разницы как вы там выравниваете внутренности, ведь свободного места для выравнивания всё равно нет и результат будет одинаковый при любом значении.
Если вы хотите выравнивать текст внутри tab__text, то для этого есть обычный text-align.
Когда не понятно что происходит, обводите элементы рамочками (полупрозрачный outline и отрицательный outline-offset на толщину обводки). Если сложно пользоваться инструментами разработчика.
p.s. эти иконки это не img.
Их нужно либо убрать в стили (псевдоэлементами - идеально) либо скрыть от скринридеров с помощью aria-hidden.
Подумайте сами.
Толщина границ: обычно не зависит от ширины вьюпорта. Как была задана дизайнером, например, в 1px, так и останется. (Бывают, конечно, разные случаи, но в большинстве так).
В чем будете задавать?
Карточки в каталоге: не знаем сколько поместится и пишем minmax(300px, 1fr). Это в чем? В px или в %?
Либо нужно выстраивать всегда по 4 карточки в ряд. Можем задать ширину по 25%, можем написать repeat(4, 1fr).
Можем, конечно и в пикселях и написать кучу media.
Так и разбирайте каждый блок. Что в нем и от чего зависит.
На всякий случай, кроме % и px полно других интересных единиц измерения.
А также функции min, max и clamp.
Рекомендую изучить перед тем как начать писать.
Или поиск по картинкам.
Или в сборнике шаблонов.
Или "ок, гугл, палитры для сайта|презентаций".
И т.д.