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. Надеюсь теперь пример подойдет
