Кирилл

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

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

не вдаваясь в подробности конкретной проблемы, есть несколько шагов к выявлению ошибки:

• проверить специфичность (выше)
• посмотреть в браузере в фаербаге, что происходит и что применяется к элементам в зависимости от обстоятельств
• попробовать протестировать отдельные простые куски кода и посмотреть работает ли хоть чтото. Например так:
  
  

  @media all and (min-width: 640px) and (max-width: 734px){
      * {
         background: red;
      }
  }

  
  

Наделайте скриншотов и заливайте, только я не совсем понял про "свёрстанные с Гугла" - это вы типа их нагуглили?

Лучше всего для портфолио подойдет github + github pages.

Заливаете Ваш проект на github создаете ветку gh-pages.

На фрилансе размещаете превью проекта (скрины) и добавляете ссылку на Ваш проект + короткое описание.

Не надо делать в две колонки, бутстраповские колы отлично переносятся построчно

<div class="row">
    <div class="col-12 col-lg-6">
        <div class="item"></div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="item"></div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="item"></div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="item"></div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="item"></div>
    </div>
    <div class="col-12 col-lg-6">
        <div class="item"></div>
    </div>
</div>

Возможно проблема с русскими буквами в пути к файлу