Пащук Илья

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

Смотри тут нужно подключить логику и правила BEM методологии, по BEM нельзя использовать конструкцию с обращением к span, да и еще учитывая что у вас там есть модефикачия ребенка "feature__color__item_first feature__color__item", сегодня у вас span сегодня а завтра будет div и все приехали))!
По поводу неймина и длинны не переживай это нормально, но стараться нужно писать более логично и с малым набором имен, лучше больше старайся декомпозировать свои компоненты!
Как уже было написано выше у вас не правильный BEM!

component: .feature
block: .feature__color
modeficator: .feature__color--first или .feature__color_first

Вот смотри правильно так:

<div class="feature">
    <div class="feature__color feature__color--first">
        <mark class="feature__color-item feature__color-item--first"></mark>
        <mark class="feature__color-item"></mark>
    </div>

    <div class="feature__color feature__color--first">
        <mark class="feature__color-item feature__color-item--first"></mark>
        <mark class="feature__color-item"></mark>
    </div>
</div>

или :
<div class="feature">
    <div class="feature__color feature__color_first">
        <span class="feature__color-item feature__color-item_first"></span>
        <span class="feature__color-item"></span>
    </div>
</div>

или :
<div class="feature">
    <div class="feature-color feature__color_first">
        <span class="feature-color__item feature-color__item--first"></span>
        <span class="feature-color__item"></span>
    </div>
</div>

Если вы уверены что внутри будет один блок то в виде исключения можно написать так(но я не рекомендую так как это нарушает BEM):

<div class="feature">
    <div class=feature__color"">
        <div class="feature-color-item ">
            <h2>first text</h2>
            <mark>second text</mark>
            last text
        </div>

        <div class="feature-color-item feature-color-item--fietst ">
            last text
        </div>
    </div>

    <style>
        .feature-color-item {
            font-size: 20px;
        
            h1 {
                font-size: 30px;
            }
        
            span {
                font-size: 10px;
            }
        }
    </style>
</div>

Если вы используете современный фреймворк, то тогда за счет инкапсуляции можно сократить нейминг, вот на примере ануглар:

<feature>
    <atricle class="__color">
        <div class="__item"><span>text</span></div>

        <div class="__item"><span>text</span></div>

        <div class="__item"><span>text</span></div>
    </atricle>
</feature>

или :

<feature>
    <atricle class="--first">
        <feature-color-item >
            <h2 class="__title">first text</h2>
            <mark class="__mark">second text</mark>
            last text
        </feature-color-item>

        <feature-color-item class="--first">
        <h2 class="__title">first text</h2>
        <mark class="__mark">second text</mark>
        last text
        </feature-color-item>
    </atricle>

    <style>
      /* componet feature-color-item */
        :host {
            font-size: 20px;

            .__title {
                font-size: 30px;
            }

            .__mark {
                font-size: 10px;
            }
            
            &.--first{
                 color: #red;
             }
        }
    </style>
</feature>

Вообще вам просто надо присмотреться у вас на тег header стоит position: absolute; , все должно работать но не работает потому что у вас просто нету тега header, как говорится учится учится и еще раз учится и не задавать *глупых вопросов_)) из за невнимательности!

Еще на заминку она и будет уходить, изза того что блок .header первый а блок .intro стоит следующим, тут тебе или нужно делать чтобы два блока были в одной секции, или добавлять отрицательный отступ по высоте нижнему блоку, ну или твой вариант когда блок позиционируется абсолютным позиционированием, но позиционировать прям в боди абсолютом так сказать не очень идея, в любом случае всем другим блокам что ниже тогда надо внутри паддинг от верху задавать по такой высоте как хеадер!

Вот твой вариант профиксил смотреть
Глянь у меня тут вариант с отрицательным офсетом нижних блоков смотреть

Да переходы и шаги в принципе можно и на чистом CSS сделать без JS, но конечно есть но, если тебе и логику оплаты нужно делать, то нужно чуть js вкурить, потому что тупо как ты хочешь можешь и не найти(( но похожее надо будет прикручивать под себя!

А вообще в двух словах что там искать :
- https://codepen.io/search/pens?q=quiz&page=1&order...
- https://www.sitepoint.com/simple-javascript-quiz/
- https://codepen.io/timivey/pen/zxyNrw

К слову если нету времени учить и прочее, то в чем проблема плати с кем-то из нас договоришься и сделаем или просто иди на фриланс, задача несложная, пару часивов и вуаля))

Согласен с ответом, наличие лишних ориентиров ограничений для overflow дает второй скрол внутри контейнера,
попробуй отловить, просто повесь

html, body {
  overflow: hidden;
}

Если не смог решить то тогда кидай ссылку поможем))

Так бро смотри вот юзай!

const gulp = require('gulp'), // Подключаем Gulp
    cleanCSS = require('gulp-clean-css'),
    sass = require('gulp-sass'), // Подключаем Sass пакет
    autoprefixer = require('gulp-autoprefixer'),
    concat = require('gulp-concat'); // Подключаем библиотеку для объеденения файлов

let pathBuild = './dist/',  pathSrc = './src/';

gulp.task('sass', function () {
    return gulp.src(pathSrc + 'sass/**/*.+(sass|scss)')
        .pipe(sass({outputStyle: 'expanded'}).on('error', sass.logError))
        .pipe(autoprefixer({browsers: ['ie >= 9', 'last 2 version'], cascade: false}))
        .pipe(cleanCSS({compatibility: 'ie9'}))
        .pipe(gulp.dest(pathBuild + 'css'));
});

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

$color: #00AFF3;
$corn: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2096%20100%22%3E%0A%3Cpath%20fill%3D%22%2300AFF3%22%20d%3D%22M96%2C100L40.7%2C50L4.1%2C13.9C-1.1%2C8.8%2C2.5%2C0%2C9.8%2C0H96V100z%22/%3E%0A%3C/svg%3E%0A');
	

.parrent {
	display:flex;
	width: 100%;
	height:300px;
	
	padding: 20px;
	border: 1px solid green;
	
	&__block{
		position: relative;
		
		width: 100px;
		height: 100px;
		
		background: $color;
		
		&:before {
			position: absolute;
			top: 0;
			width:10px;
			height:10px;
			
			content:'';
			
			background-image: $corn;
			background-size: 10px;
				
			transform: translate(-98%,0);
		}
	}
}

В принципе если захотеть можно и поменять цвет чисто в коде стилей

Бро да много где к примеру
uplabs.com
www.themelock.com
themeforest.net/

да и много других ищи в нете и найдешь все что надо!

О лучше если есть бюджет на проект, то найми дизайнера пусть он отрисует все как положенно, и нами разботчиков пусть реализуют! В любом случае если актуально то реализую, я чтобы понимал я делаю все что бы перечислил, я специализируюсь на проектировке и верстке больших SPA!