Алексей Голягин

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

Для вашей ситуации, когда у .header .title и .footer .title разные цвета и отступы, вы можете использовать CSS-классы для определения стилей, а также модификаторы для изменения их внешнего вида в зависимости от контекста. Вот пример, как это можно сделать:

<header class="header">
    <h1 class="title title--header">Заголовок</h1>
</header>

<footer class="footer">
    <h1 class="title title--footer">Подвал</h1>
</footer>

.title {
    /* Общие стили для всех заголовков */
    font-size: 24px;
    font-weight: bold;
    margin: 16px 0;
}

.title--header {
    color: blue;  /* Цвет заголовка в шапке */
    margin-top: 20px; /* Отступ для заголовка в шапке */
}

.title--footer {
    color: green; /* Цвет заголовка в подвале */
    margin-bottom: 20px; /* Отступ для заголовка в подвале */
}

Подходящие классы
В этом случае вы создаете основной класс .title, который содержит общие стили для всех заголовков, а затем добавляете модификаторы .title--header и .title--footer для настройки стилей в зависимости от контекста.

Преимущества

1. Повторное использование: Вы можете переиспользовать общий класс .title для других заголовков, сохраняя при этом возможность настраивать их стили.
   
2. Читаемость: Добавляя специальные модификаторы, вы делаете ваш код более понятным и улучшаете его поддержку.
   
3. Гибкость: Легко добавлять новые контексты, если это потребуется, просто создавая новые модификаторы.
   

Таким образом, вы достигаете принципов Atomic Design, создавая модульные и настраиваемые компоненты.

Чет прям какой то трэш с html и css )))

.container-fluid .row {
  margin-left: -5%;
}

.img-fluid {
  padding-left: 50%; /* Отступы в процентах */
  max-width: 200%; /* Максимальная ширина 100% */
  max-height: auto; /* Максимальная высота автоматически */
  left: 0;
  width: 200%;
  height: 600px; ...

- это вас кто так научил?)))

<div class="col-md-6">
              <div class="col-12">
                  <div class="img-fluid" alt="Image"></div>
              </div>
          </div>

- col в col обычно не вкладывают (надо .row > .col)
В общем либо у вас учителя прям печальные, либо верстка это не ваше)

<div class="row ">
   <div class="col-sm-6">
        логотип
    </div>

    <div class="col-sm-6">
       <div class="row">
             <div class="col ">
                  CONTACTS
             </div>
              <div class="col">
                  форма поиска
              </div>
       </div>
     </div>
</div>

Вам в комментариях правильно порекомендовали, в большинстве случаев лучше использовать классы, особенно когда блоки повторяются, по этому сделаю разметку на классах.
Допустим ваш блок имеет следующую HTML разметку:

<div class="halloween-partyIcon">
    <img src="путь-до-изображения" alt="...">
    <div class="title-party">Заголовок</div>
</div>

при такой разметке при помощи псевдокласса hover, вы не сможете реализовать, чтобы текст в "title-party" затемнялся при наведении на картинку. В данном случае можно затемнить этот текс при наведении на сам блок (обвертку) с картинкой, например так:

.halloween-partyIcon:hover .title-party{font-weight:bolder}

Это обычный слайдер как я понял из диалога выше: https://bootstrap5.ru/docs/components/carousel#wit... - вот с дотс слайдер из его разметки убрать (удалить) боковые стрелки:

<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </a>

class="col-md-4 col-6"

Я бы сделал примерно так:

<div class="container">
    <div class="row">
        <div class="col-md-3">дата</div>
        <div class="col-md-8 col-md-offset-1">хлебные крошки</div>
    </div>
    <div class="row">
        <div class="col-md-8">
            <div class="row">
                <div class="col-md-3">Поделится</div>
                <div class="col-md-8 col-md-offset-1">Название статьи</div>
            </div>
            <div class="col-md-10 col-md-offset-1">Текст статьи</div>
        </div>
        <div class="col-md-3 col-md-offset-1">содержимое</div>
        
      </div>
</div>

col-md-offset-1 - для отступов - можно без них, тогда нужно оборачивать содержимое в отдельные контейнеры и давать им отступы при помощи css и в col-md-цифра увеличится где offset

Удалите из файла slick.js текст и сохраните prntscr.com/mp1exm

&levelClass=`submenu`
Смотрите здесь: как сделать многоуровневое меню и оформить его

Похожее решение, тоже масонри (другая) +bootstrap + инструкция на русском

<a class="ставим класс" href="#">содержимое</a>

Можно! Но правильность зависит от реализации, к примеру делаем 2х колончатый шаблон: 1 в первой колонке разкладка еще из 2х колонок:

<section>
    <div class="content">
        <div class="row">
            <div class="col-sm-8">
               <div class="row">
                   <div class="col-sm-6">
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam qui ut aut dolore nulla, quibusdam. Possimus laborum molestias harum officia laudantium! Et libero quis, architecto distinctio esse iure commodi vero.
                   </div>
                   <div class="col-sm-6">
                       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam qui ut aut dolore nulla, quibusdam. Possimus laborum molestias harum officia laudantium! Et libero quis, architecto distinctio esse iure commodi vero.
                   </div>
               </div>                
            </div>
            <div class="col-sm-4">
                контент сайтбара
            </div>
        </div>
    </div>
</section>

PdoMenu в вашем случае точно не причем. скорее всего вы не правильны вывод делаете. покажите как вы его вызываете

a {
    color: #fff; /* Цвет ссылок */
   }
   a:visited {
    color: #cecece; /* Цвет посещенных ссылок */
   }
   a:active {
    color: #ffff00; /* Цвет активных ссылок */
   }

Выкиньте уроки от Дударя, почитайте про семантическую разметку (header, nav, article и т.д.) и как правильно стили располагать: сначала располагается основной bootstrap.min.css, а под ним уже свой style, в котором вы по сути правите основные стили)

Я так понимаю вам нужна обычная якорная ссылка htmlbook.ru/samhtml/yakorya