Flur

Переходите на флексы, забейте уже на этот еб... IE
https://codepen.io/svassr/pen/gbeGaw

Точно такой незнаю, но вот похожий + шум наложите (сами)

background: -moz-linear-gradient(left, #770c19 0%, #710c1e 12%, #670c29 26%, #510c3f 45%, #260d69 78%, #1b0d73 89%, #150d79 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, #770c19 0%,#710c1e 12%,#670c29 26%,#510c3f 45%,#260d69 78%,#1b0d73 89%,#150d79 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, #770c19 0%,#710c1e 12%,#670c29 26%,#510c3f 45%,#260d69 78%,#1b0d73 89%,#150d79 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */

Давайте пройдемся по пунктам :
1) Их много. Достаточно популярный codepen

2) Что касается адаптива.
Ничего сложного в бутстрапе нет. Особенно в сеточной системе (grid system). Документация по все классам и компонентам лежит на официальном сайте
Если вы любитель смотреть видосики, то вот рекомендую этого -> чувака

3) С медиа-запросами тоже всё довольно просто.
Смысл в том что вы просто переназначаете стили для определенных блоков при определенных размерах экрана
О медиа-запросах (и не только) понятным языком объясняет Sorax

HTML+CSS реально изучить за неделю (максимум за 2).

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

Бля пацаны не смешно. Вы работаете вместе что ли или проходите стажировку ?

Как лучше сверстать такую тень?

А делается всё просто: блок с градиентом трансформируешь и абсолютом запихиваешь в relative контейнер с иконкой

#testCarousel .carousel-caption {
    text-shadow: none;
    color: #000;
    background: #fff;
    left:50%;
    right:0;
    bottom:0;
    top:0;
    text-align:right;
}

Попробуй вставить ссылку на любое другое изображение которое находится на хосте. Отпишись, если сработает !

Codepen