[Alexander3928]

1 страница:

function main(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.style.backgroundImage = "url('https://klike.net/uploads/posts/2019-06/1561182204_1.jpg')";
    box.classList.add('box-main');
    box2.classList.add('box-main__main');
    box.append(box2);
    root.append(box);
}

main(document.querySelector('main'));

стили для 1 страницы:

.box-main {
    width: 50%;
    height: 50vh;
    &__main {
        width: 350px;
        height: 200px;
        background-color: rgb(87, 104, 116);
    }
}

2 страница:

function services(root) {
    const box = document.createElement('div');
    const box2 = document.createElement('div');
    box.classList.add('box-ser');
    box2.classList.add('box-ser__ser');
    box.append(box2);
    root.append(box);
}

services(document.querySelector('main'));

стили для 2 страницы:

.box-ser {
    width: 50%;
    height: 50vh;
    background-color: rgb(217, 107, 245);
    &__ser {
        width: 350px;
        height: 200px;
        background-color: rgb(25, 135, 213);
    }
}

обложка тег main(тег типо как header и footer):

function main(root) {
    const globalMain = document.createElement('main');
    globalMain.classList.add('global-main'); 
    root.append(globalMain);
}

main(document.querySelector('body'));

скрип для подключения js кода(страниц):

import './header-js/header.js';
import './main-js/main.js';
import './main-page/main.js';
import './portfolio-page/portfolio.js';
import './services-page/services.js';
import './contact-page/contact.js';

скрип для подключение и js кода и scss стили:

import './contact-page/contact.scss';
import './main-js/main.scss';
import './script.js';

Разноцветные блоки это и есть контен, тоесть 1 разноцветный блок это 1 страница

P.S. Надеюсь теперь пример подойдет